/*
 * Generation 22 — nav masthead
 * Tokens: #e5e5e5 · #1a1a1a · #3F2780 · #FFD141
 *
 * Floating editorial capsule (not a full-bleed frosted strip).
 * Brand left · quiet links center · two pill CTAs right.
 * Scroll: JS keeps a quiet visual state only; header geometry stays fixed.
 */

body .g22-header.g22-header--taste,
body.home .g22-header.g22-header--taste,
body.home .g22-header.g22-header--taste.g22-header--condensed,
body.home:has(.g22-henna--clean) .g22-header.g22-header--taste,
body.home:has(.g22-henna--clean) .g22-header.g22-header--taste.g22-header--condensed {
	--g22-nav-ink: var(--g22-ink);
	--g22-nav-soft: rgba(26, 26, 26, 0.58);
	--g22-nav-purple: var(--g22-purple);
	--g22-nav-purple-hot: var(--g22-purple-hot);
	--g22-nav-yellow: var(--g22-yellow);
	--g22-nav-yellow-hot: var(--g22-yellow-hot);
	--g22-nav-line: var(--g22-purple-14);
	--g22-nav-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 246, 252, 0.9) 100%);
	--g22-nav-glass-deep: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 245, 251, 0.95) 100%);
	--g22-nav-rail: rgba(63, 39, 128, 0.055);
	--g22-nav-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--g22-nav-pad-y: 10px;
	--g22-nav-pad-x: clamp(14px, 1.6vw, 22px);
	--g22-nav-h: 68px;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	column-gap: clamp(16px, 2.4vw, 36px);
	position: sticky;
	top: 14px;
	z-index: 300;
	height: var(--g22-nav-h);
	min-height: var(--g22-nav-h);
	width: min(calc(100% - 28px), 1180px);
	max-width: none;
	margin: 0 auto;
	padding: var(--g22-nav-pad-y) var(--g22-nav-pad-x);
	border: 1px solid rgba(63, 39, 128, 0.13);
	border-radius: 999px;
	background: var(--g22-nav-glass);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.92),
		0 2px 6px rgba(26, 26, 26, 0.04),
		0 18px 44px rgba(26, 26, 26, 0.08),
		0 6px 16px rgba(67, 41, 128, 0.07);
	-webkit-backdrop-filter: blur(20px) saturate(1.15);
	backdrop-filter: blur(20px) saturate(1.15);
	color: var(--g22-nav-ink);
	font-family: Manrope, sans-serif;
	animation: none;
	transition:
		background 180ms var(--g22-nav-ease),
		border-color 180ms var(--g22-nav-ease),
		box-shadow 180ms var(--g22-nav-ease);
}

/* Scrolled: stronger paper without a layout shift. Changing sticky-header
 * height/width while the document is scrolling feeds back into scroll
 * anchoring and made the capsule jump around the 50px threshold. */
body .g22-header.g22-header--taste.g22-header--condensed,
body.home .g22-header.g22-header--taste.g22-header--condensed,
body.home:has(.g22-henna--clean) .g22-header.g22-header--taste.g22-header--condensed {
	top: 14px;
	--g22-nav-h: 68px;
	--g22-nav-pad-y: 10px;
	--g22-nav-pad-x: clamp(14px, 1.6vw, 22px);
	width: min(calc(100% - 28px), 1180px);
	background: var(--g22-nav-glass-deep);
	border-color: rgba(63, 39, 128, 0.17);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.96),
		0 2px 7px rgba(26, 26, 26, 0.05),
		0 14px 34px rgba(26, 26, 26, 0.09),
		0 5px 14px rgba(67, 41, 128, 0.08);
}

body .g22-header.g22-header--taste::after {
	display: none;
}

/* Base resets formerly in style.css — taste owns the only header now, so
   these must live here (gating :not(--taste) left toggle visible + list
   discs showing as “dots in the menu”). */
body .g22-header--taste .g22-header__nav ul,
body .g22-header--taste .g22-header__nav li,
body.home .g22-header--taste .g22-header__nav ul,
body.home .g22-header--taste .g22-header__nav li {
	list-style: none;
	margin: 0;
	padding: 0;
}

body .g22-header--taste .g22-header__toggle,
body.home .g22-header--taste .g22-header__toggle {
	display: none; /* mobile mq below turns this on */
}

