/* -----------------------------------------------------------
   Site header: bar, primary nav, search, language, mobile drawer,
   search overlay, language overlay.
   ----------------------------------------------------------- */

:root {
	--site-header-height: 72px;
}

/* A11y: icon-only buttons meet WCAG 2.2 AA 44×44 touch target */
.search-toggle,
.lang-toggle,
.site-header__menu-toggle,
.site-header__drawer-close,
.site-lang-overlay__close,
.site-search-overlay__close {
	min-width: 44px;
	min-height: 44px;
}

/* A11y: visible focus indicator. Header buttons sit on dark bg (white ring),
   drawer/overlay buttons on light bg (brand blue ring). */
.site-header__inner :focus-visible,
.site-header__inner button:focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--base);
}

.site-header__drawer :focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--base);
}

.site-lang-overlay :focus-visible,
.site-search-overlay :focus-visible {
	outline: 2px solid var(--wp--preset--color--logo);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--base);
}

/* A11y: honour reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
	.search-input,
	.search-toggle,
	.lang-toggle,
	.site-header__menu-toggle,
	.site-header__drawer-close,
	.site-lang-overlay__close,
	.site-search-overlay__close,
	.primary-menu a,
	.drawer-menu a,
	.lang-menu a,
	.site-lang-overlay a {
		transition: none !important;
	}
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--white);
}

/* WP admin bar: fixed at top on ≥783px, position: absolute on smaller screens.
   We only need to offset sticky/fixed elements on the fixed case. */
@media (min-width: 783px) {
	body.admin-bar .site-header {
		top: 32px;
	}

	body.admin-bar .site-search-overlay,
	body.admin-bar .site-lang-overlay {
		inset-block-start: calc(var(--site-header-height) + 32px);
	}

	body.admin-bar .site-header__drawer {
		inset-block-start: 32px;
	}
}

@media (max-width: 782px) {
	body.admin-bar .site-search-overlay,
	body.admin-bar .site-lang-overlay {
		inset-block-start: calc(var(--site-header-height) + 46px);
	}

	body.admin-bar .site-header__drawer {
		inset-block-start: 46px;
	}
}

.site-header__inner {
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	min-height: 72px;
}

.site-header__logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.site-header__logo img {
	height: 42px;
	width: auto;
}

.site-header__nav {
	flex: 1;
	display: flex;
	justify-content: flex-end;
}

.primary-menu {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center;
}

.primary-menu a {
	color: rgb(255 255 255 / 0.8);
	text-decoration: none;
	font-weight: 600;
	font-family: var(--wp--preset--font-family--heading);
	padding: 0.5rem 0.75rem;
	border-radius: var(--wp--custom--radius--base);
	transition: color 0.15s ease;
	display: inline-block;
}

.primary-menu a:hover,
.primary-menu .current-menu-item > a,
.primary-menu .current-menu-ancestor > a {
	color: var(--wp--preset--color--white);
}

.primary-menu .menu-item {
	position: relative;
}

.primary-menu .sub-menu {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--dark);
	list-style: none;
	padding: var(--wp--preset--spacing--20) 0;
	margin: 0;
	min-width: 240px;
	border-radius: var(--wp--custom--radius--base);
	box-shadow: var(--wp--custom--shadow--lg);
	display: none;
}

.primary-menu .menu-item:hover > .sub-menu,
.primary-menu .menu-item:focus-within > .sub-menu {
	display: block;
}

.primary-menu .sub-menu a {
	color: var(--wp--preset--color--dark);
	padding: 0.5rem 1.25rem;
	display: block;
	border-radius: 0;
}

.primary-menu .sub-menu a:hover {
	color: var(--wp--preset--color--logo);
	background: var(--wp--preset--color--neutral-50);
}

/* Level-3 items render inline within the parent panel, not as a flyout. */
.primary-menu .sub-menu .sub-menu {
	position: static;
	display: block;
	min-width: 0;
	padding: 0;
	margin: 0;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}

.primary-menu .sub-menu .sub-menu a {
	padding-inline-start: 2.25rem;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--neutral-600);
}

.primary-menu .sub-menu .sub-menu a:hover,
.primary-menu .sub-menu .sub-menu .current-menu-item > a {
	color: var(--wp--preset--color--logo);
	background: var(--wp--preset--color--neutral-50);
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding-inline-start: var(--wp--preset--spacing--30);
	border-inline-start: 1px solid rgb(255 255 255 / 0.2);
	flex-shrink: 0;
}

.site-header__search {
	display: flex;
	align-items: center;
}

.search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	color: rgb(255 255 255 / 0.7);
	padding: 0.5rem;
	cursor: pointer;
	border-radius: var(--wp--custom--radius--full);
	transition: color 0.15s ease;
}

