/* ============================================================================
   HEADER — bar, navigation, logo.
   ============================================================================ */


/* ============================================================
   THE BAR ITSELF
   ============================================================ */
header#page-header {
	background: none !important;
	box-shadow: none !important;
	padding-top: 0 !important;
}

/* The header container's horizontal padding is NOT set here — it is part
   of the shared alignment system in 03-base.css, so the logo and every
   masthead title keep the same left edge. */

/* The sticky header on light pages is transparent. */
.page-template-default.page header#page-header.header_fixed.header_sticky,
.single.single-post header#page-header.header_fixed.header_sticky {
	background-color: transparent !important;
}


/* ============================================================
   NAVIGATION

   Back to Kinsey's own split, which turns out to be the right one:

     >= 992px   the inline menu, always visible. No burger. A burger on
                desktop hides four good links behind an extra click for no
                gain, and these links are worth clicking.

     <  992px   the burger opens Kinsey's fullscreen overlay, untouched.

   This is the theme's default behaviour, so there is almost nothing to do
   here beyond positioning. Deliberately gone, and worth knowing why:

     - the desktop burger, the collapse/reveal animation, and the
       `.opened` styling that drove it
     - js/nav-persist.js, which remembered the open/closed state across
       pages. With nothing to open on desktop there is no state to keep.
     - a rule pinning `.header__col-left` visible, which existed only to
       stop Kinsey fading the logo out when the desktop menu opened.

   That last removal also fixes a real bug. The parent stylesheet has:

       .header               { pointer-events: none; }
       .header:not(.opened) a { pointer-events: initial; }

   so while the header carries `.opened`, EVERY link inside it goes dead —
   including the logo. Kinsey can do that safely because its overlay
   replaces the header. Our desktop menu granted itself pointer-events
   back, so the links worked, but the logo did not — and the persistence
   script reapplied `.opened` on load, so the logo was unclickable from
   the moment the page rendered. No `.opened` on desktop, no problem.
   ============================================================ */

/* Kinsey prints an "Open" / "Close" label beside the burger at
   right: 100%. Removed — it appears on the mobile burger too. */
.header__burger-label {
	display: none !important;
}

/* Vertical position — what makes the nav hold still.

   The menu (desktop) and the burger (phone) are pinned to the top of the
   row and given the bar's height, so each centres inside that band rather
   than against the row. `align-self: flex-start` is what does it: without
   it the row's own `align-items: center` would centre them against the
   full row height, which is set by the logo — so the nav would move
   whenever the logo's height changed.

   With the bar height matching the logo height, the nav centres on the
   logo's centre line.

   The burger rule is unscoped by width; above 992px `.d-lg-none` hides it
   anyway. The menu rule is scoped to >=992px because below that
   Bootstrap's `.d-none` must win — this selector carries an id and would
   otherwise out-specify it, putting the desktop menu on phones alongside
   the burger. */
#page-header .header__col.d-lg-none {
	align-self: flex-start !important;
	align-items: center !important;
	height: var(--evm-navbar-height) !important;
	margin-top: 0 !important;
	padding-top: 0 !important;
}

@media (min-width: 992px) {
	#page-header .header__col.d-lg-block {
		/* `display: flex` is load-bearing, not decoration. Bootstrap's
		   `.d-lg-block` makes this column `display: block`, and
		   `align-items` does nothing on a block element — the menu would
		   sit at the top of the 160px band instead of centred in it. */
		display: flex !important;
		align-self: flex-start !important;
		align-items: center !important;
		height: var(--evm-navbar-height) !important;
		margin-top: 0 !important;
		padding-top: 0 !important;
	}
}


/* ============================================================
   NAV BAR — the white band, every page except Home

   A full-bleed band across the top of the header, drawn as a ::before on
   the container so it can break out of the boxed width.

   Its height is fixed and unrelated to the logo's. The logo is taller and
   hangs below it — that overhang is what makes the logo read as a tag, so
   the bar must never grow to contain it.
   ============================================================ */
#page-header {
	--evm-navbar-height: var(--evm-navbar-height-landing);
}

