/* ==========================================================================
   GIAC — Cherry Navigation
   Loaded ONLY on pages with "Cherry Navigation" switched on (body.cherry-hero-nav
   is printed by the server). Replaces WPCode snippets 1652, 1484 (CSS part),
   1346, 2229 and the cherry bits of 162.

   States:
     body.cherry-hero-nav                      compact cream panel over the hero
     body.cherry-hero-nav.cherry-nav-docked    scrolled past the hero -> full width
     body.cherry-hero-nav.is-menu-sidebar      burger menu open -> full width
     body.cherry-nav-standalone                page has no Cherry Hero block
   ========================================================================== */

body.cherry-hero-nav {
	--cherry-radius: var(--cherry-desktop-radius);
	--cherry-gap: var(--cherry-desktop-gap);
	--cherry-nav-width: var(--cherry-desktop-split);
	--cherry-nav-padding: var(--cherry-desktop-nav-padding);
	overflow-x: clip;
}

@media (max-width: 959px) {
	body.cherry-hero-nav {
		--cherry-radius: var(--cherry-mobile-radius);
		--cherry-gap: var(--cherry-mobile-gap);
		--cherry-nav-width: var(--cherry-mobile-nav-width);
		--cherry-nav-padding: var(--cherry-mobile-nav-padding);
	}
}

/* ---------- Fixed shell ---------- */

body.cherry-hero-nav #header-grid.hfg_header {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
}

body.admin-bar.cherry-hero-nav #header-grid.hfg_header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar.cherry-hero-nav #header-grid.hfg_header {
		top: 46px;
	}
}

body.cherry-hero-nav header.header,
body.cherry-hero-nav #header-grid,
body.cherry-hero-nav #header-grid .header--row {
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
}

/* Top strip: the cream band above the panel. */
body.cherry-hero-nav #header-grid::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--cherry-curve-top);
	background: var(--cherry-panel-color);
	pointer-events: none;
	z-index: 0;
}

/* ---------- The panel ---------- */

body.cherry-hero-nav #header-grid .header--row-inner {
	position: relative !important;
	overflow: visible !important;
	margin: 0 !important;
	width: var(--cherry-nav-width) !important;
	max-width: var(--cherry-nav-width) !important;
	box-sizing: border-box;
	border-radius: 0 0 var(--cherry-radius) 0 !important;
	background: var(--cherry-panel-color) !important;
	transition:
		width var(--cherry-speed) var(--giac-ease),
		max-width var(--cherry-speed) var(--giac-ease),
		border-radius 200ms ease-out !important;
}

body.cherry-hero-nav #header-grid .container {
	max-width: none !important;
	margin: 0 !important;
	padding: var(--cherry-nav-padding) !important;
}

/* Concave curve between the panel and the hero photo. */
body.cherry-hero-nav #header-grid .header--row-inner::after {
	content: "";
	position: absolute;
	top: var(--cherry-curve-top);
	left: calc(100% - 1px);
	width: calc(var(--cherry-gap) + 1px);
	height: var(--cherry-gap);
	pointer-events: none;
	background: radial-gradient(circle at 100% 100%, transparent 0, transparent var(--cherry-gap), var(--cherry-panel-color) calc(var(--cherry-gap) + 0.5px));
	transition: opacity 200ms ease;
}

/* Matching curve on the outer right edge. */
body.cherry-hero-nav #header-grid::after {
	content: "";
	position: absolute;
	top: var(--cherry-curve-top);
	right: calc(var(--cherry-edge) - 1px);
	width: calc(var(--cherry-gap) + 1px);
	height: var(--cherry-gap);
	z-index: 1;
	pointer-events: none;
	background: radial-gradient(circle at 0% 100%, transparent 0, transparent var(--cherry-gap), var(--cherry-panel-color) calc(var(--cherry-gap) + 0.5px));
	transition: opacity 200ms ease;
}

/* ---------- Row crossfade (compact row <-> full desktop row) ----------
   Both rows stay laid out; only opacity swaps, so nothing jumps. */

body.cherry-hero-nav #header-grid .header--row[data-show-on] {
	display: block !important;
	transition: opacity 200ms ease !important;
}

body.cherry-hero-nav #header-grid .header--row[data-show-on="desktop"] {
	position: absolute !important;
	top: 0;
	left: 0;
	right: 0;
}

body.cherry-hero-nav #header-grid .header--row[data-show-on="mobile"] {
	position: relative !important;
	opacity: 1 !important;
}

body.cherry-hero-nav #header-grid .header--row[data-show-on="desktop"] {
	opacity: 0 !important;
	pointer-events: none !important;
}

