/**
 * Yodha Fuel — layout.
 * Header/nav/footer theming and section/container structure.
 *
 * HEADER REWRITE — this file previously styled Storefront's own header
 * markup (the .site-header / .col-full / .main-navigation classes
 * Storefront's header.php renders via the storefront_header hook). That
 * approach broke in production: Storefront's real markup nests its cart
 * icon INSIDE the primary-navigation wrapper (not as a sibling of the
 * logo) and renders its own separate, always-visible product-search
 * widget, neither of which this file ever accounted for — so trying to
 * reorder those pieces with flex `order` (which only works on direct
 * siblings) produced a broken, stacked layout.
 *
 * header.php is now a full child-theme override (see that file), and
 * template-parts/header/site-header.php renders one clean, self-
 * contained header with this theme's own class names only:
 * .yf-site-header > .yf-header-inner > (.yf-logo, .yf-main-navigation,
 * .yf-header-actions, .yf-mobile-toggle), plus .yf-search-form. Every
 * selector below targets only those classes (plus Storefront's own
 * .site-header-cart output, which is still called directly from
 * site-header.php for its native WooCommerce cart-count behaviour) — no
 * more guessing at markup this theme doesn't control.
 *
 * ONE HEADER BREAKPOINT: every header responsive rule below switches at
 * a single value, 900px, chosen deliberately distinct from Storefront's
 * own (now-unused) 782px nav-toggle breakpoint and from this file's own
 * 768/1024px content breakpoints further down — so there is exactly one
 * point where the header's layout changes, never two different values
 * fighting each other.
 *
 * HEADER OVERLAY (front page only): scoped by the `yf-header-overlay`
 * body class that inc/theme-setup.php adds only when is_front_page() is
 * true — every other template keeps the solid header with zero risk of
 * the overlay rules leaking onto it.
 *
 * Non-header sections of this file (yf-container/container, .yf-section,
 * footer) are unchanged from before and use the existing 375 (base) /
 * 480 / 768 / 1024 / 1280px breakpoints.
 *
 * HEADER POLISH REVISION: refines the header visuals only — no markup
 * contract changes (header.php / site-header.php keep the exact same
 * element structure except one small, additive change: the cart action
 * now wraps storefront_header_cart() in a decorative .yf-navicon icon
 * span, exactly mirroring the existing search/account icon pattern — see
 * that file and the CART ICON + BADGE block below for why).
 *
 * LOGO: the uploaded logo file (assets/images/yodha-fuel-logo.png) is a
 * flat, fully opaque square with its white canvas baked into the pixels
 * (confirmed by inspecting the file directly — no alpha channel). CSS
 * cannot make that background transparent, and a bitmap-wide blend mode
 * or filter would also discolour the orange/charcoal artwork itself, so
 * neither is used here. Instead .yf-logo now gives the image an explicit
 * white "plate": a small white rounded card with its own padding and
 * shadow. This turns the previously-accidental-looking white square into
 * a deliberate, premium badge — the image's own white canvas now simply
 * blends into the card's white background, so the hard square edge the
 * logo used to show against the dark/transparent header disappears
 * entirely, with zero changes to the logo artwork or brand colours. (A
 * fully transparent cutout of this specific logo was evaluated and
 * rejected: its dark mark is #272F32, which is this theme's own
 * --warrior-dark header colour, so a transparent version would make the
 * helmet/wordmark nearly disappear against the dark header instead of
 * improving it. See the delivery notes for the optional bonus asset this
 * produced and what a better long-term header lockup would look like.)
 *
 * CART ICON + BADGE: the live cart link's DOM (already confirmed in this
 * codebase — see inc/theme-setup.php's yodha_fuel_header_cart_count_text()
 * doc comment) is exactly `<a class="cart-contents"><span
 * class="woocommerce-Price-amount">…</span><span class="count">…</span></a>`
 * — Storefront renders no basket/bag glyph of its own, only the price
 * (already hidden) and the count. That's why the cart control previously
 * had no visible icon to speak of. site-header.php now prints this
 * theme's own simple bag icon (yodha_fuel_icon( 'cart' )) as a sibling
 * immediately before storefront_header_cart()'s output, both wrapped in
 * one .yf-navicon.yf-header-cart-icon box — the decorative icon supplies
 * the glyph, and .cart-contents is stretched (position:absolute; inset:0)
 * to cover that same box invisibly, so the whole 40×40 area stays a
 * single click/focus target and WooCommerce's native AJAX fragment
 * refresh keeps targeting and replacing the exact same, unmodified
 * .cart-contents element it always has. The count is then pinned with
 * position:absolute to the top-right corner of that box — never inline
 * next to the icon — with a border the same colour as the header
 * background so it reads as a badge sitting ON the icon, not merging
 * into it.
 *
 * CART ICON BUG FOUND AFTER TESTING (v2.7.2): the badge still rendered
 * detached from the icon, floating above/between it and the Account
 * icon, with an extra stray basket-shaped glyph visible beside the bag —
 * confirmed live via the browser's own computed styles (not guessed) that
 * `.cart-contents`'s actual computed `position` was "relative", not the
 * "absolute" this file declares. Root cause: Storefront's own
 * woocommerce.css carries `.site-header-cart .cart-contents { position:
 * relative; display: block; padding: 1.618em 0; height: auto; width:
 * auto; … }` inside its own `@media (min-width: 768px)` block — a
 * selector of IDENTICAL specificity (two classes) to this file's
 * `.yf-header-cart-icon .cart-contents`, and since woocommerce.css is
 * enqueued (and therefore appears in the page) AFTER this file, it wins
 * that tie exactly the same way Storefront's mini-cart-dropdown rule did
 * below — so `.cart-contents` was never actually being stretched over the
 * icon at all, just quietly reverting to Storefront's own auto-sized,
 * padded box next to it, with the badge pinned to THAT box's corner
 * instead of the icon's. !important on the three properties that matter
 * (position/inset/display) is the same deliberate, narrow tie-break
 * already used twice more below for this identical class of bug, not a
 * new pattern.
 *
 * LOGO SIZE REFINEMENT: the desktop (900px+) logo was reviewed as too
 * small against the full-width hero/header. Only .yf-logo__image's
 * max-height/max-width and .yf-logo's padding/border-radius change, both
 * scoped inside the existing @media (min-width: 900px) block — see that
 * block for the exact numbers and reasoning. The base (mobile, <900px)
 * rule also grows slightly (40px → 56px image) so the logo isn't a jarring
 * size drop right below the breakpoint. No markup, no other header
 * element, and no other breakpoint changed.
 */

