/* ── Site Header ──────────────────────────────────────────────── */
.es-header {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 100;
	height: var(--es-nav-height);
	background-color: rgb(255 255 255 / 0.95);
	backdrop-filter: blur(8px);
	border-block-end: 1px solid transparent;
	transition: border-color var(--es-transition), box-shadow var(--es-transition);
	padding-inline: clamp(1rem, 4vw, 2rem);
}

.es-header.is-scrolled {
	border-block-end-color: var(--wp--preset--color--border);
	box-shadow: 0 2px 16px rgb(0 0 0 / 0.06);
}

/* ── Logo ──────────────────────────────────────────────────────── */
.es-header .wp-block-site-logo {
	flex-shrink: 0;
	margin: 0;
}

.es-header .wp-block-site-logo img {
	height: 2.25rem;
	width: auto;
	display: block;
}

/* Site name fallback (when no logo image is set) */
.es-header .wp-block-site-title a {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

/* ── Navigation — desktop links ────────────────────────────────── */

/* Gap between nav items in the desktop flex container */
.es-header .wp-block-navigation .wp-block-navigation__container {
	gap: 0.25rem;
}

/* Padding + hover background on the li — WP doesn't override li styles */
.es-header .wp-block-navigation .wp-block-navigation-item {
	padding-block: 0.375rem;
	padding-inline: 0.875rem;
	border-radius: var(--es-btn-radius);
	transition: background-color var(--es-transition);
}

.es-header .wp-block-navigation .wp-block-navigation-item:hover {
	background-color: var(--wp--preset--color--accent-light);
}

.es-header .wp-block-navigation .wp-block-navigation-item__content {
	display: block;
	padding: 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	font-variant: small-caps;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--text);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--es-transition);
}

.es-header .wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
}

/* Current page / active section */
.es-header .wp-block-navigation .wp-block-navigation-item.current-menu-item,
.es-header .wp-block-navigation .wp-block-navigation-item.is-active {
	background-color: var(--wp--preset--color--accent-light);
}

.es-header .wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.es-header .wp-block-navigation .wp-block-navigation-item.is-active > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
}

/* ── Hamburger button (rendered by WP navigation block) ─────────── */
/* NOTE: display show/hide is handled by WordPress's own block CSS.
   We only add cosmetic overrides here. */
.es-header .wp-block-navigation__responsive-container-open {
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0.375rem;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--wp--preset--color--text);
	border-radius: var(--es-btn-radius);
	transition: background-color var(--es-transition);
}

.es-header .wp-block-navigation__responsive-container-open:hover {
	background-color: var(--wp--preset--color--surface);
}

.es-header .wp-block-navigation__responsive-container-open svg {
	width: 1.5rem;
	height: 1.5rem;
}

/* ── Mobile overlay ─────────────────────────────────────────────── */
.es-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--white);
	padding-block-start: calc(var(--es-nav-height) + 1rem);
	z-index: 99;
}

.es-header .wp-block-navigation__responsive-container .wp-block-navigation__container {
	padding-inline: clamp(1rem, 4vw, 2rem);
}

.es-header .wp-block-navigation__responsive-container .wp-block-navigation .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--lg);
	padding-block: 0.875rem;
	padding-inline: 0;
	border-block-end: 1px solid var(--wp--preset--color--border);
	border-radius: 0;
	white-space: normal;
}

.es-header .wp-block-navigation__responsive-container-close {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--wp--preset--color--text);
	padding: 0.5rem;
}

/* ── WordPress admin bar offset ─────────────────────────────────── */
.admin-bar .es-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .es-header {
		top: 46px;
	}
}

/* ── Spacer for fixed header on inner pages ─────────────────────── */
.es-header-spacer {
	display: block;
	height: var(--es-nav-height);
}

/* Inner pages: push content below fixed header */
body:not(.home) #main > .wp-block-group:first-child {
	padding-block-start: var(--es-nav-height);
}