/**
 * 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.
 *
 * The header is fixed and starts transparent over a hero, then fades in a
 * solid background once the page scrolls (or immediately on pages with no
 * hero). `.site-header--overlay` is added by PHP when the first block on the
 * page is a hero; `.is-scrolled` is added by JS.
 *
 * @package Norwegian_Flagstone
 */

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

/*
 * 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 {
	background-color: transparent;
}

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

/* 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-lys);
	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-gull);
}

/* 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-lys);
	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-gull);
}

/* Current page indicator. */
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.main-navigation .current-menu-ancestor > a {
	color: var(--nf-gull);
}

/*
 * Menu item rendered as a button. Added automatically to the last top-level
 * item of the right-hand menu, or manually via a `nf-btn-item` CSS class on
 * any menu item in Appearance → Menus.
 */
/*
 * 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-gull);
	border-radius: var(--nf-radius);
	color: var(--nf-mork-sort);
	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;
	transition: background-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-gull-hover);
	color: var(--nf-mork-sort);
}

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

.main-navigation ul ul {
	background-color: var(--nf-mork-sort);
	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-lys);
	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-mork-sort);
	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-lys-15);
	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. */
	.site-header.is-nav-open,
	.site-header--overlay.is-nav-open {
		background-color: var(--nf-mork-sort);
	}
}

@media (min-width: 1024px) {

	.site-header__drawer {
		display: none;
	}
}