/* LUMEN — Phase 6b: Sitewide Header & Navigation.
 *
 * v0.29.1 — VISUAL REWORK. v0.29.0 was functionally correct (dynamic menu,
 * real current-page detection, working search, configurable CTA, custom
 * logo, sticky behavior, responsive breakpoints, accessibility, the
 * Sitewide Foundation dependency, the safe old-header replacement) but
 * visually was still "logo+name left / plain horizontal nav center /
 * search+gold-pill-CTA right" — a conventional, cleaned-up navbar. This
 * file is a full visual rework built around a photographic vocabulary
 * (framing, focus, exposure, contact sheets) instead. NONE of the PHP
 * logic that produces the data below changed — this file only styles the
 * markup class-lumen-header.php's render() now outputs.
 *
 * ARCHITECTURE (unchanged from v0.29.0): Level-3, LUMEN-owned component.
 * Selectors carry real, non-:where() specificity via the `.lumen-header`
 * ancestor context, which already beats Sitewide Foundation's generic
 * Level-2 defaults outright; this stylesheet also still depends on the
 * sitewide handle for correct load order (class-lumen-header.php).
 *
 * The old theme header (#header.ct-header) and its mobile off-canvas
 * panel (#offcanvas) are still hidden by the two rules below, scoped to
 * `body.lumen-header-active` — unchanged from v0.29.0.
 *
 * WHAT'S NEW, VISUALLY:
 *   - A framed identity block (bordered mark with corner ticks + a
 *     two-line eyebrow/discipline wordmark) instead of "logo beside a
 *     plain site title."
 *   - Navigation on a "light rail": technical-mono labels with a
 *     frame-numbered index (01, 02, …), no filled pills anywhere. A
 *     single shared `.lumen-header__focus-frame` bracket slides and
 *     resizes (transform + width, GPU-cheap) to the hovered/focused item
 *     and rests on the current page — a focus-lock, not a filled pill.
 *   - A hairline "exposure line" runs the full width under the bar; a
 *     small light glow travels along it to track the same hovered item
 *     (one shared position variable, updated only on hover/focus).
 *   - The CTA is a "shutter" control — a small iris of three rotated
 *     rings next to its label, which stops down (scales in) on
 *     hover/focus and gives a brief commit pulse on click/tap.
 *   - The mobile panel is a contact-sheet grid of numbered frames, not a
 *     plain vertical link list.
 *   - Scroll state compresses the header's padding/logo/text (a real
 *     transform-based shrink) instead of only adding a box-shadow.
 *
 * Everything here is transform/opacity based — no canvas, no WebGL,
 * nothing that runs continuously without a real trigger (hover, click,
 * scroll, resize) — per the approved performance rules. All motion is
 * disabled under prefers-reduced-motion at the bottom of this file.
 */

body.lumen-header-active #header.ct-header,
body.lumen-header-active #offcanvas.ct-header {
	display: none !important;
}

