/**
 * Header: top bar, main bar, mega-menus, mobile drawer.
 * Ports the original Header.tsx behavior: sticky, shrink on scroll,
 * hide on scroll down / show on scroll up.
 */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in oklab, var(--background) 60%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid transparent;
	transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.site-header.is-scrolled {
	background: color-mix(in oklab, var(--background) 85%, transparent);
	border-bottom-color: var(--border);
	box-shadow: 0 1px 2px oklch(0 0 0 / 5%);
}

.site-header.is-hidden {
	transform: translateY(-100%);
}

/* ---------- Top bar ---------- */

.topbar {
	display: none;
	border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
}

@media (min-width: 1200px) {
	.topbar { display: block; }
}

.topbar-inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	height: 2.5rem;
	max-width: 1280px;
}

.topbar-ctas {
	display: flex;
	gap: 0.5rem;
}

.topbar-btn {
	padding: 0.3rem 0.75rem;
	font-size: 0.7rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.topbar-btn-solid {
	background: var(--foreground);
	color: var(--background);
}

.topbar-btn-solid:hover {
	background: var(--accent-lime);
	color: var(--blueprint);
}

.topbar-btn-outline {
	border: 1px solid var(--accent-lime);
	color: color-mix(in oklab, var(--accent-lime) 70%, var(--blueprint));
}

.topbar-btn-outline:hover {
	background: var(--accent-lime);
	color: var(--blueprint);
}

.topbar-social {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	color: color-mix(in oklab, var(--foreground) 80%, transparent);
}

.topbar-social a {
	padding: 0.35rem;
	display: inline-flex;
	transition: color 0.15s ease;
}

.topbar-social a:hover {
	color: var(--accent-lime);
}

.topbar-sep {
	width: 1px;
	height: 1rem;
	background: var(--border);
	margin-inline: 0.25rem;
}

.topbar-badges {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 0.75rem;
}

.topbar-badges img {
	height: 2rem;
	width: auto;
	opacity: 0.8;
	transition: opacity 0.15s ease;
}

.topbar-badges img:hover {
	opacity: 1;
}

/* ---------- Main bar ---------- */

.mainbar {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 0.75rem;
	height: 7rem;
	max-width: 1280px;
	transition: height 0.3s ease;
}

.is-scrolled .mainbar {
	height: 6rem;
}

@media (min-width: 1200px) {
	.mainbar {
		/* Logo column is content-sized so it always gets its natural width; the
		   nav takes what is left and centres inside it. With `1fr auto 1fr` the
		   nav (auto) claimed whatever it wanted and the logo, on a leftover
		   fraction, was squeezed until it distorted. */
		grid-template-columns: auto minmax(0, 1fr) auto;
		gap: 1.5rem;
		height: 6rem;
	}
	.is-scrolled .mainbar {
		height: 4rem;
	}
}

.site-logo {
	justify-self: center;
	line-height: 0;
}

@media (min-width: 1200px) {
	.site-logo { justify-self: start; }
}

.site-logo img {
	height: 6.5rem;
	width: auto;
	transition: height 0.3s ease;
	/* The nav is wide enough at some widths to squeeze this column below the
	   logo's natural width. Without this the global `img { max-width: 100% }`
	   caps the width while the fixed height stays put, and the logo renders
	   stretched. `contain` makes it scale down proportionally instead. */
	object-fit: contain;
	object-position: center;
}

.is-scrolled .site-logo img {
	height: 5.5rem;
}

@media (min-width: 1200px) {
	.site-logo img { height: 5.5rem; }
	.is-scrolled .site-logo img { height: 3.5rem; }
}

.site-nav {
	display: none;
}

@media (min-width: 1200px) {
	.site-nav { display: block; justify-self: center; }
}

.nav-menu {
	display: flex;
	align-items: center;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.7rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
}

/* The roomier spacing only kicks in once the screen can actually afford it.
   With nine items the nav had been eating the logo's column at mid widths. */
@media (min-width: 1440px) {
	.nav-menu { gap: 1.5rem; font-size: 0.76rem; }
}

.nav-menu > li > a {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	color: var(--foreground);
	transition: color 0.15s ease;
	padding-block: 0.5rem;
}

.nav-menu > li > a:hover,
.nav-item.is-open > a {
	color: var(--accent-lime-text, oklch(0.55 0.15 118));
}

.nav-item .chevron {
	transition: transform 0.15s ease;
}

.nav-item.is-open .chevron {
	transform: rotate(180deg);
}

.mainbar-end {
	display: none;
}

@media (min-width: 1200px) {
	.mainbar-end { display: flex; justify-self: end; }
}

/* ---------- Language toggle ---------- */

.lang-toggle {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-mono);
	font-size: 0.72rem;
}

