/*
 * GPIPL site header and primary navigation (Phase 4, global).
 *
 * One navigation markup, two layouts:
 * - Below the desktop breakpoint: menu button + full-height panel; sections are accordions.
 * - At the breakpoint and above: horizontal bar; panels open below the header
 *   (full-width mega panels for Products/Solutions, compact dropdowns otherwise).
 *
 * No-JS: html has no .js class, so the menu is shown inline on small screens and panels
 * open on hover/keyboard focus on large screens. With JS, panels follow aria-expanded.
 * The desktop breakpoint appears as 80em below (it is measured, see docs/DESIGN-SYSTEM.md).
 */
@layer components {
	/* ============================================================ Header bar */
	.site-header {
		--header-h: 4rem;
		position: sticky;
		top: var(--wp-admin--admin-bar--height, 0px);
		z-index: var(--z-header);
		background: var(--color-bg);
		border-bottom: 1px solid transparent;
		transition: border-color var(--dur-base) var(--ease-out);
	}
	/* The admin bar scrolls away on small phones, so the header sticks to the very top. */
	@media (max-width: 600px) {
		.admin-bar .site-header { top: 0; }
	}
	/* Scrolled: a hairline appears. Height never changes, so nothing below moves. */
	.site-header.is-scrolled { border-bottom-color: var(--color-line); }

	.site-header__inner {
		display: flex;
		align-items: center;
		gap: var(--space-s);
		min-height: var(--header-h);
	}

	/* ============================================================ Logo slot */
	.site-logo {
		display: inline-flex;
		align-items: center;
		gap: var(--space-xs);
		min-height: var(--tap);
		margin-right: auto;
		color: var(--color-heading);
		text-decoration: none;
		flex-shrink: 0;
	}
	.site-logo:hover { color: var(--color-heading); text-decoration: none; }
	.site-logo__mark {
		font-size: 1.375rem;
		font-weight: var(--wght-bold);
		font-stretch: 125%;
		letter-spacing: -0.01em;
		line-height: 1;
	}
	.site-logo__name {
		display: none;
		max-width: 12rem;
		padding-left: var(--space-xs);
		border-left: var(--border);
		font-size: var(--step--2);
		font-weight: var(--wght-medium);
		line-height: 1.25;
		color: var(--color-text-muted);
	}
	@media (min-width: 30em) {
		.site-logo__name { display: block; }
	}
	.site-logo__image { width: auto; height: 2.5rem; }

	/* ============================================================ Actions */
	.site-header__actions {
		display: flex;
		align-items: center;
		gap: var(--space-xs);
		flex-shrink: 0;
	}
	.site-header__cta { display: none; }
	@media (min-width: 48em) {
		.site-header__cta { display: inline-flex; }
	}

	.site-header__menu-button {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2xs);
		min-width: var(--tap);
		min-height: var(--tap);
		padding: 0 var(--space-xs);
		border: 1px solid var(--color-control-border);
		border-radius: var(--radius-s);
		color: var(--color-text);
		font-weight: var(--wght-semibold);
		font-stretch: var(--wdth-ui);
	}
	.site-header__menu-button:hover { border-color: var(--color-text); }
	html:not(.js) .site-header__menu-button { display: none; }

	/* Three lines that become a cross when open. */
	.site-header__menu-icon {
		position: relative;
		display: block;
		width: 18px;
		height: 12px;
	}
	.site-header__menu-icon span,
	.site-header__menu-icon::before,
	.site-header__menu-icon::after {
		content: "";
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background: currentColor;
		transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
	}
	.site-header__menu-icon::before { top: 0; }
	.site-header__menu-icon span { top: 5px; }
	.site-header__menu-icon::after { top: 10px; }
	[aria-expanded="true"] > .site-header__menu-icon::before { transform: translateY(5px) rotate(45deg); }
	[aria-expanded="true"] > .site-header__menu-icon span { opacity: 0; }
	[aria-expanded="true"] > .site-header__menu-icon::after { transform: translateY(-5px) rotate(-45deg); }

	/* ============================================================ Navigation: small screens */
	.site-nav__list { margin: 0; padding: 0; }
	.site-nav__item { border-bottom: var(--border); }

	.site-nav__link,
	.site-nav__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-2xs);
		width: 100%;
		min-height: 3.25rem;
		padding: var(--space-2xs) 0;
		color: var(--color-heading);
		font-size: var(--step-1);
		font-weight: var(--wght-semibold);
		font-stretch: 108%;
		line-height: 1.2;
		text-align: left;
		text-decoration: none;
	}
	.site-nav__link:hover,
	.site-nav__toggle:hover { color: var(--color-link); }
	.site-nav__link[aria-current="page"],
	.is-current-section > .site-nav__toggle { color: var(--color-link); }

	.site-nav__chevron { transition: transform var(--dur-base) var(--ease-out); }
	.site-nav__toggle[aria-expanded="true"] .site-nav__chevron { transform: rotate(180deg); }

	.site-nav__panel { padding-bottom: var(--space-s); }
	.js .site-nav__toggle[aria-expanded="false"] + .site-nav__panel { display: none; }

	.site-nav__groups { display: grid; gap: var(--space-m); }
	.site-nav__group-title {
		margin-bottom: var(--space-3xs);
		font-size: var(--step--1);
		font-weight: var(--wght-semibold);
		color: var(--color-text-muted);
	}
	.site-nav__group-link { color: var(--color-heading); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--tap); font-size: var(--step-0); }
	.site-nav__group-link:hover { color: var(--color-link); text-decoration: underline; }

	.site-nav__sublist { margin: 0; padding: 0; }
	.site-nav__sublink {
		display: flex;
		align-items: center;
		min-height: var(--tap);
		padding-block: 0.35rem;
		color: var(--color-text);
		line-height: 1.3;
		text-decoration: none;
	}
	.site-nav__sublink:hover { color: var(--color-link); text-decoration: underline; text-underline-offset: 0.2em; }
	.site-nav__sublink[aria-current="page"],
	.site-nav__group-link[aria-current="page"] { color: var(--color-link); font-weight: var(--wght-semibold); }

	.site-nav__all { margin-top: var(--space-xs); }
	.site-nav__all-link {
		display: inline-flex;
		align-items: center;
		min-height: var(--tap);
		color: var(--color-link);
		font-weight: var(--wght-semibold);
		font-stretch: var(--wdth-ui);
		text-decoration: underline;
		text-underline-offset: 0.22em;
	}

	.site-nav__mobile-footer {
		display: grid;
		gap: var(--space-2xs);
		padding-top: var(--space-l);
	}
	.site-nav__contact {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2xs);
		min-height: var(--tap);
		color: var(--color-text);
		text-decoration: none;
	}
	.site-nav__contact:hover { color: var(--color-link); text-decoration: underline; }
	.site-nav__contact .icon { color: var(--color-accent); }

	/* With JS: a panel under the header, opened by the menu button. */
	@media (max-width: 79.99em) {
		.js .site-nav {
			display: none;
			position: fixed;
			inset: var(--nav-top, var(--header-h)) 0 0 0;
			z-index: var(--z-header);
			overflow-y: auto;
			overscroll-behavior: contain;
			padding: var(--space-2xs) var(--gutter) var(--space-2xl);
			border-top: var(--border);
			background: var(--color-bg);
		}
		.js .site-nav.is-open {
			display: block;
			animation: gpipl-menu-in var(--dur-base) var(--ease-out);
		}
		html.menu-open { overflow: hidden; }

		/* No JS: the menu is part of the page, below the logo. */
		html:not(.js) .site-header { position: relative; }
		html:not(.js) .site-header__inner { flex-wrap: wrap; }
		html:not(.js) .site-nav { order: 3; flex-basis: 100%; padding-bottom: var(--space-m); }
	}

	@keyframes gpipl-menu-in {
		from { opacity: 0; transform: translateY(-6px); }
		to { opacity: 1; transform: none; }
	}

	/* ============================================================ Navigation: desktop */
	@media (min-width: 80em) {
		.site-header { --header-h: 4.5rem; }
		.site-header__menu-button { display: none; }
		.site-nav__item--mobile-only,
		.site-nav__mobile-footer { display: none; }

		.site-logo { margin-right: 0; }
		.site-nav { margin-inline: auto var(--space-xs); }
		.site-nav__list { display: flex; align-items: stretch; }
		.site-nav__item { position: relative; border: 0; }
		.site-nav__item.has-mega { position: static; } /* mega panels span the header width */

		.site-nav__link,
		.site-nav__toggle {
			position: relative;
			width: auto;
			min-height: var(--header-h);
			padding: 0 0.625rem;
			justify-content: center;
			gap: 0.25rem;
			color: var(--color-text);
			font-size: var(--step--1);
			font-weight: var(--wght-medium);
			font-stretch: var(--wdth-ui);
			white-space: nowrap;
		}
		.site-nav__chevron { width: 0.95em; height: 0.95em; }

		/* Section indicator: a 2px rule on the header's bottom edge. */
		.site-nav__link::after,
		.site-nav__toggle::after {
			content: "";
			position: absolute;
			left: 0.625rem;
			right: 0.625rem;
			bottom: -1px;
			height: 2px;
			background: transparent;
			transition: background-color var(--dur-fast) var(--ease-out);
		}
		.site-nav__link:hover::after,
		.site-nav__toggle:hover::after { background: var(--color-line-strong); }
		.site-nav__link[aria-current="page"]::after,
		.is-current-section > .site-nav__toggle::after,
		.site-nav__toggle[aria-expanded="true"]::after { background: var(--color-accent); }
		.site-nav__link[aria-current="page"],
		.is-current-section > .site-nav__toggle,
		.site-nav__toggle[aria-expanded="true"] { color: var(--color-heading); }

		/* Panels: hidden until opened. */
		.site-nav__panel {
			display: none;
			position: absolute;
			top: 100%;
			z-index: var(--z-overlay);
			padding: 0;
			background: var(--color-bg);
			border-bottom: var(--border);
		}
		.js .site-nav__toggle[aria-expanded="true"] + .site-nav__panel { display: block; }
		html:not(.js) .has-panel:is(:hover, :focus-within) > .site-nav__panel { display: block; }

		@starting-style {
			.site-nav__toggle[aria-expanded="true"] + .site-nav__panel { opacity: 0; transform: translateY(-4px); }
		}
		.site-nav__panel { transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }

		/* Mega panel: full width, content aligned to the page container. */
		.has-mega > .site-nav__panel { left: 0; right: 0; border-top: var(--border); }
		.has-mega .site-nav__panel-inner {
			display: grid;
			grid-template-columns: minmax(0, 1fr) auto;
			gap: var(--space-xl);
			width: min(100% - 2 * var(--gutter), var(--container));
			margin-inline: auto;
			padding-block: var(--space-l) var(--space-xl);
		}
		.site-nav__groups--products { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--space-l) var(--space-xl); }
		.site-nav__groups--groups { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--space-l) var(--space-2xl); }
		.site-nav__group-link { font-weight: var(--wght-semibold); font-stretch: 106%; }
		.site-nav__sublink { font-size: var(--step--1); color: var(--color-text-muted); }
		.has-mega .site-nav__all { margin: 0; padding-left: var(--space-l); border-left: var(--border); align-self: start; }

		/* Compact dropdown under its item. */
		.has-dropdown > .site-nav__panel {
			left: 0;
			min-width: 17rem;
			border: var(--border);
			border-top: 0;
			border-radius: 0 0 var(--radius-m) var(--radius-m);
		}
		.has-dropdown .site-nav__panel-inner { padding: var(--space-xs) var(--space-m) var(--space-s); }
		/* The last dropdowns open leftwards so they never leave the viewport. */
		.site-nav__item.has-dropdown:nth-last-child(-n + 3) > .site-nav__panel { left: auto; right: 0; }
	}

	/* ============================================================ Forced colours */
	@media (forced-colors: active) {
		.site-header { border-bottom: 1px solid CanvasText; }
		.site-nav__panel { border: 1px solid CanvasText; }
		.site-nav__link[aria-current="page"]::after,
		.is-current-section > .site-nav__toggle::after,
		.site-nav__toggle[aria-expanded="true"]::after { background: Highlight; forced-color-adjust: none; }
		.site-header__menu-icon span,
		.site-header__menu-icon::before,
		.site-header__menu-icon::after { background: ButtonText; forced-color-adjust: none; }
	}
}