/* ==========================================================================
   StreetSmart Driving Academy — Layout
   --------------------------------------------------------------------------
   Layer 2 of 4. Site chrome: preloader, scroll progress, floating header,
   mobile drawer, page banners, footer, back-to-top, custom cursor.
   ========================================================================== */

/* ---------- Preloader ----------------------------------------------------- */
/* Covers the hero while the first frames of the scroll sequence decode, so
   the visitor never sees an empty canvas. modules/scroll-sequence.js drives
   --progress and removes the node when the sequence is playable. */
.site-loader {
	position: fixed; inset: 0; z-index: var(--z-loader);
	display: grid; place-items: center;
	background: var(--ink-950);
	transition: opacity 0.7s var(--e-out), visibility 0.7s;
}
.site-loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.site-loader-inner { width: min(320px, 72vw); text-align: center; }
.site-loader-mark {
	height: 44px; width: auto; margin: 0 auto 28px;
	opacity: 0.92;
	animation: loader-pulse 2.4s var(--e-in-out) infinite;
}
@keyframes loader-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

.site-loader-bar {
	height: 2px; width: 100%;
	background: rgba(255, 255, 255, 0.12);
	border-radius: var(--r-pill);
	overflow: hidden;
}
.site-loader-bar span {
	display: block; height: 100%; width: 100%;
	transform: scaleX(var(--progress, 0)); transform-origin: 0 50%;
	background: linear-gradient(90deg, var(--gold-600), var(--gold-400));
	transition: transform 0.25s var(--e-out);
}
.site-loader-pct {
	margin-top: 16px;
	font-family: var(--f-mono);
	font-size: var(--fs-xs);
	letter-spacing: 0.14em;
	color: var(--t-low);
}

/* While the loader is up the page must not scroll — otherwise the pinned
   hero starts scrubbing behind it. */
html.is-loading, html.is-loading body { overflow: hidden; height: 100%; }

/* ---------- Scroll progress ---------------------------------------------- */
.scroll-progress {
	position: fixed; top: 0; left: 0; right: 0; height: 2px;
	z-index: calc(var(--z-nav) + 5);
	background: transparent; pointer-events: none;
}
.scroll-progress span {
	display: block; height: 100%;
	transform: scaleX(var(--progress, 0)); transform-origin: 0 50%;
	background: linear-gradient(90deg, var(--gold-600), var(--gold-400), var(--gold-300));
}

/* ---------- Header -------------------------------------------------------- */
.site-header {
	position: fixed; top: 0; left: 0; right: 0;
	z-index: var(--z-nav);
	transition: transform 0.5s var(--e-out), background-color 0.4s var(--e-out);
}
/* Hidden while the visitor scrolls down, returned on scroll up. */
.site-header.is-hidden { transform: translateY(-100%); }

/* Utility bar — contact + portals. Collapses away once scrolled. */
.topbar {
	background: var(--ink-950);
	color: var(--t-low);
	font-size: var(--fs-xs);
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	overflow: hidden;
	max-height: 46px;
	transition: max-height 0.45s var(--e-out), opacity 0.35s var(--e-out);
}
.site-header.is-stuck .topbar { max-height: 0; opacity: 0; border-bottom-color: transparent; }
.topbar-inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 24px; height: 45px;
}
.topbar a {
	display: inline-flex; align-items: center; gap: 7px;
	color: var(--t-low);
	transition: color var(--d-fast) var(--e-out);
}
.topbar a:hover { color: var(--gold-400); }
.topbar .icon { width: 14px; height: 14px; }
.topbar-contact { display: flex; gap: 26px; }
.topbar-portals { display: flex; gap: 22px; }
.topbar-portals a { position: relative; }
.topbar-portals a + a::before {
	content: ""; position: absolute; left: -11px; top: 50%;
	width: 1px; height: 11px; transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.16);
}

/* Main bar. Starts transparent over the hero, becomes a frosted sheet once
   the visitor scrolls past it. */
