/* ==========================================================================
   Sticky-shrink header + overlay hero helpers — from ui_kits Header.jsx.
   Fixed top, z-sticky; transparent over the hero → white + shadow-sm once
   scrollY > 40; logo 200px → 88px; padding 20px → 12px; .3s ease.
   ========================================================================== */

/* Root-level flow gap would paint a white strip above full-bleed heroes —
   the chrome (fixed header / spacer / footer) manages its own rhythm. */
.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

.sheris-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--wp--custom--z--sticky, 20);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
	padding: 12px 48px;
	background: var(--wp--custom--color--surface-card, #fff);
	box-shadow: var(--wp--preset--shadow--sm);
	transition: background 0.45s ease, box-shadow 0.45s ease, backdrop-filter 0.45s ease;
}

/* Scrolled: frosted glass — derived from the card surface so style
   variations (e.g. Midnight Tide) re-tint the frost automatically. */
.sheris-header.is-scrolled {
	background: color-mix(in srgb, var(--wp--custom--color--surface-card, #fff) 78%, transparent);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	backdrop-filter: blur(14px) saturate(1.4);
	box-shadow: var(--wp--preset--shadow--sm);
}

.sheris-header.is-overlay {
	background: transparent;
	box-shadow: none;
}

.sheris-header__logo {
	position: relative;
	flex-shrink: 0;
	/* Bar height follows the logo; constant padding + the soft ease below
	   keep the shrink one smooth glide (nav stays vertically centered). */
}

.sheris-header .sheris-header__logo img {
	height: 200px;
	width: auto;
	display: block;
	transition: height 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
}

.sheris-header.is-scrolled .sheris-header__logo img {
	height: 120px;
}

/* ---- Light logo over the hero ----------------------------------------
   The white artwork keeps its watercolour flowers and turtle, so it can't
   be faked with a filter — it's a second image cross-faded over the Site
   Logo. Its URL arrives as --sheris-logo-overlay (functions.php: theme mod
   → bundled asset), which keeps the markup a plain core/site-logo block. */
.sheris-header__logo::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	background: var(--sheris-logo-overlay) no-repeat center / contain;
	filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.35));
	transition: opacity 0.45s ease;
}

/* --sheris-logo-swap is 1 only when a light logo is actually configured, so
   with none set the Site Logo simply stays visible over the hero. */
.sheris-header.is-overlay .sheris-header__logo::before {
	opacity: var(--sheris-logo-swap, 0);
}

.sheris-header.is-overlay .sheris-header__logo img {
	opacity: calc(1 - var(--sheris-logo-swap, 0));
}

/* The menu panel paints a solid bar, so the standard logo returns there. */
.sheris-header.is-menu-open .sheris-header__logo::before {
	opacity: 0;
}

.sheris-header.is-menu-open .sheris-header__logo img {
	opacity: 1;
}

/* Wordmark fallback — shown until the owner sets a Site Logo, so a fresh
   install never renders an empty header. Script face, sized to sit on the
   same optical line as the logo, and it follows the nav through states. */
.sheris-header__wordmark {
	flex-shrink: 0;
	margin: 0;
	font-family: var(--wp--preset--font-family--script);
	font-size: 54px;
	line-height: 1;
	transition: font-size 0.55s cubic-bezier(0.22, 1, 0.36, 1), color 0.45s ease;
}

.sheris-header__wordmark a {
	color: var(--wp--custom--color--surface-brand-strong);
	text-decoration: none;
}

.sheris-header.is-scrolled .sheris-header__wordmark {
	font-size: 38px;
}

