/**
 * Divi Network Sync - Frontend Footer Styles
 *
 * Four-column layout with responsive stacking.
 * All colors and spacing driven by CSS custom properties
 * set inline by the Footer_Renderer class.
 *
 * @package DiviNetworkSync
 */

/* ========================================
   Focus Visible (Keyboard Navigation)
   ======================================== */

.dns-footer a:focus-visible {
	outline: 2px solid #a78bfa;
	outline-offset: 2px;
}

/* ========================================
   Footer Container
   ======================================== */

.dns-footer {
	background: var(--dns-footer-bg, #1e1e1e);
	color: var(--dns-footer-color, #d1d5db);
	font-size: var(--dns-footer-font-size, 14px);
	line-height: 1.6;
	width: 100%;
}

.dns-footer__inner {
	max-width: var(--dns-footer-max-width, 1200px);
	margin: 0 auto;
	padding: var(--dns-footer-padding-top, 48px) var(--dns-footer-padding-right, 24px) var(--dns-footer-padding-bottom, 48px) var(--dns-footer-padding-left, 24px);
}

/* ========================================
   Column Grid
   ======================================== */

.dns-footer__columns {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--dns-footer-col-gap, 40px);
}

/* If only some columns have content, CSS grid handles it.
   Empty columns (not rendered) collapse automatically. */

/* ========================================
   Column
   ======================================== */

.dns-footer__col {
	min-width: 0; /* Prevent grid blowout on long content. */
}

/* ========================================
   Headings
   ======================================== */

.dns-footer__heading {
	color: var(--dns-footer-heading, #ffffff);
	font-size: var(--dns-footer-heading-font-size, 16px);
	font-weight: 600;
	margin: 0 0 16px 0;
	padding: 0;
	line-height: 1.3;
}

/* ========================================
   Item List
   ======================================== */

.dns-footer__items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dns-footer__item {
	margin-bottom: 10px;
}

.dns-footer__item:last-child {
	margin-bottom: 0;
}

/* ========================================
   Text Items
   ======================================== */

.dns-footer__text {
	color: var(--dns-footer-color, #d1d5db);
}

.dns-footer__icon {
	display: inline;
	margin-right: 4px;
}

/* ========================================
   Links
   ======================================== */

.dns-footer__link {
	color: var(--dns-footer-link, #ffffff);
	text-decoration: none;
	transition: color 0.2s ease;
}

.dns-footer__link:hover,
.dns-footer__link:focus {
	color: var(--dns-footer-link-hover, #a78bfa);
}

/* ========================================
   Image Items
   ======================================== */

.dns-footer__image {
	display: block;
	height: auto;
}

.dns-footer__link--image {
	display: inline-block;
}

.dns-footer__link--image:hover {
	opacity: 0.85;
}

/* ========================================
   Copyright Bar
   ======================================== */

.dns-footer__copyright {
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: var(--dns-copyright-font-size, 13px);
	color: var(--dns-copyright-color, #9ca3af);
	line-height: 1.5;
}

.dns-footer__copyright--left {
	text-align: left;
}

.dns-footer__copyright--center {
	text-align: center;
}

.dns-footer__copyright--right {
	text-align: right;
}

/* ========================================
   Responsive - Mobile
   Handled by inline CSS using global mobile breakpoint setting.
   Base fallback for when inline CSS hasn't loaded.
   ======================================== */

.dns-footer__columns--stacked {
	grid-template-columns: 1fr;
	gap: 32px;
	text-align: center;
}

.dns-footer__columns--stacked .dns-footer__heading {
	margin-bottom: 12px;
}

.dns-footer__columns--stacked .dns-footer__image {
	margin-left: auto;
	margin-right: auto;
}