/**
 * Chrome: header bar, brand lockup, desktop nav, header actions, search
 * panel, off-canvas drawer, footer. Tokens only — every var(--ds-*) here is
 * checked against ~/Code/Corduroy/dist/scss/ikonWeb.scss. No literal colours
 * except rgba(255,255,255,x) hairlines on navy, which Corduroy has no token
 * for; each is commented at its use site. No !important anywhere.
 *
 * Depends on css/base.css for .lc-container, .lc-button*, .lc-chip*,
 * .lc-visually-hidden, .lc-skip-link and the global focus-visible ring
 * (Agent A). This file only overrides focus-ring *colour* on the navy/blue
 * surfaces below, via selectors more specific than the global rule — see
 * "Focus on dark surfaces" at the end.
 *
 * @package lifted-corduroy
 */

/* ------------------------------------------------------------------ */
/* Header bar                                                          */
/* ------------------------------------------------------------------ */

.lc-header {
	position: sticky;
	top: 0;
	z-index: var( --lc-z-header );
	background: var( --ds-color-background-header-nav-bar );
}

/* Shadow only once scrolled — the bar itself has no resting elevation. */
.lc-header.is-scrolled {
	box-shadow: var( --ds-elevation-header-nav );
}

.lc-header__inner {
	display: flex;
	align-items: center;
	gap: var( --ds-space-150 );
	height: var( --lc-header-height );
}

.lc-header__menu-toggle,
.lc-header__search-toggle {
	color: var( --ds-color-icon-on-dark );
	flex: 0 0 auto;
}

/* Icon buttons on navy (menu, search, the search and drawer close buttons).
   base.css's hover — background.action.secondary.hover, a 16% dark grey —
   is invisible on #092340. These ARE header-nav buttons, so they take that
   role's hover fill (#006695; white icon on it is 6.3:1). Corduroy's
   reference lists a ripple.onDark colour, but it is not in the ikonWeb SCSS
   our tokens are generated from. (0,3,0) beats base.css's (0,2,0). */
.lc-header .lc-button--icon,
.lc-drawer .lc-button--icon {
	border-radius: var( --ds-radius-button-header-nav ); /* square, like the CTA */
}
.lc-header .lc-button--icon:hover,
.lc-drawer .lc-button--icon:hover {
	background-color: var( --ds-color-background-header-nav-button-hover );
}

/* Drawer is reachable at every width, but the desktop nav already covers
   navigation at >=1024, and the primary menu here never exceeds 6 items
   (Stories + 4 categories, or fewer in a real wp-admin menu) — so the
   simpler of the two options spec §"YOU OWN" allows is used: hide the
   toggle at the desktop breakpoint entirely, rather than keep it available
   alongside the inline nav. */
