/* ============================================================
   Mobile platform layer — iOS (Safari/WebKit) and Android (Chrome)
   ------------------------------------------------------------
   Loaded LAST, after style.css and any per-page stylesheet, so it can
   correct them. Everything here is about the *device*, not the page:
   safe areas, touch ergonomics, and the two platforms' input quirks.
   Page-specific layout stays in that page's own stylesheet.

   Gating, and why it is not width:
     (pointer:coarse) / (hover:none)  — a finger is the input. This is
       what actually decides tap-target size and whether :hover can be
       trusted, and it is true on a 1024px tablet and false on a 360px
       desktop window, which a width query gets backwards both ways.
     width queries                    — reserved for layout.
   Both are used below, each for the thing it actually describes.
   ============================================================ */

/* ============================================================
   1. Base device behaviour
   ============================================================ */
html{
  /* iOS inflates text in landscape unless this is pinned. `100%`, not
     `none`: `none` also disables the user's own pinch-to-zoom text
     scaling in some WebKit builds, which is an accessibility loss. */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

@media (pointer:coarse){
  /* Android paints a grey flash box over the brand palette on every tap,
     iOS a blue one. Both are replaced by the states the design already
     defines (:active transforms, .is-on backgrounds). */
  a, button, input, select, textarea, label, summary, [role="button"]{
    -webkit-tap-highlight-color:transparent;
  }

  /* Kills the ~300ms "is this a double-tap-to-zoom?" wait that both
     platforms still apply to non-viewport-fitted pages, without taking
     pinch-zoom away from the page as a whole. */
  a, button, [role="button"], .btn, summary,
  .gc-chip, .mc-amt, .bw-drawer-tab, .pd-datepill, .sh-datepill,
  .lc-stepper-btn, .lc-item-x, .lc-sug-add{
    touch-action:manipulation;
  }

  /* Long-pressing a UI control on iOS pops the callout menu and starts a
     text selection. Fine on prose, wrong on a stepper or a date pill. */
  .btn, .lc-stepper-btn, .lc-item-x, .gc-chip, .mc-amt,
  .bw-drawer-tab, .pd-datepill, .sh-datepill, .nav-toggle{
    -webkit-touch-callout:none;
    -webkit-user-select:none; user-select:none;
  }
}

/* Hover belongs to devices that have one. Left ungated, every one of
   these sticks after a tap on iOS — the button stays lifted until you
   tap something else, which reads as a stuck/broken control. */
@media (hover:none){
  .btn:hover, .cart-link:hover, .bw-step-btn:hover, .sh-cta:hover,
  .lh-world:hover, .bw-thumb:hover, .site-head .brand:hover img.brand-icon{
    transform:none;
  }
  .arrow-link:hover::after{ transform:none; }
}

/* ============================================================
   2. Safe areas
   The viewport meta ships viewport-fit=cover, so the page now paints
   under the iPhone's notch and home indicator and under Android's
   gesture bar. These insets put the *content* back inside the safe
   box. They resolve to 0px on every device without a cutout, so no
   phone pays for another phone's hardware.
   ============================================================ */
.wrap{
  /* Landscape is where this earns its keep: the notch eats a real
     chunk of the left or right gutter depending on which way the
     phone is turned. max() keeps the design's 22px when it is 0. */
  padding-left:max(22px, env(safe-area-inset-left));
  padding-right:max(22px, env(safe-area-inset-right));
}

/* Sticky header — clears the status bar in standalone/PWA display,
   no-ops in the browser where Safari's own chrome already does. */
.site-head{ padding-top:env(safe-area-inset-top); }

/* The mobile nav sheet hangs from the header. It must be able to
   scroll: five links plus a long safe-area inset overflows a landscape
   phone, and an un-scrollable fixed sheet strands the last item. */
@media (max-width:880px){
  /* --head-h is the bar plus its rule, declared in style.css and stepped per
     breakpoint there — so this follows the header automatically instead of
     repeating the number and drifting out of sync with it. */
  .site-nav{
    max-height:calc(100dvh - var(--head-h) - env(safe-area-inset-top));
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding-bottom:calc(22px + env(safe-area-inset-bottom));
  }
}

/* Anything pinned to the bottom edge sits over the home indicator /
   gesture bar unless it is lifted clear of it. */
.leafy-toast{ bottom:calc(26px + env(safe-area-inset-bottom)); }
.site-foot{ padding-bottom:env(safe-area-inset-bottom); }

/* Drawer action bars — the "Add to cart" row is the single most
   important control on the site and the one the home indicator lands
   on. Each keeps its designed padding and adds the inset to it. */
.bw-scr-foot{ padding-bottom:calc(14px + env(safe-area-inset-bottom)); }
.bw-cust-foot{ padding-bottom:calc(12px + env(safe-area-inset-bottom)); }
.ps-foot,
.pd-bowls-foot{ padding-bottom:env(safe-area-inset-bottom); }

/* Nothing to add for full-height dialogs: .bw-drawer, .sh-drawer and
   .pd-drawer already size themselves with max-height:100dvh, which is
   what tracks iOS Safari's collapsing toolbar. .bw-cust-sheet is
   deliberately capped at 94% so the scrim reads above it — left alone. */

/* ============================================================
   3. Form controls
   iOS Safari zooms the page in when a focused control's font-size is
   under 16px, and does not zoom back out on blur — the customer is
   left on a checkout they have to pinch their way around. 16px is the
   whole fix, and it wants to be exactly here: on touch devices only,
   so the desktop form keeps its designed 14.5px density.
   ============================================================ */
@media (pointer:coarse){
  input, select, textarea,
  .lco input.input-text, .lco select, .lco textarea,
  .lc-stepper-in, .gc-form-col input, .gc-form-col textarea,
  .gc-custom-amt input{
    font-size:16px !important;
  }
  /* select2 renders its own box over the native <select>. */
  .select2-container .select2-selection__rendered,
  .select2-container .select2-search__field{ font-size:16px !important; }

  /* Comfortable height once the text is 16px. */
  .lco input.input-text, .lco select{ min-height:48px; }

  /* iOS applies its own inner shadow + rounding to text inputs and
     buttons, which fights the theme's flat fields. */
  input, textarea, select, button{ -webkit-appearance:none; appearance:none; }
  input[type="checkbox"], input[type="radio"]{ -webkit-appearance:auto; appearance:auto; }
}

/* ============================================================
   4. Tap targets
   iOS HIG asks for 44x44pt, Android Material for 48x48dp. 44 is the
   floor used here, reached with padding or a pseudo-element rather
   than by growing the drawn control — the design's proportions stay
   as they are, the *hit area* is what changes.
   ============================================================ */
@media (pointer:coarse), (max-width:640px){
  .cart-link{ min-height:44px; }
  .nav-toggle{ min-width:44px; min-height:44px; }
  /* The header's account control, in both states — a 40px disc on its own is
     under the floor, and it sits between two 44px targets. */
  .login-link, .acct-btn{ min-width:44px; min-height:44px; }
  /* A phone in landscape (915px on a Pixel 7) and any tablet clear the 880px
     breakpoint, so they get the *desktop* horizontal nav — still driven by a
     thumb, and its links are only 35px tall. This is exactly the case a
     width-only query would miss. */
  .site-nav a{ min-height:44px; }

  /* Cart line controls. The stepper is a bordered group, so its parts
     grow together or the border boxes stop lining up. */
  .lc-stepper-btn, .lc-stepper-in{ min-width:44px; min-height:44px; }
  .lc-item-x{ width:44px; height:44px; }
  .lc-sug-add{ min-height:44px; padding-inline:16px; }

  /* Chips and pills that were drawn at ~31-39px tall. */
  .gc-chip{ min-height:44px; }
  /* The custom-amount pill sits in the same row as the chips. Its input is a
     bare 62x23 box inside the pill and carries no label, so tapping the pill's
     padding hit nothing — stretched to fill it, the whole pill focuses it. */
  .gc-custom-amt{ min-height:44px; }
  /* Negative block margin cancels the pill's own 6px padding, so the input
     reaches the pill's edges rather than stopping 6px short of them. */
  .gc-custom-amt input{ align-self:stretch; margin-block:-6px; }
  .mc-amt{ min-height:44px; }
  .bw-drawer-tab{ min-height:44px; }
  .bw-drawer-close{ width:44px; height:44px; }
  .sh-drawer-close{ min-width:44px; min-height:44px; }
  .pd-datepill, .sh-datepill{ min-height:44px; }

  /* Leaflet's zoom buttons ship at 30x30 — under the thumb on the one
     map the customer has to place a pin on. */
  .leaflet-touch .leaflet-control-zoom-in,
  .leaflet-touch .leaflet-control-zoom-out,
  .leaflet-control-zoom-in, .leaflet-control-zoom-out{
    width:44px !important; height:44px !important; line-height:44px !important;
    font-size:20px !important;
  }

  /* Woo renders the "View cart" / "Continue shopping" action inside a notice
     as a bare link, 16px tall in the middle of a message the customer has
     just been told to act on. */
  .lc-notices .button,
  .lc-notices .wc-forward,
  .woocommerce-message .button{
    display:inline-flex; align-items:center; min-height:44px;
  }

  /* The payment row's <label> carries `for`, is a full-width padded box and
     is the target that matters — it is already well over 44px. The radio
     beside it is a second, smaller way to hit the same thing; grown from
     17px to Material's 22px so aiming at the dot itself is realistic,
     without inflating a form control into something it is not. */
  .lco #payment .wc_payment_method input[type="radio"]{
    width:22px; height:22px;
  }

  /* Text links only as tall as their text. Grown with real box height,
     not an absolutely-positioned overlay: the footer stacks its links,
     and a 44px overlay on each would sit on top of its neighbour and
     hand taps to the wrong one. inline-flex keeps the underline on the
     text rather than spanning the padding. */
  .lc-head-back, .arrow-link{
    display:inline-flex; align-items:center; min-height:44px;
  }
  .foot-grid a{
    display:flex; align-items:center; min-height:44px;
  }
  /* The social marks are square targets, not rows of text — they get to 44px
     by growing both ways rather than inheriting the row rule's height. */
  .site-foot a.foot-soc{ width:44px; height:44px; }
}