.navbar {
	background: transparent;
	transition: background-color 0.45s var(--e-out),
	            backdrop-filter 0.45s var(--e-out),
	            box-shadow 0.45s var(--e-out),
	            border-color 0.45s var(--e-out);
	border-bottom: 1px solid transparent;
}
.site-header.is-stuck .navbar {
	background: color-mix(in srgb, var(--ink-950) 82%, transparent);
	-webkit-backdrop-filter: saturate(180%) blur(18px);
	backdrop-filter: saturate(180%) blur(18px);
	border-bottom-color: rgba(255, 255, 255, 0.09);
	box-shadow: 0 10px 40px -20px rgba(0, 0, 0, 0.8);
}
.navbar-inner {
	display: flex; align-items: center; gap: clamp(20px, 3vw, 48px);
	height: var(--header-h);
}

/* The supplied logo is black-and-gold artwork on transparency, drawn for a
   light ground. The header always sits on dark (hero, page banner, or the
   frosted stuck state), so the mark gets its own light chip rather than
   being filtered — which would cost the gold half of the brand. */
.brand {
	display: flex; align-items: center; flex: none;
	padding: 9px 16px;
	background: var(--paper-100);
	border-radius: 12px;
	transition: padding 0.4s var(--e-out);
}
.brand img, .brand .custom-logo {
	height: 34px; width: auto; max-width: 180px; object-fit: contain;
	transition: height 0.4s var(--e-out);
}
.site-header.is-stuck .brand { padding: 7px 13px; }
.site-header.is-stuck .brand img,
.site-header.is-stuck .brand .custom-logo { height: 29px; }

/* --- Desktop navigation --- */
.primary-nav { margin-left: auto; }
.primary-menu { display: flex; align-items: center; gap: 4px; }
.primary-menu > li { position: relative; }
.primary-menu > li > a {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 10px 14px;
	border-radius: var(--r-pill);
	font-size: var(--fs-sm); font-weight: 500;
	white-space: nowrap;
	color: var(--t-mid);
	transition: color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out);
}
.primary-menu > li > a:hover,
.primary-menu > li.current-menu-item > a,
.primary-menu > li.current_page_item > a {
	color: var(--t-hi);
	background: rgba(255, 255, 255, 0.08);
}
.primary-menu > li.current-menu-item > a { color: var(--gold-400); }

/* Caret for items with a submenu */
.primary-menu .menu-item-has-children > a::after {
	content: ""; width: 5px; height: 5px; margin-left: 2px;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-1px);
	transition: transform var(--d-fast) var(--e-out);
}
.primary-menu .menu-item-has-children:hover > a::after { transform: rotate(225deg) translateY(-1px); }