/* ── The header shell ─────────────────────────────────────────────── */
.lumen-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background: rgba(10, 10, 11, 0.9);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: background 0.3s ease, box-shadow 0.3s ease;
}
.lumen-header.is-scrolled {
	background: rgba(8, 8, 9, 0.97);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.lumen-header__frame {
	position: relative;
	max-width: 1440px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 18px 32px;
	transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.lumen-header.is-scrolled .lumen-header__frame {
	padding: 11px 32px;
}

/* ── Identity block — a framed mark + a two-line eyebrow/discipline
   wordmark, not "logo beside a plain site title." ────────────────── */
.lumen-header .lumen-header__identity {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--lumen-ink);
	text-decoration: none;
	flex-shrink: 0;
	margin-right: 8px;
}
.lumen-header__identity-frame {
	position: relative;
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(217, 164, 65, 0.05);
	border: 1px solid rgba(217, 164, 65, 0.25);
	overflow: hidden;
	transition: width 0.3s ease, height 0.3s ease;
}
.lumen-header.is-scrolled .lumen-header__identity-frame {
	width: 32px;
	height: 32px;
}
.lumen-header__mark {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.lumen-header__mark--type {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	color: var(--lumen-gold);
}
.lumen-header__identity-corner {
	position: absolute;
	width: 8px;
	height: 8px;
	border-color: var(--lumen-gold);
	pointer-events: none;
}
.lumen-header__identity-corner--tl {
	top: -1px;
	left: -1px;
	border-top: 2px solid;
	border-left: 2px solid;
}
.lumen-header__identity-corner--br {
	bottom: -1px;
	right: -1px;
	border-bottom: 2px solid;
	border-right: 2px solid;
}
.lumen-header__identity-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	line-height: 1;
	transition: transform 0.3s ease, opacity 0.3s ease;
	transform-origin: left center;
}
.lumen-header.is-scrolled .lumen-header__identity-text {
	transform: scale(0.9);
}
.lumen-header .lumen-header__identity-line {
	font-size: 12px;
	color: var(--lumen-gold);
	letter-spacing: 0.16em;
	white-space: nowrap;
}
.lumen-header .lumen-header__identity-line--sub {
	color: var(--lumen-ink-dim);
	font-size: 10px;
	letter-spacing: 0.28em;
}

/* ── Primary nav — the "light rail" ───────────────────────────────── */
.lumen-header__nav {
	flex: 1;
	display: flex;
	justify-content: center;
	min-width: 0;
}
.lumen-header__rail {
	position: relative;
}
.lumen-header__menu {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.lumen-header .lumen-header__menu-link {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: 7px;
	color: var(--lumen-ink-dim);
	text-decoration: none;
	padding: 9px 16px;
	white-space: nowrap;
	transition: color 0.2s ease;
}
.lumen-header .lumen-header__menu-link:focus-visible {
	outline: 1px solid rgba(217, 164, 65, 0.5);
	outline-offset: 2px;
}
.lumen-header__menu-index {
	font-size: 9px;
	color: var(--lumen-gold-deep);
	opacity: 0.75;
}
.lumen-header .lumen-header__menu-link:hover,
.lumen-header .lumen-header__menu-link:focus-visible {
	color: var(--lumen-ink);
}
.lumen-header .lumen-header__menu-link.is-active {
	color: var(--lumen-gold-bright);
}
.lumen-header .lumen-header__menu-link.is-active .lumen-header__menu-index {
	color: var(--lumen-gold-bright);
	opacity: 1;
}

/* The focus-lock bracket: one shared element, moved via a transform +
   width set from JS (element.style, not layout-triggering left/top), so
   it never has to be duplicated per nav item. It rests on the current
   page and slides to whichever item is hovered/keyboard-focused. */
.lumen-header__focus-frame {
	position: absolute;
	top: 50%;
	left: 0;
	width: 0;
	height: 28px;
	z-index: 1;
	transform: translate(0, -50%);
	border-top: 1px solid var(--lumen-gold);
	border-bottom: 1px solid var(--lumen-gold);
	opacity: 0;
	pointer-events: none;
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}
.lumen-header__focus-frame::before,
.lumen-header__focus-frame::after {
	content: '';
	position: absolute;
	top: -1px;
	bottom: -1px;
	width: 6px;
	border-color: var(--lumen-gold);
}
.lumen-header__focus-frame::before {
	left: -1px;
	border-left: 1px solid var(--lumen-gold);
}
.lumen-header__focus-frame::after {
	right: -1px;
	border-right: 1px solid var(--lumen-gold);
}
.lumen-header__rail.has-focus .lumen-header__focus-frame {
	opacity: 1;
}

/* ── Exposure line — a hairline under the whole bar; a small light glow
   travels along it, tracking the same hovered/focused item as the
   bracket above (one shared JS-set position variable). ─────────────── */
.lumen-header__exposure-line {
	position: relative;
	display: block;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(217, 164, 65, 0.35) 50%, transparent 100%);
}
.lumen-header__exposure-line::after {
	content: '';
	position: absolute;
	top: 50%;
	left: var(--lumen-exposure-x, 50%);
	width: 70px;
	height: 6px;
	margin-left: -35px;
	transform: translateY(-50%);
	background: radial-gradient(circle, rgba(232, 199, 102, 0.85), transparent 72%);
	opacity: var(--lumen-exposure-opacity, 0);
	pointer-events: none;
	transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

/* ── Actions: search, shutter CTA, mobile toggle ──────────────────── */
.lumen-header__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
}
.lumen-header .lumen-header__icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(217, 164, 65, 0.3);
	background: transparent;
	color: var(--lumen-ink-dim);
	cursor: pointer;
	padding: 0;
	transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.lumen-header .lumen-header__icon-btn:hover,
.lumen-header .lumen-header__icon-btn:focus-visible {
	color: var(--lumen-gold-bright);
	border-color: var(--lumen-gold);
	background: rgba(217, 164, 65, 0.1);
	outline: none;
}
.lumen-header__icon {
	fill: currentColor;
}

/* The "shutter" CTA — an iris of three rotated rings that stop down
   (scale in) on hover/focus, plus a brief commit pulse on click/tap
   (`.is-committing`, toggled briefly by JS — see lumen-header.js). */
.lumen-header .lumen-header__shutter {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--lumen-ink);
	padding: 6px 16px 6px 6px;
	border: 1px solid rgba(217, 164, 65, 0.35);
	transition: border-color 0.2s ease, background 0.2s ease;
}
.lumen-header .lumen-header__shutter:hover,
.lumen-header .lumen-header__shutter:focus-visible {
	border-color: var(--lumen-gold);
	background: rgba(217, 164, 65, 0.06);
	color: var(--lumen-gold-bright);
	outline: none;
}
.lumen-header__shutter-ring {
	position: relative;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}
