/**
 * Site header
 *
 * A three-column grid: left menu | centred wordmark | right menu.
 * The two menus are separate WordPress menu locations (`header-left` and
 * `header-right`), which is why the grid — not a single flex row — owns the
 * layout: the wordmark stays optically centred in the viewport no matter how
 * many items sit on either side.
 *
 * Two colour schemes, applied by PHP through `.site-header--dark` and
 * `.site-header--light`. Light is what every page currently gets — see
 * im_norwegianflagstone_header_scheme() for why the dark bar is parked, and for
 * the filter that brings it back.
 *
 * The header is fixed. On pages that open with a hero it starts transparent
 * over the media and fades in a solid background once the page scrolls;
 * `.site-header--overlay` is added by PHP when the first block on the page is a
 * hero, `.is-scrolled` by JS.
 *
 * @package Norwegian_Flagstone
 */

.site-header {
	background-color: var(--nf-header-surface);
	color: var(--nf-header-fg);
	inset-block-start: var(--nf-header-offset, 0px);
	inset-inline: 0;
	position: fixed;
	transition:
		background-color var(--nf-transition),
		box-shadow var(--nf-transition),
		color var(--nf-transition),
		inset-block-start var(--nf-transition);
	z-index: var(--nf-z-header);
}

/* Colour schemes ----------------------------------------------------------- */

/*
 * Everything inside the header — links, wordmark, button item, toggle, drawer,
 * sub-menus — paints from these slots, so a scheme is a handful of variable
 * overrides rather than a parallel set of rules.
 *
 * `--nf-header-surface` is the solid panel colour and is used by the drawer and
 * the sub-menus; the bar's own background drops to transparent while it
 * overlays hero media, but a dropdown never can.
 *
 * The overlay selector is listed here rather than re-stating the dark values
 * under a rule of its own: a header sitting over a photograph is always dark
 * scheme, whatever the page is set to, because dark-on-photo is never legible.
 */
.site-header,
.site-header--dark,
.site-header--overlay:not(.is-scrolled) {
	--nf-header-surface: var(--nf-mork-sort);
	--nf-header-fg: var(--nf-lys);
	--nf-header-fg-hover: var(--nf-gull);
	--nf-header-fg-active: var(--nf-gull);
	--nf-header-rule: var(--nf-lys-15);
	--nf-header-btn-bg: var(--nf-gull);
	--nf-header-btn-bg-hover: var(--nf-gull-hover);
	--nf-header-btn-fg: var(--nf-mork-sort);
}

/* Light — the scheme every page renders in. */
.site-header--light {
	--nf-header-surface: var(--nf-lys);
	--nf-header-fg: var(--nf-mork-sort);
	--nf-header-fg-hover: var(--nf-mork-sort-70);
	--nf-header-fg-active: var(--nf-mork-sort);
	--nf-header-rule: var(--nf-mork-sort-15);
	--nf-header-btn-bg: var(--nf-mork-sort);
	--nf-header-btn-bg-hover: var(--nf-mork-sort-hover);
	--nf-header-btn-fg: var(--nf-lys);
}

/*
 * Clear the WordPress admin bar for logged-in users. The admin bar is fixed at
 * 32px on desktop, so the header drops below it.
 */
body.admin-bar {
	--nf-header-offset: 32px;
}

@media screen and (max-width: 782px) {

	body.admin-bar {
		--nf-header-offset: 46px;
	}

	/*
	 * Below 782px the admin bar is absolutely positioned and scrolls away with
	 * the page, so the header reclaims the top edge once scrolling starts.
	 */
	body.admin-bar .site-header.is-scrolled {
		--nf-header-offset: 0px;
	}
}

/* Transparent while sitting over hero media. */
.site-header--overlay:not(.is-scrolled) {
	background-color: transparent;
}

.site-header--overlay.is-scrolled {
	box-shadow: var(--nf-shadow-m);
}