.lang-option {
	color: var(--muted-foreground);
	transition: color 0.15s ease;
}

.lang-option:hover {
	color: var(--foreground);
}

.lang-option.is-current {
	font-weight: 700;
	color: var(--foreground);
}

.lang-sep {
	color: var(--border);
}

/* ---------- Mega menu ---------- */

.nav-item.has-mega {
	position: relative;
}

.mega-panel {
	display: none;
	position: absolute;
	top: calc(100% + 0.75rem);
	inset-inline-start: 50%;
	transform: translateX(50%);
	background: var(--background);
	border: 1px solid var(--border);
	box-shadow: 0 24px 48px -12px oklch(0 0 0 / 18%);
	z-index: 60;
	text-transform: none;
	letter-spacing: normal;
	white-space: normal;
}

html[dir="ltr"] .mega-panel {
	transform: translateX(-50%);
}

.nav-item.is-open .mega-panel {
	display: grid;
}

.mega-eng { width: 520px; grid-template-columns: 1fr; }
.mega-tech { width: 680px; grid-template-columns: 1.4fr 1fr; }

/* Solutions: same footprint as the other dropdowns. It lists only the two
   departments - the 16 products live on the department pages, which keeps the
   header light instead of turning it into a catalogue. */
.mega-solutions { width: 520px; grid-template-columns: 1fr; }

/* The first nav item is the rightmost one in RTL (leftmost in LTR), so a panel
   centred on it runs off the edge of the screen. Anchor whichever item happens
   to be first to its own start edge and let the panel open inward. Keyed on
   position rather than on a menu name, so reordering the nav cannot reintroduce
   the clipping. */
.nav-item.has-mega:first-child .mega-panel,
html[dir="ltr"] .nav-item.has-mega:first-child .mega-panel {
	inset-inline-start: 0;
	transform: none;
}

.mega-main {
	padding: 1.5rem;
}

.mega-aside {
	background: color-mix(in oklab, var(--muted) 40%, transparent);
	border-inline-start: 1px solid var(--border);
	padding: 1.5rem;
}

.mega-label {
	font-family: var(--font-mono);
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--muted-foreground);
	margin-bottom: 1rem;
}

.mega-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.25rem 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mega-list {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mega-grid a,
.mega-list a {
	display: block;
	padding: 0.5rem;
	margin-inline: -0.5rem;
	transition: background-color 0.15s ease;
}

.mega-grid a:hover,
.mega-list a:hover {
	background: color-mix(in oklab, var(--muted) 60%, transparent);
}

.mega-item-title {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--foreground);
}

a:hover > .mega-item-title {
	color: oklch(0.55 0.15 118);
}

.mega-item-desc {
	display: block;
	font-size: 0.72rem;
	color: var(--muted-foreground);
	margin-top: 0.1rem;
}

.mega-footer {
	margin-top: 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--border);
}

.mega-all {
	font-family: var(--font-mono);
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: oklch(0.55 0.15 118);
	transition: opacity 0.15s ease;
}

.mega-all:hover {
	opacity: 0.7;
}

/* ---------- Mobile ---------- */

.nav-toggle {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	background: none;
	border: 0;
	padding: 0.5rem;
	cursor: pointer;
}

@media (min-width: 1200px) {
	.nav-toggle { display: none; }
}

.nav-toggle-bar {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--foreground);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
	opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

.mobile-drawer {
	border-top: 1px solid var(--border);
	background: var(--background);
	max-height: calc(100vh - 8rem);
	overflow-y: auto;
}

@media (min-width: 1200px) {
	.mobile-drawer { display: none !important; }
}

.mobile-menu {
	list-style: none;
	margin: 0;
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.mobile-menu a {
	color: var(--foreground);
}

.mobile-acc-toggle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--foreground);
	cursor: pointer;
	text-transform: inherit;
	letter-spacing: inherit;
}

.mobile-acc-toggle[aria-expanded="true"] .chevron {
	transform: rotate(180deg);
}

.mobile-acc-panel {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin-top: 0.6rem;
	padding-inline-start: 0.75rem;
	border-inline-start: 1px solid var(--border);
	text-transform: none;
	letter-spacing: normal;
}

.mobile-acc-panel a {
	color: var(--muted-foreground);
	font-size: 0.85rem;
}

.mobile-acc-panel a.mobile-acc-res {
	color: oklch(0.55 0.15 118);
}

.mobile-accented {
	color: oklch(0.55 0.15 118) !important;
}

.mobile-bold {
	font-weight: 700;
}

.mobile-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 1.5rem;
	border-top: 1px solid var(--border);
}

.mobile-social {
	display: flex;
	gap: 0.5rem;
	color: color-mix(in oklab, var(--foreground) 80%, transparent);
}

.mobile-social a {
	padding: 0.4rem;
	display: inline-flex;
}