/* ============================================================
   HEADER — base (solid state; overlay state further down)
   ============================================================ */
.yf-site-header {
	position: relative;
	background-color: var(--color-bg-dark);
	color: var(--color-text-inverse);
	z-index: 10;
}

.yf-header-inner {
	display: flex;
	align-items: center;
	align-content: center;
	gap: var(--space-md);
	flex-wrap: nowrap;
	min-height: 68px; /* stable row height so logo/nav/actions always share one
	                     visual baseline regardless of which is tallest — see
	                     min-height bump note below when the logo grows at
	                     900px+ */
}

/* Headroom check at 375px (the narrowest supported width): container
   padding (16px × 2) + logo badge (~64px) + gap (16px) + three 40px
   action icons with 8px gaps between them (136px) + gap (16px) + the
   40px mobile toggle totals ~304px, leaving a comfortable margin before
   375px — confirmed by arithmetic against the exact values below, since
   this environment has no live browser to screenshot against. */

/* This element also carries .yf-container (max-width + horizontal
   padding + centering) — combined on the SAME element, not two nested
   ones, so this is a single cascade, not a doubled padding (same
   reasoning already established for the hero/brand-banner/final-CTA
   sections in assets/css/home.css). Only the vertical padding is
   overridden here, to a much smaller value than .yf-container's default,
   which is what keeps the header compact rather than tall. Specificity:
   two classes on one selector beats .yf-container's one class, so this
   wins without !important. */
.yf-header-inner.yf-container {
	padding-top: var(--space-sm);
	padding-bottom: var(--space-sm);
}

/* ------------------------------------------------------------
   LOGO — left-aligned, compact, never oversized. Both max-height and
   max-width are set (rather than a fixed size) so the logo scales
   proportionally within that box regardless of the uploaded image's own
   aspect ratio, never distorted, never huge.

   White "plate": see this file's top doc comment (LOGO) for why — in
   short, the uploaded logo file is opaque with its white background
   baked into the pixels, so this card deliberately matches that white
   rather than fighting it, turning the old stray white square into one
   clean, intentional shape. Every value below (colour, radius, shadow)
   is an existing design token — no new ones introduced.
   ------------------------------------------------------------ */