/*
 * The light header sits on a page background of the same cream, so nothing
 * marks where it ends. Once content is scrolling underneath it, it needs to.
 */
.site-header--light.is-scrolled {
	box-shadow: var(--nf-shadow-s);
}

/* Pages without an overlay header need the content pushed clear of it. */
body:not(.nf-header-overlay) .site-content {
	padding-block-start: var(--nf-header-space);
}

.site-header__inner {
	align-items: center;
	display: grid;
	gap: var(--nf-space-s);
	grid-template-columns: 1fr auto 1fr;
	margin-inline: auto;
	max-width: var(--nf-container);
	min-height: var(--nf-header-height);

	/* 20px above and below the wordmark. */
	padding-block: var(--nf-header-padding);
	padding-inline: var(--nf-gutter);
	width: 100%;
}

/* Branding ----------------------------------------------------------------- */

.site-header__brand {
	grid-column: 2;
	justify-self: center;
	text-align: center;
}

.site-title {
	color: var(--nf-header-fg);
	font-family: var(--nf-font-display);
	font-size: var(--nf-fs-logo);
	font-weight: var(--nf-font-weight-bold);
	line-height: var(--nf-logo-line-height);
	margin: 0;
	text-transform: uppercase;
}

.site-title a {
	color: inherit;
	display: block;
	text-decoration: none;
}

.site-title a:hover,
.site-title a:focus {
	color: var(--nf-header-fg-hover);
}

/* The wordmark sets over two lines; `<br>` in the site title is respected,
   and this keeps it to two lines when the title is a single string. */
.site-title--stacked a {
	max-width: 8em;
	text-wrap: balance;
}

.site-description {
	clip-path: inset(50%);
	position: absolute;
}

.custom-logo-link {
	display: inline-block;
}

.custom-logo {
	height: auto;
	max-height: 2.5rem;
	width: auto;
}

/* Navigation columns ------------------------------------------------------- */

.site-header__col {
	align-items: center;
	display: flex;
	gap: var(--nf-space-s);
	min-width: 0;
}

.site-header__col--left {
	grid-column: 1;
	justify-content: flex-start;
}

.site-header__col--right {
	grid-column: 3;
	justify-content: flex-end;
}

/* Desktop menus ------------------------------------------------------------ */

.main-navigation ul {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--nf-space-m);
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-navigation li {
	margin: 0;
	position: relative;
}

.main-navigation a {
	color: var(--nf-header-fg);
	display: block;
	font-family: var(--nf-font-body);
	font-size: var(--nf-fs-nav);
	font-weight: var(--nf-font-weight-regular);
	line-height: var(--nf-lh-body);
	padding-block: var(--nf-space-3xs);
	text-decoration: none;
}

.main-navigation a:hover,
.main-navigation a:focus {
	color: var(--nf-header-fg-hover);
}

/*
 * Current page indicator. The underline carries the state on the light header,
 * where a colour shift alone is too quiet to read as "you are here"; the dark
 * header takes both so the two behave the same. `text-decoration` rather than a
 * border so the rule is exactly as wide as the label.
 */
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current-menu-parent > a,
.main-navigation .current_page_ancestor > a {
	color: var(--nf-header-fg-active);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.4em;
}

/*
 * Menu item rendered as a button. Opted into per item, with a `nf-btn-item`
 * CSS class in Appearance → Menus — no item gets this by its position in the
 * menu. See inc/nav-menus.php.
 */
/*
 * Matches .nf-btn--gull through the shared control tokens. inline-flex rather
 * than the inherited `display: block` so the label is centred inside the 34px
 * box instead of sitting at the top of it.
 */