/* ============================================================
   4b. Footer — trimmed for a stacked layout
   Desktop lays these columns side by side, where an extra row costs
   nothing. Stacked on a phone every row is another screen of scrolling,
   so the two that repeat themselves go:

   - "Your kitchen": Cart and Your Orders are both one tap away in the
     header already (the cart button, and the nav sheet), and the 9 p.m.
     cut-off is said on every page that takes an order.
   - "Gift Cards": removed on request. Note this was the ONLY link to
     /gift-cards/ on a phone — it is not in leafy_nav_items(), so it is
     not in the nav sheet either. The page is still live and still works
     if reached directly; it simply cannot be navigated to on mobile.
   - "Ahmedabad, Gujarat": the strapline above already says "Cooked in
     Ahmedabad every morning", and the bottom bar signs off "Made fresh
     in Ahmedabad".
   ============================================================ */
@media (max-width:880px){
  .foot-col-kitchen{ display:none; }
  /* `.foot-grid a.foot-gift`, not `.foot-gift`: the 44px tap-target rule in
     section 4 is `.foot-grid a` at (0,1,1) and outranks a lone class, so a bare
     `display:none` here lost and the link stayed on screen. */
  .foot-grid a.foot-gift{ display:none; }
  .foot-grid .foot-city{ display:none; }
}

