/* ==========================================================================
   Header - mobile layout, sticky (Point NAV, HEADER-STICKY)
   ==========================================================================

   Migrated out of the Customizer's "Additional CSS" field, which lives only in
   the database: not in git, not deployed by pushing code, and installed only by
   running a per-feature script on each target. That is why five unrelated
   features silently reverted on www.mmspecs.com - the PHP that depends on this
   CSS shipped, and the CSS did not. See CLAUDE.md, "Site CSS lives in git".

   Edit these files, commit, push. There is no install step.
   ========================================================================== */

/* Point NAV - mobile header was split across two separate rows (logo
   alone in one, the hamburger alone in a full-width bar below it) with
   no cart element at all, unlike desktop's single row of
   hamburger+logo+search+cart (fixed via astra-settings
   header-mobile-items, restructured to mirror desktop's layout). Search
   icon also had no dedicated size control in Astra's settings (unlike
   the hamburger/cart, which do), so it's sized here to match the same
   visual weight as the other icons now sharing one compact row. */
@media (max-width: 767px) {
	/* Pixel-perfect logo centering was attempted several ways (grid
	   minmax tricks, position:absolute, JS width-matching) and every one
	   broke differently once the cart price got wide enough ("Rs 18,000"
	   vs. the test-cart "Rs 0") - squeezing the search icon into an
	   overlap with the logo, clipping the cart icon off the edge, etc.
	   Client decided the price total isn't needed in the
	   mobile nav anyway - it's redundant with the cart drawer/page,
	   which shows the same total on tap - so hiding it here removes the
	   variable-width culprit entirely, rather than continuing to patch
	   around it. Desktop/tablet keep showing it, untouched. Hidden via
	   display:none (not removed from astra-settings) so it's a one-line
	   revert if the client ever wants it back - see git history / this
	   comment for context first, since a naive unhide would bring back
	   the same centering problem unless it's also re-fixed properly. */
	.ast-mobile-header-wrap .ast-woo-header-cart-total {
		display: none;
	}
	/* Hiding the price text alone wasn't enough - its parent wrapper
	   (.ast-woo-header-cart-info-wrap) still reserves its own width even
	   with an empty/hidden child, leaving ~30px of dead space between
	   the search and cart icons that no amount of margin/padding
	   trimming on the search side could close. Hiding the wrapper itself
	   collapses that space. */
	.ast-mobile-header-wrap .ast-woo-header-cart-info-wrap {
		display: none;
	}
	.ast-mobile-header-wrap .ast-header-woo-cart {
		padding-left: 3px !important;
	}
	/* Even with the price wrapper hidden, .ast-addon-cart-wrap (the icon's
	   immediate parent) still carries its own 7px margin-left + 7px
	   padding-left - both sized for a layout where the price sits to its
	   left, now moot. Trimmed to close the remaining gap. */
	.ast-mobile-header-wrap .ast-addon-cart-wrap {
		margin-left: 0 !important;
		padding-left: 2px !important;
	}
	.ast-mobile-header-wrap .ast-search-icon,
	.ast-mobile-header-wrap .ast-search-icon svg {
		width: 16px;
		height: 16px;
	}
	/* The search icon's wrapper carries a 5px top / 20px right margin
	   (originally: top nudges it down to align with a taller price
	   string next to it, right sized to separate it from that same
	   price text) - now that the price is hidden on mobile, the top
	   margin just knocks it out of vertical alignment with the cart
	   icon (2-3px lower), and the right margin leaves a large gap.
	   Full margin: 0 (not just margin-right) to also kill that leftover
	   top offset. !important because Astra's own rule setting this
	   margin (.ast-hfb-header .ast-header-search) has identical
	   specificity (two classes) to a plain override here, and was
	   winning on source order despite Additional CSS normally loading
	   later. */
	.ast-mobile-header-wrap .ast-header-search {
		margin: 0 0 0 0 !important;
	}
	/* The hamburger icon was invisible once the sticky/scrolled header
	   kicked in (Astra's "shrunk"/"fade" sticky state renders it white,
	   presumably left over from a transparent-header config meant for a
	   dark background) - previously unnoticed because the hamburger sat
	   alone in its own dark bar; now that it shares the same white row
	   as the logo/search/cart, it needs to stay dark like they already do.
	   Scoped to #ast-fixed-header (the sticky clone itself) rather than
	   Astra's own .ast-header-sticked class - that class is added by the
	   same miscalibrated scroll-threshold logic the mmNavFixStickyThreshold
	   script (mu-plugin) corrects, so relying on it here left a window
	   where the corrected fix showed the sticky header early but this
	   rule hadn't kicked in yet, and the hamburger was still white. */
	#ast-fixed-header .mobile-menu-toggle-icon svg,
	#ast-fixed-header .mobile-menu-toggle-icon path,
	#ast-fixed-header .ast-mobile-svg {
		fill: var(--ast-global-color-2) !important;
	}
}

/* Sticky header mobile trigger icon color (client feedback): the sticky
   header's mobile "Below Header" bar has a dark background, but the
   hamburger/close icon was inheriting the default black color - nearly
   invisible against it. White on this dark bar only, mobile only. */
@media (max-width: 921px) {
	#ast-fixed-header #ast-mobile-header .menu-toggle,
	#ast-fixed-header #ast-mobile-header .menu-toggle svg {
		color: #FFFFFF;
		fill: #FFFFFF;
	}
}

/* Point HEADER-STICKY - plain CSS sticky header.
   Replaces Astra Addon's sticky-header feature (Customizer > Header >
   Sticky Header), which is now switched off for both the Primary and Below
   rows. That feature rendered a second, permanently position:fixed copy of
   the whole header (#ast-fixed-header) and revealed it on scroll with
   transform/opacity plus a blanket `transition: all 0.2s linear` on the
   header bars - the sliding/fading that had to go. It also drove a
   requestAnimationFrame loop in the mu-plugin that rewrote the clone's
   inline visibility every frame to beat Astra's own rAF loop, which is what
   made scrolling look glitchy; that loop is deleted.
   position:sticky needs no JavaScript, no duplicate DOM and no scroll
   threshold: the header simply stops at the top of the viewport. Nothing
   animates, resizes or fades, and the layout is identical because a sticky
   element keeps its space in normal flow (no spacer needed, so no jump). */
#masthead {
	position: sticky;
	top: 0;
	z-index: 99;
}

/* The WP admin bar is fixed above 600px, so offset by its height for
   logged-in users; below 600px it scrolls away with the page. */
body.admin-bar #masthead {
	top: 32px;
}
@media (max-width: 782px) {
	body.admin-bar #masthead {
		top: 46px;
	}
}
@media (max-width: 600px) {
	body.admin-bar #masthead {
		top: 0;
	}
}