/**
 * Pattern: nordnatur-com/site-header.
 * Mirrors nordnatur-tech/site-header rules 1–3 (sticky top, site-logo
 * baseline, nav rhythm + colour pair). Scoped to .ncom-site-header so
 * it does not leak onto unrelated TT5 header chrome.
 */

.ncom-site-header {
	position: sticky;
	top: 0;
	z-index: 10;
}

.ncom-site-header__logo {
	width: 220px;
}
.ncom-site-header__logo img {
	display: block;
	width: 100%;
	height: auto;
}

.ncom-site-header__nav .wp-block-navigation__container {
	gap: 28px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.95rem;
}

/* Top-level nav-item colours (resting + hover). Scoped to direct children
   of the nav container so submenu items don't inherit the white hover. */
.ncom-site-header__nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--base);
}
.ncom-site-header__nav > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--base-3);
	text-decoration: none;
}

/* Submenu surface: opaque light panel sitting below the sticky header.
   Without an explicit background the submenu inherits transparent and
   shows the page through it — invisible white-on-white links. Light
   panel pairs with the site's default text colour (contrast-2 from
   theme.json) so resting links match body-text appearance. */
.ncom-site-header .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--base-3);
	border: 1px solid var(--wp--custom--border--soft);
	border-radius: var(--wp--custom--radius--default);
	padding: var(--wp--preset--spacing--20) 0;
}
.ncom-site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast-2);
	white-space: nowrap;
}
.ncom-site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent-2);
	text-decoration: none;
}

/* Search-icon button rendered inside the navigation: match the link
   resting + hover colours so the magnifier reads with the same weight
   as adjacent labels. */
.ncom-site-header__nav .wp-block-search__button {
	background: transparent;
	border: 0;
	padding: 0;
	color: var(--wp--preset--color--base);
}
.ncom-site-header__nav .wp-block-search__button:hover {
	color: var(--wp--preset--color--base-3);
}
.ncom-site-header__nav .wp-block-search__button svg {
	fill: currentColor;
}