/* =============================================================
   AITRIXA CHILD — MOBILE HEADER (global, all pages)
   =============================================================
   Loaded by aitrixa_child_enqueue_assets() in functions.php under the
   handle 'aitrixa-mobile-header'. Dependencies: 'aitrixa-design-system'
   and 'aitrixa-shop' (when the latter is enqueued), so this file always
   loads AFTER them and wins cascade ties.

   Scope: @media (max-width: 768px) only. Desktop is untouched.

   Consolidated from versioned blocks originally in shop.css:
     v85 A1-A4   — first pass (cart icon, menu-btn, brand sizing,
                   "Reference Standards" subtitle override)
     v86 A-F     — specificity-bumped versions that actually win the
                   cascade against style.css 'header nav a.nav__cart'
                   rules (which use !important at specificity 0,2,1)
     v90         — +10% header scaling
     v92         — +5% on top of v90 (cumulative ~15% vs original)

   Per-element undo plan: see history above. To revert to the v85/v86
   baseline sizing, find the rules below and replace the v92 numeric
   values with the v85/v86 originals listed in comments alongside.

   The shop.css file still contains the original v85/v86/v90/v92 blocks
   during phase 1 of this migration. Both files have the same selectors
   at identical !important + specificity, so load order decides winner.
   This file MUST load after shop.css — enforced via dependency in PHP.
   ============================================================= */

