/*
 * RahkarTheme — product mini-header (mobile-only on single-product).
 *
 * Loaded ONLY on single-product pages (inc/enqueue.php gating).
 * Inside that file two things happen:
 *   1. Hide the standard mobile + search rows of the global header.
 *      The HTML for those rows still ships (we don't pay to suppress
 *      it server-side) but they're display:none, so paint/layout cost
 *      is zero on mobile.
 *   2. Reveal .rh-product-mini on mobile and keep it hidden on desktop
 *      (≥901px) so the regular desktop header takes over.
 *
 * No JS: search trigger reuses [data-rh-search-focus] handled by
 * header-search.js. Back button uses inline onclick="history.back()".
 */

/* Default: hidden (covers desktop). */
.rh-product-mini {
	display: none;

	/* --rh-primary is scoped to .rahkar-site-header in header.css. The
	 * mini-header sits as a SIBLING of that element (see parts/header.html),
	 * so descendants here can't inherit it. Without this redefinition,
	 * .rh-cart__count's `background: var(--rh-primary)` falls back to the
	 * property's initial value (transparent) and the badge renders as
	 * invisible white-on-white. Mirror the same definition the site-header
	 * uses so any rule reading --rh-primary inside the mini works. */
	--rh-primary: var(--wp--preset--color--primary, #0a66c2);
}

@media (max-width: 900px) {
	/* Collapse the standard header on this page — its mobile rows are
	 * replaced by the mini header. We zero min-height + border so the
	 * empty <header> doesn't leave a stripe at the top of the page.
	 * The search popup and mobile nav drawer (also rendered inside
	 * the header) keep working: they're position:fixed children.
	 *
	 * Sticky lives on the OUTER <header> (not on .rh-product-mini)
	 * because sticky elements stay pinned only while their containing
	 * block has room above them. The outer <header>'s containing block
	 * is .wp-site-blocks (full page height) — plenty of room. The
	 * inner .rh-product-mini's containing block would be just the
	 * <header>'s own box, which here is exactly the mini-header's
	 * height, so sticky on the inner gives zero scroll travel and the
	 * header rides off-screen with the rest of the page. */
	.rahkar-site-header {
		min-height: 0;
		border-bottom: 0;
		position: sticky;
		top: 0;
		z-index: 90;
		background: var(--wp--preset--color--base, #fff);
	}

	/* The FSE template-part wraps .rahkar-site-header inside an outer
	 * <header class="wp-block-template-part">. That wrapper sits as a
	 * direct child of .wp-site-blocks, which is what we actually want
	 * the sticky behavior anchored to — only the OUTER wrapper has a
	 * containing block taller than itself (the entire page), giving
	 * sticky scroll room. The inner .rahkar-site-header would otherwise
	 * be sized exactly to its content and offer zero travel for sticky,
	 * which is why the header was riding off-screen even after position
	 * computed to sticky. */
	body.single-product header.wp-block-template-part {
		position: sticky;
		top: 0;
		z-index: 90;
		background: var(--wp--preset--color--base, #fff);
	}
	.rh-row--mobile {
		display: none;
	}

	/* Keep the search row in the document so its hidden wrap can still
	 * open as a fullscreen modal triggered by the mini header's search
	 * icon. display:none would also kill the [data-rh-search-focus]
	 * handler (focuses the first input whose offsetParent isn't null)
	 * and stop position:fixed descendants from painting. Collapsing
	 * height + clearing chrome makes the row invisible without removing
	 * it from layout — once `.rh-search-wrap.is-open` flips the wrap
	 * to position:fixed inset:0 it overlays the viewport regardless. */
	.rh-row--search {
		height: 0;
		min-height: 0;
		padding: 0;
		border: 0;
		overflow: hidden;
	}

	.rh-product-mini {
		display: block;
		background: var(--wp--preset--color--base, #fff);
		border-bottom: 1px solid var(--wp--preset--color--border, #e2e4e9);
	}

	/* Sticky + z-index on the outer <header> is what makes the bar pin
	 * correctly during page scroll, but it ALSO creates a new stacking
	 * context. The search popup + mobile nav drawer live INSIDE that
	 * header, so their z-index is scoped to it and can never escape
	 * above page-level overlays. Cheapest fix: hide the visible bar
	 * (just the inner pill, leaving the popup/drawer's position:fixed
	 * children alone) AND release the outer's sticky-driven stacking
	 * context (drop its z-index back to auto) while the popup is open.
	 * `rh-no-scroll` is set on <html> by header-search.js whenever the
	 * popup or drawer is up — no JS work needed here. */
	html.rh-no-scroll .rh-product-mini {
		display: none;
	}
	html.rh-no-scroll .rahkar-site-header {
		z-index: auto;
	}
	.rh-product-mini__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 56px;
		padding-inline: 8px;
	}

	/* Leading cluster: back button + page title. Tight gap so the chevron
	 * and label read as one unit anchored at the start (right in RTL). */
	.rh-product-mini__start {
		display: flex;
		align-items: center;
		gap: 4px;
		min-width: 0;
	}

	.rh-product-mini__title {
		font-size: 15px;
		font-weight: 600;
		line-height: 1.2;
		color: var(--wp--preset--color--text, #1a1d23);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.rh-product-mini__btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		background: transparent;
		border: 0;
		border-radius: 8px;
		color: var(--wp--preset--color--text, #1a1d23);
		cursor: pointer;
		transition: background-color 120ms linear, color 120ms linear;
	}
	.rh-product-mini__btn:hover,
	.rh-product-mini__btn:focus-visible {
		background: var(--wp--preset--color--surface, #f7f7f8);
		color: var(--wp--preset--color--primary, #0a66c2);
	}

	/* Trailing cluster: search + cart + more. Tight gap so the three icons
	 * read as one group balancing the back button on the right. */
	.rh-product-mini__actions {
		display: flex;
		align-items: center;
		gap: 2px;
	}

	/* Anchor element overrides — .rh-cart is an <a> and gets text-decoration
	 * + default link color from base styles. Reset those for the icon button. */
	.rh-product-mini__cart {
		text-decoration: none;
		color: var(--wp--preset--color--text, #1a1d23);
	}

	/* The shared .rh-cart__count badge from header.css is sized for the
	 * desktop ~56px-wide cart button, where it sits inside the empty
	 * top-end corner. On the 40px mini-header button there's no room
	 * for it to sit inside without landing on top of the cart icon
	 * body (the icon fills ~22 of the 40px width). Two adjustments:
	 *   1. Overhang the badge slightly past the button's top-end edge
	 *      so it reads as a corner notification, not an overlay.
	 *   2. Shrink the badge (16px / 10px text) to suit the smaller
	 *      button — keeps the icon dominant and the count legible.
	 * No clipping risk: neither the button, .rh-product-mini__inner,
	 * nor the sticky header set overflow:hidden, so the -2px overhang
	 * is free to paint. The cart button is the inline-end-most item in
	 * the actions cluster, so the overhang sits in the inner container's
	 * 8px padding-inline gutter and never reaches the viewport edge. */
	.rh-product-mini__cart .rh-cart__count {
		top: -2px;
		inset-inline-end: -2px;
		min-width: 16px;
		height: 16px;
		padding: 0 4px;
		font-size: 10px;
		line-height: 16px;
	}
}