/* ==========================================================================
   MOBILE PATCH — header, drawer, safe area, motion preference
   ==========================================================================
   Extracted from the fourth inline <style> block in footer.php, which shipped
   12.5KB on every page. Roughly two thirds of it styled .ca-story,
   .ca-showcase, .ca-journal, .ca-cats and .ca-bs — homepage sections deleted
   in Phase 2 — plus a set of .ca-hero__* and .ca-footer__* classes that no
   longer exist in any template. Only the rules below still match markup.

   Loaded last so its !important header overrides continue to win, exactly as
   they did when this was the final inline block on the page.
   ========================================================================== */

@media (max-width: 768px) {
  /* Safety net. The homepage measures 0 horizontal overflow at every
     breakpoint, but this also guards the shop, cart, account and policy
     templates, which have not been rebuilt yet. */
  body { overflow-x: hidden; }
}

/* ── Header ────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .ca-header {
    width: 100% !important;
    margin-top: 0 !important;
    border-radius: 0 !important;
    /* Background is already 98% opaque, so the blur it was compositing under
       was nearly invisible — not worth repainting on every scroll frame of a
       sticky element on Android Mali/Adreno GPUs. */
    background: var(--ivory, #FBFAF9) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .ca-header.is-scrolled,
  .ca-header.is-morphed {
    width: 100% !important;
    margin-top: 0 !important;
    border-radius: 0 !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  }

  .ca-burger { width: 44px; height: 44px; justify-content: center; }
  .ca-nav__inner { padding: 0 14px; gap: 0; }
  .ca-logo__cook,
  .ca-logo__art { font-size: 1.45rem; }
  .ca-actions { gap: 0; }
  .ca-act { width: 42px; height: 42px; }
}

@media (max-width: 480px) {
  .ca-logo__cook,
  .ca-logo__art { font-size: 1.25rem; }
  .ca-burger { width: 40px; height: 40px; }
  .ca-burger span { width: 20px; }
}

@media (max-width: 360px) {
  .ca-logo__cook,
  .ca-logo__art { font-size: 1.15rem; }
  .ca-act { width: 38px; height: 38px; }
}

/* ── Mobile drawer ─────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .ca-mob__panel   { width: min(360px, 88vw); }
  .ca-mob__nav     { padding: 8px 0; }
  .ca-mob__link    { padding: 14px 20px; font-size: 0.95rem; }
  .ca-mob__sublink { padding: 12px 20px 12px 32px; font-size: 0.88rem; }
  .ca-mob__head    { padding: 16px 20px 14px; }
  .ca-mob__footer  { padding: 16px 20px; }
}

/* ── Bottom bar safe area ──────────────────────────────────────────────── */

/* The bottom bar only exists at <=768px (style.css:1138), but this body rule
   used to sit outside any media query — so every DESKTOP page carried 58px of
   padding below the footer for a bar that was display:none. It now matches the
   breakpoint that actually shows the bar. */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .ca-bottom { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }

  @media (max-width: 768px) {
    body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  }
}

/* ── Layout-shift and overflow guards ──────────────────────────────────── */

@media (max-width: 768px) {
  img, video, iframe, svg { max-width: 100%; height: auto; }
  h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; hyphens: auto; }
}

/* ── Motion preference ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}