/* ==========================================================================
   Footer — component styles
   HTML structure + Tailwind utilities live in template-parts/footer/site-footer.php
   This file owns: grid layout, newsletter card, accordion, social hover,
                   mobile centering, responsive breakpoints
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL — box-sizing guard (prevents horizontal overflow)
   -------------------------------------------------------------------------- */

.footer *,
.footer *::before,
.footer *::after {
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   2. DESKTOP ≥ 1024px — grid columns + accordion always-open
      Tailwind's lg:grid-cols-4 + lg:col-span-1 kick in at this same breakpoint;
      we override the equal 4-col layout to 2fr 1fr 1fr 1fr for brand emphasis.
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {

	/* 2fr brand column, three equal link columns */
	.footer-grid {
		grid-template-columns: 2fr 1fr 1fr 1fr !important;
	}

	/* Force accordion lists permanently open — no JS needed on desktop */
	.footer-accordion ul {
		max-height: none !important;
		opacity: 1 !important;
		overflow: visible !important;
		margin-top: 0.5rem !important;
		transition: none !important;
	}

	/* Disable the toggle button — links are always visible */
	.footer-accordion-toggle {
		pointer-events: none;
		cursor: default;
	}

	/* Hide the +/- icon — irrelevant on desktop */
	.footer-accordion-icon {
		display: none !important;
	}
}

/* --------------------------------------------------------------------------
   3. MOBILE ≤ 639px — brand centering + section spacing
      At 640px+ Tailwind's sm:grid-cols-2 kicks in: brand spans full row
      (sm:col-span-2), so left-aligned looks natural. Below 639px it's a
      single column and centering improves readability.
   -------------------------------------------------------------------------- */

@media (max-width: 639px) {

	/* Center the brand column on single-column mobile */
	.footer-brand {
		text-align: center;
	}

	.footer-brand .footer-logo,
	.footer-brand .footer-contact,
	.footer-brand .social-links {
		justify-content: center;
	}

	/* 20px gap between stacked link sections */
	.footer-column + .footer-column {
		margin-top: 20px;
	}
}

/* --------------------------------------------------------------------------
   4. SOCIAL LINKS — brand green on hover / focus
   -------------------------------------------------------------------------- */

.social-link:hover,
.social-link:focus-visible {
	background-color: var(--ds-primary) !important;
	border-color: var(--ds-primary) !important;
	color: #fff !important;
}

/* --------------------------------------------------------------------------
   4b. BACK-TO-TOP BUTTON — explicit visibility state
   -------------------------------------------------------------------------- */

#backToTopBtn {
	opacity: 0;
	pointer-events: none;
	transform: translateY(8px);
	transition: opacity 220ms ease, transform 220ms ease;
	z-index: var(--ds-z-banner);
}

#backToTopBtn.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

body.mobile-menu-open #backToTopBtn,
html.mobile-menu-open #backToTopBtn {
	opacity: 0;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   5. NAVIGATION LISTS — strip bullets, add › arrow indicator
   -------------------------------------------------------------------------- */

.footer-nav-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Explicit link colours — hardcoded against footer bg #2c3e50 (contrast: ~7:1 default, ~12:1 hover) */
.footer-nav-list a {
	color: rgba(255, 255, 255, 0.75);
}

.footer-nav-list a:hover,
.footer-nav-list a:focus-visible {
	color: #ffffff;
}

.footer-nav-list li {
	position: relative;
	padding-left: 1.1rem;
}

.footer-nav-list li::before {
	content: '›';
	position: absolute;
	left: 0;
	top: 0;
	color: var(--ds-primary);
	font-size: 1rem;
	line-height: 1.5;
	transition: transform 150ms ease;
}

.footer-nav-list li:hover::before {
	transform: translateX(3px);
}

/* Active (mousedown) — brief visual confirmation */
.footer-nav-list a:active {
	opacity: 0.65;
}

