/* =========================================================================
   4. Header & navigation
   ========================================================================= */

/* --- Header bar --------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--paper);
	border-bottom: 1px solid var(--line);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	max-width: var(--container);
	height: var(--header-h);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

/* --- Brand (logo or site name) ------------------------------------------ */

.site-brand .custom-logo-link {
	display: block;
	line-height: 0;
}

/* Wide logo (≈10.5:1): set by height, width follows */
.site-brand img {
	width: auto;
	height: 1.375rem; /* ≈ 230 px wide */
}

@media (max-width: 860px) {
	.site-brand img {
		height: 1.125rem; /* ≈ 190 px wide, leaves room for the burger */
	}
}

.site-brand__text {
	font-family: var(--font-serif);
	font-size: 1.5rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* --- Primary menu (desktop) --------------------------------------------- */

/* Items aligned on the text baseline, so that the language button lines up
   with the links even though its box is not the same height */
.site-nav .menu {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
}

.site-nav .menu > li {
	position: relative;
}

.site-nav a {
	font-size: var(--size-s);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Animated underline: a 1px line drawn left to right on hover.
   The language switcher (.site-lang) is excluded. */
.site-nav .menu > li:not(.site-lang) > a {
	padding-bottom: 0.3em;
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
	transition: background-size 0.35s ease;
}

.site-nav .menu > li:not(.site-lang) > a:hover,
.site-nav .menu > li:not(.site-lang) > a:focus-visible {
	text-decoration: none; /* cancels the global a:hover underline */
	background-size: 100% 1px;
}

/* Current page: line always visible (as specific as the rule above) */
.site-nav .menu > li.current-menu-item:not(.site-lang) > a,
.site-nav .menu > li.current-menu-ancestor:not(.site-lang) > a {
	background-size: 100% 1px;
}

/* No animation for visitors who disable motion in their system settings */
@media (prefers-reduced-motion: reduce) {
	.site-nav .menu > li > a {
		transition: none;
	}
}

/* Dropdown sub-menus */
.site-nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 12rem;
	margin: 0;
	padding: var(--space-1) 0;
	list-style: none;
	background: var(--paper);
	border: 1px solid var(--line);
}

.site-nav .sub-menu a {
	display: block;
	padding: var(--space-1) var(--space-2);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.site-nav li:hover > .sub-menu,
.site-nav li:focus-within > .sub-menu {
	display: block;
}

/* --- Language switcher (GTranslate) --------------------------------------
   Last item of the primary menu, injected in functions.php. */

/* The item keeps the menu's font size so that its text sits on the same
   baseline as the other links; the small size is set on its contents. */
.site-lang {
	position: relative;
}

/* "EN ▾": same look and animated underline as the menu links */
.site-lang__toggle {
	display: inline-flex;
	align-items: baseline;
	gap: 0.45em;
	padding: 0;
	font: inherit;
	font-size: var(--size-s);
	font-weight: 600;
	line-height: normal; /* box hugs the text, like an inline link */
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink);
	background: none;
	border: 0;
	cursor: pointer;
}

/* The underline is drawn under the code only, exactly like the links */
.site-lang__code {
	padding-bottom: 0.3em;
	background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
	transition: background-size 0.35s ease;
}

.site-lang__toggle:hover .site-lang__code,
.site-lang__toggle:focus-visible .site-lang__code,
.site-lang.is-open .site-lang__code {
	background-size: 100% 1px;
}

.site-lang__toggle[hidden] {
	display: none;
}

/* Thin chevron, turns up when the list is open */
.site-lang__arrow {
	width: 0.4em;
	height: 0.4em;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
	transition: transform 0.2s ease;
}

.site-lang.is-open .site-lang__arrow {
	transform: translateY(0.1em) rotate(225deg);
}

/* Dropdown list, like the sub-menus */
.site-lang__list {
	display: none;
	position: absolute;
	top: calc(100% + var(--space-1));
	right: 0;
	z-index: 20;
	min-width: 11rem;
	margin: 0;
	padding: var(--space-1) 0;
	font-size: var(--size-s);
	list-style: none;
	background: var(--paper);
	border: 1px solid var(--line);
}

.site-lang.is-open .site-lang__list {
	display: block;
}

.site-lang__option {
	display: block;
	width: 100%;
	padding: 0.4rem var(--space-2);
	font: inherit;
	text-align: left;
	color: var(--mute);
	background: none;
	border: 0;
	cursor: pointer;
}

.site-lang__option:hover,
.site-lang__option:focus-visible {
	color: var(--ink);
	background: var(--stone);
}

.site-lang__option.is-active {
	color: var(--ink);
}

.site-lang__option.is-active::after {
	content: " ✓";
}

/* GTranslate's own select: only shown if main.js could not take over */
.site-lang.is-ready .site-lang__widget {
	display: none;
}

.site-lang select {
	padding: 0.25rem 0.5rem;
	font: inherit;
	font-size: var(--size-s);
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--line);
	cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
	.site-lang__code,
	.site-lang__arrow {
		transition: none;
	}
}