.search-toggle:hover {
	color: var(--wp--preset--color--white);
}

.search-input {
	width: 0;
	max-width: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	opacity: 0;
	transition: width 0.2s ease, max-width 0.2s ease, opacity 0.2s ease, padding 0.2s ease;
	outline: none;
}

.search-input::placeholder {
	color: rgb(255 255 255 / 0.5);
}

.site-header__search.is-open .search-input {
	width: 180px;
	max-width: 180px;
	padding: 0.25rem 0.5rem;
	opacity: 1;
	border-bottom: 1px solid rgb(255 255 255 / 0.3);
}

.site-header__lang {
	flex-shrink: 0;
	position: relative;
}

.lang-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	background: transparent;
	border: 0;
	color: rgb(255 255 255 / 0.8);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--base);
	cursor: pointer;
	border-radius: var(--wp--custom--radius--full);
	transition: color 0.15s ease;
}

.lang-toggle:hover,
.site-header__lang:focus-within .lang-toggle {
	color: var(--wp--preset--color--white);
}

.lang-toggle__icon {
	flex-shrink: 0;
}

.lang-menu {
	position: absolute;
	top: calc(100% + 0.25rem);
	inset-inline-end: 0;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--dark);
	list-style: none;
	padding: var(--wp--preset--spacing--20) 0;
	margin: 0;
	min-width: 160px;
	border-radius: var(--wp--custom--radius--base);
	box-shadow: var(--wp--custom--shadow--lg);
	display: none;
	z-index: 101;
}

@media (min-width: 1024px) {
	.site-header__lang.is-open .lang-menu {
		display: block;
	}
}

.lang-menu__item a {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	color: var(--wp--preset--color--dark);
	text-decoration: none;
	font-weight: 600;
}

.lang-menu__item a:hover {
	background: var(--wp--preset--color--neutral-50);
}

.lang-menu__check {
	display: inline-block;
	width: 1rem;
	color: var(--wp--preset--color--logo);
	font-weight: 700;
}

/* -----------------------------------------------------------
   Mobile menu toggle + drawer
   ----------------------------------------------------------- */
.site-header__menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--white);
	padding: 0.5rem;
	cursor: pointer;
	border-radius: var(--wp--custom--radius--base);
}

.site-header__menu-toggle:hover {
	background: rgb(255 255 255 / 0.08);
}

.site-header__drawer {
	position: fixed;
	inset-block: 0;
	inset-inline-end: 0;
	inset-inline-start: auto;
	width: 100%;
	max-width: 420px;
	z-index: 200;
	background: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--white);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: -10px 0 30px rgb(0 0 0 / 0.25);
}

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

.site-header__drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-bottom: 1px solid rgb(255 255 255 / 0.15);
	flex-shrink: 0;
}

.site-header__drawer-logo img {
	height: 36px;
	width: auto;
}

.site-header__drawer-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	color: rgb(255 255 255 / 0.9);
	padding: 0.5rem;
	cursor: pointer;
	border-radius: var(--wp--custom--radius--base);
	transition: background 0.15s ease, color 0.15s ease;
}

.site-header__drawer-close:hover {
	background: rgb(255 255 255 / 0.1);
	color: var(--wp--preset--color--white);
}

.site-header__drawer-body {
	flex: 1;
	overflow-y: auto;
	padding: var(--wp--preset--spacing--30);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.drawer-menu,
.drawer-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.drawer-menu > .menu-item > a {
	display: block;
	padding: 1rem 0 0.5rem;
	color: rgb(255 255 255 / 0.6);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--sm);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition: color 0.15s ease;
}

.drawer-menu > .menu-item > a[href="#"] {
	cursor: default;
}

.drawer-menu .sub-menu {
	padding: 0 0 0.5rem;
}

.drawer-menu .sub-menu a {
	display: block;
	padding: 0.5rem 0;
	color: var(--wp--preset--color--white);
	text-decoration: none;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--base);
	transition: color 0.15s ease;
}

.drawer-menu .sub-menu .sub-menu {
	margin-inline-start: var(--wp--preset--spacing--30);
	border-inline-start: 2px solid rgb(255 255 255 / 0.15);
	padding-inline-start: var(--wp--preset--spacing--20);
}

.drawer-menu .sub-menu .sub-menu a {
	font-size: var(--wp--preset--font-size--sm);
	color: rgb(255 255 255 / 0.7);
}

.drawer-menu > .menu-item > a:hover,
.drawer-menu > .menu-item > a:focus {
	color: var(--wp--preset--color--white);
}

.drawer-menu .sub-menu a:hover,
.drawer-menu .sub-menu a:focus {
	color: rgb(255 255 255 / 0.7);
}

.site-header__drawer-lang {
	border-top: 1px solid rgb(255 255 255 / 0.15);
	padding-top: var(--wp--preset--spacing--30);
}