.yf-logo {
	display: inline-flex;
	align-items: center;
	align-self: center;
	flex: 0 0 auto;
	margin-right: auto; /* pushes nav + actions + toggle to the right, single row */
	padding: var(--space-2xs) var(--space-sm);
	background-color: var(--white);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	line-height: 1; /* removes the inline text line-box under the image that
	                   can otherwise sit a couple of px taller than the
	                   image itself and nudge the whole row out of true
	                   vertical alignment */
	color: var(--color-heading);
	transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.yf-logo__image {
	display: block;
	height: auto;
	width: auto;
	max-height: 56px;
	max-width: 180px;
}

/* Text fallback (used only if no logo has been set in Appearance →
   Customize → Site Identity) sits on the same white plate as the image
   now, so it needs a dark colour, not the inverse/white colour this rule
   used before the plate existed — on the old transparent/dark header
   that white text on white background would otherwise be invisible. */
.yf-logo__text {
	font-family: var(--font-heading);
	font-weight: var(--fw-heavy);
	font-size: var(--fs-body);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--color-heading);
}

.yf-logo:hover,
.yf-logo:focus-visible {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-1px);
}

.yf-logo:hover .yf-logo__text,
.yf-logo:focus-visible .yf-logo__text {
	color: var(--yodha-orange);
}

/* ------------------------------------------------------------
   PRIMARY NAVIGATION — horizontal, right of the logo. Hidden and
   collapsed into a toggleable dropdown below 900px (see the breakpoint
   block at the end of this section).
   ------------------------------------------------------------ */
.yf-main-navigation {
	flex: 0 0 auto;
	align-self: center;
}

.yf-nav-menu {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.yf-nav-menu li {
	position: relative;
}

.yf-nav-menu a {
	position: relative;
	display: inline-block;
	padding: var(--space-xs) 0;
	color: var(--color-text-inverse);
	font-size: var(--fs-nav);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-nav);
	white-space: nowrap;
}

/* Subtle animated underline — the "active/hover state" called for in the
   brief, kept to a single thin line rather than a background fill so the
   header stays visually quiet. prefers-reduced-motion is already handled
   globally (base.css collapses every transition duration to ~0), so no
   extra media query is needed here. */
.yf-nav-menu a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2px;
	height: 2px;
	background-color: var(--yodha-orange);
	border-radius: var(--radius-full);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--transition-fast);
}

.yf-nav-menu a:hover,
.yf-nav-menu a:focus-visible,
.yf-nav-menu li.current-menu-item > a,
.yf-nav-menu li.current_page_item > a {
	color: var(--yodha-orange);
}

.yf-nav-menu a:hover::after,
.yf-nav-menu a:focus-visible::after,
.yf-nav-menu li.current-menu-item > a::after,
.yf-nav-menu li.current_page_item > a::after {
	transform: scaleX(1);
}

/* Submenus (dropdowns): light background rather than dark-on-dark, far
   more legible, and stays readable in the overlay header state too
   (where the header background itself is only semi-transparent). */
.yf-nav-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	margin: 0;
	padding: var(--space-xs) 0;
	list-style: none;
	background-color: var(--white);
	border-radius: var(--radius-sm);
	border-top: 3px solid var(--yodha-orange);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity var(--transition-fast), transform var(--transition-fast), visibility 0s linear var(--transition-fast);
}

.yf-nav-menu li:hover > .sub-menu,
.yf-nav-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity var(--transition-fast), transform var(--transition-fast), visibility 0s linear 0s;
}

.yf-nav-menu .sub-menu a {
	display: block;
	padding: var(--space-xs) var(--space-md);
	color: var(--color-text);
	font-weight: var(--fw-regular);
}

.yf-nav-menu .sub-menu a:hover,
.yf-nav-menu .sub-menu a:focus {
	color: var(--yodha-orange);
}

/* ------------------------------------------------------------
   HEADER ACTIONS — search toggle, account, cart. Always visible, at
   every viewport width (only the nav list collapses on mobile).
   ------------------------------------------------------------ */
.yf-header-actions {
	display: flex;
	align-items: center;
	align-self: center;
	gap: var(--space-xs);
	flex: 0 0 auto;
}

/* Consistent 40×40 icon buttons (search, account, cart) with a matching
   clickable area and a shared, subtle hover/focus affordance — a soft
   light plate rather than only a colour change, so the three controls
   read as one deliberate group instead of three bare, cramped glyphs. */
.yf-navicon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: transparent;
	border: none;
	border-radius: var(--radius-sm);
	cursor: pointer;
	color: var(--color-text-inverse);
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.yf-navicon:hover,
.yf-navicon:focus-visible,
.yf-navicon:focus-within {
	background-color: rgba(255, 255, 255, 0.08);
	color: var(--yodha-orange);
}

