/* 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);
	padding: 0 var(--wp--preset--spacing--60);
	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;
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 2px;
	background-color: var(--trime-pill-bg);
	border: 1px solid var(--trime-pill-border);
	border-radius: 22px;
	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);
}

.trime2026-header__home {
	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);
}

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

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

/* Top-level items only — submenus get their own positioning rules below.  */
.trime2026-header__menu > li {
	position: relative;
	margin: 0;
	padding: 0;
}

.trime2026-header__menu a {
	display: inline-flex;
	align-items: center;
	padding: 8px 0;
	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;
	transition: color 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.trime2026-header__menu a:hover,
.trime2026-header__menu a:focus-visible {
	opacity: 0.7;
}

/* Submenu placeholder — design will be refined later. Keeps it from
   breaking layout if a multi-level menu is assigned. */
.trime2026-header__menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	min-width: 200px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background-color: var(--trime-pill-bg);
	border-radius: 16px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
	opacity: 0;
	pointer-events: none;
	transition:
		opacity 0.2s ease,
		transform 0.2s ease,
		background-color 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.trime2026-header__menu > li:hover > .sub-menu,
.trime2026-header__menu > li:focus-within > .sub-menu {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
	pointer-events: auto;
}

.trime2026-header__menu .sub-menu a {
	display: block;
	padding: 8px 12px;
	white-space: nowrap;
	border-radius: 9999px;
}

/* 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 {
		padding: 0 var(--wp--preset--spacing--40);
	}
	.trime2026-header__action-label {
		display: none;
	}
	.trime2026-header__contact .trime2026-header__action-label {
		display: inline;
	}
	.trime2026-header__search {
		padding: 10px 12px;
	}
}

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