.sheris-header.is-overlay .sheris-header__wordmark a {
	color: #fff;
	text-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.sheris-header.is-menu-open .sheris-header__wordmark a {
	color: var(--wp--custom--color--surface-brand-strong);
	text-shadow: none;
}

/* Nav groups — 11px, weight 300, 1.5px tracking, uppercase */
.sheris-header__nav {
	display: flex;
	align-items: center;
	gap: 28px;
	font-family: var(--wp--preset--font-family--sans);
}

.sheris-header__nav a,
.sheris-header__nav .wp-block-navigation-item__content,
.sheris-header .wp-block-navigation a {
	color: var(--wp--custom--color--text-primary);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-size: 11px;
	font-weight: 300;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	padding-bottom: 4px;
}

.sheris-header__nav a:hover,
.sheris-header__nav a[aria-current="page"],
.sheris-header .wp-block-navigation .current-menu-item > a {
	color: var(--wp--custom--color--action-primary);
	border-bottom-color: var(--wp--custom--color--action-primary);
}

.sheris-header.is-overlay .sheris-header__nav a,
.sheris-header.is-overlay .wp-block-navigation a {
	color: rgba(255, 255, 255, 0.92);
}

.sheris-header.is-overlay .sheris-header__nav a:hover,
.sheris-header.is-overlay .sheris-header__nav a[aria-current="page"] {
	color: #fff;
	border-bottom-color: #fff;
}

/* "Join the Club" pill — right-pinned */
.sheris-header__cta {
	position: absolute;
	right: 48px;
	top: 50%;
	transform: translateY(-50%);
}

/* sm size per Button.jsx (12px / 9px 16px) */
.sheris-header__cta .wp-block-button__link {
	font-size: 12px;
	padding: 9px 16px;
}

/* Logged-in: person-icon disc → My Account */
.sheris-header__account {
	margin: 0;
	line-height: 0;
}

.sheris-header__account a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: var(--wp--custom--color--text-primary);
	transition: color var(--wp--custom--duration--fast, 120ms) var(--wp--custom--ease--standard, ease);
}

/* The icon ships as an <img>-loaded SVG, so its `stroke="currentColor"`
   resolves inside the SVG document (black) and can never inherit the page
   color. Paint it as a mask on the link instead — then it genuinely follows
   `currentColor` and tracks the nav through every header state. The <img>
   stays in the DOM at opacity 0 so its alt keeps naming the link. */
.sheris-header__account img {
	width: 22px;
	height: 22px;
	opacity: 0;
}

.sheris-header__account a::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 22px;
	height: 22px;
	background-color: currentColor;
	-webkit-mask: url("../assets/icons/user.svg") no-repeat center / contain;
	mask: url("../assets/icons/user.svg") no-repeat center / contain;
}

.sheris-header__account a:hover {
	color: var(--wp--custom--color--action-primary);
}

/* Over the hero: match the nav exactly (same rgba, same white on hover) */
.sheris-header.is-overlay .sheris-header__account a {
	color: rgba(255, 255, 255, 0.92);
}

.sheris-header.is-overlay .sheris-header__account a:hover {
	color: #fff;
}

.sheris-header.is-menu-open .sheris-header__account a {
	color: var(--wp--custom--color--text-primary);
}

/* Spacer — non-overlay pages only (header is fixed) */
.sheris-header__spacer {
	height: 240px;
}

body.sheris-has-overlay-hero .sheris-header__spacer {
	display: none;
}

/* Hero-overlay rules live in primitives.css so the editor iframe
   (add_editor_style) renders the same scrim as the front end. */

/* ==========================================================================
   Footer — from ui_kits Footer.jsx
   ========================================================================== */

.sheris-footer {
	font-family: var(--wp--preset--font-family--sans);
}

/* (Subscribe form is the sheris/subscribe-form block — styles ship with the plugin.) */

.sheris-footer__colhead {
	font-weight: 800;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	opacity: 0.7;
	margin-bottom: 12px;
}

.sheris-footer__links {
	line-height: 2;
}

.sheris-footer__links a {
	color: inherit;
	opacity: 0.9;
	text-decoration: none;
}

.sheris-footer__links a:hover {
	color: inherit;
	opacity: 1;
	text-decoration: underline;
}

.sheris-footer__legal {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	opacity: 0.6;
}