.lumen-header__shutter-blade {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 21px;
	height: 21px;
	margin: -10.5px 0 0 -10.5px;
	border-radius: 50%;
	border: 1.5px solid var(--lumen-gold);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}
.lumen-header__shutter-blade:nth-child(1) {
	transform: rotate(0deg);
	opacity: 0.9;
}
.lumen-header__shutter-blade:nth-child(2) {
	transform: rotate(60deg);
	opacity: 0.45;
}
.lumen-header__shutter-blade:nth-child(3) {
	transform: rotate(120deg);
	opacity: 0.45;
}
.lumen-header .lumen-header__shutter:hover .lumen-header__shutter-blade,
.lumen-header .lumen-header__shutter:focus-visible .lumen-header__shutter-blade {
	opacity: 1;
}
.lumen-header .lumen-header__shutter:hover .lumen-header__shutter-blade:nth-child(1),
.lumen-header .lumen-header__shutter:focus-visible .lumen-header__shutter-blade:nth-child(1) {
	transform: rotate(0deg) scale(0.72);
}
.lumen-header .lumen-header__shutter:hover .lumen-header__shutter-blade:nth-child(2),
.lumen-header .lumen-header__shutter:focus-visible .lumen-header__shutter-blade:nth-child(2) {
	transform: rotate(60deg) scale(0.72);
}
.lumen-header .lumen-header__shutter:hover .lumen-header__shutter-blade:nth-child(3),
.lumen-header .lumen-header__shutter:focus-visible .lumen-header__shutter-blade:nth-child(3) {
	transform: rotate(120deg) scale(0.72);
}
.lumen-header .lumen-header__shutter.is-committing .lumen-header__shutter-blade {
	transform: scale(0.5) !important;
	opacity: 1;
}
.lumen-header__shutter-label {
	white-space: nowrap;
}

/* Mobile/tablet toggle — a viewfinder focus-square that closes inward
   when open, not a hamburger. */
