/* =============================================================================
   NP STUDY — SITE CHROME (header + footer)
   Restyles Flatsome's header nav and footer to match the design system.
   Loads site-wide. Depends on design-system.css tokens.
   ============================================================================= */

/* ------------------------------- HEADER ----------------------------------- */
/* Nav typography: swap Montserrat/black for Be Vietnam Pro in brand navy. */
.header-nav.nav > li > a {
	font-family: var(--nps-font);
	font-weight: 600;
	color: var(--nps-navy);
	letter-spacing: .02em;
	transition: color .2s var(--nps-ease);
}
.header-main .header-nav.nav > li > a:hover,
.header-main .header-nav.nav > li > a.current,
.header-main .header-nav.nav > li.active > a {
	color: var(--nps-sunrise-600);
}

/* Clean hairline under the header; soft shadow once it sticks. */
#header .header-main { border-bottom: 1px solid var(--nps-line); }
#header-wrap.stuck,
.stuck #header-wrap,
#header.stuck .header-main { box-shadow: var(--nps-shadow-sm); }

/* Header call-to-action / phone button → pill shape to match the brand. */
.header-main .button,
.header-main .header-button .button { border-radius: var(--nps-r-pill); }

/* ------------------------------- FOOTER ----------------------------------- */
/* Repaint the orange footer block to brand navy (bg is inline → needs !important). */
#footer .section-bg,
#footer .section-bg-overlay {
	background-color: #1C2350 !important; /* Global Pathways indigo */
	background-image:
		radial-gradient(42rem 30rem at 8% -25%, rgba(255, 255, 255, .06), transparent 60%),
		repeating-linear-gradient(135deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 24px) !important;
	opacity: 1 !important;
}
#footer { color: #b9c1de; }
/* Global Pathways look: clean indigo, comfortable rhythm (no top accent line). */
#footer .section .section-content { padding-block: clamp(2.5rem, 5vw, 3.75rem); }
/* Give the content a centered container so it doesn't drift left. */
/* Footer fills the full width (override the block's inline max-width:85%). */
#footer .row[style*="max-width"] { max-width: 100% !important; }
#footer .section-content > .row,
#footer .row-full-width { max-width: none; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 4.5rem); }

/* Column TITLES (first heading in each column) → sunrise eyebrow with underline. */
#footer .col-inner h4:first-of-type {
	color: #fff !important;
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	letter-spacing: .01em;
	margin: 0 0 1.1rem !important;
}
#footer .col-inner h4:first-of-type strong { color: inherit !important; font-weight: 700; }
#footer .col-inner h4:first-of-type span { font-size: 100% !important; }
/* Even out the three leaf columns so they fill the full width (kills the right gap). */
#footer .col:not(:has(.col)) { flex: 1 1 0 !important; max-width: none !important; }

/* Small icon before each title. `:not(:has(.col))` = only leaf columns, so the
   outer wrapper column doesn't steal the match. */
#footer .col:not(:has(.col)):not(:has(iframe)):not(:has(.text-is-phone-number)) .col-inner h4:first-of-type::before { content: "📍 "; }
#footer .col:not(:has(.col)):has(.text-is-phone-number) .col-inner h4:first-of-type::before { content: "📞 "; }
#footer .col:not(:has(.col)):has(iframe) .col-inner h4:first-of-type::before { content: "🗺️ "; }

/* Body text (address lines, contact) → readable, not oversized-bold. */
#footer h4 { font-size: 1rem; font-weight: 500; line-height: 1.65; color: #d3ddec; margin: 0 0 .5rem; }
#footer h4 strong { font-weight: 500; color: #d3ddec !important; }
#footer p { font-size: 1rem; line-height: 1.65; margin: 0 0 .55rem; color: #d3ddec; }
#footer p strong { color: #fff !important; font-weight: 600; }
/* Phone number stands out (it's the key action for a consultancy). */
#footer .text-is-phone-number { color: var(--nps-sunrise) !important; font-weight: 700 !important; }

#footer a { color: #d9e2f0; }
#footer a:hover { color: var(--nps-sunrise); }

/* Map: shorter (kills the tall empty void), full width, rounded card. */
#footer iframe {
	display: block;
	width: 100% !important;
	height: 260px !important;
	border-radius: var(--nps-r-md);
	border: 1px solid rgba(255, 255, 255, .14) !important;
}

/* Copyright line → muted, with a divider. */
#footer p[style*="#fff"] { color: #8595b0 !important; font-size: .9rem; }

/* Back-to-top button in brand colors. */
#top-link.back-to-top { background: var(--nps-sunrise); border-color: var(--nps-sunrise); color: #fff; }