@media (max-width: 768px) {

  /* === HEADER STRUCTURE: flex layout, 4 children inline (brand, empty span, .nav, .menu-btn) === */
  .header__inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    grid-template-columns: none !important;
    /* v92 values; v90: padding 15px gap 11px; v85: padding 14px gap 10px */
    padding: 16px var(--gutter, 20px) !important;
    gap: 12px !important;
  }
  /* Hide the empty <span></span> sibling between .brand and .nav */
  .header__inner > span:empty { display: none !important; }
  .header__inner > .brand    { flex: 0 0 auto !important; }
  .header__inner > .nav      { flex: 0 0 auto !important; margin-left: auto !important; }
  .header__inner > .menu-btn { flex: 0 0 auto !important; }

  /* === NAV: only the cart is visible on mobile; menu items live in the drawer (TBD) === */
  /* style.css has 'header nav > li, header nav li { display: inline-flex !important }' at
     specificity (0,2,1). We need >= (0,2,1) plus later cascade. Use (0,2,3). */
  html header nav > li.menu-item,
  html .nav > li.menu-item { display: none !important; }
  /* Restore .nav visibility (aitrixa.css sets display:none under @media max-width:900px) */
  html header nav.nav,
  html .nav {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    justify-self: end !important;
  }

  /* === BRAND: logo mark + name + subtitle text override === */
  /* v92: mark 37px, name 16px, sub 10.5px
     v90:      35px        15px         10px
     v85:      32px        14px          9px */
  .brand          { gap: 12px !important; }
  .brand__mark    { width: 37px !important; height: 37px !important; }
  .brand__name    { font-size: 16px !important; letter-spacing: 0.18em !important; font-weight: 600 !important; }

  /* Hide the original "Analytical Reference Standards" text, inject "Reference Standards" instead */
  .brand__sub {
    font-size: 0 !important;
    letter-spacing: 0 !important;
    margin-top: 2px !important;
    line-height: 1 !important;
  }
  .brand__sub::after {
    content: "Reference Standards";
    font-family: var(--font-mono) !important;
    font-size: 10.5px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--mute) !important;
    display: inline-block !important;
    line-height: 1 !important;
  }

  /* === CART ICON BUTTON ===
     style.css has 'header nav a.nav__cart' rules at specificity (0,2,1) with !important
     for padding and font-size. We need >= (0,2,1) plus later cascade.
     Use 'html header nav a.nav__cart' = (0,2,2). */
  /* v92: 44x44, svg 21x21, badge 16x16 font 10.5
     v90: 42x42, svg 20x20, badge 15x15 font 10
     v85: 38x38, svg 18x18, badge 14x14 font  9 */
  html header nav a.nav__cart,
  html .nav a.nav__cart {
    border: 1px solid transparent !important;
    padding: 0 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    background: transparent !important;
    color: var(--ink, #0b0b0d) !important;
    position: relative !important;
    overflow: visible !important;
    white-space: nowrap !important;
    transition: border-color .2s !important;
  }
  html header nav a.nav__cart:hover,
  html .nav a.nav__cart:hover {
    background: transparent !important;
    color: var(--ink, #0b0b0d) !important;
  }
  html header nav a.nav__cart:hover svg,
  html .nav a.nav__cart:hover svg {
    stroke: var(--ink, #0b0b0d) !important;
  }
  html header nav a.nav__cart:active,
  html .nav a.nav__cart:active {
    border-color: var(--ink, #0b0b0d) !important;
  }

  /* Force SVG dimensions (beats aitrixa.css 'img, svg { max-width:100% }') */
  html header nav a.nav__cart svg,
  html .nav a.nav__cart svg {
    width: 21px !important;
    height: 21px !important;
    max-width: 21px !important;
    max-height: 21px !important;
    min-width: 21px !important;
    stroke: var(--ink, #0b0b0d) !important;
    stroke-width: 1.4 !important;
    fill: none !important;
    display: block !important;
    flex: 0 0 auto !important;
  }

  /* Cart count badge */
  html header nav a.nav__cart .cart-count,
  html .nav a.nav__cart .cart-count {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    padding: 0 3px !important;
    background: var(--ink, #0b0b0d) !important;
    color: var(--page, #eeeef0) !important;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* === HAMBURGER BUTTON ===
     v92: 44x44, span 21x1.7
     v90: 42x42, span 20x1.6
     v85: 38x38, span 18x1.4 */
  html .menu-btn,
  html header .menu-btn {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 4px !important;
    transition: border-color .2s !important;
  }
  html .menu-btn:focus,
  html .menu-btn:focus-visible,
  html .menu-btn:focus-within,
  html header .menu-btn:focus,
  html header .menu-btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }
  html .menu-btn:active,
  html header .menu-btn:active {
    border-color: var(--ink, #0b0b0d) !important;
  }
  html .menu-btn span,
  html header .menu-btn span {
    width: 21px !important;
    height: 1.7px !important;
    margin: 0 !important;
    background: var(--ink, #0b0b0d) !important;
    display: block !important;
  }

}
/* === END MOBILE HEADER === */


/* === UPSELL STRIP (mobile only): show only the first message, no overflow scroll ===
   On mobile, the upsell-strip was overflowing the viewport with 4 messages + separators,
   creating a horizontal-scrolling/cut-off feel. Drop everything except the first <span>.
   Desktop is untouched because this is inside the existing @media (max-width:768px) below.
   UNDO: delete the rules between v95_BEGIN and v95_END.
*/
@media (max-width: 768px) {
  /* v95_BEGIN — v95.1: tighter centering, beats parent text-align:start + flex-wrap */
  .upsell-strip {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .upsell-strip > *:not(:first-child) {
    display: none !important;
  }
  /* First (and only visible) child: shrink to content + center its own text */
  .upsell-strip > *:first-child {
    flex: 0 1 auto !important;
    width: auto !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
  /* v95_END */
}


/* === v96 MOBILE: upsell strip +10% size (padding + font) ===
   Base from aitrixa.css: padding:13px var(--gutter); font-size:11px.
   v95.1 had padding-left/right:16px, font-size inherited at 11px.
   v96 nudges +~10%: padding 15px vertical, 18px horizontal; font-size 12px.
   UNDO: delete the block between v96_BEGIN and v96_END.
*/
@media (max-width: 768px) {
  /* v96_BEGIN */
  .upsell-strip {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    font-size: 12px !important;
  }
  /* v96_END */
}


/* === v97 MOBILE NAV: slide-out animation + dismiss UX ===
   Replace the instant display:none/flex toggle with a transform-based
   slide from the right. 320px right-side panel (or 85vw on very narrow
   phones), 250ms ease-out. Adds a fade-in scrim behind the panel, locks
   body scroll when open, and lets the user tap outside to dismiss (the
   tap dismiss is wired in functions.php via wp_footer). The visual
   override sits inside the existing @media (max-width: 768px) gate so
   desktop is untouched (where aitrixa.css already keeps .mobile-nav as
   display:none).

   Source of original styles (aitrixa.css):
     .mobile-nav      { display:none; position:fixed; inset:0; background:var(--page); z-index:100; flex-direction:column; padding:80px var(--gutter) 48px; gap:32px; }
     .mobile-nav.open { display:flex; }

   v97 keeps it rendered (display:flex) so transform can animate, then
   pushes off-screen via translateX(100%) when not .open. !important is
   used on the display + transform pair to override aitrixa.css cleanly.

   UNDO: delete the block between v97_BEGIN and v97_END below.
*/
@media (max-width: 768px) {
  /* v97_BEGIN */

  .mobile-nav {
    display: flex !important;
    left: auto !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: min(320px, 85vw) !important;
    max-width: 320px !important;
    transform: translateX(100%);
    transition: transform 250ms ease-out;
    box-shadow: -16px 0 48px rgba(0, 0, 0, 0.12);
    will-change: transform;
  }
  .mobile-nav:not(.open) {
    pointer-events: none;
  }
  .mobile-nav.open {
    transform: translateX(0);
  }

  /* Scrim: dark backdrop behind the panel, fades in with the slide. */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(11, 11, 13, .42);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 250ms ease-out;
  }
  body:has(.mobile-nav.open)::after {
    opacity: 1;
    visibility: visible;
    /* Pointer events stay off so taps fall through to the document
       click handler in functions.php, which closes the menu. */
  }

  /* Prevent body scroll while the drawer is open. */
  body:has(.mobile-nav.open) {
    overflow: hidden;
  }

  /* v97_END */
}


/* navmatch: bare X close button (matches cart drawer) + divider lines between nav items */
@media (max-width: 768px) {
  .mobile-nav__close {
    width: 32px !important;
    height: 32px !important;
    min-width: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    font-size: 0 !important;
    color: var(--ink) !important;
  }
  .mobile-nav__close:active { border-color: var(--ink) !important; }
  .mobile-nav__close svg {
    width: 14px !important;
    height: 14px !important;
    stroke: var(--ink) !important;
    fill: none !important;
    stroke-width: 1.4 !important;
    max-width: none !important;
    display: block !important;
  }
  .mobile-nav { gap: 0 !important; }
  .mobile-nav .menu-item { margin: 0 !important; padding: 0 !important; list-style: none !important; }
  .mobile-nav a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: right !important;
    padding: 22px 0 !important;
    border-bottom: 1px solid var(--line) !important;
    text-decoration: none !important;
  }
  .mobile-nav .menu-item:first-of-type a { border-top: 1px solid var(--line) !important; }
  .mobile-nav a, .mobile-nav__close { -webkit-tap-highlight-color: transparent !important; }
}