/**
 * Blanky Nordic — headers.
 *
 * parts/header.html         .nordic-masthead  (default)
 * parts/header-compact.html .nordic-compact
 *
 * Both share the tools (search, dark toggle) and the navigation styling.
 *
 * @package Blanky_Nordic
 * @since   3.7
 */

/* --- Tools ----------------------------------------------------------------- */

.nordic-tools {
	gap: var(--wp--preset--spacing--10);
}

.nordic-search .wp-block-search__button,
.nordic-dark-toggle {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: var(--wp--preset--color--foreground);
	cursor: pointer;
	height: 2.75rem;
	justify-content: center;
	margin: 0;
	padding: 0;
	transition: background var(--nordic-ease);
	width: 2.75rem;
}

.nordic-search .wp-block-search__button svg {
	fill: currentColor;
	height: 1.25rem;
	min-height: 0;
	min-width: 0;
	width: 1.25rem;
}

@media (hover: hover) {

	.nordic-search .wp-block-search__button:hover,
	.nordic-dark-toggle:hover {
		background: var(--wp--preset--color--surface);
	}
}

/* Hidden when the active variation says so (Midnight is dark already). */
.nordic-dark-toggle {
	display: var(--wp--custom--nordic--dark-toggle-display, inline-flex);
}

.nordic-dark-toggle svg {
	height: 1.125rem;
	width: 1.125rem;
}

.nordic-dark-toggle__sun,
.is-dark .nordic-dark-toggle__moon {
	display: none;
}

.is-dark .nordic-dark-toggle__sun {
	display: block;
}

/* The expanded search field sits on the page colour, not core's white. */
.nordic-search .wp-block-search__input {
	background: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--muted);
	color: var(--wp--preset--color--foreground);
}

.nordic-search .wp-block-search__inside-wrapper {
	border: 0;
	padding: 0;
}

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

.nordic-nav {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/*
 * Underline that grows from the left. Gold on hover (decoration); navy on the
 * current page, because that line tells the reader where they are and gold on
 * white is 2.46:1, under the 3:1 a non-text indicator needs.
 */
.nordic-nav .wp-block-navigation-item__content {
	background-image: linear-gradient(var(--nordic-line), var(--nordic-line));
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 2px;
	padding-block: 0.5em;
	text-decoration: none;
	transition: background-size 250ms ease;
}

.nordic-nav .current-menu-item > .wp-block-navigation-item__content,
.nordic-nav .wp-block-navigation-item__content[aria-current="page"] {
	background-image: linear-gradient(var(--wp--preset--color--foreground), var(--wp--preset--color--foreground));
	background-size: 100% 2px;
}

@media (hover: hover) {

	.nordic-nav .wp-block-navigation-item__content:hover {
		background-size: 100% 2px;
	}
}

/*
 * The mobile overlay follows the page colours. Core paints it white with
 * black text through `.wp-block-navigation:not(.has-background) …` (0-4-0),
 * which would stay white in the dark variations; this selector is 0-5-0.
 */
.wp-block-template-part .wp-block-navigation.nordic-nav .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
}

/* --- A. Masthead ------------------------------------------------------------ */

.nordic-masthead__strip {
	border-bottom: var(--nordic-divider);
	padding-block: var(--wp--preset--spacing--10);
}

.nordic-masthead__tagline {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
	margin: 0;
}

.nordic-masthead__brand {
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	text-align: center;
}

.nordic-masthead__logo {
	margin-inline: auto;
}

.nordic-wordmark {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 700;
	line-height: 1.1;
	margin: 0;
}

.nordic-wordmark a {
	color: inherit;
	text-decoration: none;
}

.nordic-masthead .nordic-wordmark {
	font-size: var(--wp--preset--font-size--giant);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.nordic-masthead__bar {
	border-bottom: var(--nordic-divider);
	border-top: 3px double var(--wp--preset--color--border);
	padding-block: var(--wp--preset--spacing--20);
}

@media (width < 600px) {

	.nordic-masthead__tagline {
		display: none;
	}

	/* Tagline hidden: keep the tools on the right. */
	.nordic-masthead__strip .nordic-tools {
		margin-inline-start: auto;
	}

	.nordic-masthead .nordic-wordmark {
		font-size: var(--wp--preset--font-size--xxxl);
	}

	.nordic-masthead__bar .nordic-nav {
		justify-content: flex-end;
	}
}

/* --- B. Compact ------------------------------------------------------------- */

.nordic-compact {
	border-bottom: var(--nordic-divider);
	padding-block: var(--wp--preset--spacing--30);
}

/* Three columns so the navigation stays centred whatever the brand width. */
.nordic-compact__inner {
	align-items: center;
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: 1fr auto 1fr;
}

.nordic-compact__inner > * {
	margin-block: 0;
}

.nordic-wordmark--compact {
	font-size: var(--wp--preset--font-size--xxl);
	font-style: italic;
	white-space: nowrap;
}

.nordic-wordmark--compact a {
	background-image: linear-gradient(var(--nordic-line), var(--nordic-line));
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 1.5em 2px;
	padding-bottom: 0.2em;
}

@media (width < 600px) {

	.nordic-compact__inner {
		grid-template-columns: 1fr auto auto;
	}
}