/* =============================================================================
 * Rahkar — sticky + glassmorphism header (SITE-WIDE, every page).
 *
 * Loaded globally, AFTER header.css (a verbatim base). Uses the standard glass
 * tokens from glass.css so the header matches every other frosted surface.
 *
 * Behaviour (per the owner, LV-style):
 *   • AT THE TOP of any page: the header is FULLY TRANSPARENT — just the
 *     logo/menu/search/account/cart floating over whatever is at y=0 (the
 *     homepage hero video, or a category's own banner, or plain page bg).
 *   • ONCE SCROLLED, or on :hover (even before scrolling): the header turns to
 *     frosted glass, same look either way.
 *   • The homepage hero additionally needs the header OUT OF FLOW
 *     (position:fixed) so the full-bleed video fills the viewport from y=0
 *     with the header floating over it; every other page stays a normal
 *     `position:sticky` element (nothing to overlap — transparent-at-rest
 *     reads identically to the page background there).
 *
 * `.is-scrolled` is toggled by header.js's scroll listener, which runs on
 * EVERY page unconditionally — so this single class drives the color switch
 * everywhere, home included. (The homepage ALSO gets `html.rh-home-hero` /
 * `rh-scrolled` from home-hero.js for its own hero-video concerns — this file
 * no longer needs to read those for header coloring.)
 *
 * Two admin-configurable modes (RAHKAR_HEADER_MODE, rahkarchrome AdminRahkarTheme):
 *   'transparent' (default) — the behaviour described above.
 *   'solid'                 — header.tpl adds `.rahkar-site-header--solid`,
 *                             which forces the glass look at rest too (no
 *                             transparent state), for shops without a hero.
 *
 * Header breakpoint matches header.css: desktop ≥ 901px, mobile ≤ 900px.
 * Header root: `.rahkar-site-header`, wrapped by `<header id="header">` (page.tpl).
 * ========================================================================== */

:root { --rh-header-h: 68px; }

/* =============================================================================
 *  MOBILE: no search row at all, by request — the mobile header is just the
 *  logo/hamburger/cart row, full stop; visitors browse via the bottom-nav
 *  categories sheet instead. Used to reveal a search row on scroll here (grid-
 *  row animation + a header pull-up to match); both retired together, since
 *  the pull-up existed only to make room for that row's reveal. header.tpl
 *  still renders `.rh-row--search` (left in place rather than removed, in
 *  case it's wanted back), so it's hidden outright rather than deleted here.
 * ========================================================================== */
@media (max-width: 900px) {
	.rahkar-site-header .rh-row--search {
		display: none;
	}
}


/* ---- Sticky positioning on every page (default) --------------------------- */
#header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 95;
}
/* MOBILE (≤900px): keep the header sticky at top:0 — no more pull-up-on-scroll,
 * since that existed only to make room for the search row's reveal (retired
 * above). (Home-hero overrides #header to position:fixed at higher
 * specificity, so this doesn't affect the homepage hero behaviour.) */
@media (max-width: 900px) {
	/* Scoped with :has() to the full shop header only — the cart/checkout funnel
	 * header is also #header but has no search row, so it stays pinned at top:0.
	 * Browsers without :has() simply keep the previous whole-header-sticky
	 * behaviour (graceful degradation). Still keyed off .rh-row--search's
	 * PRESENCE in the DOM (:has() doesn't care that it's display:none) rather
	 * than some other selector, so this doesn't need touching if that markup
	 * is ever pulled out of header.tpl for real.
	 *
	 * `position: sticky` is RE-DECLARED here on purpose: the forked classic
	 * theme.css sets `#header{position:relative}` and loads AFTER this file, so at
	 * the bare `#header` (specificity 1,0,0) it wins — leaving the header merely
	 * shifted up by -56px (logo row permanently hidden), NOT sticky. This selector
	 * is (1,1,0) via :has(.rh-row--search), so it reclaims `position: sticky`
	 * regardless of load order. */
	#header:has(.rh-row--search) {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
	}
}
/* DESKTOP (≥901px), non-home: same load-order reclaim as the mobile :has()
 * selector above — the forked classic theme.css's `#header{position:relative}`
 * (1,0,0) loads after this file's plain `#header{sticky}` rule and would win.
 * `html:not(.rh-home-hero) #header` is (1,1,1), so it reclaims stickiness.
 * Home reclaims via the `position:fixed` override below instead. */
