/* ═══════════════════════════════════════════════════════════════════
   IdaPets — MOBILE LAYER  (added 2026-09-28)
   Loaded from includes/nav.php, so it lands on every storefront page
   that shows the site header — and because it loads AFTER each page's
   own <style> block, these rules win ties without needing !important.

   What this fixes (found by testing idapets.com at 390px wide):
     1. Header ate ~15% of the phone screen (121px tall)  → compact 60px bar
     2. Headlines hidden under the fixed header on Home, Cart,
        Build the Bowl and Events                          → proper top offset
     3. Treats & Bones pages scrolled sideways a few px    → overflow guard
     4. Footer links only 16px tall (hard to tap)          → 40px+ tap rows
     5. Form fields under 16px made iPhones zoom in        → 16px on touch
     6. Homepage hero copy ran over the dog photo          → readable fade
   To undo everything: delete the <link> to this file in includes/nav.php.
   ═══════════════════════════════════════════════════════════════════ */

/* How far the fixed header reaches down the page (expansion bar + header).
   Used below so every page clears it the same way. */
:root { --ip-hdr: 121px; }

/* 3 — Never let a stray animation or wide element cause sideways scroll. */
html { overflow-x: hidden; }
@supports (overflow: clip) { html { overflow-x: clip; } }

/* ── Tablets & phones ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* 2 — Build the Bowl hero text starts below the header */
  .btb-page .btb-hero__text { padding-top: calc(var(--ip-hdr) + 28px); }
}

@media (max-width: 768px) {
  :root { --ip-hdr: 101px; }  /* 40px expansion bar + 61px compact header */

  /* 1 — Compact header on phones: more room for the product and the CTA */
  .site-header__inner,
  .site-header--scrolled .site-header__inner { height: 60px; gap: 12px; }
  .site-logo__img,
  .site-header--scrolled .site-logo__img { height: 36px; }

  /* 2 — Pages that use <main class="page-main"> clear the header */
  body main.page-main { padding-top: var(--ip-hdr); }

  /* 2 — Homepage hero: headline sits below the header, not under it */
  body.page-home .ida-hero__content { padding-top: calc(var(--ip-hdr) - 16px); }
}

@media (max-width: 640px) {
  /* Homepage hero: on a phone the copy spans the full photo, so the
     side-to-side cream fade becomes top-to-bottom — the headline and
     sub copy stay readable, the dogs and bowl still show underneath. */
  body.page-home .ida-hero__scrim {
    background: linear-gradient(180deg,
      rgba(255,250,242,.90) 0%,
      rgba(255,250,242,.82) 55%,
      rgba(255,250,242,.35) 80%,
      rgba(255,250,242,0) 100%);
  }
}

