/**
 * LOA Header — NAV-01 / NAV-02 / NAV-03 / NAV-04 / NAV-05
 * Consumes tokens.css exclusively.
 */

/* --- Base / reset shims --------------------------------------- */

body {
	margin: 0;
	font-family: var(--loa-font-body);
	background: var(--loa-ink);
}

body.loa-drawer-open,
body.loa-modal-open {
	overflow: hidden; /* NAV-04 / contact modal QA: body scroll locked while open */
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.loa-skip-link {
	position: absolute;
	top: -100%;
	left: var(--loa-gutter);
	z-index: 300;
	padding: 0.5rem 1rem;
	background: var(--loa-ink);
	color: #fff;
	text-decoration: none;
}
.loa-skip-link:focus-visible { top: var(--loa-gutter); }

/* --- Header bar (NAV-01 desktop defaults) ----------------------- */

.loa-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--loa-header-bg-desktop);
	-webkit-backdrop-filter: blur(var(--loa-header-blur-desktop));
	backdrop-filter: blur(var(--loa-header-blur-desktop));
	border-bottom: 1px solid var(--loa-header-border);
}

.loa-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	max-width: var(--loa-header-max-width);
	height: var(--loa-header-h-desktop);
	margin-inline: auto;
	padding-inline: var(--loa-gutter); /* responsive padding TBD per doc */
}

/* --- Brand / logo ----------------------------------------------- */

.loa-header__brand {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	margin-left: var(--loa-logo-offset-desktop); /* NAV-01: 21px left offset */
}

.loa-header__logo {
	display: block;
	width: var(--loa-logo-w-desktop);
	height: var(--loa-logo-h-desktop);
}

/* --- Desktop nav links (NAV-03) ---------------------------------- */

.loa-header__nav { margin-left: auto; }

.loa-nav__list {
	display: flex;
	gap: var(--loa-nav-gap); /* 40px */
	margin: 0 var(--loa-nav-gap) 0 0;
	padding: 0;
	list-style: none;
}

.loa-nav__link {
	font-family: var(--loa-font-body);
	font-size: var(--loa-nav-size);       /* 12px */
	font-weight: 600;                     /* Inter Semi Bold */
	letter-spacing: var(--loa-nav-tracking);
	text-transform: uppercase;
	color: var(--loa-nav-color);          /* rgba(255,255,255,0.7) */
	text-decoration: none;
	padding-block: 0.5rem;
	transition: color var(--loa-speed) var(--loa-ease);
}

/* Hover/active: TBD per doc (Lynette to confirm). Interim: gold. */
.loa-nav__link:hover,
.loa-nav__link:focus-visible,
.loa-nav__link[aria-current="page"] {
	color: var(--loa-gold);
}

.loa-nav__link:focus-visible {
	outline: 2px solid var(--loa-gold);
	outline-offset: 4px;
}

/* --- Inquire Now CTA (NAV-05: outlined, 44px) --------------------- */

.loa-header__cta {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	height: var(--loa-cta-h);
	padding-inline: var(--loa-cta-pad-x);
	font-family: var(--loa-font-body);
	font-size: 12px;
	font-weight: 700;                     /* Inter Bold */
	letter-spacing: var(--loa-nav-tracking);
	text-transform: uppercase;
	color: var(--loa-gold);
	background: transparent;              /* outlined — no fill */
	border: 1px solid var(--loa-gold);
	text-decoration: none;
	transition: background var(--loa-speed) var(--loa-ease),
	            color var(--loa-speed) var(--loa-ease);
}

/* Hover: TBD per doc. Interim: gold fill inversion. */
.loa-header__cta:hover,
.loa-header__cta:focus-visible {
	background: var(--loa-gold);
	color: #000;
}

.loa-header__cta:focus-visible {
	outline: 2px solid var(--loa-gold);
	outline-offset: 4px;
}

/* --- Mobile toggle (NAV-02: hamburger, 20px from left) ------------ */