/* Storefront's own cart output (called directly from site-header.php via
   storefront_header_cart()) — styling only, no markup added here, so
   WooCommerce's native AJAX cart-fragment refresh keeps working.

   .yf-header-cart-icon is the new wrapping element (site-header.php) that
   also carries .yf-navicon, so it already has the shared 40×40 box/hover
   treatment above. This theme's own cart glyph (yodha_fuel_icon('cart'))
   is printed as its first, purely decorative child; storefront_header_cart()
   follows immediately after, completely untouched. .cart-contents — the
   one real WooCommerce link, still the exact element WooCommerce's AJAX
   fragment refresh replaces — is stretched with position:absolute;inset:0
   to invisibly cover that same 40×40 box, so the icon, the badge and the
   click/focus target all line up as one control instead of the icon and
   the (previously bare-text) count sitting side by side. See this file's
   top doc comment (CART ICON + BADGE) for the full reasoning. */
.site-header-cart,
.site-header-cart li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-header-cart {
	display: inline-flex;
	align-items: center;
}

.yf-header-cart-icon {
	position: relative;
}

/* CART ICON BUG #2 FOUND AFTER TESTING (v2.7.2 report — real overlap
   confirmed live with the cart actually holding an item, not just the
   empty-cart "0" state): .cart-contents's own position:absolute;inset:0
   (right below) only stretches it to fill whichever element is its CSS
   "containing block" — the nearest positioned ancestor. That ancestor is
   NOT .yf-header-cart-icon (even though .cart-contents LOOKS like a
   direct child of it); storefront_header_cart() actually renders
   `<ul class="site-header-cart"><li><a class="cart-contents">…</a></li>
   <li><div class="widget_shopping_cart">…</div></li></ul>`, and that
   .site-header-cart UL — not the icon span — is Storefront's own
   position:relative element sitting in between, so it's the real
   containing block.

   That UL is a flex container whose own size is driven entirely by its
   two <li> children's normal-flow size — but one <li> only contains the
   now-absolutely-positioned .cart-contents (which, being absolute, is
   removed from flow and contributes nothing to its parent's size), and
   the other only contains the mini-cart dropdown widget, which is
   display:none until hover. With both children contributing zero size,
   the UL itself collapses to a single zero-width/zero-height point —
   so .cart-contents's "inset:0" had nothing real to stretch to and
   collapsed to that same point too, with its text content (price/count)
   and the count badge then rendering wherever they overflowed from that
   point instead of filling the 40×40 icon box. Confirmed live by adding
   a real item to the cart (count "1") and reading getBoundingClientRect()
   on every element in the chain — this is the actual "2 cart icons
   overlapping, count overlapping" the badge-position !important fix
   above didn't catch, because that empty-cart testing never exposed the
   zero-size containing block.

   Fix: give the UL itself real, fixed position/size (filling the same
   40×40 box as .yf-header-cart-icon) so it's a correctly-sized
   containing block regardless of its children's own flow sizing. The
   mini-cart dropdown's own position:absolute (Storefront's CSS, unchanged)
   still resolves against this same UL, so its hover/focus dropdown
   behaviour is unaffected — it now anchors to an accurately-sized box
   instead of a collapsed point. Scoped to .yf-header-cart-icon so this
   never touches .site-header-cart anywhere else WooCommerce/Storefront
   renders it (e.g. a future off-canvas cart). */
.yf-header-cart-icon ul.site-header-cart {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
}

.yf-header-cart-icon .cart-contents {
	/* !important: beats Storefront's own @media(min-width:768px) tie —
	   see the CART ICON BUG note in this file's top doc comment. Without
	   it, Storefront's later-loaded, equally-specific rule silently wins
	   and this element reverts to an auto-sized, padded box instead of
	   the 40×40 icon overlay this whole cart-icon treatment depends on. */
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	padding: 0 !important;
	width: auto;
	height: auto;
	color: var(--color-text-inverse);
}

/* CART ICON BUG #3 FOUND AFTER TESTING (v2.7.3 report — "2 cart icons,
   remove one"): this was never a layout/sizing problem like bugs #1 and
   #2 above — it's a genuinely separate SECOND icon. Storefront's own
   woocommerce.css ships `.site-header-cart .cart-contents::after { ...
   font-family: "Font Awesome 5 Free"; content: "\f07a" (a basket glyph);
   ... }` — Storefront's native basket icon, printed automatically after
   every cart link with no markup of its own to remove. This theme's own
   decorative yodha_fuel_icon('cart') SVG (site-header.php) sits right
   beside it, so the live page was always rendering BOTH icons stacked on
   top of each other — confirmed live via getComputedStyle(cartContents,
   '::after'): a real, sized (18×16) Font Awesome glyph, not a rendering
   artifact or anything to do with the containing-block fix above.
   Suppressed here, scoped to this theme's own cart icon only, so
   Storefront's native basket glyph never competes with the custom SVG. */