/* ---- Hamburger toggle (injected by js/header.js; hidden ≥ 768) ---- */
.sheris-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 10px;
	border: none;
	background: none;
	cursor: pointer;
}

.sheris-burger span {
	display: block;
	width: 24px;
	height: 2px;
	border-radius: 2px;
	background: var(--wp--custom--color--text-primary);
	transition: transform var(--wp--custom--duration--base, 200ms) var(--wp--custom--ease--standard, ease), opacity var(--wp--custom--duration--fast, 120ms) var(--wp--custom--ease--standard, ease);
}

.sheris-header.is-overlay .sheris-burger span {
	background: #fff;
}

.sheris-header.is-menu-open .sheris-burger span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.sheris-header.is-menu-open .sheris-burger span:nth-child(2) {
	opacity: 0;
}

.sheris-header.is-menu-open .sheris-burger span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ---- Responsive: mobile bar + slide-down panel below 1024 (bp lg — phones AND tablets) ---- */
@media (max-width: 1023px) {
	.sheris-header {
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		gap: 0;
		padding: 10px 20px;
	}

	/* Bar: logo left … hamburger right */
	.sheris-header__logo,
	.sheris-header__wordmark {
		order: 1;
		margin-right: auto;
	}

	.sheris-header__wordmark {
		font-size: 40px;
	}

	.sheris-header.is-scrolled .sheris-header__wordmark,
	.sheris-header.is-menu-open .sheris-header__wordmark {
		font-size: 30px;
	}

	/* Big until scroll, like desktop (200 → 120): mobile 140 → 88 */
	.sheris-header .sheris-header__logo img {
		height: 140px;
	}

	.sheris-header.is-scrolled .sheris-header__logo img,
	.sheris-header.is-menu-open .sheris-header__logo img {
		height: 88px;
	}

	.sheris-burger {
		display: flex;
		order: 2;
	}

	/* Menu open forces the readable white bar even over the hero */
	.sheris-header.is-menu-open {
		background: var(--wp--custom--color--surface-card, #fff);
		box-shadow: var(--wp--preset--shadow--md);
	}

	.sheris-header.is-menu-open .sheris-burger span {
		background: var(--wp--custom--color--text-primary);
	}

	/* Panel rows — the existing nav blocks + CTA, stacked full-width */
	.sheris-header .sheris-header__nav,
	.sheris-header .wp-block-navigation.sheris-header__nav {
		display: none;
		order: 3;
		flex-basis: 100%;
	}

	.sheris-header.is-menu-open .sheris-header__nav,
	.sheris-header.is-menu-open .wp-block-navigation.sheris-header__nav {
		display: flex;
	}

	.sheris-header.is-menu-open .sheris-header__nav--left {
		margin-top: 10px;
	}

	.sheris-header__nav .wp-block-navigation__container {
		flex-direction: column;
		width: 100%;
		gap: 0;
	}

	.sheris-header__nav .wp-block-navigation-item {
		width: 100%;
		border-top: 1px solid var(--wp--custom--color--border-subtle);
	}

	.sheris-header__nav .wp-block-navigation-item__content,
	.sheris-header__nav a {
		display: block;
		width: 100%;
		padding: 16px 2px;
		font-size: 13px;
		border-bottom: none;
	}

	.sheris-header.is-menu-open .sheris-header__nav a {
		color: var(--wp--custom--color--text-primary);
	}

	.sheris-header .sheris-header__cta,
	.sheris-header .wp-block-buttons.sheris-header__cta {
		position: static;
		transform: none;
		display: none;
		order: 4;
		flex-basis: 100%;
		padding: 16px 0 10px;
		border-top: 1px solid var(--wp--custom--color--border-subtle);
	}

	.sheris-header.is-menu-open .sheris-header__cta,
	.sheris-header.is-menu-open .wp-block-buttons.sheris-header__cta {
		display: flex;
	}

	.sheris-header__spacer {
		height: 160px;
	}
}