.lumen-header .lumen-header__menu-toggle {
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	flex-shrink: 0;
}
.lumen-header__frame-corners {
	position: relative;
	width: 20px;
	height: 20px;
}
.lumen-header__frame-corners i {
	position: absolute;
	width: 7px;
	height: 7px;
	border-color: var(--lumen-gold);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	font-style: normal;
}
.lumen-header__frame-corners i:nth-child(1) {
	top: 0;
	left: 0;
	border-top: 2px solid;
	border-left: 2px solid;
}
.lumen-header__frame-corners i:nth-child(2) {
	top: 0;
	right: 0;
	border-top: 2px solid;
	border-right: 2px solid;
}
.lumen-header__frame-corners i:nth-child(3) {
	bottom: 0;
	left: 0;
	border-bottom: 2px solid;
	border-left: 2px solid;
}
.lumen-header__frame-corners i:nth-child(4) {
	bottom: 0;
	right: 0;
	border-bottom: 2px solid;
	border-right: 2px solid;
}
.lumen-header .lumen-header__menu-toggle[aria-expanded="true"] .lumen-header__frame-corners i:nth-child(1) {
	transform: translate(4px, 4px);
}
.lumen-header .lumen-header__menu-toggle[aria-expanded="true"] .lumen-header__frame-corners i:nth-child(2) {
	transform: translate(-4px, 4px);
}
.lumen-header .lumen-header__menu-toggle[aria-expanded="true"] .lumen-header__frame-corners i:nth-child(3) {
	transform: translate(4px, -4px);
}
.lumen-header .lumen-header__menu-toggle[aria-expanded="true"] .lumen-header__frame-corners i:nth-child(4) {
	transform: translate(-4px, -4px);
}
.lumen-header .lumen-header__menu-toggle-label {
	font-size: 9px;
	letter-spacing: 0.16em;
	color: var(--lumen-ink-dim);
}

/* ── Mobile/tablet contact-sheet panel ─────────────────────────────── */
/* v0.43.0 — INDEX SAFE-AREA / VIEWPORT-HEIGHT FIX. Real Samsung Galaxy
   S22 Ultra / Android Chrome testing confirmed the root cause: this
   panel's own max-height was written only in static `vh` units. On
   Android Chrome, `vh` is computed from the LARGEST possible viewport
   (address bar hidden) — not the actual visible viewport at the moment
   the panel is open, which is shorter whenever the browser chrome and/or
   the Android system navigation bar are showing. Because this header is
   `position: sticky` (see above), the expanded bar+panel box is pinned to
   the top of that shorter *visible* area, so its own bottom portion
   (the BOOK A SESSION CTA and its gold border) can end up rendered lower
   than what's actually visible — reported as "the bottom gold border is
   partially cut off" / "the CTA extends behind the phone navigation
   area." This was NOT a reCAPTCHA-badge issue; nothing reCAPTCHA-related
   is touched by this fix.
   Fix: prefer the modern DYNAMIC viewport unit (`dvh`), which tracks the
   ACTUAL currently-visible viewport (shrinking/growing live as browser
   chrome shows/hides), with the original static `vh` kept first as a
   real fallback for browsers that don't support `dvh` (the second
   declaration simply wins on any browser that understands it — the first
   is never left as the only value). `overflow-y: auto` (already present)
   means that on a screen too short for the full menu, the panel scrolls
   internally instead of clipping anything — a slight menu scroll instead
   of a cropped CTA, exactly as required. Desktop (>980px, where this
   panel never opens at all — see the tablet/phone media queries below)
   is completely unaffected. */