.loa-header__toggle {
	display: none;
	flex-shrink: 0;
	min-width: 44px;                      /* QA: 44px tap target */
	min-height: 44px;
	padding: 10px;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
}

.loa-header__toggle-box {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 24px;
}

.loa-header__toggle-line {
	height: 1px;
	background: rgba(255, 255, 255, 0.9);
	transition: transform var(--loa-speed) var(--loa-ease);
}

/* NAV-04: hamburger transitions to X when drawer open */
.loa-header__toggle[aria-expanded="true"] .loa-header__toggle-line:first-child {
	transform: translateY(3.5px) rotate(45deg);
}
.loa-header__toggle[aria-expanded="true"] .loa-header__toggle-line:last-child {
	transform: translateY(-3.5px) rotate(-45deg);
}

.loa-header__toggle:focus-visible {
	outline: 2px solid var(--loa-gold);
	outline-offset: 2px;
}

/* --- Drawer (NAV-04) ----------------------------------------------
 * Pattern is TBD in the doc (recommended: full-screen overlay or
 * slide-in). Interim implementation: full-screen overlay below the
 * header bar, pending Byrne/Lynette confirmation.
 */

.loa-drawer {
	position: fixed;
	inset: var(--loa-header-h-mobile) 0 0 0;
	z-index: 90;
	background: var(--loa-drawer-bg);     /* #0f0d13 */
	overflow-y: auto;
	padding-top: 8px;
}

.loa-drawer__list {
	margin: 0;
	padding: 0.5rem 0;
	list-style: none;
}

.loa-drawer__link {
	display: flex;
	align-items: center;
	min-height: 44px;                     /* QA: tap target */
	padding: 0.5rem var(--loa-gutter);
	font-size: var(--loa-drawer-link-size); /* 14px */
	font-weight: 600;                     /* Inter Semi Bold */
	letter-spacing: var(--loa-nav-tracking);
	text-transform: uppercase;
	color: var(--loa-nav-color);
	text-decoration: none;
}

.loa-drawer__link:hover,
.loa-drawer__link:focus-visible,
.loa-drawer__link[aria-current="page"] {
	color: var(--loa-gold);               /* active state TBD — interim */
}

/* NAV-04: outlined gold CTA below nav links */
.loa-drawer__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin: 1rem var(--loa-gutter) 1.5rem;
	padding-inline: var(--loa-cta-pad-x);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: var(--loa-nav-tracking);
	text-transform: uppercase;
	color: var(--loa-gold);
	background: transparent;
	border: 1px solid var(--loa-gold);
	text-decoration: none;
}

/* --- Mobile breakpoint ---------------------------------------------
 * Doc: breakpoints TBD. Interim: 1024px, chosen because the desktop
 * header (387px logo + 4 links at 40px gaps + CTA) needs ~1000px.
 */

@media (max-width: 1024px) {
	.loa-header {
		background: var(--loa-header-bg-mobile);        /* rgba(20,18,24,0.8) */
		-webkit-backdrop-filter: blur(var(--loa-header-blur-mobile)); /* 12px */
		backdrop-filter: blur(var(--loa-header-blur-mobile));
	}

	.loa-header__inner {
		height: var(--loa-header-h-mobile);             /* 73px */
		justify-content: flex-start;
		gap: 8px;
		padding-inline: 20px;                           /* NAV-02: hamburger 20px from edge */
	}

	/* Byrne 2026-07-15 (reference screenshot): logo centered in the
	 * space RIGHT of the hamburger, ~65vw wide, capped at the spec's
	 * 305px natural size. Cannot overlap the hamburger because both
	 * share the flex row. */
	.loa-header__brand {
		margin-left: 0;
		flex: 1;
		min-width: 0;
		justify-content: center;
	}

	.loa-header__logo {
		width: min(305px, 66vw);
		height: auto;                                   /* ratio-true: 24px tall at the 305px cap */
	}

	/* NAV-02: no inline links or CTA in the mobile bar */
	.loa-header__nav,
	.loa-header__cta { display: none; }

	.loa-header__toggle { display: inline-flex; }
}