#page-header.header_sticky {
	--evm-navbar-height: var(--evm-navbar-height-sticky);
}

body:not(.home) #page-header .header__container {
	background-color: transparent !important;
}

body:not(.home) #page-header .header__container::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	height: var(--evm-navbar-height);
	background-color: var(--evm-navbar-bg);
	transition: height var(--evm-navbar-transition);
	z-index: 0;
}

/* Keep logo + menu above the band. */
body:not(.home) #page-header .row {
	position: relative;
	z-index: 1;
}


/* ============================================================
   MENU LINKS

   One colour on every page now that the bar has no fill — the nav sits
   directly on the page, dark landing or light inner. Legibility over a
   full-bleed hero image is the open question.
   ============================================================ */
/* The active nav colour is resolved once, here, and read everywhere else,
   so the links and the burger never have to know what page they are on.

   The grey is the default and covers both the dark landing page and the
   flat light pages. Only a hero image behind the nav overrides it.

   `evm-nav-over-image` is set in functions.php on singular posts and
   portfolio items that have a featured image; that filter returns early on
   the front page, so this cannot fire on Home. */
#page-header {
	--evm-nav-ink: var(--evm-nav-color);
}

body.evm-nav-over-image #page-header {
	--evm-nav-ink: var(--evm-nav-color-over-image);
}

#page-header .menu > li > a {
	color: var(--evm-nav-ink) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	font-size: 18px !important;
	text-decoration: none !important;
}

/* Burger, same colour. The X is these same three lines rotated, so this
   covers both states. Kinsey draws them with :before and :after — the
   .header__burger-line element itself is just a 26x2 clipping box.

   Links are desktop-only and the burger is phone-only, so the two never
   appear together — but they follow the same rule so the nav reads the
   same way at either size. */
#page-header .header__burger-line:before,
#page-header .header__burger-line:after {
	background-color: var(--evm-nav-ink) !important;
}

/* Spacing between items.

   Kinsey pads each link by 1em left and right — 18px at our type size —
   and that padding is load-bearing: the hover underline is a
   background-image positioned against it. So the padding stays and the li
   margin supplies only the remainder. */
#page-header .menu > li:not(:last-child) {
	margin-right: calc(var(--evm-nav-gap) - 36px) !important;
}


/* ============================================================
   LOGO — light / dark variant swap

   Kinsey ships two logo images stacked on top of each other. Rather than
   toggling `display` (which would break the parent's layout maths), the
   unwanted one is faded out and hidden.

   As with page modes in 03-base.css, this enumerates body classes by hand
   and wants replacing with a single theme-mode class.
   ============================================================ */

/* Visible variant */
.home img.logo__img-primary,
body.post-template-default.single.single-post img.logo__img-secondary,
body.archive.tag img.logo__img-secondary,
body.archive.category img.logo__img-secondary,
.page-template-default.page img.logo__img-secondary {
	opacity: 1 !important;
	visibility: visible !important;
}

/* Hidden variant */
.home img.logo__img-secondary,
body.post-template-default.single.single-post img.logo__img-primary,
body.archive.tag img.logo__img-primary,
body.archive.category img.logo__img-primary,
.page-template-default.page img.logo__img-primary {
	opacity: 0 !important;
	visibility: hidden !important;
}


/* ============================================================
   LOGO SIZE — deliberately not set here.

   The logo used to shrink from its full size to 90px once the page was
   scrolled. That is gone: it now stays the same size at every scroll
   position, on every page.

   There is no rule to replace it with, because the size is already
   managed in the Customizer — Kirki emits responsive heights on
   `.logo__wrapper-img img` (161px desktop / 81px tablet / 91px phone,
   from Appearance -> Customize -> the logo settings). Overriding them here
   would have broken the tablet and phone sizes, and taken the control out
   of the Customizer where it belongs.

   To change the logo size, change it there. To bring back the scroll
   shrink, add a `header#page-header.header_sticky img.logo__img-*` rule.
   ============================================================ */


/* Horizontal padding below 1340px is handled by the alignment system in
   03-base.css, alongside the masthead containers, so the logo and the
   titles cannot drift apart. Nothing to add here. */