/* ==========================================================================
   Alster+ header menu
   ========================================================================== */

:root {
	--alster-font-family: "neue-haas-unica", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--alster-font-weight: 400;
	--alster-font-size: 28px;
	--alster-line-height: 45px;          /* vertical step between items when expanded */

	--alster-color: #fff;
	--alster-header-bg: transparent;

	--alster-pad-x: 0px;
	--alster-pad-x: 30px;
	--alster-pad-y: 22px;

	--alster-z: 9990;
	--alster-header-h: calc(var(--alster-line-height) + 2 * var(--alster-pad-y)); /* updated by JS */
}

.alster-header[data-alster-skin="light"] { --alster-color: #fff; }
.alster-header[data-alster-skin="dark"] { --alster-color: #000; }

/* Header shell ------------------------------------------------------------ */

.alster-header {
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: var(--alster-z);
	font-family: var(--alster-font-family);
	font-weight: var(--alster-font-weight);
	font-size: var(--alster-font-size);
	line-height: var(--alster-line-height);
	color: var(--alster-color);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	pointer-events: none; /* only the actual elements are interactive */
}

.alster-header--fixed    { position: fixed; }
.alster-header--absolute { position: absolute; }

.alster-header__inner {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 1400px;
	max-width: none;
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: start;
	padding: var(--alster-pad-y) var(--alster-pad-x);
	background: var(--alster-header-bg);
}

.alster-header a,
.alster-header a:hover,
.alster-header a:focus {
	text-decoration: none;
	border: 0;
	box-shadow: none;
}

.alster-header__logo,
.alster-header__logo:hover,
.alster-header__cross,
.alster-header__cross:hover {
	color: inherit;
}

.alster-header__logo,
.alster-header__cross,
.alster-menu {
	pointer-events: auto;
	font: inherit;
	line-height: inherit;
	letter-spacing: 0;
	white-space: nowrap;
}

.alster-header__logo  { justify-self: start; }

.alster-header__cross {
	justify-self: center;
	display: inline-block;
	will-change: transform;
}

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

.alster-menu {
	justify-self: end;
	position: relative;
	min-height: var(--alster-line-height);
}

.alster-menu__list {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	height: var(--alster-line-height);
	/* width/height are animated by JS so the hover area always covers the open list */
}

.alster-menu__item,
.alster-menu__fallback {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
	height: var(--alster-line-height);
	line-height: var(--alster-line-height);
	white-space: nowrap;
	text-align: right;
	list-style: none;
}

.alster-menu__item::before,
.alster-menu__item::after { display: none; } /* kill theme list decorations */

.alster-menu__link {
	display: block;
	color: var(--alster-color);
}

.alster-menu__item.is-current .alster-menu__link {
	color: var(--alster-color);
}

.alster-header .alster-menu__link:hover,
.alster-header .alster-menu__link:focus-visible {
	color: var(--alster-color);
	text-decoration: underline;
	text-decoration-color: currentColor;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

/* Collapsed (pre-JS state matches the JS closed state → no flash) */
.alster-menu__item:not(.is-current) {
	opacity: 0;
	pointer-events: none;
}

.alster-menu__fallback { color: var(--alster-color); }

/* Expanded */
.alster-header.is-open .alster-menu__item { pointer-events: auto; }

.alster-menu__link:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 4px;
}

/* JS hides items via .is-hidden while closed */
.alster-header.is-ready .alster-menu__item.is-hidden { pointer-events: none; }

/* No-JS / GSAP failed: plain CSS dropdown ---------------------------------- */

.alster-header:not(.is-ready) .alster-menu:hover .alster-menu__list,
.alster-header:not(.is-ready) .alster-menu:focus-within .alster-menu__list {
	height: auto;
}

.alster-header:not(.is-ready) .alster-menu:hover .alster-menu__item,
.alster-header:not(.is-ready) .alster-menu:focus-within .alster-menu__item {
	position: relative;
	opacity: 1;
	pointer-events: auto;
}

.alster-header:not(.is-ready) .alster-menu:hover .alster-menu__fallback,
.alster-header:not(.is-ready) .alster-menu:focus-within .alster-menu__fallback {
	opacity: 0;
}

/* Page offset ------------------------------------------------------------- */

body.alster-offset-content {
	padding-top: var(--alster-header-h);
}

/* Small screens ----------------------------------------------------------- */

@media (max-width: 600px) {
	:root {
		--alster-pad-y: 16px;
		--alster-pad-x: 30px;
	}
}

/* GSAP reveals full-opacity rows with a moving clip, never a cross-fade. */
.alster-header.is-ready .alster-menu__item {
	opacity: 1;
	will-change: transform, clip-path;
}

button.alster-menu__fallback {
	appearance: none;
	border: 0;
	border-radius: 0;
	background: transparent;
	font: inherit;
	letter-spacing: inherit;
	text-transform: none;
	cursor: pointer;
}

.alster-header.is-open .alster-menu__fallback { pointer-events: none; }

.alster-menu__fallback:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 4px;
}

/* A generous desktop hover strip, from just after the logo to the right edge.
   Its height stays at one header row so it does not cover content below the menu. */
@media (hover: hover) and (pointer: fine) {
	.alster-header.is-ready .alster-header__inner::before {
		content: '';
		position: absolute;
		top: 0;
		left: var(--alster-hover-start, 50%);
		right: 0;
		height: var(--alster-header-h);
		pointer-events: auto;
	}

	.alster-header.is-ready .alster-header__cross,
	.alster-header.is-ready .alster-menu {
		position: relative;
		z-index: 1;
	}
}

.alster-menu-toggle,
.alster-mobile-panel { display: none; }

@media (max-width: 1024px) {
	.alster-header.has-mobile-menu .alster-menu,
	.alster-header.has-mobile-menu .alster-header__inner::before { display: none; }

	.alster-header.has-mobile-menu .alster-header__inner { z-index: 2; }
	.alster-header.has-mobile-menu .alster-header__cross { transform: none !important; }
	.alster-header.is-mobile-open { position: fixed; }
	.alster-header.is-mobile-open .alster-header__inner { background: transparent; }

	.alster-header .alster-menu-toggle {
		appearance: none;
		display: block;
		position: relative;
		justify-self: end;
		width: 44px;
		height: var(--alster-line-height);
		padding: 0;
		margin: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		color: var(--alster-color);
		cursor: pointer;
		pointer-events: auto;
	}
	.alster-menu-toggle::before,
	.alster-menu-toggle::after { display: none; }
	.alster-menu-toggle span {
		position: absolute;
		right: 0;
		top: calc(50% - 1px);
		width: 28px;
		height: 2px;
		background: currentColor;
		transform: translateY(-5px);
		transition: transform .4s cubic-bezier(.22, 1, .36, 1), width .4s ease, right .4s ease;
	}
	.alster-menu-toggle span + span { transform: translateY(5px); }
	.is-mobile-open .alster-menu-toggle span { width: 24px; right: 2px; transform: rotate(45deg); }
	.is-mobile-open .alster-menu-toggle span + span { transform: rotate(-45deg); }
	.alster-header .alster-menu-toggle:focus { outline: none; }
	.alster-header .alster-menu-toggle:focus-visible:not(.is-pointer-activated),
	.alster-mobile-link:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }

	.alster-mobile-panel {
		display: flex;
		position: fixed;
		z-index: 1;
		inset: var(--wp-admin--admin-bar--height, 0px) 0 auto;
		height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
		height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
		box-sizing: border-box;
		padding: calc(var(--alster-line-height) + 2 * var(--alster-pad-y) + 36px) var(--alster-pad-x) max(48px, env(safe-area-inset-bottom));
		background: #111;
		color: var(--alster-color);
		overflow-y: auto;
		overscroll-behavior: contain;
		visibility: hidden;
		pointer-events: none;
		clip-path: inset(0 0 100% 0);
		transition: clip-path .6s cubic-bezier(.76, 0, .24, 1), visibility 0s .6s;
	}
	.alster-header[data-alster-skin="dark"] .alster-mobile-panel { background: #fff; }
	.is-mobile-open .alster-mobile-panel {
		visibility: visible;
		pointer-events: auto;
		clip-path: inset(0);
		transition-delay: 0s;
	}
	.alster-mobile-panel nav { width: 100%; margin-block: auto; }
	.alster-mobile-list { list-style: none; margin: 0; padding: 0; }
	.alster-mobile-list li {
		list-style: none;
		margin: 0;
		padding: 9px 0;
		opacity: 0;
		transform: translateY(24px);
		transition: opacity .2s ease, transform .35s ease;
	}
	.alster-mobile-list li::before,
	.alster-mobile-list li::after { display: none; }
	.is-mobile-open .alster-mobile-list li {
		opacity: 1;
		transform: translateY(0);
		transition-duration: .45s, .65s;
		transition-timing-function: ease, cubic-bezier(.22, 1, .36, 1);
		transition-delay: calc(.18s + var(--alster-item-index) * .045s);
	}
	.alster-header .alster-mobile-link {
		display: block;
		font: inherit;
		line-height: 1.35;
		letter-spacing: 0;
		text-transform: none;
		text-align: right;
		white-space: normal;
		overflow-wrap: anywhere;
		color: var(--alster-color);
	}
	.alster-header .alster-mobile-link:hover,
	.alster-header .alster-mobile-link:focus-visible {
		color: var(--alster-color);
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: .18em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.alster-mobile-panel,
	.alster-menu-toggle span,
	.alster-mobile-list li,
	.is-mobile-open .alster-mobile-list li { transition: none; }
}