/*
 * Site header (board #8) — reference: prototypes/h-dusk-coral.html
 * (.cc-header, .dk-menu-btn, #dk-nav). Tokens only; sizes in px are
 * component dimensions from the approved reference.
 *
 * Desktop: 78px bar, logo 122px, nav 13px with 27px gaps (18px <=1100px),
 * CTA pill 43px high (38px min + arrow line box), CTA label 12px (token 2xs).
 * Colours: nav-on-dark / nav-on-dark-mobile tokens (ADR-0004).
 * Mobile (<=800px): 70px bar, logo 108px, 44px round menu button,
 * dropdown panel under the bar, menu links fixed 17px (ADR-0004).
 */

/* ---------- Sticky bar ---------- */
html {
	scroll-padding-top: calc(78px + var(--wp-admin--admin-bar--height, 0px));
}

.cluedit-site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0);
	z-index: 20;
}

.cluedit-header {
	position: relative;
	box-sizing: border-box;
	gap: 26px;
	min-height: 78px;
	padding-block: 0;
	padding-inline: var(--cluedit-pad-wide);
	border-bottom:
		1px solid
		color-mix(in srgb, var(--wp--preset--color--surface) 6%, transparent);
	box-shadow:
		0 5px 30px
		color-mix(in srgb, var(--wp--preset--color--navy) 7%, transparent);
	font-family: var(--wp--preset--font-family--sans);
}

/* ---------- Logo ---------- */
.cluedit-header .cluedit-header__logo {
	flex: 0 1 auto;
	min-width: 0;
	margin: 0 auto 0 0;
	line-height: 0;
}

.cluedit-header .cluedit-header__logo img {
	width: 122px;
	max-width: 100%;
	height: auto;
}

/* ---------- Navigation (desktop) ---------- */
.cluedit-header .cluedit-primary-nav .wp-block-navigation__container {
	gap: 27px;
}

.cluedit-header .cluedit-primary-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--nav-on-dark);
	text-decoration: none;
}

/* ---------- Services submenu (ADR-0009): click-to-open ---------- */
.cluedit-header .cluedit-nav-services > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--nav-on-dark);
}

.cluedit-header .cluedit-nav-services .wp-block-navigation__submenu-icon {
	color: var(--wp--preset--color--nav-on-dark);
}

.cluedit-header .cluedit-primary-nav .wp-block-navigation__submenu-container {
	min-width: 270px;
	padding: 10px;
	border:
		1px solid
		color-mix(in srgb, var(--wp--preset--color--surface) 12%, transparent);
	border-radius: var(--wp--custom--radius--m);
	background: var(--wp--preset--color--header);
	box-shadow: 0 30px 40px -20px var(--wp--custom--color--header--panel-shadow);
	color: var(--wp--preset--color--nav-on-dark);
}

.cluedit-header .cluedit-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 9px 12px;
	border-radius: var(--wp--custom--radius--xs);
	white-space: nowrap;
	color: var(--wp--preset--color--nav-on-dark);
}

.cluedit-header .cluedit-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: color-mix(in srgb, var(--wp--preset--color--surface) 8%, transparent);
}

/* Closed submenu takes no space (core only hides it visually). */
.cluedit-header .cluedit-nav-services > button[aria-expanded="false"] ~ .wp-block-navigation__submenu-container,
.cluedit-header .cluedit-nav-services > button:not([aria-expanded]) ~ .wp-block-navigation__submenu-container {
	display: none;
}

/* No JavaScript: the click toggle can't work, so the submenu opens on hover
   and keyboard focus (html.cluedit-js is missing). */
html:not(.cluedit-js) .cluedit-header .cluedit-nav-services:is(:hover, :focus-within) > .wp-block-navigation__submenu-container {
	display: flex;
	visibility: visible;
	overflow: visible;
	width: auto;
	height: auto;
	opacity: 1;
}

/* ---------- Language link (ADR-0009): separated, same type ---------- */
.cluedit-header .cluedit-primary-nav .cluedit-lang-switch {
	padding-left: 27px;
	border-left:
		1px solid
		color-mix(in srgb, var(--wp--preset--color--surface) 20%, transparent);
}

/* ---------- CTA ---------- */
.cluedit-header .cluedit-header__cta {
	flex: none;
	gap: 0;
}

.cluedit-header .cluedit-header__cta .wp-block-button__link {
	gap: 9px;

	/* Reference box is 43px: 38px min-height plus the 18px arrow glyph line. */
	min-height: 43px;
	padding: 8px 17px;
	white-space: nowrap;
}

/* ---------- Menu button (revealed by header.js below 800px) ---------- */
.cluedit-menu-toggle {
	display: none;
}

.cluedit-menu-toggle .cluedit-icon {
	width: 24px;
	height: 24px;
	stroke-width: 2;
}

/* Menu -> X morph (ADR-0004): lines rotate about their own centres. */
.cluedit-menu-toggle__line {
	transform-box: fill-box;
	transform-origin: center;
	transition:
		transform 0.35s var(--cluedit-ease),
		opacity 0.2s var(--cluedit-ease);
}

.cluedit-menu-toggle[aria-expanded="true"] .cluedit-menu-toggle__line--top {
	transform: translateY(6px) rotate(45deg);
}