/* --- Burger button (mobile) --------------------------------------------- */

/* 44 px square: comfortable touch target */
.nav-toggle {
	display: none;
	position: relative;
	width: 2.75rem;
	height: 2.75rem;
	margin-right: -0.625rem; /* bars aligned with the page edge */
	border: 0;
	background: none;
	cursor: pointer;
}

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
	content: "";
	position: absolute;
	left: 0.625rem;
	width: 1.5rem;
	height: 1.5px;
	background: var(--ink);
	transition: transform 0.2s, background 0.2s;
}

.nav-toggle__bar {
	top: 50%;
}

/* The outer bars are positioned inside the middle one: no extra offset */
.nav-toggle__bar::before,
.nav-toggle__bar::after {
	left: 0;
}

.nav-toggle__bar::before {
	top: -0.4rem;
}

.nav-toggle__bar::after {
	top: 0.4rem;
}

/* Burger → cross when the menu is open */
.nav-open .nav-toggle__bar {
	background: transparent;
}

.nav-open .nav-toggle__bar::before {
	transform: translateY(0.4rem) rotate(45deg);
}

.nav-open .nav-toggle__bar::after {
	transform: translateY(-0.4rem) rotate(-45deg);
}

/* --- Mobile menu (full-screen panel) ------------------------------------ */

@media (max-width: 860px) {
	.nav-toggle {
		display: block;
	}

	/* Panel hung under the header (not at a fixed distance from the top of
	   the screen), so it never covers the logo or the burger, even when the
	   WordPress admin bar pushes the header down. Fades and slides in. */
	.site-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		height: calc(100vh - var(--header-h));
		height: calc(100dvh - var(--header-h));
		padding: var(--space-4) var(--gutter) var(--space-5);
		overflow: auto;
		visibility: hidden;
		opacity: 0;
		transform: translateY(-0.5rem);
		background: var(--paper);
		transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
	}

	.nav-open .site-nav {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: opacity 0.25s ease, transform 0.25s ease;
	}

	.nav-open {
		overflow: hidden;
		/* lock page scroll behind the panel */
	}

	.site-nav .menu {
		flex-direction: column;
		align-items: center;
		gap: var(--space-2);
	}

	/* Same type as on desktop (sans, uppercase, spaced), one step larger
	   for the finger. */
	.site-nav a {
		font-size: var(--size-m);
	}

	.site-nav .sub-menu {
		display: block;
		position: static;
		padding: 0 0 0 var(--space-2);
		border: 0;
	}

	.site-nav .sub-menu a {
		padding: var(--space-1) 0;
		font-size: var(--size-m);
	}

	.site-lang {
		margin-top: var(--space-4);
	}

	/* Mobile menu: all languages listed directly, no dropdown */
	.site-lang.is-ready .site-lang__toggle {
		display: none;
	}

	.site-lang.is-ready .site-lang__list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--space-1) var(--space-3);
		position: static;
		min-width: 0;
		padding: 0;
		background: none;
		border: 0;
	}

	.site-lang__option {
		padding: 0;
		font-size: var(--size-m);
	}

	.site-lang__option:hover,
	.site-lang__option:focus-visible {
		background: none;
	}
}

@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
	.site-nav,
	.nav-open .site-nav {
		transform: none;
		transition: none;
	}
}