/* =========================================================================
   HFM — Mobile navigation. Bottom tab bar + Shop/Search drawers.
   Renders only <= 967px. Markup: includes/mobile-nav.php. JS: hfm-mobile-nav.js
   The Shop menu and Search are drawers (modules/drawer/) — the Drawer engine
   owns open/close, drag-to-dismiss, scroll-lock, focus and ESC; this file
   themes them dark and styles their content + the tab bar.
   Colours use theme presets so the bar adapts to the light checkout theme too.
   ========================================================================= */

/* On :root so body-level singletons outside .hfm-mnav (the garage panel and the
   docked product buy bar) can position + surface-match themselves against the bar. */
:root {
	--mnav-tab-h: 52px;
	--mnav-surface: var(--wp--preset--color--base-2, #171717);
	--mnav-line: rgba(128, 128, 128, .26);
	--mnav-text: var(--wp--preset--color--grey-900, #f5f5f5);
	--mnav-muted: var(--wp--preset--color--grey-600, #a3a3a3);
}

.hfm-mnav {
	--mnav-raised: rgba(128, 128, 128, .12);
	--mnav-faint: var(--wp--preset--color--grey-500, #737373);
	--mnav-ac: var(--wp--preset--color--hfm-gradient, #d05aff);
	--mnav-ac-bg: rgba(135, 77, 162, .14);
	--mnav-ac-bd: rgba(135, 77, 162, .5);
	--mnav-red: var(--wp--preset--color--hfm-red, #ff6b5a);
	display: none;
}

.hfm-mnav-ico { width: 1em; height: 1em; display: block; }

/* Don't depend on the host theme's global border-box reset. */
.hfm-mnav, .hfm-mnav *, .hfm-mnav *::before, .hfm-mnav *::after { box-sizing: border-box; }

@media (max-width: 967px) {

	.hfm-mnav { display: block; }

	/* Replace the GeneratePress hamburger on mobile. This CSS only loads where
	   the nav is enabled (everywhere except checkout), so no page-type guard is
	   needed — product + cart now get the same treatment as the rest of the site. */
	.gb-navigation .gb-menu-toggle { display: none !important; }

	/* Mobile header keeps only logo + account. Search is already hidden by GB;
	   garage moves to the "My Vehicle" tab, cart to the "Cart" tab. The cart
	   block stays in the DOM off-screen so its tab can still open the WC drawer. */
	.gb-site-header .hfm-vehicle-selector-minimal-trigger { display: none !important; }
	.gb-site-header .wc-block-mini-cart { position: absolute !important; left: -9999px !important; }

	/* keep content clear of the fixed tab bar */
	body { padding-bottom: calc(var(--mnav-tab-h, 60px) + env(safe-area-inset-bottom)); }

	/* --- Drawer theming (Shop menu + Search) -----------------------------
	   Drawers sit BELOW the tab bar (z) with their bottom edge pinned to the
	   bar's top, so opening reads as the bar's surface extending upward. The
	   bar stays visible + interactive for switching while a drawer is up. */
	.hfm-mnav__d {
		--drawer-z: 9980; /* under the 9990 tab bar */
		--drawer-bg: var(--mnav-surface);
		--drawer-color: var(--mnav-text);
		--drawer-overlay-color: rgba(0, 0, 0, .55);
		--drawer-handle-color: var(--mnav-faint);
		--drawer-inset: 0;
		--drawer-max-width: none;
		--drawer-duration: 0.6s; /* slower, calmer slide (was module default .5s) */
	}
	/* Dim only the page above the bar — the bar keeps full contrast. */
	.hfm-mnav__d .c-drawer__overlay { bottom: calc(var(--mnav-tab-h) + env(safe-area-inset-bottom)); }
	/* Shared chrome: rounded top, shadow, tall sheet rising from the bar. */
	.hfm-mnav__d .c-drawer {
		bottom: calc(var(--mnav-tab-h) + env(safe-area-inset-bottom));
		padding-bottom: 0; /* the bar below owns the safe area */
		--drawer-radius: 20px;
		--drawer-max-height: calc(96dvh - var(--mnav-tab-h) - env(safe-area-inset-bottom));
		overflow: hidden;
		box-shadow: 0 -12px 40px rgba(0, 0, 0, .45);
	}
	.hfm-mnav__shop .c-drawer {
		/* extra bottom padding: the centre bump + vehicle card overlap the sheet */
		--drawer-body-padding: 4px 15px 36px;
	}
	.hfm-mnav__searchd .c-drawer {
		--drawer-body-padding: 0;
		height: calc(96dvh - var(--mnav-tab-h) - env(safe-area-inset-bottom));
	}
	.hfm-mnav__searchd .hfm-mnav__search-host { display: flex; flex-direction: column; min-height: 0; }
	/* Live search results flow in-container, not as a floating popover over the
	   page. The input bar stays pinned while results scroll within the drawer. */
	.hfm-mnav__searchd .hfm-mnav__search-bar {
		position: sticky;
		top: 0;
		z-index: 3;
		background: var(--mnav-surface);
	}
	.hfm-mnav__searchd .hfm-search__dropdown {
		position: static;
		top: auto;
		margin-top: 10px;
		max-height: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: transparent;
		z-index: auto;
	}
	.hfm-mnav__d .c-drawer__handle-wrapper { padding: 12px 0 6px; }

	/* While a drawer is up, the hairlines between bar and sheet disappear so
	   bar + sheet read as one continuous surface. */
	.hfm-mnav.is-extended .hfm-mnav__tabbar { border-top-color: transparent; }
	.hfm-mnav.is-extended .hfm-mnav__bump-line { opacity: 0; }

	/* --- Tab bar --------------------------------------------------------- */
	.hfm-mnav__tabbar {
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 9990;
		display: flex;
		background: var(--mnav-surface);
		border-top: 1px solid var(--mnav-line);
		padding-bottom: env(safe-area-inset-bottom);
	}
	/* Fluid bump: the bar's top edge rises around the vehicle circle. Fill
	   matches the bar surface (covers the straight hairline behind it); the
	   unclosed second path re-draws the hairline along the curve. */
	.hfm-mnav__bump {
		position: absolute;
		top: -31px;
		left: 50%;
		transform: translateX(-50%);
		transform-origin: center bottom;
		/* CLOSE direction: hump re-forms LATE (delay) — it appears just as the
		   card slides back down and "touches" it, so it reads as sliding into place. */
		transition: transform .3s cubic-bezier(.32, .72, 0, 1) .3s;
		width: 170px;
		height: 32px;
		pointer-events: none;
	}
	.hfm-mnav__bump-fill { fill: var(--mnav-surface); }
	.hfm-mnav__bump-line { fill: none; stroke: var(--mnav-line); stroke-width: 1; }
	/* Extending-bar morph: the hump flattens into the bar top as a drawer rises.
	   OPEN direction: hump melts EARLY (no delay) — gone as the card lifts away. */
	.hfm-mnav.is-extended .hfm-mnav__bump {
		transform: translateX(-50%) scaleY(0);
		transition: transform .3s cubic-bezier(.32, .72, 0, 1) 0s;
	}

	.hfm-mnav__tab {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		min-width: 0;   /* tabs stay equal (1/5); a long vehicle label overflows instead of pushing */
		min-height: var(--mnav-tab-h);
		padding: 6px 2px;
		border: 0;
		background: none;
		font: inherit;
		font-size: 10.5px;
		line-height: 1;
		color: var(--mnav-muted);
		text-decoration: none;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	.hfm-mnav__tab .hfm-mnav-ico { font-size: 22px; }
	.hfm-mnav__tab:active { opacity: .85; }

	/* --- Host-theme interaction bleed guard -----------------------------
	   No hover/focus feedback anywhere in the nav (user pref) — press
	   (:active) is opacity only. The host theme (GeneratePress) recolours +
	   underlines bare <button>/<a> on hover/focus, which turned the tab text
	   and icons white. Re-assert each element's resting colour on BOTH hover
	   and focus, parent-scoped so it wins on specificity regardless of
	   stylesheet load order, and unconditional so it also kills sticky-hover
	   on touch. Focus OUTLINE is left intact for keyboard a11y. */
	.hfm-mnav__tabbar .hfm-mnav__tab:hover,
	.hfm-mnav__tabbar .hfm-mnav__tab:focus { color: var(--mnav-muted); background: none; text-decoration: none; }
	.hfm-mnav__tabbar .hfm-mnav__tab.is-active:hover,
	.hfm-mnav__tabbar .hfm-mnav__tab.is-active:focus,
	.hfm-mnav__tabbar .hfm-mnav__tab[aria-expanded="true"]:hover,
	.hfm-mnav__tabbar .hfm-mnav__tab[aria-expanded="true"]:focus { color: var(--mnav-ac); }
	.hfm-mnav .hfm-mnav__item:hover,
	.hfm-mnav .hfm-mnav__item:focus { color: var(--mnav-text); background: none; text-decoration: none; }
	.hfm-mnav .hfm-mnav__fcard:hover,
	.hfm-mnav .hfm-mnav__fcard:focus { color: var(--mnav-text); text-decoration: none; }
	/* handle grow-on-hover off inside the nav drawers (hover devices only) */
	@media (hover: hover) {
		.hfm-mnav__d .c-drawer__handle-wrapper:hover .c-drawer__handle {
			width: var(--drawer-handle-width, 48px);
			opacity: .7;
		}
	}
	.hfm-mnav__tab.is-active,
	.hfm-mnav__tab[aria-expanded="true"] { color: var(--mnav-ac); }
	.hfm-mnav__tab--cart { position: relative; }
	.hfm-mnav__cartbadge {
		position: absolute;
		top: 6px;
		left: calc(50% + 4px);
		min-width: 16px; height: 16px;
		padding: 0 4px;
		border-radius: 999px;
		background: var(--mnav-red);
		color: light-dark(#ffffff, #2a0b07); /* red bg is dark in light mode, light in dark mode */
		font-size: 10px;
		font-weight: 600;
		display: flex; align-items: center; justify-content: center;
	}

	/* --- My Vehicle: centre tab nested in the bump, scale-pop on change ---
	   4:3 landscape card, not a circle — car photos are landscape. */
	.hfm-mnav [x-cloak] { display: none !important; }
	.hfm-mnav__tab--vehicle { overflow: visible; justify-content: flex-end; padding-bottom: 6px; }
	.hfm-mnav__veh {
		position: relative;
		width: 64px; height: 48px;
		margin-top: -24px;
		margin-bottom: 2px;
		border-radius: 10px;
		overflow: hidden;
		background: var(--mnav-raised);
		transform-origin: center bottom;
		transition: transform .5s cubic-bezier(.32, .72, 0, 1);
	}
	/* Car card recedes into the bar in sync with the hump flattening. */
	.hfm-mnav.is-extended .hfm-mnav__veh { transform: scale(.55); }
	.hfm-mnav.is-extended .hfm-mnav__veh-label { opacity: .55; transition: opacity .4s ease; }
	/* contain, not cover — car cutout images must not be cropped */
	.hfm-mnav__veh-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
	/* "On" pip — a car is active (mirrors the model name below). */
	.hfm-mnav__veh-dot {
		position: absolute;
		top: 3px; right: 3px;
		width: 11px; height: 11px;
		border-radius: 50%;
		background: #34d17a;
		box-shadow: 0 0 0 2px rgba(0, 0, 0, .4);
	}
	.hfm-mnav__veh-label {
		color: var(--mnav-text);
		white-space: nowrap;   /* no truncation */
		overflow: visible;     /* spills past the tab, centred, equal amounts both sides */
	}
	.hfm-mnav__tab--vehicle:active .hfm-mnav__veh { transform: scale(.93); transition: transform .1s; }

	@keyframes hfm-veh-pop {
		0% { transform: scale(.55); opacity: 0; }
		60% { transform: scale(1.06); opacity: 1; }
		100% { transform: scale(1); }
	}
	.hfm-mnav__veh.is-swapping .hfm-mnav__veh-img { animation: hfm-veh-pop .48s cubic-bezier(.2, .8, .3, 1) both; }

	/* --- Garage panel, mobile fixes ---------------------------------------
	   1) Panel ships at z 9000 — under the tab bar (9990) and drawers (9999);
	      raise it above both.
	   2) Hide the car-image previews (both the "Filtering by" hero and the
	      add-a-model preview) — redundant on mobile; the model rows carry their
	      own "+ Add" so adding still works without the preview's button. */
	.hfm-garage-dropdown__overlay { z-index: 10600 !important; }
	.hfm-garage-dropdown { z-index: 10601 !important; }
	.hfm-garage-dropdown .hfm-vp-preview { display: none !important; }

	/* --- Archive garage bar, mobile ---------------------------------------
	   Hide the archive garage-bar hero (car image + "Showing parts for…").
	   The active car and garage access now live in the bottom tab bar's
	   vehicle button, so the bar is redundant here. */
	.hfm-garagebar--ctx-archive { display: none !important; }

	/* --- Search drawer bar (inside the Search drawer body) ---------------
	   Full-width input, no back button — close via the handle drag, the Search
	   tab, or ESC. */
	.hfm-mnav__search-bar { padding: 2px 14px 10px; }
	.hfm-mnav__search-host .hfm-search,
	.hfm-mnav__search-host .hfm-search__input { width: 100%; }
	/* iOS zooms the page when a focused input's font-size is < 16px. Force 16px
	   on both search inputs (nav search + garage search) across the mobile range
	   so focusing them never triggers the zoom. */
	.hfm-mnav__search-host .hfm-search__input,
	.hfm-garage-dropdown .hfm-vs-search { font-size: 16px !important; }

	/* Section labels */
	.hfm-mnav__sec {
		margin: 16px 0 8px;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: .09em;
		text-transform: uppercase;
		color: var(--mnav-faint);
	}

	/* Featured / New in — 3 product cards, 4:3 imagery */
	.hfm-mnav__featured {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 10px;
	}
	.hfm-mnav__fcard {
		display: flex;
		flex-direction: column;
		gap: 5px;
		color: var(--mnav-text);
		text-decoration: none;
	}
	.hfm-mnav__fcard:active { opacity: .85; }
	.hfm-mnav__fcard-img {
		display: block;
		aspect-ratio: 4 / 3;
		border-radius: 10px;
		overflow: hidden;
		background: var(--mnav-raised);
	}
	/* !important beats the theme's unscoped .size-woocommerce_thumbnail
	   { object-fit: contain !important } so featured images FILL the card. */
	/* Image radius a touch under the 10px container so it never pokes past the
	   rounded corner (the parent theme sets a larger radius on WC thumbnails). */
	.hfm-mnav__fcard-img img { width: 100%; height: 100% !important; object-fit: cover !important; display: block; border-radius: 8px !important; }
	.hfm-mnav__fcard-name {
		font-size: 11.5px;
		line-height: 1.3;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.hfm-mnav__fcard-price { font-size: 12px; font-weight: 600; color: var(--mnav-ac); }

	/* Link lists — one touch-friendly row per line (sections, More, Home) */
	.hfm-mnav__list { display: block; }
	.hfm-mnav__list--top { margin: 14px 0 4px; }
	.hfm-mnav__item {
		display: flex;
		align-items: center;
		gap: 9px;
		min-height: 50px;
		padding: 4px 2px;
		font-size: 15px;
		font-weight: 600;
		color: var(--mnav-text);
		text-decoration: none;
		border-bottom: 1px solid var(--mnav-line);
	}
	.hfm-mnav__item:last-child { border-bottom: 0; }
	.hfm-mnav__item:active { opacity: .85; }
	.hfm-mnav__item-ic {
		width: 34px; height: 34px;
		flex: none;
		display: flex; align-items: center; justify-content: center;
		border-radius: 9px;
		background: var(--mnav-raised);
		color: var(--mnav-ac);
	}
	.hfm-mnav__item-ic .hfm-mnav-ico { font-size: 18px; }
	.hfm-mnav__item-t { flex: 1; min-width: 0; }
	.hfm-mnav__item-ch { flex: none; color: var(--mnav-faint); }
	.hfm-mnav__item-ch .hfm-mnav-ico { font-size: 16px; }
	.hfm-mnav__tag {
		flex: none;
		font-size: 10.5px;
		color: light-dark(#7c2015, #ffb3a8);
		background: rgba(255, 111, 92, .16);
		padding: 2px 7px;
		border-radius: 999px;
		white-space: nowrap;
	}

	/* --- Product buy bar integration ------------------------------------
	   On product pages the sticky add-to-cart bar (<urlar-sticky-buy-bar>)
	   would collide with this nav. Instead it DOCKS flush on top of the tab
	   bar as one continuous surface (same bg, no seam), and the bar flattens
	   to receive it (bump + vehicle card recede) — the same extending-bar
	   language as the drawers. Driven entirely by the .has-urlar-sticky-buy-
	   bar-visible body class the buy-bar JS already toggles; no JS changes. */
	/* Class selector (0,1,0) beats the buy bar's own tag rule (0,0,1) so the
	   dock wins regardless of stylesheet load order. */
	.urlar-sticky-buy-bar {
		bottom: calc(var(--mnav-tab-h) + env(safe-area-inset-bottom));
		background: var(--mnav-surface);
		border-top: 1px solid var(--mnav-line);
		box-shadow: 0 -14px 40px rgba(0, 0, 0, .4);
	}
	/* The buy bar's title + rating score are hardcoded white (fine on its own
	   dark bg on desktop). Docked, its bg follows the theme surface, so its text
	   must follow the theme too — else white-on-light in light mode. Descendant
	   scope (0,2,0) beats the buy bar's own .class rules regardless of load order. */
	.urlar-sticky-buy-bar .urlar-sticky-buy-bar__title,
	.urlar-sticky-buy-bar .urlar-sticky-buy-bar__rating-score { color: var(--mnav-text); }
	.urlar-sticky-buy-bar .urlar-sticky-buy-bar__rating { color: var(--mnav-muted); }
	/* Bar goes flat while the buy bar is docked so they read as one unit. */
	body.has-urlar-sticky-buy-bar-visible .hfm-mnav__tabbar { border-top-color: transparent; }
	body.has-urlar-sticky-buy-bar-visible .hfm-mnav__bump {
		transform: translateX(-50%) scaleY(0);
		transition: transform .28s cubic-bezier(.2, .8, .2, 1);
	}
	body.has-urlar-sticky-buy-bar-visible .hfm-mnav__veh {
		transform: scale(.55);
		transition: transform .28s cubic-bezier(.2, .8, .2, 1);
	}
	body.has-urlar-sticky-buy-bar-visible .hfm-mnav__veh-label { opacity: .55; }
	/* Content clears BOTH stacked bars when the buy bar is docked. */
	html body.has-urlar-sticky-buy-bar-visible {
		padding-bottom: calc(var(--mnav-tab-h) + env(safe-area-inset-bottom) + var(--urlar-sticky-buy-bar-height, 56px));
	}
	/* Toast notices clear the nav bar (and the buy bar too when docked). */
	#hfm-notices-portal {
		bottom: calc(28px + var(--mnav-tab-h) + env(safe-area-inset-bottom));
	}
	html body.has-urlar-sticky-buy-bar-visible #hfm-notices-portal {
		bottom: calc(28px + var(--mnav-tab-h) + env(safe-area-inset-bottom) + var(--urlar-sticky-buy-bar-height, 56px));
	}

	/* --- Garage sheet joins the extending-bar family (sheet form, <=640) --
	   Its own CSS lives in inc/vehicle-selector.php; these overrides pin it
	   to the bar top, under the bar, full-bleed — like the drawers. */
	@media (max-width: 640px) {
		.hfm-garage-dropdown {
			bottom: calc(var(--mnav-tab-h) + env(safe-area-inset-bottom)) !important;
			left: 0 !important;
			right: 0 !important;
			border: 0 !important;
			z-index: 9985 !important;
			box-shadow: 0 -12px 40px rgba(0, 0, 0, .45) !important;
			/* Fixed height (not max-height) so the sheet is full-height like the
			   search drawer and doesn't bounce when results appear/disappear.
			   Clear the panel's own 88vh cap so the dvh-based height wins (and
			   doesn't drift with the iOS URL bar). */
			height: calc(96dvh - var(--mnav-tab-h) - env(safe-area-inset-bottom)) !important;
			max-height: none !important;
			padding-bottom: 14px !important; /* bar below owns the safe area now */
		}
		.hfm-garage-dropdown__overlay {
			z-index: 9979 !important;
			bottom: calc(var(--mnav-tab-h) + env(safe-area-inset-bottom)) !important;
		}
	}

}

@media (prefers-reduced-motion: reduce) {
	.hfm-mnav__veh.is-swapping .hfm-mnav__veh-img { animation: none; }
}