/* ===========================================================================
   MOBILE HEADER, VNM PARITY  (2026-11-09, owner)
   ---------------------------------------------------------------------------
   Owner: "the header on mobile should be like on vnm; a logged-in user gets
   an empty band at the top, and on a post the header and the L1-L0 panel
   overlap; the panel must sit right under the header".

   Measured on live at 390x844 before this file:
   - TWO bars: .sk-header (67px) and, under it, the parent's
     .arneiron-mobile-bar (56px) holding only an account icon (the masthead
     already has one) and a cart (skaryna has 0 products, 0 orders).
   - ai-chatboxes aic-tabs.js pins the L-tabs (.aic-vertical-tabs-nav.is-sticky)
     at a HARD-CODED top: 50px (VNM's bar height) + 32px whenever #wpadminbar
     is in the DOM. Guest: 50 < 67, the panel slid 17px under the masthead.
     Logged in: 82 > 67, a 15px band of text showed between the two.
   VNM: one 50px bar, tabs fixed at exactly 50.

   Fix: below 768px (aic-tabs.js's own mobile breakpoint) the masthead is one
   50px row, the parent bar is gone, the tabs are held at the masthead's
   bottom edge whatever offset the plugin computed. skaryna-mobile-header.js
   takes the hidden admin-bar node out of the DOM on phones so the plugin also
   stops adding 32px before it pins the panel (otherwise it jumps 32px).

   ROLLBACK: delete the require_once of inc/skaryna-mobile-header.php.
   =========================================================================== */

/* The parent's second bar: nothing in it that the masthead lacks. */
.header-mobile.arneiron-mobile-bar { display: none !important; }

:root { --sk-mhead-h: 67px; }

@media (max-width: 767.98px) {
  :root { --sk-mhead-h: 50px; }

  .sk-masthead,
  .sk-masthead__inner {
    box-sizing: border-box;
    height: var(--sk-mhead-h);
    min-height: 0;
  }
  .sk-masthead { border-bottom: 0; }
  .sk-masthead__inner { padding-block: 0; gap: 4px; }
  .sk-masthead__actions { gap: 0; }
  .sk-burger, .sk-iconbtn { width: 44px; height: 44px; align-self: center; }
  skaryna-logo.sk-brand__logo,
  .sk-brand__logo { height: 30px; }

  /* the drawer and its scrim open under the bar, as before, at the new height */
  .sk-nav,
  #sk-navtoggle:checked ~ .sk-nav-scrim { top: var(--sk-mhead-h); }

  /* L1/L0 panel: straight under the masthead, never under it, never below it.
     !important beats the inline top the plugin writes on every scroll. */
  .aic-vertical-tabs-nav.is-sticky { top: var(--sk-mhead-h) !important; }
}

/* ---------------------------------------------------------------------------
   v2 (2026-11-09, owner: "on mobile the header seems to shake while scrolling").
   Two real-device jitter sources, neither visible in headless Chromium
   (119 screencast frames of a touch scroll: header pixels identical):
   1. NESTED sticky — .sk-header AND .sk-masthead inside it were both
      position:sticky; top:0. Mobile Safari (and Chrome while the URL bar
      collapses) resolves the inner one a frame late during momentum scroll.
   2. body{background-attachment:fixed} (skaryna.css) — a fixed background
      can force a repaint every scroll frame on Android; the gradient is 5%
      alpha, invisible on a phone.
   Fix = what VNM does: the bar is position:fixed on phones, the inner block
   is static, the page is padded by the bar height. No transform on .sk-header:
   it would become the containing block of the fixed drawer (.sk-nav).
   --------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .sk-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    width: 100%;
  }
  .sk-masthead { position: static; }
  .wp-site-blocks { padding-top: var(--sk-mhead-h); }
  html { scroll-padding-top: calc(var(--sk-mhead-h) + 8px); }
  body { background-attachment: scroll; }
}