@media ( min-width: 1024px ) {
	.lc-header__menu-toggle {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* Brand lockup (header / drawer / footer)                             */
/* ------------------------------------------------------------------ */

.lc-brand {
	display: inline-flex;
	align-items: center;
	gap: var( --ds-space-075 );
	text-decoration: none;
	flex: 0 0 auto;
}

.lc-brand__logo {
	display: block;
	width: 72px;
	height: 32px;
}

.lc-brand__rule {
	display: inline-block;
	width: 1px;
	height: 24px;
	/* Hairline on navy/blue — Corduroy has no token for a translucent rule
	   on a dark ground, so this is a deliberate literal. */
	background: rgba( 255, 255, 255, 0.4 );
}

.lc-brand__wordmark {
	color: var( --ds-color-text-on-dark );
}

/* ------------------------------------------------------------------ */
/* Desktop nav (>=1024; the drawer is primary below that)               */
/* ------------------------------------------------------------------ */

.lc-nav {
	display: none;
	flex: 1 1 auto;
	min-width: 0;
}

@media ( min-width: 1024px ) {
	.lc-nav {
		display: flex;
		align-items: center;
	}
}

.lc-nav__list {
	display: flex;
	align-items: center;
	gap: var( --ds-space-200 );
	list-style: none;
	margin: 0;
	padding: 0;
	margin-inline-start: var( --ds-space-200 );
}

.lc-nav__link {
	position: relative;
	display: inline-block;
	color: var( --ds-color-text-on-dark );
	text-decoration: none;
	padding-block: var( --ds-space-025 );
	white-space: nowrap; /* "FOR FUN" wrapped to two lines between 1024 and ~1100px */
}

/* 1024–1199: the bar is tight (logo + 5 links + search + CTA), so close up the
   nav rhythm one step; it opens back to --ds-space-200 from 1200px. */
@media ( min-width: 1024px ) and ( max-width: 1199px ) {
	.lc-nav__list {
		gap: var( --ds-space-150 );
		margin-inline-start: var( --ds-space-150 );
	}
}

.lc-nav__link::after {
	content: '';
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 2px;
	background: var( --ds-color-border-link-default );
	transition: right var( --lc-speed ) var( --lc-ease );
}

.lc-nav__link:hover::after,
.lc-nav__link:focus-visible::after,
.lc-nav__link[aria-current='page']::after {
	right: 0;
}

/* Text stays white on hover. Without this, base.css's generic `a:hover`
   turned the label link-hover blue (#006695) on the navy bar — 2.5:1, an AA
   failure, and off-brand: Corduroy's header nav text is white in every state
   and the gold underline is the hover affordance. */
.lc-nav__link:hover,
.lc-nav__link:focus-visible,
.lc-nav__link:active {
	color: var( --ds-color-text-on-dark );
}

@media ( prefers-reduced-motion: reduce ) {
	.lc-nav__link::after {
		transition: none;
	}
}

/* ------------------------------------------------------------------ */
/* Header actions (search toggle + CTA)                                 */
/* ------------------------------------------------------------------ */

.lc-header__actions {
	display: flex;
	align-items: center;
	gap: var( --ds-space-100 );
	margin-inline-start: auto;
	flex: 0 0 auto;
}

/* Header CTA hidden below 768 — no room for it next to the brand + toggle. */
.lc-header__cta {
	display: none;
}

@media ( min-width: 768px ) {
	.lc-header__cta {
		display: inline-flex;
	}
}

/* ------------------------------------------------------------------ */
/* Search panel                                                         */
/* ------------------------------------------------------------------ */

.lc-search {
	background: var( --ds-color-background-header-nav-bar );
	/* Hairline separating the panel from the bar above it — same
	   translucent-white treatment as .lc-brand__rule, no Corduroy token
	   exists for a rule on this surface. */
	border-top: 1px solid rgba( 255, 255, 255, 0.16 );
}

.lc-search__form {
	display: flex;
	align-items: center;
	gap: var( --ds-space-100 );
}

/* Vertical padding belongs to the header panel only. search.php's hero and
   404.php reuse .lc-search__form, and unscoped this added 24px above and
   below them (the search hero → results gap measured 151px at desktop). */
.lc-search .lc-search__form {
	padding-block: var( --ds-space-150 );
}

.lc-search__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: var( --ds-space-075 ) var( --ds-space-100 );
	border: var( --ds-border-width-default ) solid var( --ds-color-border-input-default );
	border-radius: var( --ds-radius-default );
	background: var( --ds-color-background-input-default );
	color: var( --ds-color-text-default );
	font: var( --ds-font-body-default );
}

.lc-search__input:focus-visible {
	outline: 2px solid var( --ds-color-border-input-focused );
	outline-offset: 1px;
	border-color: var( --ds-color-border-input-focused );
}

.lc-search__close {
	color: var( --ds-color-icon-on-dark );
	flex: 0 0 auto;
}

/* ------------------------------------------------------------------ */
/* Off-canvas drawer                                                    */
/* ------------------------------------------------------------------ */

.lc-drawer {
	position: fixed;
	inset: 0;
	z-index: var( --lc-z-drawer );
	visibility: visible;
	transition: visibility 0s linear 0s;
}

/* The `[hidden]` attribute is what js/nav.js toggles, but the default UA
   `display: none` would prevent .lc-drawer__panel from ever transitioning
   in. Keep the box in the render tree and hide it with visibility instead,
   delaying the switch to hidden on close so the slide-out transition below
   has time to finish. */
.lc-drawer[hidden] {
	display: block;
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s linear var( --lc-speed );
}

.lc-drawer:not( [hidden] ) {
	pointer-events: auto;
}

.lc-drawer__scrim {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	margin: 0;
	padding: 0;
	background: var( --ds-color-overlay-default );
	cursor: pointer;
}

.lc-drawer__panel {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: min( 22rem, 88vw );
	height: 100%;
	overflow-y: auto;
	padding: var( --ds-space-150 );
	/*
	 * Navy, not Corduroy's header-nav-menu blue (#006695). Brand rule from
	 * Shubert (2026-09-04): the gold Ikon mark sits only on the dark navy;
	 * the lighter blue is for CTA-type buttons such as Search. The drawer
	 * carries the gold logo lockup, so it must be navy.
	 */
	background: var( --ds-color-background-header-nav-bar );
	color: var( --ds-color-text-on-dark );
	box-shadow: var( --ds-elevation-header-nav );
	transform: translateX( -100% );
	transition: transform var( --lc-speed ) var( --lc-ease );
}

.lc-drawer:not( [hidden] ) .lc-drawer__panel {
	transform: translateX( 0 );
}

@media ( prefers-reduced-motion: reduce ) {
	.lc-drawer,
	.lc-drawer[hidden],
	.lc-drawer__panel {
		transition: none;
	}
}

.lc-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --ds-space-100 );
}

