/**
 * header.css
 * Sticky/blur header chrome, desktop <-> mobile layout switch, offcanvas
 * mobile menu, and the fullscreen search overlay.
 *
 * DOM order note: see template-parts/header/site-header.php — the mobile
 * menu toggle is the first child of .site-header__inner on purpose, so
 * the mobile layout below only needs to hide/show elements, never
 * reorder them.
 */

/* ---------------------------------------------------------------
 * Header shell
 * ------------------------------------------------------------- */
.site-header {
	position: relative;
	z-index: var(--z-header);
	border-bottom: 1px solid var(--color-border);
	/* Subtle translucent surface with blur, even before scrolling —
	   matches "полупрозрачный фон" from §6 rather than fully transparent. */
	background-color: rgba(11, 11, 13, 0.72);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition:
		background-color var(--duration-slow) var(--ease-standard),
		border-color var(--duration-slow) var(--ease-standard);

	/* Gentle appearance on load (§6) */
	animation: darkcommerce-header-in var(--duration-slow) var(--ease-standard);
}

@keyframes darkcommerce-header-in {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.site-header {
		animation: none;
	}
}

.site-header.is-sticky {
	position: sticky;
	top: 0;
}

/* On scroll, JS (header.js) toggles this class to solidify the background
   slightly — a small, restrained change, not a redesign. */
.site-header.is-scrolled {
	background-color: rgba(11, 11, 13, 0.92);
}

@supports not (backdrop-filter: blur(1px)) {
	.site-header {
		background-color: var(--color-bg);
	}
}

/* ---------------------------------------------------------------
 * Header layout
 * ------------------------------------------------------------- */
.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	height: var(--header-height);
}

.site-header__branding {
	display: flex;
	align-items: center;
	min-width: 0; /* allow the flex item to shrink below its text's intrinsic width instead of overflowing (§21) */
}

.site-header__logo-text {
	display: block;
	max-width: 100%;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.custom-logo-link img {
	max-height: 32px;
	width: auto;
}

.site-header__nav {
	flex: 1;
	display: flex;
	justify-content: center;
}

.primary-menu {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.primary-menu > li > a {
	font-size: var(--font-size-small);
	font-weight: 500;
	color: var(--color-text-secondary);
	transition: color var(--duration-base) var(--ease-standard);
}

.primary-menu > li > a:hover,
.primary-menu > li.current-menu-item > a {
	color: var(--color-text);
}

/* Nested dropdowns (categories with children) — minimal, no heavy
   animation, per §4. */
.primary-menu li {
	position: relative;
}

.primary-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	padding: var(--space-2);
	margin-top: var(--space-2);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-popover);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition:
		opacity var(--duration-base) var(--ease-standard),
		transform var(--duration-base) var(--ease-standard),
		visibility var(--duration-base) var(--ease-standard);
}

.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.primary-menu .sub-menu a {
	display: block;
	padding: var(--space-2);
	border-radius: var(--radius-sm);
	color: var(--color-text-secondary);
}

.primary-menu .sub-menu a:hover {
	background-color: var(--color-surface-2);
	color: var(--color-text);
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-1);
}

.site-header__menu-toggle {
	display: none;
}

/* ---------------------------------------------------------------
 * Mobile layout switch (§7)
 * DOM order is already [toggle, branding, nav, actions], so mobile only
 * needs display:none on the desktop nav and display on the toggle.
 * ------------------------------------------------------------- */
@media (max-width: 1024px) {
	.site-header__nav {
		display: none;
	}

	.site-header__menu-toggle {
		display: inline-flex;
	}

	.site-header__account {
		display: none; /* duplicated inside the mobile menu footer */
	}

	.site-header__branding {
		flex: 1;
	}
}

/* ---------------------------------------------------------------
 * Mobile offcanvas menu
 * ------------------------------------------------------------- */
.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: var(--z-offcanvas);
}

.mobile-menu[hidden] {
	display: none;
}

.mobile-menu__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.6);
	border: none;
	cursor: default;
	opacity: 0;
	transition: opacity var(--duration-base) var(--ease-standard);
}

.mobile-menu__panel {
	position: relative;
	z-index: 1;
	width: min(360px, 100%);
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: var(--color-surface);
	border-right: 1px solid var(--color-border);
	padding: var(--space-3);
	transform: translateX(-100%);
	transition: transform var(--duration-slow) var(--ease-standard);
	overflow-y: auto;
}

.mobile-menu[data-state="open"] .mobile-menu__backdrop {
	opacity: 1;
}

.mobile-menu[data-state="open"] .mobile-menu__panel {
	transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
	.mobile-menu__panel {
		transition: none;
	}
}

