/**
 * Footer redesign — desktop + shared rules.
 * Mobile-specific overrides are in the @media block at the bottom of this file (see Task 5).
 */

/* Kadence's own sitewide "Container Padding" Customizer setting applies here
 * too (same mechanism header.css already overrides for the header row) —
 * scoped to the footer's bottom row only, so no other page content is
 * affected. Figma's footer content sits 40px from the viewport edge. */
.site-bottom-footer-wrap .site-container {
	padding-left: 40px;
	padding-right: 40px;
}

.ccgi-footer-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 1344px;
	margin: 0 auto;
}

.ccgi-footer-text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ccgi-footer-copyright {
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	font-size: 13px;
	line-height: 18.2px;
	color: #65abd2;
	margin: 0;
}

.ccgi-footer-links {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
}

.ccgi-footer-links a {
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	font-size: 13px;
	color: var(--global-palette9, #fdb92a);
	text-decoration: underline;
}

/* Kadence's Customizer-generated inline CSS includes
 * `#colophon .site-footer-row-container .site-footer-row .footer-html a { color: var(--global-palette3); }`
 * — verified live via getComputedStyle/CSSOM inspection. That selector's
 * specificity (1 ID, 3 classes, 1 element) outranks the plain
 * `.ccgi-footer-links a` rule above regardless of stylesheet load order,
 * so the links rendered navy-on-navy (var(--global-palette3), the same
 * value as the footer background) and were invisible. Match that
 * selector's ancestry so this override always wins. */
#colophon .site-footer-row-container .site-footer-row .footer-html .ccgi-footer-links a {
	color: var(--global-palette9, #fdb92a);
}

.ccgi-footer-divider {
	opacity: 0.5;
	color: #ffffff;
}

.ccgi-footer-logo img {
	display: block;
}

/* Only the desktop logo shows above the mobile breakpoint. */
.ccgi-footer-logo-mobile {
	display: none;
}

/* Mobile (matches Kadence's own mobile-header breakpoint, ~1024px and below —
 * see header.css's identical breakpoint and rationale) */
@media all and (max-width: 1024px) {
	.site-bottom-footer-wrap .site-container {
		padding-left: 24px;
		padding-right: 24px;
	}

	.ccgi-footer-inner {
		/* Reverses the two children's visual order (text block, then logo, in
		 * source order) so the logo renders first on mobile without needing a
		 * separate `order` rule on either child. */
		flex-direction: column-reverse;
		align-items: center;
		gap: 20px;
	}

	.ccgi-footer-text {
		align-items: center;
		text-align: center;
		width: 100%;
	}

	.ccgi-footer-copyright {
		font-size: 12px;
		line-height: 18px;
	}

	.ccgi-footer-links {
		flex-direction: column;
		gap: 8px;
	}

	.ccgi-footer-divider {
		display: none;
	}

	/* The footer HTML (Customizer theme_mods field, not a theme template)
	 * wraps the divider span in <br> tags for its desktop-row line-wrap
	 * fallback. In this column layout each <br> becomes its own flex item —
	 * with height plus the 8px gap on both sides — silently inflating the
	 * space between the two links well past the intended 8px. Hide them
	 * here rather than editing that HTML field. */
	.ccgi-footer-links br {
		display: none;
	}

	.ccgi-footer-logo-desktop {
		display: none;
	}

	.ccgi-footer-logo-mobile {
		display: block;
	}
}