/* ── Touch screens ─────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse), (max-width: 768px) {
  /* 4 — Footer links become comfortable tap rows */
  .site-footer__col ul { gap: 0; }
  .site-footer__col a { display: inline-block; padding: 10px 0; min-height: 40px; }
  .site-footer__legal a { display: inline-block; padding: 10px 0; }

  /* 5 — 16px form text stops iOS Safari from zooming into fields */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
  select,
  textarea { font-size: 16px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   PHONE + iPAD PASS  (added 2026-10-03)
   Found by testing every main page at 390px (iPhone), 820px (iPad
   portrait) and 1024px (iPad landscape / iPad Pro portrait):
     7. Product page Add to Cart button collapsed to 17px on phones
     8. Product page wasted the iPad screen (photo stacked over details)
     9. Home "What's in their bowl" + "Find Your Dog's Plan": headline and
        copy sat on top of the photo and couldn't be read
    10. Home "The Adventure Crew" strip: title ran into the button
    11. About "Our Roots": text squeezed into a skinny column on phones
    12. Shop: one huge card per screen on phones, oversized cards on iPad
    13. Cart "You Might Also Like": one card per row on phones
    14. Tiny text (9–10.5px) in the top bar and value strips
   ═══════════════════════════════════════════════════════════════════ */

/* 7 — Add to Cart keeps its full 52px height when the row stacks */
@media (max-width: 560px) {
  body .ida-pdp__cart-row .ida-pdp__add-btn { flex: 0 0 auto; width: 100%; height: 52px; min-width: 0; }
}

/* 8 — iPad: photo and details side by side (product.php stacks at 900px) */
@media (min-width: 700px) and (max-width: 900px) {
  body .ida-pdp__layout { grid-template-columns: 1fr 1fr; gap: 28px; }
}

/* 9 — Photo sections become photo-on-top, words-underneath */
@media (max-width: 900px) {
  /* "What's in their bowl matters." */
  body .ida-ingredients { flex-direction: column; align-items: stretch; min-height: 0; padding-left: 0 !important; padding-right: 0 !important; }
  body .ida-ingredients__bg { position: relative; inset: auto; aspect-ratio: 16 / 10; }
  body .ida-ingredients__bg img { position: absolute; inset: 0; object-position: center 55%; }
  body .ida-ingredients__text { max-width: none; padding: 30px 24px 44px; }

  /* "Find Your Dog's Plan." */
  body .ida-quiz-card { flex-direction: column; align-items: stretch; justify-content: flex-start; min-height: 0; background: var(--ida-green-dark); }
  body .ida-quiz-card__photo { position: relative; inset: auto; aspect-ratio: 16 / 10; }
  body .ida-quiz-card__scrim { display: none; }
  body .ida-quiz-card__inner { max-width: none; text-align: left; padding: 24px 24px 28px; }
  body .ida-quiz-card__sub { max-width: none; font-size: 14px; }
  body .ida-quiz-card__eyebrow { font-size: 11px; }
}

/* 10 — Photo strips get room to breathe on phones; button sits under the title */
@media (max-width: 760px) {
  body .ida-photo-trio__panel--img { min-height: 200px; }
  body .ida-photo-trio__panel--img:has(.ida-photo-trio__cta) { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 12px; }
  body .ida-photo-trio__panel--img .ida-photo-trio__cta { position: relative; top: auto; right: auto; order: 2; }
  body .ida-photo-trio__panel--img .ida-photo-trio__content { order: 1; }
}

/* 11 — About › Our Roots stacks on phones */
@media (max-width: 760px) {
  body .story-roots { padding: 56px 24px; }
  body .story-roots__grid { grid-template-columns: 1fr; gap: 28px; }
}

/* 12 — Shop grid: 3 across on iPad portrait, 2 across on phones */
@media (min-width: 641px) and (max-width: 900px) {
  body .ida-product-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (min-width: 360px) and (max-width: 520px) {
  body .ida-product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  body .ida-product-card__body { padding: 12px 12px 14px; }
  body .ida-product-card__name { font-size: 14px; line-height: 1.25; }
  body .ida-product-card__desc { display: none; }   /* the card title says enough at this size */
  body .ida-product-card__add { padding-left: 6px; padding-right: 6px; font-size: 11px; letter-spacing: .04em; white-space: nowrap; }
}

/* 13 — Cart recommendations: 2 across on phones */
@media (max-width: 480px) {
  body .cart-recs__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* 14 — Readable small print on phones */
@media (max-width: 760px) {
  body .expand-bar__item { font-size: 10.5px; letter-spacing: .1em; }
  body .ida-value__text,
  body .ida-quiz-perk__text { font-size: 12px; }
  body .ida-closing-photo__tag { font-size: 10px; }
}

/* 15 — iPad portrait: the two "Serve It" pictures were each a full screen tall */
@media (min-width: 641px) and (max-width: 900px) {
  body .ida-serve-panel { max-width: 440px; margin-left: auto; margin-right: auto; }
}

/* 16 — Cart page on phones: the item details had a ~150px column, so the
        Subscribe & Save box was squeezed; small links were hard to tap */
@media (max-width: 520px) {
  body .cart-row { flex-wrap: wrap; gap: 14px; padding: 18px 16px; }
  body .cart-row__img { width: 72px; height: 72px; }
  body .cart-row__body { flex: 1 1 calc(100% - 86px); }
  body .cart-row__price { margin-left: auto; }
}
@media (hover: none) and (pointer: coarse), (max-width: 768px) {
  body .cart-row__remove,
  body .cart-clear-btn { min-height: 44px; padding: 10px 6px; }
  body .cart-row__sub-switch { min-height: 40px; padding-left: 16px; padding-right: 16px; }
  body .cart-qty__btn { min-width: 44px; min-height: 44px; }
  /* Cart side panel (shop + product pages) */
  body .cart-item__qty-btn { min-width: 44px; min-height: 44px; }
  body .cart-item__remove { min-width: 44px; min-height: 44px; }
  body .cart-sidebar__close { width: 44px; height: 44px; }
  body .cart-sidebar__continue { min-height: 40px; }
}

/* ═══════════════════════════════════════════════════════════════════
   DESIGN POLISH  (added 2026-10-03) — no visible change on desktop
   with a mouse; these only kick in for keyboard, touch or
   reduced-motion users.
   ═══════════════════════════════════════════════════════════════════ */

/* 17 — Respect "Reduce motion" (iOS/macOS/Windows accessibility setting) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 18 — Keyboard focus ring (only when tabbing, never on mouse click).
        !important because several buttons/links set outline:none.
        The Founding Pack popup keeps its own lighter ring. */
:where(a, button, [role="button"], input, select, textarea, summary):focus-visible:not(.fp-pop *) {
  outline: 2px solid #d9682b !important;
  outline-offset: 2px !important;
}

/* 19 — Touch screens: no "stuck" hover lift after a tap */
@media (hover: none) {
  .btn--primary:hover, .btn--bronze:hover,
  .ida-btn:hover,
  .product-card:hover, .product-card:hover .product-card__img-wrap img,
  .ida-cat-tile:hover,
  .ida-product-card:hover, .ida-product-card:hover .ida-product-card__image-wrap img,
  .btn-shop-primary:hover,
  .box-card:hover,
  .ida-related-card:hover,
  .pack-cell:hover img, .insta-cell:hover img,
  .btb-article:hover, .btb-article:hover .btb-article__arrow { transform: none; }
}

/* 20 — Shop "save" heart: 44×44 tap area on touch; the visible 30px
        circle and the icon stay the same size */
@media (pointer: coarse) {
  .ida-product-card__save::before { content: ''; position: absolute; inset: -7px; border-radius: 50%; }
}

/* 21 — Prices and totals: digits line up and don't jiggle as they change */
.header-cart__count,
.cart-summary, .cart-row__price, .cart-qty__num,
.cart-sidebar, .cart-item__price, .cart-item__qty-num,
.ida-pdp__price, .ida-pdp__purchase-opt__price,
.ida-product-card__price,
.co-summary { font-variant-numeric: tabular-nums; }

/* 22 — Home closing photo strip: its two buttons were ~25px tall on iPad */
@media (min-width: 641px) and (max-width: 1024px), (hover: none) and (pointer: coarse) and (min-width: 641px) {
  body .ida-closing-photo__ctas .ida-btn { padding: 11px 18px; font-size: 12px; }
}