/* ---- Wordmark ---- */
body .g22-header--taste .g22-header__logo {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	min-height: 0;
	height: 100%;
	padding: 0 4px 0 6px;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	transition: opacity 0.2s var(--g22-nav-ease);
}

body .g22-header--taste.g22-header--condensed .g22-header__logo {
	min-height: 0;
	background: transparent;
	box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
	body .g22-header--taste .g22-header__logo:hover {
		transform: none;
		opacity: 0.72;
		box-shadow: none;
	}
}

body .g22-header--taste .g22-header__logo-image {
	width: auto;
	max-height: 40px;
	filter: none;
}

body .g22-header--taste.g22-header--condensed .g22-header__logo-image {
	max-height: 40px;
}

/* ---- Links ---- */
body .g22-header--taste .g22-header__nav {
	justify-self: center;
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	min-width: 0;
}

@media (min-width: 961px) {
	body .g22-header--taste .g22-header__nav {
		display: block;
	}

	body .g22-header--taste .g22-header__nav ul,
	body.home .g22-header--taste .g22-header__nav ul,
	body.home:has(.g22-henna--clean) .g22-header--taste .g22-header__nav ul {
		position: relative;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		gap: clamp(2px, 0.55vw, 8px);
		margin: 0;
		padding: 4px;
		border: 1px solid rgba(63, 39, 128, 0.07);
		border-radius: 999px;
		background: var(--g22-nav-rail);
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.78),
			inset 0 0 0 1px rgba(255, 255, 255, 0.22);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	body .g22-header--taste.g22-header--condensed .g22-header__nav ul {
		background: rgba(63, 39, 128, 0.065);
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.82),
			inset 0 0 0 1px rgba(255, 255, 255, 0.24);
	}

	body .g22-header--taste .g22-header__nav .menu-item {
		position: relative;
		z-index: 1;
		margin: 0;
	}

	body .g22-header--taste .g22-header__nav a,
	body.home .g22-header--taste .g22-header__nav a,
	body.home:has(.g22-henna--clean) .g22-header--taste .g22-header__nav a {
		position: relative;
		z-index: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 36px;
		padding: 0 11px;
		border: 0;
		border-radius: 999px;
		outline: 0;
		background: transparent;
		box-shadow: none;
		color: var(--g22-nav-soft);
		font-family: Manrope, sans-serif;
		font-size: 0.8125rem;
		font-weight: 600;
		letter-spacing: -0.01em;
		text-transform: none;
		text-decoration: none;
		line-height: 1;
		white-space: nowrap;
		transition:
			color 0.2s var(--g22-nav-ease),
			background-color 0.2s var(--g22-nav-ease),
			transform 0.2s var(--g22-nav-ease);
	}

	/* The inner rail and raised active chip separate navigation from the shell.
	   This keeps the white-on-light masthead from reading as one flat strip. */
	body .g22-header--taste .g22-header__nav a::after,
	body.home .g22-header--taste .g22-header__nav a::after {
		content: none;
		display: none;
	}

	body .g22-header--taste .g22-header__nav a:focus-visible,
	body.home .g22-header--taste .g22-header__nav a:focus-visible {
		background: #fff;
		color: var(--g22-nav-ink);
		outline: 2px solid var(--g22-nav-purple);
		outline-offset: 2px;
		box-shadow: none;
	}

	@media (hover: hover) and (pointer: fine) {
		body .g22-header--taste .g22-header__nav a:hover,
		body.home .g22-header--taste .g22-header__nav a:hover {
			background: rgba(255, 255, 255, 0.82);
			box-shadow: 0 2px 7px rgba(63, 39, 128, 0.09);
			color: var(--g22-nav-ink);
			transform: translateY(-1px);
		}
	}

	body .g22-header--taste .g22-header__nav a:active,
	body.home .g22-header--taste .g22-header__nav a:active {
		transform: translateY(0) scale(0.96);
	}

	body .g22-header--taste .g22-header__nav .current-menu-item > a,
	body .g22-header--taste .g22-header__nav .current_page_item > a,
	body .g22-header--taste .g22-header__nav .current-menu-ancestor > a,
	body .g22-header--taste .g22-header__nav a[aria-current="page"],
	body.home .g22-header--taste .g22-header__nav .current-menu-item > a,
	body.home .g22-header--taste .g22-header__nav .current_page_item > a,
	body.home .g22-header--taste .g22-header__nav a[aria-current="page"] {
		background: linear-gradient(180deg, #fff 0%, #faf8fe 100%);
		outline: 0;
		box-shadow:
			0 0 0 1px rgba(63, 39, 128, 0.11),
			0 3px 10px rgba(63, 39, 128, 0.1);
		color: var(--g22-nav-purple);
		font-weight: 700;
	}
}