.yf-header-cart-icon .cart-contents::after {
	content: none !important;
	display: none !important;
}

/* Cart subtotal price ("₹0") — removed per request; only the item count
   badge (.count below) stays. See inc/theme-setup.php's
   yodha_fuel_header_cart_count_text() for the matching PHP-side fix that
   strips the word "item(s)" from that badge's own text, which can't be
   done with CSS alone since it isn't a separate element. */
.site-header-cart .cart-contents .woocommerce-Price-amount {
	display: none;
}

/* The count badge — a small solid-orange circle pinned to the TOP-RIGHT
   CORNER of the 40×40 icon box (not inline beside the glyph, which is
   what let it collide with the icon/neighbouring controls before). The
   border matches the header's own background colour, so the badge reads
   as a distinct shape cut out from the header rather than merging into
   the icon under it — this works in both the solid-dark and the
   transparent/overlay header states, since both sit on the same dark
   charcoal (--color-bg-dark / the overlay gradient's own dark colour). */
.yf-header-cart-icon .cart-contents .count {
	position: absolute;
	top: -4px;
	right: -4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	background-color: var(--yodha-orange);
	color: var(--white);
	border: 2px solid var(--color-bg-dark);
	border-radius: var(--radius-full);
	font-size: 11px;
	font-weight: var(--fw-bold);
	line-height: 1;
	white-space: nowrap;
}

/* BUG FIXED HERE: the mini-cart dropdown (Storefront's own native
   .widget_shopping_cart — no markup or JS of ours involved) is sized by
   Storefront's own woocommerce.css rule:
   `.site-header-cart .widget_shopping_cart { position: absolute; width:
   100%; left: 0; right: 0; }`. That rule assumes `.site-header-cart`
   itself is already a reasonably wide box — in stock Storefront it's a
   ~22%-of-header-width div. This theme's own header (site-header.php)
   instead renders `.site-header-cart` as a plain inline-flex <ul> that
   intentionally shrink-wraps tight around the single cart icon/count it
   holds (see the `.site-header-cart` rule above) — confirmed live at
   only ~33px wide. Stretching the dropdown to "100%" of that ~33px box
   left every word too wide to fit, so the browser wrapped the text one
   character per line — exactly the vertical single-letter column
   reported live. Pinning an explicit width here fixes the box itself;
   switching the anchor from the left edge to the right edge (right: 0;
   left: auto) keeps it hanging below-left of the cart icon, which sits
   at the far right of the header, instead of running off the right edge
   of the viewport once it's no longer pinned to a ~33px-wide box. The
   max-width keeps it from overflowing the viewport on narrow phones.
   !important on all four: confirmed live that a plain (non-!important)
   version of this rule was being silently outweighed — not by
   specificity (both selectors are identically `.site-header-cart
   .widget_shopping_cart`, specificity (0,2,0)) but by cascade ORDER:
   Storefront's own woocommerce.css is enqueued, and therefore appears
   in the page, AFTER this file, so on a dead tie Storefront's rule wins
   by simply coming later. !important is the correct, minimal way to
   break that tie without reaching for a markup change or a heavier
   selector hack — same approach already used for the same reason on
   .yf-brand-banner__inner / .yf-final-cta__inner in home.css. */
.site-header-cart .widget_shopping_cart {
	left: auto !important;
	right: 0 !important;
	width: 320px !important;
	max-width: calc(100vw - (var(--container-padding-mobile) * 2)) !important;
	color: var(--color-text);
}

/* SECOND BUG, found only once the width fix above made the dropdown's
   text readable: Storefront's woocommerce.css doesn't actually gate
   this dropdown on hover at all above 768px — confirmed live in the
   CSSOM:
     .site-header-cart .widget_shopping_cart { display: none; }
     @media (min-width: 768px) {
       .site-header-cart .widget_shopping_cart { display: block; }   <-- unconditional
       .site-header-cart:hover .widget_shopping_cart,
       .site-header-cart.focus .widget_shopping_cart { display: block; }  <-- redundant with the line above
     }
   That unconditional `display: block` is why "No products in the cart."
   stayed on screen at all times at desktop/tablet widths instead of only
   while hovering the cart icon — it was never actually hidden there to
   begin with, it only went unnoticed earlier because the width bug above
   made it unreadable. Re-hiding it by default and revealing it only on
   hover/keyboard-focus of .site-header-cart (plus Storefront's own
   `.focus` class, which its header-cart.min.js still adds on tap for
   touch devices — kept working here on purpose) restores the hover-to-
   reveal behaviour this theme's icon-only header is designed around.
   Both rules need !important for the same cascade-order reason as the
   block above (Storefront's own competing rules load after this file);
   with both sides marked !important, normal CSS specificity decides
   between them again, and the extra :hover/.focus/:focus-within class in
   the selector below is exactly what makes the reveal rule more specific
   than the always-hidden one, so each wins only when it should. */