/* Dropdown */
.primary-menu .sub-menu {
	position: absolute; top: calc(100% + 10px); left: 50%;
	min-width: 230px; padding: 8px;
	transform: translateX(-50%) translateY(8px);
	background: color-mix(in srgb, var(--ink-850) 92%, transparent);
	-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: var(--r-md);
	box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.75);
	opacity: 0; visibility: hidden;
	transition: opacity var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out), visibility var(--d-fast);
}
.primary-menu > li:hover > .sub-menu,
.primary-menu > li:focus-within > .sub-menu {
	opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.primary-menu .sub-menu a {
	display: block; padding: 10px 14px; border-radius: var(--r-xs);
	font-size: var(--fs-sm); color: var(--t-mid);
	transition: background-color var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}
.primary-menu .sub-menu a:hover { background: rgba(255, 255, 255, 0.08); color: var(--t-hi); }

.navbar-cta { display: flex; align-items: center; gap: 12px; flex: none; }
/* Lives inside .primary-nav so it lands in the drawer on small screens; it
   has no place in the desktop bar. */
.nav-drawer-foot { display: none; }
.navbar-cta .btn-gold { box-shadow: none; }
.navbar-cta .btn-gold:hover { box-shadow: var(--sh-gold); }

/* --- Mobile toggle --- */
.nav-toggle {
	display: none;
	width: 44px; height: 44px; flex: none;
	align-items: center; justify-content: center;
	border-radius: var(--r-pill);
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: var(--t-hi);
}
.nav-toggle-bars { display: block; width: 18px; height: 12px; position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after {
	content: ""; position: absolute; left: 0; width: 100%; height: 1.5px;
	background: currentColor; border-radius: 2px;
	transition: transform 0.4s var(--e-out), top 0.4s var(--e-out);
}
.nav-toggle-bars::before { top: 0; }
.nav-toggle-bars::after { top: 10.5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { top: 5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { top: 5px; transform: rotate(-45deg); }

/* ---------- Mobile drawer ------------------------------------------------- */
@media (max-width: 1100px) {
	.nav-toggle { display: inline-flex; }
	.navbar-cta { display: none; }
	.topbar-portals { display: none; }
	.topbar-contact { gap: 18px; }
	.navbar-inner { justify-content: space-between; }

	.primary-nav {
		position: fixed; inset: 0 0 0 auto;
		width: min(420px, 88vw);
		margin: 0;
		padding: calc(var(--header-h) + 40px) 32px 40px;
		background: var(--ink-900);
		border-left: 1px solid rgba(255, 255, 255, 0.08);
		transform: translateX(100%);
		/* `visibility` does two jobs here. It keeps the closed drawer's links
		   out of the tab order and the accessibility tree, and it stops the
		   off-screen panel widening the document: the panel is fixed, but its
		   static children still count toward scrollable overflow, which shows
		   up as a sideways scroll of a few pixels on phones. It transitions
		   discretely, so the drawer stays visible while it slides shut. */
		visibility: hidden;
		transition: transform 0.55s var(--e-in-out), visibility 0.55s;
		overflow-y: auto;
		z-index: calc(var(--z-nav) + 1);
	}
	.primary-nav.is-open { transform: translateX(0); visibility: visible; }

	.primary-menu { flex-direction: column; align-items: stretch; gap: 2px; }
	.primary-menu > li > a {
		padding: 16px 4px;
		font-family: var(--f-display);
		font-size: 1.35rem; font-weight: 500; letter-spacing: -0.03em;
		color: var(--t-hi);
		border-radius: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.07);
		justify-content: space-between;
	}
	.primary-menu > li > a:hover { background: transparent; }
	.primary-menu .menu-item-has-children > a::after { margin-left: auto; width: 7px; height: 7px; }

	.primary-menu .sub-menu {
		position: static; transform: none; opacity: 1; visibility: visible;
		min-width: 0; padding: 4px 0 12px; margin: 0;
		background: transparent; border: 0; box-shadow: none;
		display: none;
	}
	.primary-menu .menu-item-has-children.is-open > .sub-menu { display: block; }
	.primary-menu .menu-item-has-children.is-open > a::after { transform: rotate(225deg) translateY(-1px); }
	.primary-menu .sub-menu a { padding: 11px 16px; color: var(--t-low); }

	.nav-drawer-foot {
		display: block;
		margin-top: 32px; padding-top: 28px;
		border-top: 1px solid rgba(255, 255, 255, 0.08);
	}
	.nav-drawer-foot .btn { width: 100%; margin-bottom: 12px; }
	.nav-drawer-foot p { font-size: var(--fs-xs); color: var(--t-low); margin: 0; }

	.nav-scrim {
		position: fixed; inset: 0; z-index: var(--z-nav);
		background: rgba(7, 7, 10, 0.6);
		-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
		opacity: 0; visibility: hidden;
		transition: opacity 0.45s var(--e-out), visibility 0.45s;
	}
	.nav-scrim.is-visible { opacity: 1; visibility: visible; }
}

@media (max-width: 640px) {
	.topbar-contact a span { display: none; }
	.topbar-contact a::after { content: attr(data-short); }
	.topbar-inner { justify-content: center; }
}

/* ---------- Page banner (inner pages) ------------------------------------- */
.page-banner {
	position: relative;
	display: flex; align-items: flex-end;
	min-height: clamp(360px, 46vh, 520px);
	padding-top: calc(var(--header-h) + 60px);
	padding-bottom: clamp(48px, 6vw, 84px);
	background: var(--ink-900) center/cover no-repeat;
	overflow: hidden;
	isolation: isolate;
}
.page-banner::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(180deg, rgba(7, 7, 10, 0.86) 0%, rgba(7, 7, 10, 0.42) 42%, rgba(7, 7, 10, 0.92) 100%),
		radial-gradient(120% 80% at 12% 100%, rgba(242, 183, 5, 0.16), transparent 60%);
}
.page-banner .container { position: relative; z-index: 1; }
.page-banner h1 { color: var(--t-hi); font-size: var(--fs-h1); margin: 0; }
.page-banner .eyebrow { color: var(--gold-400); }
.page-banner-lead {
	max-width: 56ch; margin-top: 18px;
	color: var(--t-mid); font-size: var(--fs-lead);
}

/* Breadcrumb trail */
.crumbs {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	margin-top: 22px;
	font-size: var(--fs-xs); color: var(--t-low);
}
.crumbs a { color: var(--t-low); transition: color var(--d-fast) var(--e-out); }
.crumbs a:hover { color: var(--gold-400); }
.crumbs span[aria-hidden] { opacity: 0.45; }
.crumbs [aria-current] { color: var(--t-mid); }

/* ---------- Footer -------------------------------------------------------- */
.site-footer { position: relative; background: var(--ink-950); color: var(--t-mid); }

/* Full-bleed call to action that sits above the footer proper. */
.footer-cta {
	position: relative;
	padding-block: clamp(72px, 9vw, 128px);
	text-align: center;
	overflow: hidden;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.footer-cta::before {
	content: ""; position: absolute; inset: 0;
	background:
		radial-gradient(70% 120% at 50% 0%, rgba(242, 183, 5, 0.18), transparent 62%),
		radial-gradient(60% 100% at 85% 100%, rgba(74, 168, 255, 0.08), transparent 60%);
	pointer-events: none;
}
.footer-cta .container { position: relative; }
.footer-cta-heading {
	font-size: var(--fs-h2); color: var(--t-hi);
	max-width: 20ch; margin-inline: auto; margin-bottom: 0.7em;
}
.footer-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.footer-cta-phone {
	display: inline-flex; align-items: center; gap: 12px;
	font-family: var(--f-display);
	font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 600; letter-spacing: -0.035em;
	color: var(--t-hi);
	transition: color var(--d-fast) var(--e-out);
}
.footer-cta-phone:hover { color: var(--gold-400); }
.footer-cta-phone .icon { width: 26px; height: 26px; color: var(--gold-500); }

.footer-main { padding-block: clamp(56px, 7vw, 88px); }
.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
	gap: clamp(32px, 4vw, 64px);
}
/* Same reasoning as .brand in the header: the mark is dark artwork and the
   footer is near-black, so it gets a light chip instead of being filtered. */
/* Direct child only — the social links live in .footer-socials inside the
   same column and must not pick up the chip. */
.footer-brand > a {
	display: inline-block;
	padding: 9px 15px;
	margin-bottom: 22px;
	background: var(--paper-100);
	border-radius: 12px;
}
.footer-brand img { height: 34px; width: auto; display: block; }
.footer-brand p { font-size: var(--fs-sm); color: var(--t-low); max-width: 34ch; }

.footer-col h3 {
	font-family: var(--f-body);
	font-size: var(--fs-xs); font-weight: 600;
	letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--t-low);
	margin-bottom: 22px;
}
.footer-menu li + li { margin-top: 11px; }
.footer-menu a, .footer-col a {
	font-size: var(--fs-sm); color: var(--t-mid);
	transition: color var(--d-fast) var(--e-out);
}
.footer-menu a:hover, .footer-col a:hover { color: var(--gold-400); }

.footer-line { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; font-size: var(--fs-sm); }
.footer-line strong {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: var(--fs-xs); font-weight: 600;
	letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--t-low);
}
.footer-line strong .icon { width: 14px; height: 14px; color: var(--gold-500); }
.footer-line, .footer-line a { color: var(--t-mid); }

