/*
 * Site header: cream utility bar + floating white rounded bar with nav,
 * dropdowns, CTA. Mobile: hamburger panel. Sticky behavior arrives with the
 * animation phase (data-sticky is already on the element).
 */

/* ---------------------------------------------------------- utility bar */

.asli-utility {
	background: var(--asli-cream);
	font-size: var(--asli-text-meta);
	padding-block: 0.4rem;
}

.asli-utility__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--asli-space-md);
}

.asli-utility__contacts {
	display: flex;
	gap: var(--asli-space-lg);
	flex-wrap: wrap;
}

.asli-utility__item {
	display: inline-flex;
	align-items: center;
	gap: var(--asli-space-xs);
	color: var(--asli-ink);
}

.asli-utility__item .asli-icon {
	color: var(--asli-blue);
}

.asli-utility__item:hover {
	color: var(--asli-blue);
}

.asli-utility__socials {
	display: flex;
	gap: var(--asli-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.asli-utility__socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: var(--asli-radius-pill);
	background: var(--asli-blue);
	color: var(--asli-text-on-dark);
	font-size: 0.85rem;
}

.asli-utility__socials a:hover {
	background: var(--asli-navy);
	color: var(--asli-yellow);
}

/* ------------------------------------------------------------- main bar */

.asli-header__bar {
	padding-block: var(--asli-space-sm);
	background: var(--asli-surface);
	box-shadow: var(--asli-shadow-header);
}

.asli-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--asli-space-lg);
}

/* Overlay mode: the whole header floats transparently over the hero/banner
   image; the white rounded container carries the nav (reference look). */
.asli-header-overlay .asli-header--fallback {
	position: absolute;
	inset-inline: 0;
	top: 0;
	z-index: 900;
}

.asli-header-overlay .asli-header--fallback .asli-header__bar {
	background: transparent;
	box-shadow: none;
}

.asli-header-overlay .asli-header--fallback .asli-header__inner {
	background: var(--asli-surface);
	border-radius: var(--asli-radius-card);
	box-shadow: var(--asli-shadow-header);
	padding: var(--asli-space-sm) var(--asli-space-lg);
}

.asli-header-overlay .asli-header--fallback .asli-utility {
	background: transparent;
}

.asli-header-overlay .asli-header--fallback .asli-utility__item {
	color: var(--asli-text-on-dark);
}

.asli-header-overlay .asli-header--fallback .asli-utility__item .asli-icon {
	color: var(--asli-yellow);
}

.asli-header-overlay .asli-header--fallback .asli-utility__item:hover {
	color: var(--asli-yellow);
}

/* Sticky state overrides the floating look with a solid full-width bar. */
.asli-header--fallback.is-stuck .asli-header__bar {
	background: var(--asli-surface);
}

.asli-header-overlay .asli-header--fallback.is-stuck .asli-header__inner {
	box-shadow: none;
	padding-inline: 0;
	border-radius: 0;
}

.asli-header__logo {
	display: block;
	width: auto;
	height: 44px;
}

/* ------------------------------------------------------------------ nav */

.asli-header__menu {
	display: flex;
	gap: var(--asli-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.asli-header__menu a {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.5rem 0;
	font-weight: var(--asli-weight-medium);
	color: var(--asli-ink);
}

.asli-header__menu a:hover,
.asli-header__menu .current-menu-item > a,
.asli-header__menu .current-menu-ancestor > a {
	color: var(--asli-blue);
}

/* Sliding underline (top level, desktop). */
.asli-header__menu > li > a {
	position: relative;
	overflow: hidden;
}

.asli-header__menu > li > a::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2px;
	background: var(--asli-blue);
	transform: translateX(-110%);
	transition: transform 0.2s ease-out;
}

.asli-header__menu > li:is(:hover, .current-menu-item, .current-menu-ancestor) > a::before {
	transform: translateX(0);
}

[dir="rtl"] .asli-header__menu > li > a::before {
	transform: translateX(110%);
}

[dir="rtl"] .asli-header__menu > li:is(:hover, .current-menu-item, .current-menu-ancestor) > a::before {
	transform: translateX(0);
}

/* Dropdowns (hover + focus-within for keyboard). */
.asli-header__menu .menu-item-has-children {
	position: relative;
}

.asli-header__menu .menu-item-has-children > a::after {
	content: "";
	width: 0.55em;
	height: 0.55em;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	rotate: 45deg;
	translate: 0 -2px;
}

.asli-header__menu .sub-menu {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	min-width: 220px;
	margin: 0;
	padding: var(--asli-space-xs);
	list-style: none;
	background: var(--asli-surface);
	border-radius: var(--asli-radius-tile);
	box-shadow: var(--asli-shadow-card-hover);
	opacity: 0;
	visibility: hidden;
	transform: scaleY(0);
	transform-origin: top center;
	transition:
		opacity 0.3s ease-in-out,
		transform 0.3s ease-in-out,
		visibility 0s linear 0.3s;
	z-index: 50;
}

.asli-header__menu .menu-item-has-children:is(:hover, :focus-within) > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: scaleY(1);
	transition-delay: 0s;
}

.asli-header__menu .sub-menu a {
	display: block;
	padding: 0.5rem 0.75rem;
	border-radius: calc(var(--asli-radius-tile) - 4px);
}

.asli-header__menu .sub-menu a:hover {
	background: var(--asli-surface-alt);
}

/* -------------------------------------------------------------- actions */

.asli-header__actions {
	display: flex;
	align-items: center;
	gap: var(--asli-space-md);
}

.asli-header__toggle {
	display: none;
	background: none;
	border: 0;
	padding: 0.4rem;
	font-size: 1.5rem;
	color: var(--asli-ink);
	cursor: pointer;
}

.asli-header__toggle-close {
	display: none;
}

/* --------------------------------------------------------------- mobile */

@media (max-width: 1024px) {
	.asli-header__toggle {
		display: inline-flex;
	}

	.asli-header__cta {
		display: none;
	}

	.asli-header__nav {
		position: absolute;
		top: 100%;
		inset-inline: 0;
		background: var(--asli-surface);
		border-block-start: 1px solid var(--asli-border);
		box-shadow: var(--asli-shadow-card-hover);
		padding: var(--asli-space-md) var(--asli-gutter) var(--asli-space-lg);
		display: none;
	}

	.asli-header__bar {
		position: relative;
	}

	.asli-header.is-open .asli-header__nav {
		display: block;
	}

	.asli-header.is-open .asli-header__toggle-open {
		display: none;
	}

	.asli-header.is-open .asli-header__toggle-close {
		display: inline-flex;
	}

	.asli-header__menu {
		flex-direction: column;
		gap: 0;
	}

	.asli-header__menu a {
		padding: 0.65rem 0;
		width: 100%;
	}

	.asli-header__menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		padding: 0 0 0 var(--asli-space-md);
	}

	.asli-header__menu > li > a::before {
		display: none;
	}

	/* The dropdown panel needs a solid surface in overlay mode. */
	.asli-header-overlay .asli-header--fallback .asli-header__nav {
		background: var(--asli-surface);
	}
}