/*
 * RahkarTheme — header styles.
 *
 * Loaded on EVERY page (the header is global). Kept lean on purpose:
 * no animations beyond what feels essential, no custom properties that
 * could be folded into existing theme.json tokens, no rules for states
 * we don't ship (e.g. dark mode — add separately when needed).
 *
 * Sticky strategy: position: sticky on the root header. Pure CSS, no
 * scroll listener. Works inside the FSE constrained-layout wrapper
 * because the wrapper isn't a scroll container itself.
 *
 * RTL note: the site is set to direction:rtl globally (inc/enqueue.php
 * critical CSS). All flex/grid rules use logical directions through
 * justify-content / order so the same source works in either direction.
 */

/* ----------------------------------------------------------------------
 *  Tokens — local to the header to keep CSS independent of the rest.
 *  Color palette draws from theme.json presets so a theme-wide color
 *  swap propagates automatically.
 * ---------------------------------------------------------------------- */
.rahkar-site-header {
	--rh-fg:            var(--wp--preset--color--text, #1a1d23);
	--rh-fg-muted:      var(--wp--preset--color--text-muted, #5b6271);
	--rh-bg:            var(--wp--preset--color--base, #fff);
	--rh-border:        var(--wp--preset--color--border, #e2e4e9);
	--rh-primary:       var(--wp--preset--color--primary, #0a66c2);
	--rh-row-h:         68px;
	--rh-row-h-mobile:  56px;
	--rh-gap:           12px;
	--rh-pad-x:         clamp(12px, 3vw, 28px);
	--rh-mega-pad:      24px;
	--rh-z-header:      90;
	--rh-z-mega:        100;
}

/* ----------------------------------------------------------------------
 *  Root header element
 * ---------------------------------------------------------------------- */
.rahkar-site-header {
	background: var(--rh-bg);
	color: var(--rh-fg);
	border-bottom: 1px solid var(--rh-border);
	width: 100%;
	z-index: var(--rh-z-header);
	/* keep critical-CSS reserved height working as a floor */
	min-height: var(--rh-row-h);
}
/* Sticky on the FSE template-part WRAPPER, not the inner header.
 * The inner .rahkar-site-header can't be sticky — the wrapper is its
 * containing block and has the same height (zero scroll budget).
 * .is-sticky class stays on the inner header for JS targeting. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: var(--rh-z-header, 90);
}

/* Reset list/spacing inside the header so theme defaults don't bleed in. */
.rahkar-site-header ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.rahkar-site-header a {
	color: inherit;
	text-decoration: none;
}

/* ----------------------------------------------------------------------
 *  Rows
 *  Layout: each row is a flex container with 3 equal-weight zones so
 *  the center stays optically centered when the left and right zones
 *  have unequal width.
 * ---------------------------------------------------------------------- */
.rh-row {
	width: 100%;
}
.rh-row + .rh-row {
	border-top: 1px solid var(--rh-border);
}
.rh-row__inner {
	display: flex;
	align-items: center;
	gap: var(--rh-gap);
	min-height: var(--rh-row-h);
	padding-inline: var(--rh-pad-x);
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
}

.rh-zone {
	display: flex;
	align-items: center;
	gap: var(--rh-gap);
	flex: 1 1 0;
	min-width: 0;
}
.rh-zone--start  { justify-content: flex-start; gap: 20px; }
.rh-zone--center { justify-content: center; }
.rh-zone--end    { justify-content: flex-end; gap: 6px; }

/* ----------------------------------------------------------------------
 *  Item wrapper (rendered around every component by render.php)
 * ---------------------------------------------------------------------- */
.rh-item {
	display: flex;
	align-items: center;
	min-width: 0;
}
.rh-item--search_form {
	width: 100%;
}

/* ----------------------------------------------------------------------
 *  Logo
 * ---------------------------------------------------------------------- */
.rh-logo {
	display: inline-flex;
	align-items: center;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--lg, 1.25rem);
	line-height: 1;
}
.rh-logo__img {
	display: block;
	max-height: 40px;
	width: auto;
	height: auto;
}
.rh-logo--svg svg {
	display: block;
	height: calc(var(--rh-row-h) - 8px);
	width: auto;
	max-width: 100%;
}

/* ----------------------------------------------------------------------
 *  Menu  (top-level horizontal nav)
 * ---------------------------------------------------------------------- */
.rh-menu {
	display: flex;
	align-items: stretch;
}
.rh-menu__list {
	display: flex;
	align-items: stretch;
	gap: 2px;
}
.rh-menu__list > li {
	position: relative;
}
.rh-menu__list > li > a {
	display: flex;
	align-items: center;
	height: var(--rh-row-h);
	padding-inline: 14px;
	font-weight: 500;
	white-space: nowrap;
	color: var(--rh-fg);
	transition: color 120ms linear;
}
.rh-menu__list > li > a:hover,
.rh-menu__list > li.current-menu-item > a,
.rh-menu__list > li:focus-within > a {
	color: var(--rh-primary);
}
.rh-menu__list > li.menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 5px;
	height: 5px;
	border-bottom: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
	margin-inline-start: 5px;
	vertical-align: middle;
	position: relative;
	top: -2px;
}

/* Standard dropdown (non-mega) — opens on hover OR focus. */
.rh-menu__list .sub-menu {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	min-width: 220px;
	background: var(--rh-bg);
	border: 1px solid var(--rh-border);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(15,17,21,0.10);
	padding: 6px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 120ms linear, transform 120ms linear, visibility 0s linear 120ms;
	z-index: var(--rh-z-mega);
}
.rh-menu__list .sub-menu .sub-menu {
	inset-block-start: 0;
	inset-inline-start: 100%;
}
.rh-menu__list .sub-menu a {
	display: block;
	padding: 8px 12px;
	border-radius: 6px;
	color: var(--rh-fg);
}
.rh-menu__list .sub-menu a:hover {
	background: var(--wp--preset--color--surface, #f7f7f8);
	color: var(--rh-primary);
}
.rh-menu__list li:hover > .sub-menu,
.rh-menu__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s;
}

/* ----------------------------------------------------------------------
 *  Mega menu
 *  Activated by adding the CSS class `mega-menu` to a top-level item
 *  via Appearance → Menus → CSS Classes. The submenu becomes a full-
 *  width panel whose immediate children render as columns.
 * ---------------------------------------------------------------------- */
.rh-menu__list > li.mega-menu {
	/* The submenu spans the full viewport, so anchor from row, not item. */
	position: static;
}
.rh-menu__list > li.mega-menu > .sub-menu {
	inset-inline-start: 0;
	inset-inline-end: 0;
	width: 100%;
	max-width: none;
	min-width: 0;
	padding: var(--rh-mega-pad);
	border-radius: 0 0 12px 12px;

	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 8px var(--rh-gap);
}
.rh-menu__list > li.mega-menu > .sub-menu > li {
	min-width: 0;
}
.rh-menu__list > li.mega-menu > .sub-menu > li > a {
	font-weight: 700;
	color: var(--rh-fg);
	padding: 6px 8px;
}
.rh-menu__list > li.mega-menu > .sub-menu .sub-menu {
	position: static;
	box-shadow: none;
	border: 0;
	padding: 0;
	background: transparent;
	opacity: 1;
	visibility: visible;
	transform: none;
	display: block;
	min-width: 0;
}
.rh-menu__list > li.mega-menu > .sub-menu .sub-menu a {
	font-weight: 400;
	color: var(--rh-fg-muted);
	padding: 4px 8px;
}

/* ----------------------------------------------------------------------
 *  Icons / cart / account
 * ---------------------------------------------------------------------- */
.rh-icon {
	display: block;
	flex: 0 0 auto;
}
.rh-cart,
.rh-account,
.rh-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 8px;
	border-radius: 8px;
	color: var(--rh-fg);
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: background-color 120ms linear, color 120ms linear;
}
.rh-cart:hover,
.rh-account:hover,
.rh-toggle:hover {
	background: var(--wp--preset--color--surface, #f7f7f8);
	color: var(--rh-primary);
}
.rh-cart__count {
	position: absolute;
	top: 2px;
	inset-inline-end: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 9999px;
	background: var(--rh-primary);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	/* White ring so the badge separates from the cart icon underneath
	 * (the SVG strokes use --rh-fg, which on hover crosses --rh-primary
	 * and would otherwise blend into the badge edge). Same effect is used
	 * on the bottom-nav badge — see bottom-nav.css's .rh-bnav__badge — so
	 * all three count badges (desktop header, mini-header, bottom-nav)
	 * read identically. Uses the WP preset directly (not --rh-bg) so the
	 * rule keeps working when the badge is rendered OUTSIDE
	 * .rahkar-site-header, e.g. inside .rh-product-mini — which is a
	 * sibling, not a descendant. */
	box-shadow: 0 0 0 2px var(--wp--preset--color--base, #fff);
}
.rh-cart__count.is-empty {
	display: none;
}

/* ----------------------------------------------------------------------
 *  Search form (component used inline in main row AND as the search row)
 * ---------------------------------------------------------------------- */
.rh-search {
	width: 100%;
	max-width: 320px;
}
.rh-search .search-form {
	display: flex;
	width: 100%;
	gap: 0;
}
.rh-search .search-field {
	flex: 1 1 auto;
	min-width: 0;
	height: 36px;
	padding: 0 12px;
	border: 1px solid var(--rh-border);
	border-radius: 8px;
	background: var(--wp--preset--color--surface, #f7f7f8);
	font: inherit;
	color: var(--rh-fg);
}
.rh-search .search-submit {
	flex: 0 0 auto;
	height: 36px;
	padding: 0 14px;
	margin-inline-start: 6px;
	border: 0;
	border-radius: 8px;
	background: var(--rh-primary);
	color: #fff;
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}
.rh-search .search-submit:hover {
	background: var(--wp--preset--color--primary-dark, #074a8d);
}

/* The dedicated search row: full-width input, no submit button on mobile
 * to maximize input target. Submit kept for keyboard / accessibility. */
.rh-row--search .rh-row__inner {
	min-height: auto;
	padding-block: 8px;
}
.rh-row--search .rh-item {
	flex: 1 1 auto;
}
.rh-row--search .rh-search {
	max-width: none;
}

/* ----------------------------------------------------------------------
 *  Mobile row vs Main row visibility
 *  Single breakpoint at 900px keeps things simple. Tweak if the menu
 *  gets long enough to overflow at desktop sizes.
 * ---------------------------------------------------------------------- */
.rh-row--main     { display: block; }
.rh-row--menu_row { display: block; --rh-row-h: 48px; }
.rh-row--mobile   { display: none; }
.rh-row--search   { display: none; }

@media (max-width: 900px) {
	.rh-row--main     { display: none; }
	.rh-row--menu_row { display: none; }
	.rh-row--mobile   { display: block; }
	.rh-row--search   { display: block; }

	.rh-row__inner {
		min-height: var(--rh-row-h-mobile);
	}

	.rh-logo__img {
		max-height: 32px;
	}
	.rh-logo--svg svg {
		height: calc(var(--rh-row-h-mobile) - 8px);
	}
}

/* ----------------------------------------------------------------------
 *  Mobile nav drawer (off-canvas from the right) + backdrop
 *
 *  Speed notes:
 *   - Only `transform` and `opacity` are animated → GPU-composited, no
 *     reflow or repaint of the rest of the page on toggle.
 *   - `contain: layout paint` on the drawer isolates internal layout
 *     changes from affecting outside layers.
 *   - Drawer is `display: none` on desktop (saves paint cost entirely
 *     when not applicable) and `display: flex` only on mobile.
 *   - `will-change: transform` is set permanently on the drawer because
 *     it's a single element only present on mobile — the trade-off
 *     (one extra compositor layer) is cheaper than re-setting it on
 *     every open/close.
 *
 *  RTL note: the drawer sits at the right edge regardless of document
 *  direction. We use physical `right: 0` and `translateX(100%)` here
 *  intentionally — logical properties for transforms don't exist, and
 *  mixing them with `inset-inline-end` would be inconsistent.
 * ---------------------------------------------------------------------- */
.rh-mobile-nav,
.rh-mobile-backdrop {
	display: none;
}

@media (max-width: 900px) {
	.rh-mobile-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(15, 17, 21, 0.45);
		z-index: 999;
		opacity: 0;
		visibility: hidden;
		transition: opacity 200ms ease-out, visibility 0s linear 200ms;
	}
	.rh-mobile-backdrop[data-state="open"] {
		opacity: 1;
		visibility: visible;
		transition: opacity 200ms ease-out, visibility 0s linear 0s;
	}

	.rh-mobile-nav {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		width: min(86vw, 340px);
		background: var(--rh-bg);
		color: var(--rh-fg);
		box-shadow: -8px 0 24px rgba(15, 17, 21, 0.12);
		z-index: 1000;
		overflow-y: auto;
		overscroll-behavior: contain;
		transform: translateX(100%);
		transition: transform 220ms cubic-bezier(0.2, 0, 0, 1);
		will-change: transform;
		contain: layout paint;
		border: 0;
		padding: 0;
	}
	.rh-mobile-nav[data-state="open"] {
		transform: translateX(0);
	}

	.rh-mobile-nav__head {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		min-height: 52px;
		padding: 8px 12px;
		border-bottom: 1px solid var(--rh-border);
		flex: 0 0 auto;
	}
	.rh-mobile-nav__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--rh-fg);
		cursor: pointer;
	}
	.rh-mobile-nav__close:hover,
	.rh-mobile-nav__close:focus-visible {
		background: var(--wp--preset--color--surface, #f7f7f8);
		color: var(--rh-primary);
	}

	.rh-mobile-nav__body {
		flex: 1 1 auto;
		padding: 6px 8px 16px;
	}

	/* Drawer-scoped menu styling — overrides the desktop horizontal layout. */
	.rh-mobile-nav .rh-menu {
		display: block;
	}
	.rh-mobile-nav .rh-menu__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.rh-mobile-nav .rh-menu__list > li {
		position: static;
	}
	.rh-mobile-nav .rh-menu__list > li > a {
		display: flex;
		align-items: center;
		height: 48px;
		padding: 0 12px;
		border-bottom: 1px solid var(--rh-border);
		font-weight: 500;
	}
	/* Hide desktop chevron inside drawer — JS arrow button handles it. */
	.rh-mobile-nav .rh-menu__list > li.menu-item-has-children > a::after {
		display: none;
	}
	.rh-mobile-nav .rh-menu__list > li:last-child > a {
		border-bottom: 0;
	}
	/* Drilldown: submenus hidden until activated by JS */
	.rh-mobile-nav .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding: 0;
		background: transparent;
		min-width: 0;
		display: none;
	}
	.rh-mobile-nav .sub-menu.rh-drill-open {
		display: block;
	}
	.rh-mobile-nav .sub-menu a {
		display: flex;
		align-items: center;
		height: 48px;
		padding: 0 12px;
		color: var(--rh-fg);
		font-weight: 500;
		border-bottom: 1px solid var(--rh-border);
		border-radius: 0;
	}

	/* Drilldown: hide siblings when drilling into a child */
	.rh-mobile-nav .rh-drill-hidden > li {
		display: none;
	}
	.rh-mobile-nav .rh-drill-hidden > li.rh-drill-parent {
		display: block;
	}
	.rh-mobile-nav .rh-menu__list > li.rh-drill-parent > a,
	.rh-mobile-nav .rh-menu__list > li.rh-drill-parent > .rh-drill-arrow,
	.rh-mobile-nav .sub-menu > li.rh-drill-parent > a,
	.rh-mobile-nav .sub-menu > li.rh-drill-parent > .rh-drill-arrow {
		display: none;
	}

	/* Drilldown arrow button (items with children).
	 * Specificity must beat `.rh-mobile-nav .rh-menu__list > li` (0,2,1)
	 * and `.rh-mobile-nav .rh-menu__list > li > a` (0,2,2). */
	.rh-mobile-nav .rh-menu__list > li.menu-item-has-children,
	.rh-mobile-nav .sub-menu > li.menu-item-has-children {
		position: relative;
	}
	.rh-mobile-nav .rh-menu__list > li.menu-item-has-children > a,
	.rh-mobile-nav .sub-menu > li.menu-item-has-children > a {
		padding-inline-end: 48px;
	}
	.rh-drill-arrow {
		position: absolute;
		inset-inline-end: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		border: 0;
		background: transparent;
		color: var(--rh-fg-muted);
		cursor: pointer;
		transition: color 120ms linear;
	}
	.rh-drill-arrow:hover {
		color: var(--rh-primary);
	}

	/* Drilldown back button */
	.rh-drill-back-item {
		list-style: none;
	}
	.rh-drill-back {
		display: flex;
		align-items: center;
		width: 100%;
		height: 48px;
		padding: 0 12px;
		gap: 8px;
		border: 0;
		border-bottom: 1px solid var(--rh-border);
		background: var(--wp--preset--color--surface, #f7f7f8);
		color: var(--rh-fg);
		font: inherit;
		font-weight: 600;
		cursor: pointer;
		transition: color 120ms linear;
	}
	.rh-drill-back:hover {
		color: var(--rh-primary);
	}

	/* Body scroll-lock state — set by JS on <html>. Locks scroll without
	 * causing layout shift on iOS (overflow:hidden alone isn't enough). */
	html.rh-no-scroll,
	html.rh-no-scroll body {
		overflow: hidden;
		touch-action: none;
	}
}

/* ----------------------------------------------------------------------
 *  Toggle button — visual state synced from aria-expanded by JS.
 * ---------------------------------------------------------------------- */
.rh-toggle[aria-expanded="true"] {
	background: var(--wp--preset--color--surface, #f7f7f8);
	color: var(--rh-primary);
}

/* =====================================================================
 *  Funnel header — minimal header for cart & checkout pages.
 *  Replaces the full header builder output on purchase-funnel pages
 *  to keep the shopper focused. Pure CSS, zero JS.
 * ===================================================================== */
.rh-funnel-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--wp--preset--color--base, #fff);
	border-bottom: 1px solid var(--wp--preset--color--border, #e2e4e9);
}
.rh-funnel-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
	padding: 12px var(--wp--style--root--padding-right, 16px) 12px var(--wp--style--root--padding-left, 16px);
	min-height: 56px;
	box-sizing: border-box;
}
.rh-funnel-header__side:first-child {
	justify-self: start;
}
.rh-funnel-header__side:last-child {
	justify-self: end;
}
.rh-funnel-header__logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	justify-self: center;
}
.rh-funnel-header__logo--text {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast, #0f1115);
}
.rh-funnel-header__logo-img {
	max-height: 36px;
	width: auto;
}
.rh-funnel-header__back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: var(--wp--preset--color--contrast, #0f1115);
	cursor: pointer;
	transition: background-color 120ms;
	-webkit-tap-highlight-color: transparent;
}
.rh-funnel-header__back:hover {
	background: var(--wp--preset--color--surface, #f7f7f8);
}
.rh-funnel-header__label {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast, #0f1115);
	justify-self: center;
}
.rh-funnel-header__label--link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	color: var(--wp--preset--color--contrast, #0f1115);
	padding: 6px 10px;
	border-radius: 8px;
	transition: color 120ms, background-color 120ms;
}
.rh-funnel-header__label--link:hover {
	color: var(--wp--preset--color--primary, #0a66c2);
	background: var(--wp--preset--color--surface, #f7f7f8);
}

/* =====================================================================
 *  Sticky scroll — collapse non-essential rows on scroll.
 *
 *  JS toggles `is-scrolled` on the header root after ~10px of scroll.
 *  Desktop: hides menu_row → only main row stays.
 *  Mobile:  hides mobile row → only search row stays (bottom nav bar
 *           provides cart/menu access).
 * ===================================================================== */
@media (min-width: 901px) {
	.rh-row--menu_row {
		/* No overflow:hidden at rest — would clip hover submenus that
		 * extend below the row. Clipping is reintroduced via the
		 * .is-scrolled state below where it's actually needed. */
		max-height: var(--rh-row-h);
		transition: max-height 200ms ease-out, border-top-width 200ms ease-out;
	}
	.rahkar-site-header.is-scrolled .rh-row--menu_row {
		max-height: 0;
		overflow: hidden;
		border-top-width: 0;
	}
}
@media (max-width: 900px) {
	/* Smooth collapse instead of display:none to avoid layout jump. */
	.rh-row--mobile {
		overflow: hidden;
		max-height: var(--rh-row-h-mobile);
		transition: max-height 200ms ease-out, border-top-width 200ms ease-out;
	}
	.rahkar-site-header.is-scrolled .rh-row--mobile {
		max-height: 0;
		border-top-width: 0;
	}
	.rahkar-site-header.is-scrolled .rh-row--search {
		border-top: 0;
		transition: border-top 200ms ease-out;
	}
}