.lc-drawer__close {
	color: var( --ds-color-icon-on-dark );
}

.lc-drawer__nav {
	flex: 1 1 auto;
	margin-block: var( --ds-space-200 );
	overflow-y: auto;
}

.lc-drawer__list {
	display: flex;
	flex-direction: column;
	gap: var( --ds-space-150 );
	list-style: none;
	margin: 0;
	padding: 0;
}

.lc-drawer__link {
	display: block;
	color: var( --ds-color-text-on-dark );
	text-decoration: none;
}

.lc-drawer__link:hover,
.lc-drawer__link:focus-visible {
	text-decoration: underline;
}

/* Current section — inc/nav.php already sets aria-current="page"; this makes
   it visible, in the same gold the desktop nav uses for its underline. */
.lc-drawer__link[aria-current='page'] {
	text-decoration: underline;
	text-decoration-color: var( --ds-color-border-link-default );
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

.lc-drawer__foot {
	margin-top: auto;
	padding-top: var( --ds-space-200 );
}

/* Scroll lock while the drawer is open. `inert` (js/nav.js) keeps the rest
   of the page out of the a11y tree and off Tab; this keeps it from
   scrolling behind the panel. */
body.lc-drawer-open {
	overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Footer                                                               */
/* ------------------------------------------------------------------ */

.lc-footer {
	background: var( --ds-color-background-footer-nav-bar );
	color: var( --ds-color-text-footer-nav-bar );
	padding-block: var( --ds-space-300 );
}

.lc-footer__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var( --ds-space-200 );
}

.lc-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var( --ds-space-100 );
	max-width: 26rem;
}

.lc-footer__tagline {
	margin: 0;
	color: var( --ds-color-text-footer-nav-bar );
}

.lc-footer__links {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: var( --ds-space-050 ) var( --ds-space-150 );
	list-style: none;
	margin: 0;
	padding: 0;
}

.lc-footer__links a {
	color: var( --ds-color-text-footer-nav-bar );
	text-decoration: none;
}

.lc-footer__links a:hover,
.lc-footer__links a:focus-visible {
	text-decoration: underline;
}

.lc-footer__ext-icon {
	margin-inline-start: var( --ds-space-025 );
	vertical-align: middle;
}

.lc-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var( --ds-space-100 );
	margin-top: var( --ds-space-200 );
	padding-top: var( --ds-space-150 );
	color: var( --ds-color-text-footer-nav-bar );
	position: relative;
}

/* Hairline above the legal row — spec calls this out explicitly as a
   literal rgba(255,255,255,.16), no border token exists for this surface
   either. Drawn inside the gutters: as a border-top on this .lc-container
   it overshot the footer text by one gutter on each side. */
.lc-footer__legal::before {
	content: '';
	position: absolute;
	top: 0;
	inset-inline: var( --lc-gutter );
	border-top: 1px solid rgba( 255, 255, 255, 0.16 );
}

/* Defensive reset: lc_onetrust_trigger_markup() (Agent D, ported verbatim
   from the previous theme) returns a bare <li>, which was written to be
   appended inside a <ul>. .lc-footer__legal is a plain row, not a list, so
   without this the trigger would render with a stray list-item bullet. */
.lc-footer__legal li {
	display: inline;
	list-style: none;
}

.lc-footer__legal .ot-sdk-show-settings {
	cursor: pointer;
	text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Focus on dark surfaces                                               */
/* ------------------------------------------------------------------ */

/* Agent A's global :focus-visible ring is tuned for light surfaces
   (--ds-color-border-focused-default). These three chrome regions sit on
   navy/blue, so only the ring *colour* is swapped for the on-dark token;
   width/offset/style are left to inherit from the global rule. Selectors
   here are more specific (0,2,0) than a bare :focus-visible (0,1,0), so this
   wins by specificity regardless of stylesheet order — no !important. */
.lc-header a:focus-visible,
.lc-header button:focus-visible,
.lc-drawer a:focus-visible,
.lc-drawer button:focus-visible,
.lc-footer a:focus-visible,
.lc-footer button:focus-visible {
	outline-color: var( --ds-color-border-focused-on-dark );
}