/* ---- Actions ---- */
body .g22-header--taste .g22-header__actions,
body.home .g22-header--taste .g22-header__actions {
	grid-column: auto;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

/* Appearance + motion (fill, border, color, hover/active/focus) now live
   solely in g22-buttons.css (PRIMARY variant). This file keeps only what is
   genuinely specific to sitting inside the nav grid. */
body .g22-header--taste .g22-header__cta,
body.home .g22-header--taste .g22-header__cta,
body.home:has(.g22-henna--clean) .g22-header--taste .g22-header__cta {
	justify-self: end;
	height: 48px;
	min-height: 48px;
	padding-inline: 24px;
	font-family: var(--g22-font-body, "Manrope", sans-serif);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.06em;
	/* Client audit 2026-07-29 (task 8): base .g22-header__cta rule in
	   home-henna.css still sets text-transform: uppercase, so the CTA read
	   as ЗАПИСАТИСЯ while its neighbour (Консультація) stayed sentence
	   case. This --taste-scoped rule has higher specificity, so overriding
	   it here (rather than touching the shared/legacy rule) is the safe,
	   contained fix. */
	text-transform: none;
	transition:
		background-color 160ms var(--g22-nav-ease),
		border-color 160ms var(--g22-nav-ease),
		color 160ms var(--g22-nav-ease),
		box-shadow 160ms var(--g22-nav-ease),
		transform 160ms var(--g22-nav-ease);
}

body .g22-header--taste .g22-header__cta::before {
	content: none;
}

body .g22-header--taste .g22-header__cta::after,
body.home .g22-header--taste .g22-header__cta::after {
	content: none;
}

/* Consult trigger (SECONDARY variant) — only the nav-specific flex-shrink
   guard stays here; fill/border/color/hover/focus own by g22-buttons.css. */
body .g22-header--taste .g22-header__consult,
body.home .g22-header--taste .g22-header__consult {
	flex: none;
	height: 48px;
	min-height: 48px;
	padding-inline: 24px;
	font-family: var(--g22-font-body, "Manrope", sans-serif);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1;
}

@media (max-width: 1100px) {
	body .g22-header--taste .g22-header__consult,
	body.home .g22-header--taste .g22-header__consult {
		display: none;
	}
}

/* ---- Mobile ---- */
@media (max-width: 960px) {
	body .g22-header.g22-header--taste,
	body.home .g22-header.g22-header--taste,
	body.home .g22-header.g22-header--taste.g22-header--condensed,
	body.home .g22-header.g22-header--taste.is-menu-open,
	body.home .g22-header.g22-header--taste.g22-header--condensed.is-menu-open,
	body.home:has(.g22-henna--clean) .g22-header.g22-header--taste,
	body.home:has(.g22-henna--clean) .g22-header.g22-header--taste.g22-header--condensed {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 8px;
		top: 10px;
		width: calc(100% - 20px);
		height: 56px;
		min-height: 56px;
		padding: 0 8px 0 12px;
		border: 1px solid rgba(63, 39, 128, 0.13);
		border-radius: 999px;
		background: var(--g22-nav-glass-deep);
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.94),
			0 2px 6px rgba(26, 26, 26, 0.04),
			0 14px 32px rgba(26, 26, 26, 0.08),
		0 5px 12px rgba(67, 41, 128, 0.07);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	body .g22-header--taste .g22-header__logo {
		order: 1;
		flex: 1 1 auto;
		min-width: 0;
		min-height: 0;
		height: auto;
		padding: 0;
	}

	body .g22-header--taste .g22-header__logo-image {
		max-height: 34px;
		width: min(126px, 100%);
		min-height: 28px;
	}

	body .g22-header--taste .g22-header__actions,
	body.home .g22-header--taste .g22-header__actions {
		order: 2;
		flex: 0 0 auto;
		gap: 10px;
	}

	/* home-henna hides .g22-header__cta on body.home ≤899px (legacy BE skin).
	   Taste nav keeps the same Записатися pill as inner pages. */
	body.home .g22-header--taste .g22-header__cta,
	body.home:has(.g22-henna--clean) .g22-header--taste .g22-header__cta {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* Mobile CTA sizing/shrink removed — the 48px unified pill (g22-buttons.css)
	   holds at every breakpoint; the header shell itself is 56px tall here,
	   plenty of room. */

	/* Stack menu/close icons in one cell. home-henna forces both SVGs to
	   display:block with opacity morph; inline-flex left the hidden icon in
	   the flex flow and shoved the X ~7px off-center. */
	body .g22-header--taste .g22-header__toggle,
	body.home .g22-header--taste .g22-header__toggle {
		order: 3;
		display: grid;
		place-items: center;
		flex: 0 0 44px;
		width: 44px;
		height: 44px;
		min-width: 44px;
		min-height: 44px;
		border-radius: 50%;
		border: 1px solid rgba(63, 39, 128, 0.12);
		background: rgba(255, 255, 255, 0.96);
		color: var(--g22-nav-ink);
		box-shadow: 0 2px 8px rgba(63, 39, 128, 0.08);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		transition: transform 120ms var(--g22-nav-ease), background-color 120ms var(--g22-nav-ease);
	}

	body .g22-header--taste .g22-header__toggle-icon,
	body.home .g22-header--taste .g22-header__toggle-icon {
		grid-area: 1 / 1;
		display: block;
		width: 24px;
		height: 24px;
		transition:
			opacity 160ms var(--g22-nav-ease),
			transform 220ms var(--g22-nav-ease),
			filter 160ms var(--g22-nav-ease);
	}

	body .g22-header--taste .g22-header__toggle-icon--menu,
	body.home .g22-header--taste .g22-header__toggle-icon--menu {
		opacity: 1;
		transform: scale(1) rotate(0deg);
		filter: blur(0);
	}

	body .g22-header--taste .g22-header__toggle-icon--close,
	body.home .g22-header--taste .g22-header__toggle-icon--close {
		opacity: 0;
		transform: scale(0.9) rotate(-20deg);
		filter: blur(2px);
		pointer-events: none;
	}

	body .g22-header--taste.is-menu-open .g22-header__toggle-icon--menu,
	body.home .g22-header--taste.is-menu-open .g22-header__toggle-icon--menu {
		display: block;
		opacity: 0;
		transform: scale(0.9) rotate(20deg);
		filter: blur(2px);
		pointer-events: none;
	}

	body .g22-header--taste.is-menu-open .g22-header__toggle-icon--close,
	body.home .g22-header--taste.is-menu-open .g22-header__toggle-icon--close {
		display: block;
		opacity: 1;
		transform: scale(1) rotate(0deg);
		filter: blur(0);
		pointer-events: auto;
	}

	body .g22-header--taste .g22-header__toggle:active {
		transform: scale(0.96);
	}

	body .g22-header--taste .g22-header__toggle:focus-visible {
		outline: 3px solid rgba(63, 39, 128, 0.28);
		outline-offset: 2px;
	}

	body .g22-header--taste.is-menu-open .g22-header__toggle {
		border-color: var(--g22-nav-purple);
		background: var(--g22-nav-purple);
		box-shadow: 0 6px 16px rgba(63, 39, 128, 0.22);
		color: #fff;
	}

	body .g22-header--taste .g22-header__ink {
		display: none;
	}

	body .g22-header--taste .g22-header__nav,
	body.home .g22-header--taste .g22-header__nav {
		position: fixed;
		top: 74px;
		left: 10px;
		right: 10px;
		z-index: 310;
		display: block;
		box-sizing: border-box;
		justify-self: auto;
		width: auto;
		max-width: none;
		max-height: calc(100dvh - 90px);
		overflow-x: hidden;
		overflow-y: auto;
		padding: 14px;
		border: 1px solid rgba(63, 39, 128, 0.12);
		border-radius: 24px;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 246, 252, 0.98));
		background-clip: padding-box;
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.94),
			0 28px 64px rgba(26, 26, 26, 0.2);
		-webkit-backdrop-filter: blur(20px) saturate(1.1);
		backdrop-filter: blur(20px) saturate(1.1);
		isolation: isolate;
		visibility: hidden;
		opacity: 0;
		transform: translateY(-8px) scale(0.98);
		transform-origin: top center;
		pointer-events: none;
		transition:
			visibility 0s linear 160ms,
			opacity 140ms cubic-bezier(0.4, 0, 1, 1),
			transform 160ms cubic-bezier(0.4, 0, 1, 1);
	}

	body .g22-header--taste.is-menu-open .g22-header__nav {
		visibility: visible;
		opacity: 1;
		transform: translateY(0) scale(1);
		pointer-events: auto;
		transition:
			visibility 0s,
			opacity 200ms var(--g22-nav-ease),
			transform 220ms var(--g22-nav-ease);
	}

	body .g22-header--taste .g22-header__nav ul,
	body.home .g22-header--taste .g22-header__nav ul {
		display: grid;
		gap: 4px;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
	}

	body .g22-header--taste .g22-header__nav a,
	body.home .g22-header--taste .g22-header__nav a {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		width: 100%;
		max-width: 100%;
		min-height: 52px;
		padding: 0 18px;
		border-radius: 999px;
		background: transparent;
		color: var(--g22-nav-ink);
		font-family: Manrope, sans-serif;
		font-size: 1.05rem;
		font-weight: 600;
		letter-spacing: -0.015em;
		text-transform: none;
		text-decoration: none;
	}

	body .g22-header--taste .g22-header__nav a::before,
	body.home .g22-header--taste .g22-header__nav a::before {
		content: none;
		display: none;
	}

	body .g22-header--taste .g22-header__nav a::after {
		display: none;
	}

	body .g22-header--taste .g22-header__nav a:hover,
	body .g22-header--taste .g22-header__nav a:focus-visible,
	body .g22-header--taste .g22-header__nav .current-menu-item > a,
	body .g22-header--taste .g22-header__nav .current_page_item > a,
	body .g22-header--taste .g22-header__nav a[aria-current="page"],
	body.home .g22-header--taste .g22-header__nav a:hover,
	body.home .g22-header--taste .g22-header__nav a:focus-visible,
	body.home .g22-header--taste .g22-header__nav .current-menu-item > a,
	body.home .g22-header--taste .g22-header__nav .current_page_item > a,
	body.home .g22-header--taste .g22-header__nav a[aria-current="page"] {
		background: rgba(63, 39, 128, 0.09);
		outline: 0;
		box-shadow: inset 0 0 0 1px rgba(63, 39, 128, 0.07);
		color: var(--g22-nav-purple);
		font-weight: 700;
	}
}