@media (min-width: 901px) {
	html:not(.rh-home-hero) #header {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
	}
}

/* ---- The classic base paints the WRAPPER white -----------------------------
 * `themes/rahkar/assets/css/theme.css` (the forked classic sheet, auto-loaded by
 * core AFTER this file) carries:
 *     #header{position:relative;…;background:#fff;box-shadow:0 2px 5px …}
 * `.rahkar-site-header` below is the INNER element, so its `background:
 * transparent` never had anything to do with that white plate — the header has
 * been opaque at rest on every page regardless of RAHKAR_HEADER_MODE. That is
 * why "ترنسپرنت و با اسکرول سفید" never actually happened.
 *
 * `html #header` is (1,0,1) and beats the bare `#header` (1,0,0) whatever the
 * load order, which is the same trick this file already uses to reclaim
 * `position: sticky` from that sheet. The colour then comes entirely from the
 * inner element's rules below: nothing at rest, glass once scrolled. */
html #header {
	background: transparent;
	box-shadow: none;
}

/* ---- A hairline under the header, everywhere except the homepage ----------
 * The transparent-at-rest header only works over something: the homepage hero
 * fills the top of the screen, so the bar floats on a picture and needs no
 * edge. Every other page starts on plain background, where an edgeless header
 * simply merges into the content and the site loses its top boundary.
 *
 * `body#index` IS the homepage (PrestaShop writes the page name as the body id),
 * so one :not() covers every other page — including any added later — without
 * a list to maintain. The border is declared on both states so it survives the
 * scrolled/glass look, whose own border is a near-white glass edge meant to sit
 * over a photo. */
body:not(#index) .rahkar-site-header,
body:not(#index) .rahkar-site-header.is-scrolled {
	border-bottom-color: var(--wp--preset--color--border, #e2e4e9);
}

/* ---- Color: transparent at rest, frosted glass once scrolled OR hovered --- */
.rahkar-site-header {
	/* Header-only override of the shared glass.css token — a lighter tint than
	   every OTHER frosted surface (bottom-nav, sheets, …) on request: less white
	   wash, more of the page showing through the blur. Scoped to this element so
	   it doesn't change anything else that reads the same token. The @supports-not
	   fallback below intentionally does NOT use this token — a browser with no
	   backdrop-filter at all has no blur to soften busy content behind the header,
	   so that fallback needs the fuller opacity to stay legible on its own. */
	--rh-glass-bg-strong: rgba(255, 255, 255, 0.37);
	transition: background .3s ease, box-shadow .3s ease,
	            -webkit-backdrop-filter .3s ease, backdrop-filter .3s ease;
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-bottom: 1px solid transparent;
	box-shadow: none;
}
.rahkar-site-header.is-scrolled,
.rahkar-site-header:hover {
	/* Owner's tuned glass (tuner export): light 3px blur with strong
	   saturation, no edge line, a deeper soft shadow in its place. */
	background: var(--rh-glass-bg-strong, rgba(255, 255, 255, 0.37));
	-webkit-backdrop-filter: blur(3px) saturate(220%);
	backdrop-filter: blur(3px) saturate(220%);
	border-bottom-color: transparent;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .11);
}
/* Inner rows transparent so a single glass layer shows through (base header.css
 * gives the rows a solid bg + borders). */
.rahkar-site-header .rh-row { background: transparent; }
.rahkar-site-header .rh-row + .rh-row { border-top-color: rgba(0, 0, 0, .05); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.rahkar-site-header.is-scrolled,
	.rahkar-site-header:hover {
		background: rgba(255, 255, 255, 0.96);
	}
}

/* ---- «همیشه سفید/شیشه‌ای» admin mode — opt out of the transparent-at-rest
 *      look (shops without a hero banner). header.tpl adds this modifier
 *      class from $rahkar_chrome.header_mode (RAHKAR_HEADER_MODE). ---------- */
.rahkar-site-header--solid {
	background: var(--rh-glass-bg-strong, rgba(255, 255, 255, 0.37)) !important;
	-webkit-backdrop-filter: blur(3px) saturate(220%) !important;
	backdrop-filter: blur(3px) saturate(220%) !important;
	border-bottom-color: transparent !important;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .11) !important;
}

