/* Trime 2026 main-site header — fixed pill nav that tracks the theme of the
   container currently under the viewport top. Mirrors the variable pattern
   used by `slides-header.css` so the look-and-feel is consistent. */

/* Body background tracks the active container theme too. Otherwise any gap
   above the first container (admin bar offset, top margin on <main>) shows
   the default body bg and looks broken against the themed header. The class
   is applied by `assets/js/main-header.js`. */
body.is-theme-white { background-color: var(--wp--preset--color--base); }
body.is-theme-beige { background-color: var(--wp--preset--color--accent-2); }
body.is-theme-green { background-color: var(--wp--preset--color--accent-3); }
body.is-theme-dark-green { background-color: var(--wp--preset--color--contrast); }
body[class*="is-theme-"] {
	transition: background-color 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* Admin-bar offset (matches slides-header). Admin bar is 46px on mobile,
   32px on desktop. */
body.admin-bar .trime2026-header {
	top: calc(40px + 46px);
}
@media (min-width: 783px) {
	body.admin-bar .trime2026-header {
		top: calc(40px + 32px);
	}
}

.trime2026-header {
	/* Theme variables — overridden by `.is-theme-*` variants below. Defaults
	   match the white container theme. */
	--trime-text: var(--wp--preset--color--contrast);
	--trime-pill-bg: var(--wp--preset--color--accent-2);
	--trime-pill-border: transparent;
	--trime-home-bg: var(--wp--preset--color--base);
	--trime-home-text: var(--wp--preset--color--contrast);
	--trime-action-bg: var(--wp--preset--color--base);
	--trime-action-border: rgba(30, 66, 38, 0.15);
	--trime-action-text: var(--wp--preset--color--contrast);
	--trime-logo-color: var(--wp--preset--color--accent-3);

	position: fixed;
	top: 40px;
	left: 0;
	right: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	/* Mirrors the container's horizontal padding so the logo and action buttons
	   line up with container content edges. Keep in sync with
	   `blocks/container/style.scss`. */
	padding: 0 var(--wp--preset--spacing--50);
	pointer-events: none;
	color: var(--trime-text);
	transition: color 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* Theme variants — text/pill bg follow the container the user is scrolled to.
   Mirrors `.trime2026-slides-header.is-theme-*`. */
.trime2026-header.is-theme-white {
	--trime-text: var(--wp--preset--color--contrast);
	--trime-pill-bg: var(--wp--preset--color--accent-2);
	--trime-home-bg: var(--wp--preset--color--base);
	--trime-home-text: var(--wp--preset--color--contrast);
	--trime-action-bg: var(--wp--preset--color--base);
	--trime-action-border: rgba(30, 66, 38, 0.15);
	--trime-action-text: var(--wp--preset--color--contrast);
	--trime-logo-color: var(--wp--preset--color--accent-3);
}

.trime2026-header.is-theme-beige {
	--trime-text: var(--wp--preset--color--contrast);
	--trime-pill-bg: var(--wp--preset--color--base);
	--trime-home-bg: var(--wp--preset--color--accent-2);
	--trime-home-text: var(--wp--preset--color--contrast);
	--trime-action-bg: var(--wp--preset--color--base);
	--trime-action-border: rgba(30, 66, 38, 0.15);
	--trime-action-text: var(--wp--preset--color--contrast);
	--trime-logo-color: var(--wp--preset--color--accent-3);
}

.trime2026-header.is-theme-green {
	--trime-text: var(--wp--preset--color--base);
	--trime-pill-bg: var(--wp--preset--color--contrast);
	--trime-home-bg: var(--wp--preset--color--accent-3);
	--trime-home-text: var(--wp--preset--color--base);
	--trime-action-bg: var(--wp--preset--color--contrast);
	--trime-action-border: transparent;
	--trime-action-text: var(--wp--preset--color--base);
	--trime-logo-color: var(--wp--preset--color--base);
}

.trime2026-header.is-theme-dark-green {
	--trime-text: var(--wp--preset--color--base);
	--trime-pill-bg: var(--wp--preset--color--accent-3);
	--trime-home-bg: var(--wp--preset--color--contrast);
	--trime-home-text: var(--wp--preset--color--base);
	--trime-action-bg: var(--wp--preset--color--accent-3);
	--trime-action-border: transparent;
	--trime-action-text: var(--wp--preset--color--base);
	--trime-logo-color: var(--wp--preset--color--base);
}

/* Logo --------------------------------------------------------------- */

.trime2026-header__logo {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	color: var(--trime-logo-color);
	transition: color 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.trime2026-header__logo .custom-logo-link {
	position: relative;
	display: inline-block;
	line-height: 0;
}

.trime2026-header__logo img,
.trime2026-header__logo svg {
	display: block;
	height: 24px;
	width: auto;
}

.trime2026-header__wordmark {
	font-family: var(--wp--preset--font-family--bricolage-grotesque), sans-serif;
	font-weight: 500;
	font-size: 18px;
	letter-spacing: -0.02em;
	line-height: 1;
	color: inherit;
}

/* Logo crossfade — mirrors the slides-header pattern in block-overrides.css.
   The primary logo fades out and the `.custom-logo-variant` (injected by
   `trime2026_inject_logo_variant`) fades in on dark container themes. */
.trime2026-header .custom-logo-link .custom-logo,
.trime2026-header .custom-logo-link .custom-logo-variant {
	transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	object-fit: contain;
}

.trime2026-header .custom-logo-link .custom-logo-variant {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0;
	transition-delay: 0.15s;
}

.trime2026-header .custom-logo-link .custom-logo {
	transition-delay: 0s;
}

.trime2026-header.is-theme-green .custom-logo-link .custom-logo,
.trime2026-header.is-theme-dark-green .custom-logo-link .custom-logo {
	opacity: 0;
	transition-delay: 0s;
}

.trime2026-header.is-theme-green .custom-logo-link .custom-logo-variant,
.trime2026-header.is-theme-dark-green .custom-logo-link .custom-logo-variant {
	opacity: 1;
	transition-delay: 0.15s;
}

/* Central pill nav --------------------------------------------------- */

.trime2026-header__nav {
	pointer-events: auto;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 2px;
	transition: opacity 0.25s ease;
}

/* Single shared pill background. One layer sits behind both the nav row and
   the dropdown so they read as one continuous surface — neither the nav nor
   the submenu carries its own background, so there's no seam. At rest it
   covers just the row; when a dropdown opens, JS sets `--trime-dropdown-h`
   to the panel's height and the layer extends down to cover it. The colour
   reads `--trime-pill-bg`, so scroll-driven theme switching still cross-fades
   the whole pill (row + open dropdown) at once. */
.trime2026-header__nav::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: calc(-1 * var(--trime-dropdown-h, 0px));
	background-color: var(--trime-pill-bg);
	border: 1px solid var(--trime-pill-border);
	border-radius: 22px;
	transition:
		bottom 0.34s cubic-bezier(0.22, 1, 0.36, 1),
		background-color 0.4s cubic-bezier(0.645, 0.045, 0.355, 1),
		border-color 0.4s cubic-bezier(0.645, 0.045, 0.355, 1),
		box-shadow 0.3s ease;
}

/* Sliding "active page" indicator. JS injects this element, measures the
   active or hovered item, and writes the position/size into CSS variables.
   Sits behind the nav items (z-index: 0); items get z-index: 1 so their
   text reads above the pill. */
.trime2026-header__pill-indicator {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--pill-w, 0);
	height: var(--pill-h, 0);
	background-color: var(--trime-home-bg);
	border-radius: 40px;
	pointer-events: none;
	transform: translate(var(--pill-x, 0), var(--pill-y, 0));
	transition:
		transform 0.45s cubic-bezier(0.65, 0.05, 0.36, 1),
		width 0.45s cubic-bezier(0.65, 0.05, 0.36, 1),
		height 0.45s cubic-bezier(0.65, 0.05, 0.36, 1),
		background-color 0.4s cubic-bezier(0.645, 0.045, 0.355, 1),
		opacity 0.2s ease;
	z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
	.trime2026-header__pill-indicator {
		transition-duration: 0.01ms;
	}
}

/* Mobile state — JS toggles `.is-mobile` on the header when the centered pill
   would collide with the logo or actions. `display: none` (rather than just
   fading) is intentional: the breakpoint is measured once on load, so we no
   longer need the nav rect available after that. It also means closing the
   drawer snaps the desktop layout away instantly — fading would briefly show
   the pill in its desktop position before going transparent. */
.trime2026-header.is-mobile .trime2026-header__nav {
	display: none;
}

/* Hamburger toggle: hidden on desktop, shown alongside other action buttons
   when the header is in its mobile state. Placeholder styling — the design
   pass will refine the icon, sizing and motion. Selectors chain both classes
   to outrank the generic `.trime2026-header__action` rule that defines the
   default action button layout. */
.trime2026-header__action.trime2026-header__menu-toggle {
	display: none;
}

.trime2026-header.is-mobile
	.trime2026-header__action.trime2026-header__menu-toggle {
	display: inline-flex;
}

.trime2026-header__action-icon.trime2026-header__menu-icon-close {
	display: none;
}

.trime2026-header.is-menu-open
	.trime2026-header__action-icon.trime2026-header__menu-icon-open {
	display: none;
}

.trime2026-header.is-menu-open
	.trime2026-header__action-icon.trime2026-header__menu-icon-close {
	display: block;
}

/* Mobile drawer: when the toggle is open, repurpose the existing pill nav as
   a vertical panel below the header. Reusing the same DOM avoids duplicating
   `wp_nav_menu()` markup. The active-page indicator is sized for horizontal
   layout so it's hidden here — design pass can reintroduce a vertical one. */
.trime2026-header.is-mobile.is-menu-open .trime2026-header__nav {
	display: flex;
	top: calc(100% + 12px);
	left: 50%;
	transform: translateX(-50%);
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
	padding: 8px;
	min-width: 240px;
	max-width: calc(100vw - var(--wp--preset--spacing--40) * 2);
	border-radius: 22px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

.trime2026-header.is-mobile.is-menu-open .trime2026-header__menu {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 0;
}

.trime2026-header.is-mobile.is-menu-open .trime2026-header__menu a {
	padding: 10px 16px;
	border-radius: 16px;
}

/* In the drawer, dropdowns expand inline instead of floating as a card. */
.trime2026-header.is-mobile.is-menu-open .sub-menu {
	position: static;
	height: auto;
	overflow: visible;
	transform: none;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	min-width: 0;
	margin: 0;
	padding: 0 0 4px 12px;
	background: transparent;
	color: inherit;
	border-radius: 0;
	box-shadow: none;
}

/* The slide-in stagger is a desktop affordance — drawer items show outright. */
.trime2026-header.is-mobile.is-menu-open .sub-menu li {
	opacity: 1;
	transform: none;
}

.trime2026-header.is-mobile.is-menu-open .sub-menu::before {
	display: none;
}

.trime2026-header.is-mobile.is-menu-open .sub-menu a {
	font-size: 16px;
	color: var(--trime-text);
}

.trime2026-header.is-mobile.is-menu-open .sub-menu .trime2026-header__see-all {
	margin-top: 4px;
	padding-top: 10px;
	border-top-color: color-mix(in srgb, currentColor 25%, transparent);
}

.trime2026-header.is-mobile.is-menu-open .sub-menu .trime2026-header__see-all a {
	padding: 8px 16px;
}

.trime2026-header.is-mobile.is-menu-open .trime2026-header__home {
	align-self: flex-start;
}

.trime2026-header.is-mobile .trime2026-header__pill-indicator {
	display: none;
}

.trime2026-header__home {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	background-color: var(--trime-home-bg);
	color: var(--trime-home-text);
	border-radius: 40px;
	text-decoration: none;
	transition:
		background-color 0.4s cubic-bezier(0.645, 0.045, 0.355, 1),
		color 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* When JS has injected the sliding indicator, the indicator paints the
   home button's background. Without JS, the home button keeps its own
   background so the active-page affordance still shows. */
.trime2026-header__nav.has-pill-indicator .trime2026-header__home {
	background-color: transparent;
}

.trime2026-header__home-icon {
	width: 16px;
	height: 16px;
	display: block;
}

.trime2026-header__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 0;
}

/* Top-level items only. `position: static` (not relative) lets each
   submenu anchor to the nav so the open dropdown spans the full nav width;
   z-index still applies because these are flex children. */
.trime2026-header__menu > li {
	position: static;
	z-index: 1;
	margin: 0;
	padding: 0;
}

.trime2026-header__menu a {
	display: inline-flex;
	align-items: center;
	padding: 8px 10px;
	color: var(--trime-text);
	font-family: var(--wp--preset--font-family--bricolage-grotesque), sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.5;
	text-decoration: none;
	/* Keep labels on a single line — multi-word items wrapping inside the
	   pill hides the overflow from the JS overlap detector, so the nav has
	   to stay intrinsically wide enough to actually trigger the switch. */
	white-space: nowrap;
	transition: color 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* Dropdown panel ----------------------------------------------------- */

/* The nav works as a mask. Each submenu is anchored to the nav (full width,
   flush under the row) but collapsed to `height: 0` with its overflow clipped,
   so at rest only the pill row shows. Hovering / focusing a parent opens the
   mask — assets/js/main-header.js animates the height to the content's height
   (and the pill squares its bottom corners via `is-dropdown-open`) while the
   links inside slide in from the right and fade, staggered. The submenu
   inherits the nav's themed background + text, so the open dropdown is just
   the pill, grown. */
.trime2026-header__menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 0;
	overflow: hidden;
	box-sizing: border-box;
	margin: 0;
	/* Horizontal padding only — vertical padding would set a border-box floor
	   that stops the mask collapsing to 0. The first/last rows carry the top
	   and bottom breathing room instead (in flow, so scrollHeight stays right). */
	padding: 0 12px;
	list-style: none;
	color: var(--trime-text);
	pointer-events: none;
	transition: height 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Raise the open item above its siblings so the panel paints over them. */
.trime2026-header__menu > li:hover,
.trime2026-header__menu > li:focus-within {
	z-index: 2;
}

.trime2026-header__menu > li:hover > .sub-menu,
.trime2026-header__menu > li:focus-within > .sub-menu {
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.trime2026-header__nav::before,
	.trime2026-header__menu .sub-menu,
	.trime2026-header__menu .sub-menu li {
		transition-duration: 0.01ms;
	}
}

/* Open state: the shared background layer gains the panel shadow. The layer
   itself is one rounded rectangle that just grows downward, so there are no
   corners to square. Scoped away from the mobile drawer, which lays submenus
   out inline. `is-dropdown-open` is toggled by assets/js/main-header.js. */
.trime2026-header:not(.is-mobile) .trime2026-header__nav.is-dropdown-open::before {
	box-shadow: 0 30px 60px rgba(20, 28, 22, 0.18);
}

.trime2026-header__menu .sub-menu li {
	position: relative;
	margin: 0;
	padding: 0;
	/* Each row starts shifted right and faded; the reveal + nth-child delays
	   below ease them into place one after another once the parent opens.
	   Animating the <li> (not the <a>) keeps the link's hover state free. */
	opacity: 0;
	transform: translateX(20px);
	transition:
		opacity 0.32s ease,
		transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.trime2026-header__menu > li:hover > .sub-menu > li,
.trime2026-header__menu > li:focus-within > .sub-menu > li {
	opacity: 1;
	transform: translateX(0);
}

/* Stagger — each row trails the one above it. */
.trime2026-header__menu .sub-menu > li:nth-child(1) { transition-delay: 0.04s; }
.trime2026-header__menu .sub-menu > li:nth-child(2) { transition-delay: 0.08s; }
.trime2026-header__menu .sub-menu > li:nth-child(3) { transition-delay: 0.12s; }
.trime2026-header__menu .sub-menu > li:nth-child(4) { transition-delay: 0.16s; }
.trime2026-header__menu .sub-menu > li:nth-child(5) { transition-delay: 0.20s; }
.trime2026-header__menu .sub-menu > li:nth-child(6) { transition-delay: 0.24s; }
.trime2026-header__menu .sub-menu > li:nth-child(7) { transition-delay: 0.28s; }
.trime2026-header__menu .sub-menu > li:nth-child(8) { transition-delay: 0.32s; }

/* Edge spacing — top gap from the row seam, bottom gap before the pill end. */
.trime2026-header__menu .sub-menu > li:first-child {
	padding-top: 14px;
}

.trime2026-header__menu .sub-menu > li:last-child {
	padding-bottom: 14px;
}

.trime2026-header__menu .sub-menu a {
	display: inline-block;
	padding: 8px 12px;
	color: var(--trime-text);
	font-size: 18px;
	line-height: 1.4;
	font-weight: 500;
	white-space: nowrap;
	transition: opacity 0.2s ease;
}


/* Divider + "Kaikki <parent>" call-to-action that closes each dropdown. */
.trime2026-header__menu .sub-menu .trime2026-header__see-all {
	margin-top: 8px;
	padding-top: 16px;
	border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}

.trime2026-header__menu .sub-menu .trime2026-header__see-all a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 8px 12px;
	font-size: 16px;
}

.trime2026-header__see-all-arrow {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	display: block;
}

/* Action buttons (search / contact) ---------------------------------- */

.trime2026-header__actions {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: 4px;
}

.trime2026-header__action {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 20px;
	background-color: var(--trime-action-bg);
	color: var(--trime-action-text);
	border: 1px solid var(--trime-action-border);
	border-radius: 22px;
	font-family: var(--wp--preset--font-family--bricolage-grotesque), sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.5;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color 0.4s cubic-bezier(0.645, 0.045, 0.355, 1),
		border-color 0.4s cubic-bezier(0.645, 0.045, 0.355, 1),
		color 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.trime2026-header__action:hover,
.trime2026-header__action:focus-visible {
	opacity: 0.85;
}

.trime2026-header__action-icon {
	width: 20px;
	height: 20px;
	display: block;
}

/* Responsive --------------------------------------------------------- */

@media (max-width: 900px) {
	.trime2026-header__action-label {
		display: none;
	}
	.trime2026-header__contact .trime2026-header__action-label {
		display: inline;
	}
	.trime2026-header__search {
		padding: 10px 12px;
	}
}

/* Matches the container's mobile padding switch in `blocks/container/style.scss`. */
@media (max-width: 781px) {
	.trime2026-header {
		padding: 0 20px;
	}
}

@media (max-width: 600px) {
	.trime2026-header {
		gap: var(--wp--preset--spacing--30);
	}
}