.site-header__drawer-lang-label {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--sm);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgb(255 255 255 / 0.6);
	font-weight: 700;
}

.site-header__drawer-lang ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-header__drawer-lang a {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0;
	color: var(--wp--preset--color--white);
	text-decoration: none;
	font-weight: 600;
}

.site-header__drawer-lang .is-current a {
	color: var(--wp--preset--color--white);
}

.drawer-lang-check {
	display: inline-block;
	width: 1.25rem;
	color: rgb(255 255 255 / 0.8);
	font-weight: 700;
}

/* Body scroll lock when drawer is open */
body.is-drawer-open {
	overflow: hidden;
}

/* -----------------------------------------------------------
   Mobile search overlay (below header, blurred backdrop)
   ----------------------------------------------------------- */
.site-search-overlay {
	position: fixed;
	inset-block: var(--site-header-height) 0;
	inset-inline: 0;
	z-index: 90;
	background: rgb(16 24 40 / 0.35);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	padding: var(--wp--preset--spacing--30);
}

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

.site-search-overlay__form {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--dark);
	padding: 0.75rem 1rem;
	border-radius: var(--wp--custom--radius--full);
	box-shadow: var(--wp--custom--shadow--lg);
}

.site-search-overlay__form > svg {
	color: var(--wp--preset--color--logo);
	flex-shrink: 0;
}

.site-search-overlay__form input {
	flex: 1;
	border: 0;
	background: transparent;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--dark);
	outline: none;
	min-width: 0;
}

.site-search-overlay__form input::placeholder {
	color: var(--wp--preset--color--neutral-600);
}

.site-search-overlay__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--neutral-600);
	padding: 0.25rem;
	cursor: pointer;
	border-radius: var(--wp--custom--radius--full);
	flex-shrink: 0;
}

.site-search-overlay__close:hover {
	color: var(--wp--preset--color--dark);
}

body.is-search-overlay-open,
body.is-lang-overlay-open {
	overflow: hidden;
}

/* -----------------------------------------------------------
   Mobile language overlay
   ----------------------------------------------------------- */
.site-lang-overlay {
	position: fixed;
	inset-block: var(--site-header-height) 0;
	inset-inline: 0;
	z-index: 90;
	background: rgb(16 24 40 / 0.35);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	padding: var(--wp--preset--spacing--30);
}

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

.site-lang-overlay__panel {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--dark);
	padding: var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--base);
	box-shadow: var(--wp--custom--shadow--lg);
}

.site-lang-overlay__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--wp--preset--spacing--20);
}

.site-lang-overlay__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	color: var(--wp--preset--color--neutral-600);
}

.site-lang-overlay__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--neutral-600);
	padding: 0.25rem;
	cursor: pointer;
	border-radius: var(--wp--custom--radius--full);
}

.site-lang-overlay__close:hover {
	color: var(--wp--preset--color--dark);
}

.site-lang-overlay ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-lang-overlay a {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 0;
	color: var(--wp--preset--color--dark);
	text-decoration: none;
	font-weight: 600;
}

.site-lang-overlay .is-current a {
	color: var(--wp--preset--color--logo);
}

.site-lang-overlay__check {
	display: inline-block;
	width: 1.25rem;
	color: var(--wp--preset--color--logo);
	font-weight: 700;
}

/* -----------------------------------------------------------
   Mobile breakpoint: switch desktop nav for drawer/overlay UI
   ----------------------------------------------------------- */
@media (max-width: 1023.98px) {
	.site-header__inner {
		gap: var(--wp--preset--spacing--20);
		padding-inline: var(--wp--preset--spacing--20);
	}

	.site-header__logo img {
		height: 32px;
	}

	.site-header__nav {
		display: none;
	}

	.site-header__menu-toggle {
		display: inline-flex;
	}

	.site-header__actions {
		margin-inline-start: auto;
		border-inline-start: 0;
		padding-inline-start: 0;
		gap: 0;
	}

	.lang-toggle__label {
		display: none;
	}

	.lang-toggle {
		padding: 0.5rem;
	}

	/* On mobile, the inline expand is replaced by the overlay. */
	.site-header__search .search-input {
		display: none;
	}
}

@media (min-width: 1024px) {
	.site-search-overlay,
	.site-lang-overlay {
		display: none !important;
	}

	/* Scrolled state on desktop: fold the inline nav into a menu toggle that
	   opens the side drawer. Search + language stay accessible in the bar. */
	.site-header.is-scrolled .site-header__nav {
		display: none;
	}

	.site-header.is-scrolled .site-header__menu-toggle {
		display: inline-flex;
	}

	.site-header.is-scrolled .site-header__actions {
		margin-inline-start: auto;
	}
}