/**
 * Site header styles.
 *
 * The header is theme chrome rather than block content, so it is the one global
 * stylesheet besides style.css (a11y helpers). BEM only, prefixed with the block
 * name; mobile-first with min-width overrides.
 *
 * Layout follows the Techivo header mockup (Figma node 5006:6686), rebuilt on
 * live WordPress data: menu location menu-1, logo / email / slogan from ACF.
 */

/*--------------------------------------------------------------
# Root and tokens
--------------------------------------------------------------*/

.sws-header {
	--sws-header-main: var(--wp--preset--color--main, #3e66f3);

	/*
	 * Darker accent for text on light surfaces. The brand blue scores 4.2:1 on the
	 * 10% tinted pill, below the 4.5:1 required by docs/accessibility.md; this shade
	 * reaches 4.6:1 and is visually indistinguishable. Fills keep --sws-header-main.
	 */
	--sws-header-main-strong: #3a5fe8;
	--sws-header-title: var(--wp--preset--color--title, #1c1c25);
	--sws-header-body: var(--wp--preset--color--body, #797e88);
	--sws-header-white: var(--wp--preset--color--white, #fff);
	--sws-header-line: rgb(28 28 37 / 8%);
	--sws-header-soft: rgb(62 102 243 / 10%);
	--sws-header-topbar-height: 45px;
	--sws-header-bar-height: 72px;
	--sws-header-container: 1380px;
	--sws-header-dropdown-gap: 10px;
	--sws-header-dropdown-close-delay: 100ms;

	position: sticky;
	top: 0;
	z-index: 100;
	font-size: 1rem;
	line-height: 1.4;
}

/*
 * Translucent backdrop lives on a pseudo-element on purpose: backdrop-filter
 * turns its element into the containing block for position: fixed descendants,
 * which would break the off-canvas panel and its overlay.
 */
.sws-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgb(255 255 255 / 72%);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	backdrop-filter: blur(14px) saturate(1.4);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

	.sws-header::before {
		background: rgb(255 255 255 / 96%);
	}
}

/* Stuck state, toggled by js/navigation.js through the sentinel below. */
.sws-header--scrolled::before {
	background: rgb(255 255 255 / 85%);
	box-shadow: 0 6px 24px rgb(28 28 37 / 8%);
}

/* Zero-height scroll marker rendered right before the header. */
.sws-header__sentinel {
	height: 1px;
	margin-bottom: -1px;
}

.sws-header__container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	max-width: var(--sws-header-container);
	margin: 0 auto;
	padding-inline: clamp(16px, 4vw, 40px);
}

/*--------------------------------------------------------------
# Top bar (ACF: header_slogan)
--------------------------------------------------------------*/

.sws-header__topbar {
	display: none;
	background: var(--sws-header-title);
	color: var(--sws-header-white);
}

.sws-header__topbar .sws-header__container {
	min-height: var(--sws-header-topbar-height);
	flex-wrap: nowrap;
	justify-content: space-between;
	gap: 24px;
}

.sws-header__slogan {
	margin: 0;
	overflow: hidden;
	font-size: 0.875rem;
	font-weight: 500;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Social links
--------------------------------------------- */

.sws-header__social {
	display: flex;
	align-items: center;
	gap: 26px;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sws-header__social-item {
	margin: 0;
}

.sws-header__social-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--sws-header-white);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.sws-header__social-link:hover,
.sws-header__social-link:focus-visible {
	opacity: 0.7;
}

.sws-header__social-icon {
	flex: 0 0 auto;
}

/* Panel copy: dark type on the white off-canvas surface. */
.sws-header__social--panel {
	gap: 20px;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--sws-header-line);
}

.sws-header__social--panel .sws-header__social-link {
	color: var(--sws-header-title);
}

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

.sws-header__bar .sws-header__container {
	min-height: var(--sws-header-bar-height);
	justify-content: space-between;
	border-bottom: 1px solid var(--sws-header-line);
}

/* Logo
--------------------------------------------- */

.sws-header__logo {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	text-decoration: none;
	color: var(--sws-header-title);
}

/*
 * Layout stays on the wrapper: an image optimizer may swap <img> for <picture>,
 * so the image itself is normalized by a descendant selector (docs/media.md).
 */
.sws-header__logo img {
	display: block;
	width: auto;
	height: 30px;
}

.sws-header__logo-text {
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* Actions: email pill + menu toggle
--------------------------------------------- */

.sws-header__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

/* Language switcher (WPML)
--------------------------------------------- */

/*
 * Segmented pill: the tinted track is the same --sws-header-soft the desktop menu
 * uses for its hovered items, so the switcher reads as part of the header rather
 * than a separate control. Track height matches the email pill next to it.
 */
.sws-header__lang {
	display: inline-flex;
	flex: 0 0 auto;
	box-sizing: border-box;
	padding: 3px;
	border-radius: 100px;
	background: var(--sws-header-soft);
}

.sws-header__lang-list {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sws-header__lang-item {
	margin: 0;
}

.sws-header__lang-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 34px;
	height: 38px;
	padding-inline: 8px;
	border-radius: 100px;
	color: var(--sws-header-title);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	text-transform: uppercase;
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

.sws-header__lang-link:hover,
.sws-header__lang-link:focus-visible {
	background: var(--sws-header-white);
	color: var(--sws-header-main-strong);
}

/*
 * Active language keeps the white-on-brand fill of the email pill (4.8:1), and
 * holds it through hover — the link points at the page you are already on.
 */
.sws-header__lang-link--current,
.sws-header__lang-link--current:hover,
.sws-header__lang-link--current:focus-visible {
	background: var(--sws-header-main);
	color: var(--sws-header-white);
}

.sws-header__email {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 100px;
	background: var(--sws-header-main);
	color: var(--sws-header-white);
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.sws-header__email:hover,
.sws-header__email:focus-visible {
	background: var(--sws-header-title);
	color: var(--sws-header-white);
}

.sws-header__email-icon {
	flex: 0 0 auto;
}

/* Below the email-label breakpoint the pill collapses to an icon button. */
.sws-header__email-label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	border: 0;
	word-wrap: normal !important;
}

.sws-header__toggle,
.sws-header__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 100px;
	background: var(--sws-header-white);
	color: var(--sws-header-main);
	box-shadow: 0 4px 16px rgb(28 28 37 / 10%);
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

.sws-header__toggle:hover,
.sws-header__close:hover {
	background: var(--sws-header-main);
	color: var(--sws-header-white);
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/

.sws-header__nav {
	flex: 0 0 auto;
}

/* Off-canvas panel (small screens)
---------------------------------------------
 * The closed state is the default on purpose. It used to be gated behind a
 * .sws-header--js class that navigation.js added on load, so the deferred
 * script had to run before the panel collapsed: the browser first painted the
 * whole menu inline, then the panel slid away and the page jumped up 684px.
 * That single class was worth CLS 0.799 on mobile. The scriptless fallback now
 * lives under .no-js instead, below with the accordion rules.
 */

.sws-header__panel {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 2;
	box-sizing: border-box;
	width: min(360px, 88vw);
	height: 100vh;
	height: 100dvh;
	padding: 24px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--sws-header-white);
	box-shadow: -16px 0 48px rgb(28 28 37 / 16%);
	visibility: hidden;
	transform: translateX(100%);
	transition:
		transform 0.3s ease,
		visibility 0.3s ease;
}

.sws-header--menu-open .sws-header__panel {
	visibility: visible;
	transform: translateX(0);
}

.sws-header__close {
	margin-left: auto;
	margin-bottom: 16px;
	box-shadow: none;
	background: var(--sws-header-soft);
}

.sws-header__overlay {
	position: fixed;
	inset: 0;
	z-index: 1;
	background: rgb(28 28 37 / 50%);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.3s ease,
		visibility 0.3s ease;
}

.sws-header--menu-open .sws-header__overlay {
	opacity: 1;
	visibility: visible;
}

/* Scroll lock while the panel is open. */
.sws-header-menu-open,
.sws-header-menu-open body {
	overflow: hidden;
}

/* Menu list
--------------------------------------------- */

.sws-header__menu {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sws-header__menu li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	position: relative;
	margin: 0;
}

.sws-header__menu a {
	flex: 1 1 auto;
	padding: 13px 0;
	color: var(--sws-header-title);
	font-size: 1.0625rem;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.2s ease;
}

.sws-header__menu a:hover,
.sws-header__menu a:focus-visible {
	color: var(--sws-header-main-strong);
}

.sws-header__menu > li {
	border-bottom: 1px solid var(--sws-header-line);
}

.sws-header__menu > li.current-menu-item > a,
.sws-header__menu > li.current-menu-ancestor > a,
.sws-header__menu > li.current-menu-parent > a,
.sws-header__menu > li.current_page_item > a {
	color: var(--sws-header-main-strong);
}

/* Submenu toggle button
--------------------------------------------- */

.sws-header__submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 100px;
	background: none;
	color: currentcolor;
	cursor: pointer;
}

.sws-header__chevron {
	transition: transform 0.2s ease;
}

.sws-header__submenu-toggle[aria-expanded="true"] .sws-header__chevron {
	transform: rotate(180deg);
}

/* Submenu
--------------------------------------------- */

.sws-header__menu .sub-menu {
	flex: 1 1 100%;
	margin: 0;
	padding: 0 0 8px 16px;
	list-style: none;
}

.sws-header__menu .sub-menu li {
	border: 0;
}

/* Submenu links keep the title color: the body gray scores 4.08:1 on white. */
.sws-header__menu .sub-menu a {
	padding: 9px 0;
	color: var(--sws-header-title);
	font-size: 0.9375rem;
	font-weight: 500;
}

/* Accordion behavior stays below the desktop breakpoint. */
@media (max-width: 1199px) {

	.sws-header__menu .sub-menu {
		display: none;
	}

	.sws-header__menu .sws-header__submenu-toggle[aria-expanded="true"] ~ .sub-menu {
		display: block;
	}

	/*
	 * Scriptless fallback. The .no-js class is printed by header.php and removed
	 * by an inline script in <head>, so the off-canvas presentation above is what
	 * the browser paints from the very first frame. Without JavaScript the panel
	 * has to stay in the flow instead: the toggle, the close button and the
	 * overlay all need a listener to do anything.
	 *
	 * These rules belong inside the media query. Loose in the file,
	 * .no-js .sws-header__nav (0,2,0) would outrank the desktop
	 * .sws-header__nav (0,1,0) and break the header above 1200px.
	 */
	.no-js .sws-header__nav {
		flex: 1 1 100%;
	}

	.no-js .sws-header__panel {
		position: static;
		width: auto;
		height: auto;
		padding: 0;
		overflow: visible;
		background: none;
		box-shadow: none;
		visibility: visible;
		transform: none;
		transition: none;
	}

	.no-js .sws-header__toggle,
	.no-js .sws-header__close,
	.no-js .sws-header__overlay,
	.no-js .sws-header__submenu-toggle {
		display: none;
	}

	.no-js .sws-header__menu .sub-menu {
		display: block;
	}
}

/* Contacts inside the panel
--------------------------------------------- */

.sws-header__panel-contacts {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 24px;
}

.sws-header__panel-contact {
	color: var(--sws-header-main);
	font-weight: 600;
	text-decoration: none;
}

.sws-header__panel-contact:hover {
	text-decoration: underline;
}

/*--------------------------------------------------------------
# Focus visibility
--------------------------------------------------------------*/

.sws-header a:focus-visible,
.sws-header button:focus-visible {
	outline: 2px solid var(--sws-header-main);
	outline-offset: 3px;
}

.sws-header__topbar a:focus-visible {
	outline-color: var(--sws-header-white);
}

/*--------------------------------------------------------------
# Tablet and up: top bar and full email pill
--------------------------------------------------------------*/

@media (min-width: 782px) {

	/*
	 * The top bar scrolls away while the main row stays pinned. Applied only
	 * when the bar is actually rendered, so an empty slogan keeps top: 0.
	 */
	.sws-header:has(.sws-header__topbar) {
		top: calc(var(--sws-header-topbar-height) * -1);
	}

	.sws-header {
		--sws-header-bar-height: 90px;
	}

	.sws-header__topbar {
		display: block;
	}

	/*
	 * Below 783px WordPress switches #wpadminbar to position: absolute, so the
	 * offset is only needed from here up. Logged-out visitors never see it.
	 */
	.admin-bar .sws-header {
		top: 32px;
	}

	.admin-bar .sws-header:has(.sws-header__topbar) {
		top: calc(32px - var(--sws-header-topbar-height));
	}

	.sws-header__logo img {
		height: 36px;
	}

	/* Track grows with the email pill: 4px + 42px + 4px = its 50px. */
	.sws-header__lang {
		padding: 4px;
	}

	.sws-header__lang-link {
		min-width: 42px;
		height: 42px;
		padding-inline: 12px;
		font-size: 0.875rem;
	}

	.sws-header__email {
		width: auto;
		height: 50px;
		padding-inline: 26px;
	}

	.sws-header__email-label {
		position: static !important;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		clip-path: none;
		white-space: nowrap;
	}
}

/*--------------------------------------------------------------
# Desktop: inline menu, dropdown submenus
--------------------------------------------------------------*/

@media (min-width: 1200px) {

	.sws-header {
		--sws-header-bar-height: 110px;
	}

	.sws-header__bar .sws-header__container {
		flex-wrap: nowrap;
		gap: 32px;
	}

	.sws-header__logo img {
		height: 40px;
	}

	.sws-header__toggle,
	.sws-header__close,
	.sws-header__overlay,
	.sws-header__panel-contacts,
	.sws-header__social--panel {
		display: none;
	}

	.sws-header__nav {
		display: flex;
		justify-content: center;
		flex: 1 1 auto;
		min-width: 0;
	}

	.sws-header__panel {
		position: static;
		width: auto;
		height: auto;
		padding: 0;
		overflow: visible;
		background: none;
		box-shadow: none;
		visibility: visible;
		transform: none;
		transition: none;
	}

	.sws-header__menu {
		flex-direction: row;
		align-items: center;
		gap: 4px;
	}

	.sws-header__menu > li {
		flex-wrap: nowrap;
		gap: 4px;
		padding: 6px 14px;
		border: 0;
		border-radius: 100px;
		transition: background-color 0.2s ease;
	}

	.sws-header__menu > li:hover,
	.sws-header__menu > li:focus-within,
	.sws-header__menu > li.current-menu-item,
	.sws-header__menu > li.current-menu-ancestor,
	.sws-header__menu > li.current-menu-parent,
	.sws-header__menu > li.current_page_item {
		background: var(--sws-header-soft);
	}

	.sws-header__menu > li > a {
		flex: 0 0 auto;
		padding: 0;
		font-size: 1rem;
		white-space: nowrap;
	}

	.sws-header__submenu-toggle {
		display: inline-flex;
		width: 16px;
		height: 16px;
	}

	/* Dropdown panel. */
	.sws-header__menu .sub-menu {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 3;
		box-sizing: border-box;
		width: 340px;
		margin-top: var(--sws-header-dropdown-gap);
		padding: 12px;
		border-radius: 16px;
		background: var(--sws-header-white);
		box-shadow: 0 18px 48px rgb(28 28 37 / 14%);
		opacity: 0;
		visibility: hidden;
		transform: translateY(8px);
		transition:
			opacity 0.2s ease var(--sws-header-dropdown-close-delay),
			transform 0.2s ease var(--sws-header-dropdown-close-delay),
			visibility 0.2s ease var(--sws-header-dropdown-close-delay);
	}

	/*
	 * Hover bridge across the gap above the panel.
	 *
	 * margin-top detaches the panel from its item, and that strip belongs to
	 * neither box: a pointer travelling down from the item to the panel drops out
	 * of :hover halfway and the dropdown closes under it. This strip gives the gap
	 * back to the panel's subtree, so the whole path keeps the parent item hovered.
	 *
	 * It has no background, it inherits visibility: hidden while the panel is
	 * closed — so it can never open the dropdown on its own — and it is exactly as
	 * tall as the gap: the panel is 340px wide, so any overshoot upwards would
	 * cover the bottom edge of the neighbouring menu items.
	 */
	.sws-header__menu .sub-menu::before {
		content: "";
		position: absolute;
		right: 0;
		bottom: 100%;
		left: 0;
		height: var(--sws-header-dropdown-gap);
	}

	/*
	 * The delay above applies to the transition into the closed state; zeroing it
	 * here keeps opening instant and leaves the pointer a moment to come back.
	 */
	.sws-header__menu > li:hover > .sub-menu,
	.sws-header__menu > li:focus-within > .sub-menu,
	.sws-header__menu .sws-header__submenu-toggle[aria-expanded="true"] ~ .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition-delay: 0s;
	}

	.sws-header__menu .sub-menu li {
		display: block;
	}

	.sws-header__menu .sub-menu a {
		display: block;
		padding: 10px 12px;
		border-radius: 10px;
		font-size: 0.9375rem;
		transition:
			background-color 0.2s ease,
			color 0.2s ease;
	}

	.sws-header__menu .sub-menu a:hover,
	.sws-header__menu .sub-menu a:focus-visible {
		background: var(--sws-header-soft);
		color: var(--sws-header-main-strong);
	}

	/* Keep the last dropdown inside the viewport. */
	.sws-header__menu > li:last-child .sub-menu {
		left: auto;
		right: 0;
	}
}

/*--------------------------------------------------------------
# Reduced motion
--------------------------------------------------------------*/

@media (prefers-reduced-motion: reduce) {

	.sws-header *,
	.sws-header *::before,
	.sws-header *::after {
		transition-duration: 0.01ms !important;
	}
}