.site-header-cart .widget_shopping_cart {
	display: none !important;
}

.site-header-cart:hover .widget_shopping_cart,
.site-header-cart.focus .widget_shopping_cart,
.site-header-cart:focus-within .widget_shopping_cart {
	display: block !important;
}

/* ------------------------------------------------------------
   SEARCH — toggled open/closed by assets/js/navigation.js. A full-width
   panel directly under the header row, not a separate floating box.
   ------------------------------------------------------------ */
.yf-search-form {
	background-color: var(--color-bg-dark-soft);
}

.yf-search-form[hidden] {
	display: none;
}

.yf-search-form__inner {
	padding-top: var(--space-md);
	padding-bottom: var(--space-md);
}

.yf-search-form .search-field {
	width: 100%;
	min-height: var(--btn-height-md);
	padding: var(--space-xs) var(--space-md);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: var(--fs-body);
}

/* ------------------------------------------------------------
   MOBILE MENU TOGGLE — hidden at 900px+; see breakpoint block below for
   its visible mobile state and the two-icon swap.
   ------------------------------------------------------------ */
.yf-mobile-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: transparent;
	border: none;
	border-radius: var(--radius-sm);
	cursor: pointer;
	color: var(--color-text-inverse);
	flex: 0 0 auto;
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.yf-mobile-toggle:hover,
.yf-mobile-toggle:focus-visible {
	background-color: rgba(255, 255, 255, 0.08);
	color: var(--yodha-orange);
}

.yf-mobile-toggle .yf-icon--close-indicator {
	display: none;
}

.yf-mobile-toggle[aria-expanded="true"] .yf-icon--open-indicator {
	display: none;
}

.yf-mobile-toggle[aria-expanded="true"] .yf-icon--close-indicator {
	display: inline-flex;
}

/* ============================================================
   HEADER — single breakpoint (900px) for every responsive header rule
   ============================================================ */

/* Below 900px: nav collapses into a toggleable dropdown; the mobile
   toggle button appears; logo/search/account/cart stay in the one
   compact top row exactly as they are above 900px — there is no second
   permanent row on mobile. */
@media (max-width: 899px) {
	.yf-main-navigation {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		background-color: var(--warrior-dark);
		max-height: calc(100vh - 60px);
		overflow-y: auto;
	}

	.yf-main-navigation.is-open {
		display: block;
	}

	.yf-nav-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--space-sm) 0;
	}

	.yf-nav-menu a {
		display: block;
		padding: var(--space-sm) var(--container-padding-mobile);
		min-height: 44px; /* accessible tap target */
	}

	.yf-nav-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border-top: none;
		border-radius: 0;
		background-color: var(--warrior-dark-soft);
		margin: 0 0 0 var(--space-md);
	}

	.yf-mobile-toggle {
		display: inline-flex;
	}
}

/* 900px+: one row — logo left, nav + actions clustered right, toggle
   hidden. Logo gets more room to breathe at desktop size. Row min-height
   goes up to match so the (now slightly taller, padded) logo plate still
   sits on the same shared centered baseline as the nav/actions. The gap
   also opens up a little further at this width — more breathing room
   between logo/nav/actions than the mobile row needs. */
@media (min-width: 900px) {
	.yf-header-inner {
		min-height: 80px;
		gap: var(--space-lg);
	}

	/* LOGO SIZE REFINEMENT: the logo mark (assets/images/yodha-fuel-logo.png)
	   is a perfect 1:1 square, so its rendered size is always set by
	   max-height alone — max-width stays a non-binding safety ceiling, same
	   as the base rule above. 64px (up from 48px, +33%) is the "~30–40%
	   visible-size increase" asked for; padding grows alongside it rather
	   than staying fixed, per this file's existing LOGO doc comment ("a
	   deliberate, premium badge", not a bigger image floating in the same
	   tiny card) — horizontal padding steps up one token (--space-sm →
	   --space-md, 12px → 16px, keeping this plate's existing wider-than-tall
	   proportions), vertical padding is left at the base rule's --space-2xs
	   (4px), and border-radius steps up with it (--radius-md → --radius-lg,
	   8px → 12px) so the bigger plate still reads as one rounded unit, not a
	   square corner-radius that now looks small next to it. Net result: a
	   96×72px plate (64px image + 16px horizontal/4px vertical padding),
	   comfortably inside the existing 80px row min-height above with no
	   change to it — the row doesn't need to grow to fit this.

	   A full 120–130px-wide plate was also requested alongside "~30–40%
	   visible-size increase", but those two targets don't reconcile for
	   THIS square logo without either exceeding a 30–40% size bump or
	   padding the plate out of proportion to the mark (the empty-box look
	   requirement 3 explicitly asked to avoid) — see the delivery notes for
	   the full explanation and the larger option if 120–130px is wanted
	   instead. */
	.yf-logo {
		padding: var(--space-2xs) var(--space-md);
		border-radius: var(--radius-lg);
	}

	.yf-logo__image {
		max-height: 64px;
		max-width: 220px;
	}
}