/* ============================================================
   5. Scrolling
   ============================================================ */
/* A drawer is open over a frozen page; a swipe inside it that reaches
   the end must not start scrolling the page behind (iOS) or trigger
   pull-to-refresh (Android Chrome). */
.bw-drawer, .sh-drawer, .pd-drawer, .bw-cust, .gc-wrap-fx{ overscroll-behavior:contain; }
.bw-scr-scroll, .bw-cust-body,
.sh-drawer-body, .sh-wiz-screen, .sh-cust-scroll,
.pd-screen-setup, .pd-school-list, .ps-in,
.lco-results{
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}

/* Horizontal rails. Touch devices only: a finger flicks the rail and the
   scrollbar is just a grey band eating the row's height, but on desktop
   that same bar is the only thing saying the row scrolls at all. */
@media (pointer:coarse){
  .lc-extras-rail, .gc-occasions, .shmealrow, .sh-scroll{
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .lc-extras-rail::-webkit-scrollbar,
  .gc-occasions::-webkit-scrollbar,
  .sh-scroll::-webkit-scrollbar,
  .shmealrow::-webkit-scrollbar{ display:none; }
}

/* The page behind an open drawer is frozen by main.js, which pins the
   body (iOS ignores overflow:hidden on <body> for touch scrolling).
   This is the paired style — see leafyScrollLock in js/main.js. */
body.leafy-locked{
  position:fixed; left:0; right:0; width:100%;
  overflow:hidden; overscroll-behavior:none;
}

/* ============================================================
   6. Landscape phones
   A phone on its side has ~380px of height. Sections that reserve a
   portrait-sized block of it leave nothing for the words.
   ============================================================ */
@media (max-height:480px) and (orientation:landscape) and (pointer:coarse){
  .lh-avo{ min-height:260px; }
  .lh-halo{ width:240px; height:240px; }
  .bw-hero-art{ min-height:220px; }
  .sh-heroblob{ width:180px; height:180px; }
  .site-head .brand{ --bar:58px; }
  .site-head .wrap{ min-height:58px; }
}