@media (min-width: 960px) {
	body.cherry-hero-nav.cherry-nav-docked #header-grid .header--row[data-show-on="mobile"] {
		opacity: 0 !important;
		pointer-events: none !important;
	}

	body.cherry-hero-nav.cherry-nav-docked #header-grid .header--row[data-show-on="desktop"] {
		opacity: 1 !important;
		pointer-events: auto !important;
	}

	/* Compact panel on desktop: logo left, burger right. */
	body.cherry-hero-nav #header-grid .header--row[data-show-on="mobile"] .row--wrapper {
		display: flex !important;
		align-items: center;
	}

	body.cherry-hero-nav #header-grid .header--row[data-show-on="mobile"] .hfg-slot.center {
		order: 1;
		flex: 1 1 auto !important;
		justify-content: flex-start !important;
	}

	/* whichever side slot holds the burger goes last; the empty one collapses */
	body.cherry-hero-nav #header-grid .header--row[data-show-on="mobile"] .hfg-slot:is(.left, .right) {
		display: none !important;
	}

	body.cherry-hero-nav #header-grid .header--row[data-show-on="mobile"] .hfg-slot:has(.builder-item--nav-icon) {
		display: flex !important;
		order: 2;
		flex: 0 0 auto !important;
		margin-left: auto !important;
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 959px) {
	/* Left curve under the compact mobile panel. */
	body.cherry-hero-nav #header-grid .header--row[data-show-on="mobile"]::after {
		content: "";
		position: absolute;
		top: 100%;
		left: var(--cherry-edge);
		width: var(--cherry-gap);
		height: var(--cherry-gap);
		z-index: 1;
		pointer-events: none;
		background: radial-gradient(circle at 100% 100%, transparent 0, transparent var(--cherry-gap), var(--cherry-panel-color) calc(var(--cherry-gap) + 0.5px));
		transition: opacity 200ms ease;
	}

	/* Docked: hairline + soft shadow under the bar, edge to edge.
	   (On the full-width panel, not the inner .row--wrapper, which Neve
	   insets a few px and made the bar look like it had side gaps.) */
	body.cherry-hero-nav.cherry-nav-docked #header-grid .header--row[data-show-on="mobile"] .row--wrapper {
		border-bottom: 0 !important;
		box-shadow: none !important;
	}

	body.cherry-hero-nav.cherry-nav-docked #header-grid .header--row[data-show-on="mobile"] .header--row-inner {
		border-bottom: 1px solid rgba(217, 197, 178, 0.3) !important;
		box-shadow: var(--giac-shadow-sm) !important;
	}

	/* Docked / menu open: flush full-width bar. */
	body.cherry-hero-nav.cherry-nav-docked #header-grid .header--row-inner,
	body.cherry-hero-nav.is-menu-sidebar #header-grid .header--row-inner {
		border-radius: 0 !important;
	}
}

@media (max-width: 600px) {
	body.cherry-hero-nav #header-grid .header--row-inner::after {
		width: var(--cherry-gap);
	}
}

/* ---------- Docked or menu open: expand and drop the curves ---------- */

body.cherry-hero-nav.cherry-nav-docked #header-grid .header--row-inner,
body.cherry-hero-nav.is-menu-sidebar #header-grid .header--row-inner {
	width: 100% !important;
	max-width: 100% !important;
}

body.cherry-hero-nav.cherry-nav-docked #header-grid .header--row-inner::after,
body.cherry-hero-nav.is-menu-sidebar #header-grid .header--row-inner::after,
body.cherry-hero-nav.cherry-nav-docked #header-grid::after,
body.cherry-hero-nav.is-menu-sidebar #header-grid::after,
body.cherry-hero-nav.cherry-nav-docked #header-grid .header--row[data-show-on="mobile"]::after,
body.cherry-hero-nav.is-menu-sidebar #header-grid .header--row[data-show-on="mobile"]::after {
	opacity: 0 !important;
}

/* ---------- Standalone (Cherry nav on, but no Cherry Hero block) ---------- */

body.cherry-nav-standalone #header-grid::after,
body.cherry-nav-standalone #header-grid .header--row-inner::after,
body.cherry-nav-standalone #header-grid .header--row[data-show-on="mobile"]::after {
	display: none;
}

body.cherry-nav-standalone #content {
	padding-top: calc(var(--cherry-curve-top) + 64px);
}

@media (prefers-reduced-motion: reduce) {
	body.cherry-hero-nav #header-grid .header--row-inner,
	body.cherry-hero-nav #header-grid .header--row-inner::after,
	body.cherry-hero-nav #header-grid .header--row,
	body.cherry-hero-nav #header-grid::after {
		transition: none !important;
	}
}