/* ============================================================
   HEADER — overlay state (front page only)
   Scoped by the body.yf-header-overlay class (see inc/theme-setup.php's
   yodha_fuel_body_classes()). Every rule below is inert on any other
   template, since that class never appears there.
   ============================================================ */
body.yf-header-overlay .yf-site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: linear-gradient(to bottom, rgba(39, 47, 50, 0.55) 0%, rgba(39, 47, 50, 0) 100%);
}

/* The homepage's hero slider (template-parts/home/hero.php) is the very
   next element in the page flow once the header is taken out of it by
   position: absolute above — it naturally starts at the top of the
   viewport, with the header floating over its top portion. No extra
   spacer/padding is needed: assets/css/home.css gives the hero slider its
   own fixed height and internal vertical centering, so its content is
   never hidden behind the floating header. A toggled-open mobile menu in
   this state still gets its own solid background from the
   .yf-main-navigation.is-open rule above, so it stays fully legible over
   the hero image regardless. */

/* ============================================================
   CONTAINER — .yf-container
   Renamed from .content-area to .yf-container (site-wide, every
   template-part and this file) after finding the actual root cause of the
   post-header alignment problems reported on the homepage: Storefront's
   own parent-theme style.css defines, at @media (min-width: 768px):
       .content-area { width: 73.913%; float: left; margin-right: 4.34783%; }
   — its real two-column content+sidebar grid rule. This child theme had
   been reusing the plain name ".content-area" for an unrelated purpose (a
   generic max-width-and-center container utility used inside the header,
   hero, and every homepage section), never intending to opt into
   Storefront's float-based sidebar layout at all. Because our own
   .content-area rule never declared `float`, Storefront's `float: left`
   applied with nothing to contest it — every section built on the old
   name was silently floated left at 73.9% width above 768px. Individual
   floated sections still looked plausible on their own, but the first
   subsequent block box that establishes its own block-formatting context
   (.yf-brand-banner, via `overflow: hidden`) had to lay out beside the
   accumulated floats instead of spanning full width, which is what
   produced the narrow, right-shifted "Discipline is the fuel..." panel
   overlapping Shop by Goal / Featured Products / Why Yodha Fuel reported
   in the follow-up screenshot.
   `#primary` on page.php/single.php still correctly keeps the literal
   `content-area` class — that IS Storefront's own intended markup for a
   normal page/post's real two-column layout (sidebar support), and is
   deliberately left alone; only this child theme's own, unrelated re-use
   of the name was renamed.
   ============================================================ */
.yf-container {
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--space-lg) var(--container-padding-mobile);
}

/* ============================================================
   WOOCOMMERCE FULL-WIDTH CONTENT — #primary left floated with no sidebar
   to clear it

   BUG FOUND on the live site: the Single Product page (and, confirmed the
   same way, the Cart page) rendered with the product title, price,
   description and Highlights completely invisible — only the trust-badge
   pills above them were visible — against a dark panel that filled the
   rest of the page below the header. Inspecting the live DOM (not just
   the theme source) found the real cause: it's the SAME underlying
   Storefront rule the CONTAINER comment above already documents ON THIS
   FILE —
       .content-area { width: 73.913%; float: left; margin-right: 4.34783%; }
   — except this time hitting `#primary` itself, which (as that comment
   says) deliberately keeps the literal `content-area` class, since that
   normally pairs with a floated `#secondary` sidebar. On every WooCommerce
   content page here the sidebar has no active widgets, so Storefront adds
   `storefront-full-width-content` to the body and that resets `#primary`'s
   WIDTH to 100% — confirmed live — but never resets its `float`, so
   `#primary` stays floated at full width, i.e. taken out of normal flow,
   on every single one of these pages. `<footer class="yf-site-footer">`
   is the very next sibling in #page, is NOT floated, and has its own
   solid, opaque dark background (assets/css/footer.css) — a plain in-flow
   block paints its own background before a float's content paints (CSS2.1
   §E.2), so the footer's dark panel ends up painted first, directly under
   the header, with the floated #primary's content painted over part of
   it afterwards. Whether that leaves the page readable or not then comes
   down to accidents of paint order within #primary's own content (the
   trust badges happened to stay visible; the plain title/price/description
   text did not) — confirmed live that the Shop page currently "looks
   fine" only because of exactly this kind of accident, not because it
   isn't carrying the identical bug; its `#primary` is floated at 100%
   width too.
   Scoped to the same native `storefront-full-width-content` body class
   Storefront itself already adds for this exact situation (WooCommerce →
   no active sidebar widgets) — not a blanket `#primary` override, so a
   page that genuinely has sidebar widgets one day keeps its real two-
   column layout untouched. */