.mobile-menu__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-3);
}

.mobile-menu__title {
	font-weight: 600;
}

.mobile-menu__search {
	position: relative;
	display: flex;
	align-items: center;
	margin-bottom: var(--space-4);
}

.mobile-menu__search svg {
	position: absolute;
	left: 14px;
	width: 18px;
	height: 18px;
	color: var(--color-text-muted);
	pointer-events: none;
}

.mobile-menu__search input {
	padding-left: 42px;
}

.mobile-menu__nav {
	flex: 1;
}

.mobile-menu__list > li {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-bottom: 1px solid var(--color-border);
}

.mobile-menu__list > li > a {
	flex: 1;
	display: block;
	padding: var(--space-3) var(--space-1);
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--color-text);
}

/* Chevron toggle injected by navigation.js next to parent items that have
   a .sub-menu — see initMobileMenu(). Absent entirely with JS disabled,
   in which case the sub-menu simply stays visible (no [hidden] applied). */
.mobile-menu__submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--color-text-secondary);
	flex-shrink: 0;
}

.mobile-menu__submenu-toggle svg {
	width: 16px;
	height: 16px;
	transition: transform var(--duration-base) var(--ease-standard);
}

.mobile-menu__submenu-toggle[aria-expanded="true"] svg {
	transform: rotate(90deg);
}

.mobile-menu__list .sub-menu {
	flex-basis: 100%;
	padding-bottom: var(--space-2);
}

.mobile-menu__list .sub-menu[hidden] {
	display: none;
}

.mobile-menu__list .sub-menu a {
	display: block;
	padding: var(--space-2) var(--space-1) var(--space-2) var(--space-3);
	font-size: var(--font-size-small);
	color: var(--color-text-secondary);
}

.mobile-menu__footer {
	margin-top: var(--space-3);
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-border);
}

.mobile-menu__account {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-1);
	font-weight: 500;
}

.mobile-menu__account svg {
	width: 18px;
	height: 18px;
}

@media (min-width: 1025px) {
	.mobile-menu {
		display: none !important;
	}
}

/* ---------------------------------------------------------------
 * Search overlay (§19)
 * ------------------------------------------------------------- */
.search-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal);
}

.search-overlay[hidden] {
	display: none;
}

.search-overlay__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.7);
	border: none;
	cursor: default;
	opacity: 0;
	transition: opacity var(--duration-base) var(--ease-standard);
}

.search-overlay__panel {
	position: relative;
	z-index: 1;
	max-width: 720px;
	margin: 0 auto;
	padding: var(--space-6) var(--container-padding);
	opacity: 0;
	transform: translateY(-12px);
	transition:
		opacity var(--duration-slow) var(--ease-standard),
		transform var(--duration-slow) var(--ease-standard);
}

.search-overlay[data-state="open"] .search-overlay__backdrop {
	opacity: 1;
}

.search-overlay[data-state="open"] .search-overlay__panel {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.search-overlay__panel {
		transition: none;
	}
}

.search-overlay__close {
	position: absolute;
	top: var(--space-4);
	right: var(--container-padding);
}

.search-overlay__eyebrow {
	display: block;
	margin-bottom: var(--space-3);
}

.search-overlay__form {
	position: relative;
	display: flex;
	align-items: center;
	border-bottom: 2px solid var(--color-border);
	padding-bottom: var(--space-2);
	transition: border-color var(--duration-base) var(--ease-standard);
}

.search-overlay__form:focus-within {
	border-color: var(--color-text);
}

.search-overlay__input {
	flex: 1;
	background: transparent;
	border: none;
	padding: var(--space-2) 0;
	font-size: var(--font-size-h3);
	color: var(--color-text);
}

.search-overlay__input:focus {
	outline: none;
}

.search-overlay__submit {
	flex-shrink: 0;
}

.search-overlay__popular {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-4);
}

.search-overlay__popular-label {
	font-size: var(--font-size-small);
	color: var(--color-text-muted);
}

.search-overlay__popular-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.search-overlay__popular-list a {
	display: inline-flex;
	padding: 6px 14px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	font-size: var(--font-size-small);
	color: var(--color-text-secondary);
	transition:
		border-color var(--duration-base) var(--ease-standard),
		color var(--duration-base) var(--ease-standard);
}

.search-overlay__popular-list a:hover {
	border-color: var(--color-text);
	color: var(--color-text);
}

@media (max-width: 480px) {
	.search-overlay__input {
		font-size: var(--font-size-h4, 1.25rem);
	}
}

/* Lock body scroll while any overlay is open (class toggled by JS on <body>). */
body.has-overlay-open {
	overflow: hidden;
}