@media (max-width: 960px) and (prefers-reduced-motion: reduce) {
	body .g22-header--taste .g22-header__nav,
	body .g22-header--taste.is-menu-open .g22-header__nav {
		transition: none;
	}
}

body .g22-header--taste.is-menu-instant .g22-header__nav,
body .g22-header--taste.is-menu-instant .g22-header__toggle {
	transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
	body .g22-header--taste,
	body .g22-header--taste .g22-header__logo,
	body .g22-header--taste .g22-header__ink {
		transition: none !important;
		animation: none !important;
	}

	/* .g22-header__cta / .g22-header__consult reduced-motion handled once,
	   sitewide, in g22-buttons.css. */
}

/* Admin bar offset */
body.admin-bar .g22-header.g22-header--taste {
	top: calc(14px + 32px);
}

body.admin-bar .g22-header.g22-header--taste.g22-header--condensed {
	top: calc(14px + 32px);
}

@media (max-width: 782px) {
	body.admin-bar .g22-header.g22-header--taste {
		top: calc(10px + 46px);
	}
}

body .g22-menu-backdrop {
	display: block;
	z-index: 250;
	background: rgba(26, 26, 26, 0.42);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 140ms cubic-bezier(0.4, 0, 1, 1);
}

body.g22-menu-open {
	overflow: hidden;
}

body.g22-menu-open .g22-menu-backdrop {
	opacity: 1;
	pointer-events: auto;
	transition: opacity 200ms var(--g22-nav-ease);
}

body:has(.g22-header--taste.is-menu-instant) .g22-menu-backdrop {
	transition: none !important;
}