/* ==========================================================================
   CrysMed — mobile & tablet shell (header, menu drawer, bottom nav, WhatsApp button)
   Loaded site-wide from fragments/site.html :: head-links.

   2026-10-09 — mobile/tablet redesign, layout patterns modelled on 1mg.com's mobile web app,
   in CrysMed's own colors. DESKTOP (1024px and up) IS UNTOUCHED: every rule that changes an
   existing element sits inside the max-width: 1023.98px query below. The only rule outside it
   hides the new mobile-only markup on desktop.
   2026-10-09 (later): touch tablets held in landscape (1024-1366px, hover:none + pointer:coarse,
   e.g. iPads) also get this mobile/tablet layer. PCs and laptops with a mouse never match that,
   so the desktop design stays exactly as approved at every width.
   ========================================================================== */

/* New markup added for mobile only (bottom nav, menu backdrop) never shows on desktop. */
.mobile-only { display: none; }

@media (max-width: 1023.98px), (min-width: 1024px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  :root {
    --m-gutter: 16px;
    --m-header-h: 60px;
    --m-tabbar-h: 64px;
    --m-safe-bottom: env(safe-area-inset-bottom, 0px);
  }

  .mobile-only { display: revert; }

  /* Room for the fixed bottom nav, so it never covers the footer or the last section */
  body { padding-bottom: calc(var(--m-tabbar-h) + var(--m-safe-bottom)); }
  html { scroll-padding-top: var(--m-header-h); }

  /* ---- Header: [menu] logo .......... [sign up] [cart] ---- */
  /* Tucks away by sliding its sticky `top` (not transform: a transformed header would trap the
     position:fixed menu drawer inside its own 60px box). */
  .site-header { transition: top .3s var(--ease); }
  .site-header.is-tucked { top: calc(-1 * var(--m-header-h) - 2px); }

  .site-header .container {
    height: var(--m-header-h);
    gap: 10px;
    padding-inline: var(--m-gutter);
  }
  /* Header buttons become direct flex items, so the menu button can sit on the left like an app */
  .site-header .header-actions { display: contents; }
  .site-header .nav-toggle {
    order: -1;
    display: inline-flex;
    width: 40px;
    height: 40px;
    flex: none;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--white);
    color: var(--ink-900);
  }
  .site-header .logo { margin-right: auto; min-width: 0; }
  .site-header .logo__img { height: 52px; }
  /* "Find care" moves into the bottom nav's center button */
  .site-header .header-actions .btn-primary { display: none; }
  .site-header .header-actions .btn-ghost { min-height: 40px; padding-inline: 14px; border-radius: var(--r-full); }
  .site-header .cart-link {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 50%;
    border-color: var(--line);
  }

  /* ---- Menu: slide-in drawer from the left (was a dropdown under the header) ---- */
  .site-header .primary-nav,
  .site-header .primary-nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    z-index: 70;
    width: min(86vw, 340px);
    max-height: none;
    padding: 72px 0 calc(24px + var(--m-safe-bottom));
    background: var(--white);
    border: 0;
    box-shadow: 0 0 32px rgba(20, 24, 28, .18);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-102%);
    visibility: hidden;
    transition: transform .28s var(--ease), visibility 0s linear .28s;
  }
  .site-header .primary-nav.is-open {
    transform: none;
    visibility: visible;
    transition: transform .28s var(--ease);
  }
  .site-header .primary-nav a,
  .site-header .primary-nav.is-open a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 20px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: none;
    color: var(--ink-900);
    font-size: 15px;
    font-weight: var(--fw-semibold);
    white-space: normal;
  }
  .site-header .primary-nav a.is-current {
    color: var(--brand-700);
    background: var(--brand-tint);
    box-shadow: inset 3px 0 0 var(--brand-700);
  }
  .site-header .primary-nav__mobile-utility {
    display: flex;
    flex-direction: column;
    margin: 0 0 8px;
    padding-bottom: 8px;
    border-bottom: 8px solid var(--surface);
  }
  .site-header .primary-nav .primary-nav__mobile-utility a {
    min-height: 44px;
    border-bottom: 0;
    font-size: 14px;
    font-weight: var(--fw-medium);
    color: var(--ink-500);
  }
  .m-drawer-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--white);
    color: var(--ink-900);
  }
  .m-drawer-title {
    position: absolute;
    top: 24px;
    left: 20px;
    font-size: 17px;
    font-weight: var(--fw-bold);
    color: var(--ink-900);
  }
  .m-backdrop {
    position: fixed;
    inset: 0;
    z-index: 65;
    background: rgba(20, 24, 28, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s var(--ease), visibility 0s linear .28s;
  }
  .m-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity .28s var(--ease); }
  html.m-lock { overflow: hidden; }
  /* While the menu is open the whole header layer (drawer + backdrop) sits above the bottom nav */
  html.m-lock .site-header { z-index: 90; top: 0; }
  html.m-lock .whatsapp-float { visibility: hidden; }

  /* ---- Bottom nav (app-style tab bar) ---- */
  .m-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: calc(var(--m-tabbar-h) + var(--m-safe-bottom));
    padding: 0 4px var(--m-safe-bottom);
    background: var(--white);
    border-top: 1px solid var(--line);
    box-shadow: 0 -2px 12px rgba(20, 24, 28, .06);
  }
  .m-tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    font-size: 11px;
    line-height: 14px;
    font-weight: var(--fw-semibold);
    color: var(--ink-500);
    -webkit-tap-highlight-color: transparent;
  }
  .m-tab svg { width: 24px; height: 24px; flex: none; }
  .m-tab.is-current { color: var(--brand-700); font-weight: var(--fw-bold); }
  .m-tab:active { transform: scale(.94); }
  /* Raised center action, like 1mg's center button, in CrysMed's "Find care" orange */
  .m-tab--main { justify-content: flex-end; padding-bottom: 8px; color: var(--ink-900); }
  .m-tab--main .m-tab__fab {
    position: absolute;
    top: -18px;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--badge-amber);
    color: var(--white);
    border: 4px solid var(--white);
    box-shadow: 0 4px 12px rgba(248, 128, 13, .35);
  }
  .m-tab--main .m-tab__fab svg { width: 22px; height: 22px; }
  .m-tab__badge {
    position: absolute;
    top: 6px;
    left: calc(50% + 4px);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--r-full);
    background: var(--badge-amber);
    color: var(--white);
    font-size: 10px;
    line-height: 18px;
    font-weight: var(--fw-bold);
    text-align: center;
  }
  .m-tab__badge:empty, .m-tab__badge[data-count="0"] { display: none; }

  /* WhatsApp button sits above the bottom nav instead of on top of it */
  .whatsapp-float {
    bottom: calc(var(--m-tabbar-h) + var(--m-safe-bottom) + 12px);
    right: 12px;
  }

  /* Footer must clear the bottom nav */
  .site-footer { padding-bottom: 8px; }
}

/* Tablet: same shell, wider gutters */
@media (min-width: 600px) and (max-width: 1023.98px), (min-width: 1024px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  :root { --m-gutter: 24px; }
  .site-header .logo__img { height: 60px; }
  .m-tabbar { padding-inline: calc((100vw - 600px) / 2); }
}

/* Small phones (iPhone SE / 360px Androids): keep the header row from ever overflowing */
@media (max-width: 380px) {
  .site-header .logo__img { height: 46px; }
  .site-header .container { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header .primary-nav, .site-header .primary-nav.is-open, .m-backdrop { transition: none; }
}