.payment-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.payment-badges span {
	padding: 7px 13px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--r-xs);
	font-size: 0.6875rem; font-weight: 600;
	letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--t-low);
}
.ferpa-badge { display: inline-block; opacity: 0.8; transition: opacity var(--d-fast) var(--e-out); }
.ferpa-badge:hover { opacity: 1; }

.footer-socials { display: flex; gap: 10px; margin-top: 24px; }
.footer-socials a {
	display: grid; place-items: center;
	width: 40px; height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: var(--t-mid);
	transition: background-color var(--d-fast) var(--e-out),
	            color var(--d-fast) var(--e-out),
	            border-color var(--d-fast) var(--e-out),
	            transform var(--d-fast) var(--e-out);
}
.footer-socials a:hover {
	background: var(--gold-500); border-color: var(--gold-500);
	color: var(--ink-950); transform: translateY(-3px);
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	padding-block: 26px;
}
.footer-bottom-inner {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 16px;
	font-size: var(--fs-xs); color: var(--t-low);
}
.footer-bottom a { color: var(--t-low); }
.footer-bottom a:hover { color: var(--gold-400); }

@media (max-width: 1000px) {
	.footer-grid { grid-template-columns: repeat(2, 1fr); }
	.footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.footer-grid { grid-template-columns: 1fr; gap: 40px; }
	.footer-bottom-inner { justify-content: center; text-align: center; }
}