/* Current page indicator — set aria-current="page" on the <a> in PHP */
.footer-nav-list a[aria-current="page"] {
	color: rgb(var(--ds-bg-rgb)) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
	text-decoration-color: var(--ds-primary) !important;
}

/* Arrow stays highlighted for current page item */
.footer-nav-list li:has(a[aria-current="page"])::before {
	color: var(--ds-primary) !important;
	transform: translateX(3px);
}

/* Accordion heading colours — hardcoded against footer bg #2c3e50 (~9:1 default, ~6:1 hover) */
.footer-accordion-toggle {
	color: #f0f4f8;
}

.footer-accordion-toggle:hover,
.footer-accordion-toggle:focus-visible {
	color: #a5d6a7; /* sage-300 */
}

/* --------------------------------------------------------------------------
   6. ACCORDION TOGGLE — +/- icon (visible on mobile, hidden on desktop via §2)
   -------------------------------------------------------------------------- */

.footer-accordion-icon {
	display: inline-block;
	position: relative;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.footer-accordion-icon::before,
.footer-accordion-icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 16px;
	height: 2px;
	border-radius: 999px;
	background: currentColor;
	transform: translateY(-50%);
	transition: transform 180ms ease, opacity 180ms ease;
}

/* Vertical bar (forms the + cross) */
.footer-accordion-icon::after {
	transform: translateY(-50%) rotate(90deg);
}

/* Collapse + → − when expanded */
.footer-accordion-toggle[aria-expanded="true"] .footer-accordion-icon::after {
	opacity: 0;
	transform: translateY(-50%) rotate(90deg) scaleX(0.2);
}

/* --------------------------------------------------------------------------
   7. ACCORDION LISTS — collapsed by default (mobile); desktop overridden in §2
   -------------------------------------------------------------------------- */

.footer-accordion ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 280ms ease, opacity 240ms ease, margin 240ms ease;
}

.footer-accordion.is-open ul {
	max-height: 500px;
	opacity: 1;
	margin-top: 0.3rem !important;
}

/* --------------------------------------------------------------------------
   8. NEWSLETTER SECTION — gradient card container
   -------------------------------------------------------------------------- */

.footer-newsletter-section {
	padding-bottom: max(0px, env(safe-area-inset-bottom));
}

.footer-newsletter-inner {
	display: grid;
	/* minmax(0) on both columns prevents overflow at any viewport width */
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	align-items: center;
	gap: 1.4rem;
	padding: clamp(1.15rem, 2vw, 1.7rem);
	border-radius: 18px;
	border: 1px solid rgba(145, 173, 146, 0.28);
	background:
		radial-gradient(130% 170% at 0% 0%, rgba(76, 120, 88, 0.22) 0%, rgba(42, 58, 74, 0.32) 52%, rgb(var(--ds-text-rgb) / 0.26) 100%),
		#24273d;
}

/* --------------------------------------------------------------------------
   9. NEWSLETTER FORM — light-on-dark inset card
   -------------------------------------------------------------------------- */