.main-navigation .menu-item--button > a {
	align-items: center;
	background-color: var(--nf-header-btn-bg);
	border-radius: var(--nf-radius);
	color: var(--nf-header-btn-fg);
	display: inline-flex;
	font-weight: var(--nf-font-weight-medium);
	justify-content: center;
	min-height: var(--nf-control-height);
	padding: 0 var(--nf-control-padding-x);
	text-align: center;

	/* A filled pill is already the loudest thing in the bar — no underline. */
	text-decoration: none;
	transition:
		background-color var(--nf-transition),
		color var(--nf-transition);
	white-space: nowrap;
}

.main-navigation .menu-item--button > a:hover,
.main-navigation .menu-item--button > a:focus {
	background-color: var(--nf-header-btn-bg-hover);
	color: var(--nf-header-btn-fg);
}

/* Sub-menus ---------------------------------------------------------------- */

/*
 * A chevron on the items that open one. Without it the only way to find out
 * that *Discover* has six pages under it is to happen to hover it — the label
 * looks exactly like *Planner*, which does not.
 *
 * Drawn from two borders rather than set as a glyph: it inherits the link's
 * colour without a rule saying so, it costs no icon font, and it carries no
 * text, so the underline on the current item stops at the end of the word
 * instead of running out under the mark.
 *
 * Only in the bar. The drawer below shows every sub-menu open already, where a
 * chevron would promise something to press that does nothing.
 */
.site-header__inner .main-navigation .menu-item-has-children > a::after {
	border-block-end: 1px solid currentcolor;
	border-inline-end: 1px solid currentcolor;
	content: "";
	display: inline-block;
	height: 0.36em;
	margin-inline-start: 0.45em;
	transform: translateY(-0.15em) rotate(45deg);
	transition: transform var(--nf-transition);
	width: 0.36em;
}

/* It turns over while the menu it belongs to is open. */
.site-header__inner .main-navigation li:hover > a::after,
.site-header__inner .main-navigation li.focus > a::after,
.site-header__inner .main-navigation li:focus-within > a::after {
	transform: translateY(0.1em) rotate(225deg);
}

/*
 * Deeper than the first level the sub-menu opens sideways, so the mark points
 * the way it actually goes — and stays pointing there when it is open, because
 * nothing about the direction changes.
 */
.site-header__inner .main-navigation ul ul .menu-item-has-children > a::after,
.site-header__inner .main-navigation ul ul li:hover > a::after,
.site-header__inner .main-navigation ul ul li.focus > a::after,
.site-header__inner .main-navigation ul ul li:focus-within > a::after {
	transform: translateY(-0.05em) rotate(-45deg);
}

/* The right-hand menu's deeper levels open leftwards, and so does the mark. */
.site-header__col--right .main-navigation ul ul .menu-item-has-children > a::after,
.site-header__col--right .main-navigation ul ul li:hover > a::after,
.site-header__col--right .main-navigation ul ul li.focus > a::after,
.site-header__col--right .main-navigation ul ul li:focus-within > a::after {
	transform: translateY(-0.05em) rotate(135deg);
}

@media (prefers-reduced-motion: reduce) {

	.site-header__inner .main-navigation .menu-item-has-children > a::after {
		transition: none;
	}
}

.main-navigation ul ul {
	background-color: var(--nf-header-surface);
	border-radius: var(--nf-radius);
	box-shadow: var(--nf-shadow-m);
	display: block;
	flex-direction: column;
	gap: 0;
	inset-block-start: 100%;
	inset-inline-start: 0;
	min-width: 12rem;
	opacity: 0;
	padding: var(--nf-space-2xs) 0;
	pointer-events: none;
	position: absolute;
	transform: translateY(var(--nf-space-3xs));
	transition:
		opacity var(--nf-transition),
		transform var(--nf-transition);
	visibility: hidden;
}

.site-header__col--right .main-navigation ul ul {
	inset-inline: auto 0;
}

.main-navigation li:hover > ul,
.main-navigation li.focus > ul,
.main-navigation li:focus-within > ul {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
	visibility: visible;
}

.main-navigation ul ul a {
	padding: var(--nf-space-3xs) var(--nf-space-s);
	white-space: nowrap;
}