/* ---------- Back to top --------------------------------------------------- */
.back-to-top {
	position: fixed; right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px);
	z-index: calc(var(--z-nav) - 1);
	display: grid; place-items: center;
	width: 50px; height: 50px;
	border-radius: 50%;
	background: var(--ink-950); color: var(--t-hi);
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: var(--sh-lg);
	opacity: 0; visibility: hidden; transform: translateY(14px);
	transition: opacity var(--d-mid) var(--e-out), transform var(--d-mid) var(--e-out),
	            visibility var(--d-mid), background-color var(--d-fast) var(--e-out);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--gold-500); color: var(--ink-950); border-color: var(--gold-500); }
.back-to-top .icon { width: 19px; height: 19px; }

/* ---------- Floating call bar (mobile) ------------------------------------ */
.call-bar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-nav) - 1);
	display: none;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
	background: color-mix(in srgb, var(--ink-950) 92%, transparent);
	-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.call-bar-inner { display: flex; gap: 10px; }
.call-bar .btn { flex: 1; padding-inline: 12px; }
@media (max-width: 720px) {
	.call-bar { display: block; }
	.back-to-top { bottom: 84px; }
	body { padding-bottom: 72px; }
}

/* ---------- Custom cursor ------------------------------------------------- */
/* Pointer-fine devices only; modules/cursor.js never initialises elsewhere. */
.cursor-dot, .cursor-ring {
	position: fixed; top: 0; left: 0; z-index: 9999;
	pointer-events: none;
	border-radius: 50%;
	mix-blend-mode: difference;
	will-change: transform;
}
.cursor-dot { width: 6px; height: 6px; background: #fff; margin: -3px 0 0 -3px; }
.cursor-ring {
	width: 38px; height: 38px; margin: -19px 0 0 -19px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	transition: width 0.3s var(--e-out), height 0.3s var(--e-out),
	            margin 0.3s var(--e-out), border-color 0.3s var(--e-out),
	            opacity 0.3s var(--e-out);
}
.cursor-ring.is-hover {
	width: 64px; height: 64px; margin: -32px 0 0 -32px;
	border-color: rgba(255, 255, 255, 0.9);
}
@media (hover: none), (pointer: coarse) {
	.cursor-dot, .cursor-ring { display: none !important; }
}