.newsletter-form {
	justify-self: center;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: stretch;
	gap: 0.52rem;
	width: min(100%, 560px);
	padding: 0.6rem;
	border-radius: 18px;
	background: linear-gradient(180deg, #f4f7f2 0%, #edf3ea 100%);
	border: 1px solid rgba(145, 173, 146, 0.42);
	box-shadow: 0 10px 24px rgba(14, 16, 30, 0.26);
}

.newsletter-form input[type="email"] {
	height: 3.55rem;
	width: 100%;
	min-width: 0;
	padding: 0 1rem;
	border: 1px solid #cfdacb;
	border-radius: 12px;
	background: #fbfcfa;
	color: var(--ds-text);
	font-size: 16px; /* Prevent iOS auto-zoom */
	line-height: 1.3;
	-webkit-appearance: none;
	appearance: none;
}

.newsletter-form input[type="email"]:focus {
	border-color: var(--ds-primary);
	box-shadow: inset 0 0 0 1px var(--ds-primary);
	outline: none;
}

.newsletter-form .btn.btn-primary {
	height: 3.55rem;
	min-width: 140px;
	padding: 0 1.25rem;
	border-radius: 12px;
	border: 1px solid var(--ds-primary);
	background: var(--ds-primary);
	color: var(--ds-bg);
	font-weight: 700;
	letter-spacing: 0.01em;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.newsletter-form .btn.btn-primary:hover,
.newsletter-form .btn.btn-primary:focus-visible {
	background: var(--ds-primary-dark);
	border-color: var(--ds-primary-dark);
}

.newsletter-consent {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.82rem;
	color: var(--ds-text);
	cursor: pointer;
}

.newsletter-status,
.newsletter-error {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 0.9rem;
}

.newsletter-status { color: var(--ds-primary); }
.newsletter-error  { color: var(--ds-error); }

.newsletter-form-feedback {
	grid-column: 1 / -1;
	font-size: 0.88rem;
	min-height: 1.2em;
}

.newsletter-form-feedback.is-success { color: var(--ds-primary-dark); }
.newsletter-form-feedback.is-error   { color: var(--ds-error, #d32f2f); }

/* --------------------------------------------------------------------------
   10. RESPONSIVE ≤ 980px — newsletter collapses to single column
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
	.footer-newsletter-inner {
		grid-template-columns: 1fr;
		gap: 1rem;
		padding: 1rem;
		border-radius: 14px;
	}

	.newsletter-form {
		justify-self: stretch;
		width: 100%;
		grid-template-columns: 1fr;
		gap: 0.6rem;
		padding: 0.55rem;
	}

	.newsletter-form .btn.btn-primary {
		width: 100%;
		min-width: 0;
	}
}

/* --------------------------------------------------------------------------
   11. RESPONSIVE ≤ 640px — tighten form element heights
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
	.newsletter-form input[type="email"],
	.newsletter-form .btn.btn-primary {
		height: 3rem;
	}
}

/* --------------------------------------------------------------------------
   12. CONTAINER — full-width at all breakpoints, matching header behaviour
       Header uses: max-width:100% at ≥981px + ≤980px, px-4 (1rem) side padding
       Footer matches: same max-width overrides, no padding override (px-4 from template)
   -------------------------------------------------------------------------- */

@media (min-width: 981px) {
	.footer .container {
		max-width: 100% !important;
	}
}

@media (max-width: 980px) {
	.footer .container {
		max-width: 100% !important;
		overflow-x: clip;
	}
}

/* --------------------------------------------------------------------------
   12b. FOOTER BOTTOM — FDA disclaimer text constraint
   -------------------------------------------------------------------------- */

/* Cap disclaimer width so text wraps to 2–3 readable lines (never stretches edge-to-edge) */
#footer-fda-disclaimer {
	max-width: 480px;
	width: 100%;
}

/* Footer legal links (Privacy Policy, Terms of Service) — high contrast for visibility */
.footer-legal-link {
	color: rgba(255, 255, 255, 0.9) !important;
}

.footer-legal-link:hover,
.footer-legal-link:focus-visible {
	color: #ffffff !important;
}


/* --------------------------------------------------------------------------
   13. ACCESSIBILITY — motion & grid fallback
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.footer-accordion ul {
		transition: none !important;
	}
}

@supports not (display: grid) {
	.footer-newsletter-inner {
		display: block;
	}

	.newsletter-form {
		display: flex;
		flex-direction: column;
		gap: 0.6rem;
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   14. FOOTER BRAND COLORS — dark background + off-white text
   -------------------------------------------------------------------------- */

.footer {
	background: var(--ds-text) !important;
	color: var(--ds-bg);
}

.footer-bottom {
	color: rgb(249 249 246 / 0.78);
	border-top-color: rgb(249 249 246 / 0.2);
}