/*
 * Design System - AELITA
 * components/header.css - the .a-header site header shell.
 *
 * Source of truth: docs/aelita-design/DESIGN.md
 * Uses only CSS variables from tokens.css. No hex values, no Bootstrap
 * classes, no global selectors, no `transition: all`.
 *
 * Status: loaded globally via inc/enqueue.php (aelita-ds-header).
 *
 * The legacy theme ships `*:focus { outline: none !important; }`
 * (css/main.css). The focus-visible rules below therefore use a local
 * `!important` on the outline only, so keyboard focus stays visible inside
 * the new component.
 */

/* -------------------------------------------------------------------- */
/* Header shell                                                         */
/* -------------------------------------------------------------------- */
.a-header {
	/* Stable bar height, composed from the space scale only. */
	--a-header-h: calc(var(--space-6) + var(--space-5)); /* 32 + 24 = 56px */
	position: relative;
	z-index: var(--z-header);
	background-color: var(--bg-invert);
	color: var(--text-on-brand);
	/* The full-bleed nav submenu overhangs the content column by the
	 * scrollbar width; clip that horizontally (vertical overflow stays
	 * visible) so the site never gains a horizontal scrollbar. */
	overflow-x: clip;
	overflow-y: visible;
}

.a-header__inner {
	position: relative; /* containing block for the full-width nav submenus */
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-height: var(--a-header-h);
	/* Align the header with the site content grid (.container is 1200px). */
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--space-4);
}

/* Desktop navigation fills the space between the logo and the actions. */
@media (min-width: 992px) {
	.a-nav {
		flex: 1 1 auto;
		min-width: 0;
	}

	.a-nav__list {
		width: 100%;
		justify-content: center;
	}
}

/* -------------------------------------------------------------------- */
/* Logo                                                                 */
/* -------------------------------------------------------------------- */
.a-header__logo {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	color: inherit;
	text-decoration: none;
}

.a-header__logo-img {
	display: block;
	/* Explicit box: the mark is an SVG, so prevent flex/percentage sizing
	 * (max-width:100% against a shrink-to-fit parent) from collapsing it. */
	width: 150px;
	height: auto;
	max-width: 150px;
	max-height: none;
}

/* -------------------------------------------------------------------- */
/* Actions (contact + language switcher + menu toggle)                  */
/* -------------------------------------------------------------------- */
.a-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-inline-start: auto;
}

.a-header__contact {
	display: none;
	align-items: center;
	gap: var(--space-3);
}

.a-header__phone {
	display: inline-flex;
	align-items: center;
	min-height: calc(var(--space-6) + var(--space-3)); /* 44px touch target */
	color: var(--text-on-brand);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-heading);
	text-decoration: none;
	white-space: nowrap;
}

/* -------------------------------------------------------------------- */
/* Icon button (hamburger / close)                                      */
/* -------------------------------------------------------------------- */
.a-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: calc(var(--space-6) + var(--space-3)); /* 44px */
	min-height: calc(var(--space-6) + var(--space-3)); /* 44px */
	padding: var(--space-2);
	border: var(--border-w) solid transparent;
	border-radius: var(--radius);
	background-color: transparent;
	color: inherit;
	font: inherit;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition:
		color var(--dur-press) var(--ease-out),
		background-color var(--dur-press) var(--ease-out),
		transform var(--dur-press) var(--ease-out);
}

.a-header__menu-toggle {
	flex: 0 0 auto;
}

/* -------------------------------------------------------------------- */
/* States                                                               */
/* -------------------------------------------------------------------- */
.a-header__menu-toggle[aria-expanded="true"] {
	color: var(--link-hover);
}

@media (hover: hover) and (pointer: fine) {
	.a-header__phone:hover {
		color: var(--link-hover);
	}

	.a-icon-button:hover {
		color: var(--link-hover);
	}
}

.a-icon-button:active {
	transform: scale(0.97);
}

.a-icon-button:disabled,
.a-icon-button[aria-disabled="true"] {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Keyboard focus: local !important only for the outline. */
.a-header__logo:focus-visible,
.a-header__phone:focus-visible,
.a-icon-button:focus-visible {
	outline: 2px solid var(--focus-ring) !important;
	outline-offset: 2px;
}

/* Keep [hidden] hidden even if a component rule sets display. */
.a-header [hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.a-icon-button {
		transition-duration: 0.01ms;
	}

	.a-icon-button:active {
		transform: none;
	}
}

/* -------------------------------------------------------------------- */
/* Desktop: reveal the contact zone (the nav is revealed in nav.css)    */
/* -------------------------------------------------------------------- */
@media (min-width: 992px) {
	.a-header__contact {
		display: flex;
	}
}

/* -------------------------------------------------------------------- */
/* Reveal sticky header                                                 */
/* -------------------------------------------------------------------- */
/* Reserves the header's space so fixing it never shifts the page. JS
 * syncs the exact height (js/design-system/header-sticky.js).            */
.a-header-slot {
	min-height: 60px;
}

/* Applied once the page is scrolled past a small threshold. */
.a-header.is-stuck {
	position: fixed;
	inset-inline: 0;
	top: 0;
	box-shadow: var(--shadow-overlay);
	animation: a-header-drop var(--dur-modal) var(--ease-out);
}

@keyframes a-header-drop {
	from {
		transform: translateY(-100%);
	}

	to {
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.a-header.is-stuck {
		animation: none;
	}
}