/* =============================================================================
 * HOMEPAGE HERO OVERLAP — both breakpoints.
 * On home the WHOLE #header is fixed (out of flow) so the full-bleed, flush-top
 * hero fills the viewport from y=0 with the header floating over it, and the
 * frosted glass keeps floating over the content as you scroll down. Coloring
 * is handled entirely by the universal `.rahkar-site-header`/`.is-scrolled`
 * rules above — nothing home-specific needed there.
 * ========================================================================== */
html.rh-home-hero #header {
	position: fixed;
	left: 0; right: 0; top: 0;
}

/* Same thing WITHOUT waiting for JS. `rh-home-hero` is added by home-hero.js,
 * which means one paint (and a whole cached-script's worth of "why is the
 * header still white?") before the overlap starts. The hero is server-rendered,
 * so the page can say so itself: if the document contains the image-slider hero,
 * the header floats over it. Same declarations, no script in the path.
 * (The video hero keeps the JS route — it has other work to do there anyway.) */
html:has(.rh-hero-slider) #header {
	position: fixed;
	left: 0; right: 0; top: 0;
}

/* =============================================================================
 * PRODUCT-PAGE HERO OVERLAP — "stacked" gallery mode only (RAHKAR_GALLERY_MODE).
 * Every viewport (desktop AND mobile) — see assets/css/product-gallery2.css,
 * which zeroes the page's normal top spacing so the gallery's first image
 * actually reaches y=0 underneath the now-fixed header, and hides the mobile
 * mini sticky header in favour of this floating one. Same technique as the
 * homepage hero above, different trigger: `body.rh-pdp-hero` (layout-both-
 * columns.tpl).
 *
 * !important: the forked classic theme.css ships a bare `#header{position:
 * relative; z-index:999; ...}` rule (lower specificity, but belt-and-
 * suspenders against any load-order surprise from CCC bundling); on mobile
 * there's also `#header:has(.rh-row--search){position:sticky}` — beaten by
 * the extra `body` type selector here even before `!important` is counted. */
body.rh-pdp-hero #header {
	position: fixed !important;
	left: 0 !important; right: 0 !important; top: 0 !important;
}

/* =============================================================================
 * FULLSCREEN SEARCH OVERLAY — escape the glass containing block.
 * The glass `backdrop-filter` above makes `.rahkar-site-header` the CONTAINING
 * BLOCK for every position:fixed descendant. The search overlay
 * (`.rh-search-wrap.is-open { position: fixed; inset: 0 }`, header-search.css,
 * now used on every viewport) lives inside the header, so its `inset: 0` would
 * resolve against the header box instead of the viewport if the header
 * currently has a backdrop-filter (scrolled or hovered) — the overlay would
 * then cover only the header strip and the page would bleed through below it.
 *
 * While the overlay is open (header-search.js adds `html.rh-search-open`) we
 * drop the header's backdrop-filter so `.rahkar-site-header` stops
 * establishing a containing block and the fixed overlay fills the real
 * viewport. `!important` beats both the `.is-scrolled`/`:hover` glass rule and
 * the `--solid` mode above. No visual cost: the opaque white overlay already
 * covers the header, so removing the blur underneath is invisible. */
html.rh-search-open .rahkar-site-header {
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}
/* …and drop it INSTANTLY. `.rahkar-site-header` transitions backdrop-filter over
 * .3s (rule at the top of this file), so without this the blur — and with it the
 * containing block — survived for 300ms AFTER the overlay opened: on a phone the
 * overlay opened clipped to the header strip exactly while the field took focus
 * and the keyboard came up. Also neutralize every other property that would make
 * an ancestor a containing block for the fixed overlay, on the whole chain it
 * hangs from — cheap, and it stops this class of bug from coming back through a
 * future row/animation style. */
html.rh-search-open .rahkar-site-header,
html.rh-search-open #header,
html.rh-search-open #header .rh-row,
html.rh-search-open #header .rh-row__inner,
html.rh-search-open #header .rh-item {
	transition: none !important;
	transform: none !important;
	filter: none !important;
	perspective: none !important;
	will-change: auto !important;
	contain: none !important;
}

/* ---- Mobile bottom-nav glass lives in bottom-nav.css (the authoritative dock
 *      styles, gated by its own media query) so it isn't overridden by load
 *      order. See `.rh-bnav` there. --------------------------------------- */