.lumen-header__mobile-panel {
	max-height: 0;
	overflow: hidden;
	background: var(--lumen-ground-raised);
	border-top: 1px solid rgba(217, 164, 65, 0.15);
	transition: max-height 0.35s ease;
}
.lumen-header__mobile-panel:not([hidden]) {
	max-height: 85vh; /* fallback for browsers without dvh support */
	max-height: 85dvh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.lumen-header .lumen-header__sheet-heading {
	margin: 0;
	padding: 16px 20px 2px;
	color: var(--lumen-ink-faint);
	font-size: 10px;
	letter-spacing: 0.22em;
}
.lumen-header__contact-sheet {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: rgba(217, 164, 65, 0.15);
	margin: 12px 20px;
	list-style: none;
	padding: 0;
}
.lumen-header__sheet-frame {
	background: var(--lumen-ground);
}
.lumen-header .lumen-header__sheet-link {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;
	min-height: 88px;
	padding: 16px 14px;
	text-decoration: none;
	color: var(--lumen-ink-dim);
	border: 1px solid transparent;
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.lumen-header .lumen-header__sheet-link:hover,
.lumen-header .lumen-header__sheet-link:focus-visible {
	color: var(--lumen-ink);
	background: rgba(217, 164, 65, 0.07);
	outline: none;
}
.lumen-header .lumen-header__sheet-link.is-active {
	color: var(--lumen-gold-bright);
	border-color: var(--lumen-gold);
	background: rgba(217, 164, 65, 0.09);
}
.lumen-header__sheet-index {
	font-size: 10px;
	color: var(--lumen-gold-deep);
}
.lumen-header .lumen-header__sheet-link.is-active .lumen-header__sheet-index {
	color: var(--lumen-gold-bright);
}
.lumen-header__sheet-label {
	font-size: 15px;
	line-height: 1.15;
}
.lumen-header .lumen-header__mobile-cta {
	display: block;
	margin: 4px 20px 20px;
	/* v0.43.0 — guaranteed bottom spacing so BOOK A SESSION always has
	   real room below it and above the device's own system UI, even when
	   Android reports env(safe-area-inset-bottom) as 0 (many Android
	   devices do, unlike iOS) — the 20px margin above is ALREADY a real,
	   non-zero fallback on its own; env()'s second argument (0px) is only
	   used if the browser doesn't support env() at all, so this can only
	   ever ADD extra space on top of that guaranteed 20px, never remove
	   it or depend on the inset being non-zero. */
	margin-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	text-align: center;
	padding: 14px;
	border: 1px solid var(--lumen-gold);
	color: var(--lumen-gold-bright);
	text-decoration: none;
	letter-spacing: 0.12em;
	transition: background 0.2s ease, color 0.2s ease;
}
.lumen-header .lumen-header__mobile-cta:hover,
.lumen-header .lumen-header__mobile-cta:focus-visible {
	background: var(--lumen-gold);
	color: #17140d;
	outline: none;
}

/* ── Tablet (≤980px): collapse the rail nav into the toggle, keep
   identity + search + shutter + toggle visible in the bar. ─────────── */
@media (max-width: 980px) {
	.lumen-header__frame {
		padding: 14px 24px;
		gap: 16px;
	}
	.lumen-header__nav {
		display: none;
	}
	.lumen-header .lumen-header__menu-toggle {
		display: flex;
	}
}

/* ── Phone (≤640px): the shutter CTA moves into the contact-sheet panel
   (its outlined-frame mobile-cta above) to keep the bar itself to
   identity + icon controls only; the identity block shrinks rather than
   disappears, so the brand stays legible. ────────────────────────────── */
@media (max-width: 640px) {
	.lumen-header__frame {
		padding: 12px 16px;
		gap: 12px;
	}
	.lumen-header__identity-frame {
		width: 32px;
		height: 32px;
	}
	.lumen-header .lumen-header__identity-line {
		font-size: 11px;
	}
	.lumen-header .lumen-header__identity-line--sub {
		font-size: 9px;
	}
	.lumen-header__actions .lumen-header__shutter {
		display: none;
	}
	.lumen-header .lumen-header__icon-btn {
		width: 32px;
		height: 32px;
	}
	.lumen-header__contact-sheet {
		grid-template-columns: 1fr;
		margin: 10px 16px;
	}
	.lumen-header .lumen-header__mobile-cta {
		margin: 4px 16px 18px;
		/* v0.43.0 — this phone-width override previously reset the
		   shorthand `margin` (all 4 sides), which was silently wiping out
		   the guaranteed safe-area bottom spacing declared above for every
		   phone at or under this exact breakpoint — including the real
		   Samsung Galaxy S22 Ultra device this defect was confirmed on.
		   Re-applied here, after the shorthand, so it always wins. */
		margin-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
	}
}

@media (prefers-reduced-motion: reduce) {
	.lumen-header,
	.lumen-header__frame,
	.lumen-header__identity-frame,
	.lumen-header__identity-text,
	.lumen-header__focus-frame,
	.lumen-header__exposure-line::after,
	.lumen-header__shutter-blade,
	.lumen-header .lumen-header__shutter,
	.lumen-header__frame-corners i,
	.lumen-header__mobile-panel,
	.lumen-header .lumen-header__mobile-cta {
		transition: none !important;
	}
}