body.storefront-full-width-content #primary.content-area {
	float: none;
	width: 100%;
	margin-right: 0;
}

/* Generic section wrapper used by front-page.php placeholders and,
   later, real homepage sections. Padding increases at each breakpoint
   below (this is the mobile base) so the page reads as a sequence of
   distinct, generously-spaced sections rather than one continuous
   scroll. The hairline border-top is a second, independent separation
   cue that works even where two adjacent sections happen to share a
   background (e.g. either side of Brand Banner/Final CTA, which aren't
   .yf-section and so aren't part of the white/off-white alternation) —
   subtle enough not to read as a hard rule, but enough that the seam
   between sections is never ambiguous. */
.yf-section {
	padding: var(--space-2xl) 0;
	border-top: 1px solid rgba(39, 47, 50, 0.06);
}

.yf-section--placeholder {
	border: var(--border-width) dashed var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-lg);
	margin-bottom: var(--space-lg);
	background-color: var(--color-bg-alt);
}

.yf-section--placeholder__note {
	color: var(--color-text-muted);
	font-size: var(--fs-small);
	margin: 0;
}

/* Alternating light section background — used by homepage sections
   (Featured Products, Trust) to break up long white-on-white stretches.
   The full homepage rhythm is: Hero (dark) → Shop by Goal (white) →
   Featured Products (alt) → Why Yodha Fuel (white) → Brand Banner (dark)
   → Best Sellers (white) → Trust (alt) → Final CTA (dark) — a strict
   alternation with no two consecutive sections sharing a background, so
   every section boundary is visible even before the border-top hairline
   or the extra vertical spacing are taken into account. (Why Yodha Fuel
   and Trust previously landed on the same side of the alternation as
   their neighbors, which is what made those seams invisible.)
   Lives here rather than in home.css because it's a plain modifier on
   the already-shared .yf-section class. */
.yf-section--alt {
	background-color: var(--color-bg-alt);
}

/* Static page / post content */
.yf-page__header {
	margin-bottom: var(--space-lg);
}

.yf-page__content {
	max-width: 72ch;
}

.yf-post__meta {
	color: var(--color-text-muted);
	font-size: var(--fs-small);
}

/* ============================================================
   FOOTER — superseded. This file used to style Storefront's own native
   footer-widgets markup directly (.site-footer / .footer-widgets /
   .widget / .site-info), back when this theme had no footer.php of its
   own and simply left Storefront's original footer in place. That is no
   longer the case: this theme now ships a full footer.php override (plus
   template-parts/footer/site-footer.php) with its own markup and its own
   stylesheet, assets/css/footer.css — see that file, and footer.php's own
   doc comment, for the full reasoning. The rules that used to live here
   targeted classes this site no longer renders at all, so they were
   removed rather than left as dead weight.
   ============================================================ */

/* ============================================================
   BREAKPOINTS — 375 (base) / 480 / 768 / 1024 / 1280px
   Mobile-first: only additions/overrides for larger viewports. These are
   unrelated to the header (which uses its own single 900px breakpoint
   above) — they govern .yf-container / .yf-section padding site-wide.
   ============================================================ */

/* 480px — large mobile */
@media (min-width: 480px) {
	.yf-container {
		padding-left: var(--container-padding-small);
		padding-right: var(--container-padding-small);
	}
}

/* 768px — tablet */
@media (min-width: 768px) {
	.yf-container {
		padding: var(--space-xl) var(--container-padding-tablet);
	}

	.yf-section {
		padding: var(--space-3xl) 0;
	}
}

/* 1024px — desktop */
@media (min-width: 1024px) {
	.yf-container {
		padding: var(--space-2xl) var(--container-padding-desktop);
	}

	.yf-section {
		padding: var(--space-4xl) 0;
	}
}

/* 1280px — large desktop */
@media (min-width: 1280px) {
	.yf-section {
		padding: var(--space-5xl) 0;
	}
}