.cluedit-menu-toggle[aria-expanded="true"] .cluedit-menu-toggle__line--mid {
	opacity: 0;
}

.cluedit-menu-toggle[aria-expanded="true"] .cluedit-menu-toggle__line--bottom {
	transform: translateY(-6px) rotate(-45deg);
}

/* Arrow sized to the reference glyph (about 12px across, 2px stroke);
   the 24px icon box has built-in whitespace, hence the 9px gap. */
.cluedit-header .cluedit-header__cta .wp-block-button__link .cluedit-icon {
	width: 24px;
	height: 24px;
	margin-block: -3px;
	stroke-width: 2;
}

@media (max-width: 1100px) {

	.cluedit-header .cluedit-primary-nav .wp-block-navigation__container {
		gap: 18px;
	}

	.cluedit-header .cluedit-primary-nav .cluedit-lang-switch {
		padding-left: 18px;
	}
}

@media (max-width: 800px) {

	html {
		scroll-padding-top: 70px;
	}

	.cluedit-header {
		flex-wrap: wrap;
		gap: 15px;
		min-height: 70px;
	}

	.cluedit-header .cluedit-header__logo img {
		width: 108px;
	}

	.cluedit-header .cluedit-header__cta {
		order: 2;
	}

	/* No JavaScript: the menu stays visible as a wrapped row. */

	/* nav.: core repeats the block classes on the inner <ul>. */
	.cluedit-header nav.cluedit-primary-nav {
		flex: 1 0 100%;
		order: 4;
		padding-bottom: 12px;
	}

	.cluedit-header .cluedit-primary-nav .wp-block-navigation__container {
		flex-wrap: wrap;
		gap: 8px 18px;
	}

	/* With JavaScript: single row, menu becomes a dropdown panel. */
	.cluedit-js .cluedit-header {
		flex-wrap: nowrap;
	}

	.cluedit-js .cluedit-menu-toggle {
		display: grid;
		flex: none;
		order: 3;
		place-items: center;
		width: 44px;
		height: 44px;
		margin-left: -4px;
		padding: 0;
		border:
			1px solid
			color-mix(in srgb, var(--wp--preset--color--surface) 20%, transparent);
		border-radius: var(--wp--custom--radius--pill);
		background: transparent;
		color: var(--wp--preset--color--surface);
		cursor: pointer;
	}

	.cluedit-js .cluedit-menu-toggle + .cluedit-primary-nav {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		padding: 8px var(--cluedit-pad-wide) 28px;
		border-top:
			1px solid
			color-mix(in srgb, var(--wp--preset--color--surface) 10%, transparent);
		background: var(--wp--preset--color--header);
		box-shadow: 0 30px 40px -20px var(--wp--custom--color--header--panel-shadow);
		visibility: hidden;
		opacity: 0;
		transform: translateY(-8px);
		transition:
			opacity 0.3s var(--cluedit-ease),
			transform 0.3s var(--cluedit-ease),
			visibility 0s 0.3s;
	}

	.cluedit-menu-toggle[aria-expanded="true"] + .cluedit-primary-nav {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition:
			opacity 0.3s var(--cluedit-ease),
			transform 0.3s var(--cluedit-ease),
			visibility 0s;
	}

	.cluedit-js .cluedit-menu-toggle + .cluedit-primary-nav .wp-block-navigation__container {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}

	.cluedit-js .cluedit-menu-toggle + .cluedit-primary-nav .wp-block-navigation-item {
		width: 100%;
	}

	.cluedit-js .cluedit-menu-toggle + .cluedit-primary-nav .wp-block-navigation-item__content {
		display: block;
		width: 100%;
		padding: 14px 0;
		border-bottom:
			1px solid
			color-mix(in srgb, var(--wp--preset--color--surface) 8%, transparent);
		color: var(--wp--preset--color--nav-on-dark-mobile);

		/* ADR-0004: fixed 17px (token m, not fluid) at every width through 800px. */
		font-size: var(--wp--preset--font-size--m);
		line-height: 1.4;
	}

	/* In the mobile panel the Services submenu opens inline, indented. */
	.cluedit-js .cluedit-menu-toggle + .cluedit-primary-nav .cluedit-nav-services {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.cluedit-js .cluedit-menu-toggle + .cluedit-primary-nav .cluedit-nav-services > .wp-block-navigation-item__content {
		flex: 1 1 0;
		width: auto;
		text-align: left;
	}

	.cluedit-js .cluedit-menu-toggle + .cluedit-primary-nav .wp-block-navigation__submenu-container {
		flex: 0 0 100%;
		position: static;
		width: 100%;
		min-width: 0;
		padding: 0 0 0 16px;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.cluedit-js .cluedit-menu-toggle + .cluedit-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 12px 0;
		border-radius: 0;
		white-space: normal;
	}

	/* In the mobile panel the language link is an ordinary row. */
	.cluedit-header .cluedit-primary-nav .cluedit-lang-switch {
		padding-left: 0;
		border-left: 0;
	}

	.cluedit-js .cluedit-menu-toggle + .cluedit-primary-nav .current-menu-item > .wp-block-navigation-item__content {
		color: var(--wp--preset--color--accent);
	}
}

@media (max-width: 600px) {

	/* The admin bar is not fixed below 600px. */
	.cluedit-site-header {
		top: 0;
	}
}