.main-navigation ul ul ul {
	inset-block-start: 0;
	inset-inline-start: 100%;
}

/* Third level opens leftwards inside the right-hand menu. */
.site-header__col--right .main-navigation ul ul ul {
	inset-inline: 100% auto;
}

/* Toggle button ------------------------------------------------------------ */

.nav-toggle {
	align-items: center;
	background: none;
	border: 0;
	color: var(--nf-header-fg);
	display: none;
	gap: var(--nf-space-2xs);
	height: var(--nf-control-height);
	justify-content: center;
	padding: 0;
	width: var(--nf-control-height);
}

.nav-toggle__bars {
	display: block;
	height: 12px;
	position: relative;
	width: 22px;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
	background-color: currentcolor;
	content: "";
	height: 1.5px;
	inset-inline: 0;
	position: absolute;
	transition: transform var(--nf-transition);
}

.nav-toggle__bars::before {
	inset-block-start: 0;
}

.nav-toggle__bars::after {
	inset-block-end: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
	transform: translateY(5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
	transform: translateY(-5px) rotate(-45deg);
}

/* Mobile drawer ------------------------------------------------------------ */

.site-header__drawer {
	background-color: var(--nf-header-surface);
	display: none;
	inset-block-start: 100%;
	inset-inline: 0;
	max-height: calc(100vh - var(--nf-header-space));
	overflow-y: auto;
	padding: var(--nf-space-m) var(--nf-gutter) var(--nf-space-xl);
	position: absolute;
}

.site-header__drawer .main-navigation ul {
	align-items: stretch;
	flex-direction: column;
	gap: 0;
}

.site-header__drawer .main-navigation a {
	border-block-end: var(--nf-border-width) solid var(--nf-header-rule);
	font-size: var(--nf-fs-lead);
	padding-block: var(--nf-space-xs);
}

.site-header__drawer .main-navigation ul ul {
	background: none;
	box-shadow: none;
	inset: auto;
	min-width: 0;
	opacity: 1;
	padding: 0 0 0 var(--nf-space-s);
	pointer-events: auto;
	position: static;
	transform: none;
	visibility: visible;
}

.site-header__drawer .menu-item--button {
	margin-block-start: var(--nf-space-m);
}

.site-header__drawer .menu-item--button > a {
	border-block-end: 0;
	display: inline-flex;
	font-size: var(--nf-fs-body);

	/* Undo the drawer's list-item padding so the button stays a 34px pill. */
	padding-block: 0;
}

/* Breakpoint -------------------------------------------------------------- */

@media (max-width: 1023px) {

	.site-header__inner {
		grid-template-columns: 1fr auto 1fr;
	}

	/* Desktop menus collapse into the drawer. */
	.site-header__col .main-navigation {
		display: none;
	}

	.nav-toggle {
		display: inline-flex;
	}

	.site-header__col--left {
		/* Keeps the wordmark centred while only the toggle shows on the right. */
		justify-content: flex-start;
	}

	.site-header__drawer {
		display: block;
		transform: translateY(-0.5rem);
		transition:
			opacity var(--nf-transition),
			transform var(--nf-transition),
			visibility var(--nf-transition);
		visibility: hidden;
	}

	.site-header__drawer:not(.is-open) {
		opacity: 0;
	}

	.site-header__drawer.is-open {
		opacity: 1;
		transform: translateY(0);
		visibility: visible;
	}

	/*
	 * The drawer always sits on a solid header. An open drawer over hero media
	 * keeps the dark scheme it already had — the palette rule above matches
	 * `:not(.is-scrolled)`, so only the background needs restoring here.
	 */
	.site-header.is-nav-open,
	.site-header--overlay.is-nav-open {
		background-color: var(--nf-header-surface);
	}
}

@media (min-width: 1024px) {

	.site-header__drawer {
		display: none;
	}
}