/* =========================================================================
   MOBILE.CSS — Phase 4: native-app-grade mobile polish
   Layered on top of existing CSS. Additive only.
   Goal: bring mobile UX up to desktop quality, fix the missing menu.
   ========================================================================= */

/* -----------------------------------------------------------
   1. Mobile menu (hamburger + slide-down sheet)
   Markup is injected by ultra.js — we just style here.
   ----------------------------------------------------------- */

.mobile-menu-toggle{
  display: none;                /* shown only on mobile */
  flex-direction: column;       /* stack the 3 bars vertically */
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: transparent;
  border: 0;
  flex-shrink: 0;
  color: var(--navy);
  cursor: pointer;
  position: relative;
  z-index: 60;
  margin-right: -6px;
  padding: 0;
  transition: background .25s;
  -webkit-tap-highlight-color: transparent;
}
.mobile-menu-toggle:active{ background: rgba(232,155,142,.12) }
.mobile-menu-toggle .bar{
  width: 22px;
  height: 2.5px;
  background: currentColor;
  border-radius: 2px;
  display: block;
  transition: transform .35s var(--ease-spring, cubic-bezier(.22,1.2,.36,1)),
              opacity .2s,
              background .25s;
}
.mobile-menu-toggle[aria-expanded="true"]{ color: var(--blush-deep) }
.mobile-menu-toggle[aria-expanded="true"] .bar:nth-child(1){
  transform: translateY(7.5px) rotate(45deg);
}
.mobile-menu-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity: 0; transform: scaleX(.4) }
.mobile-menu-toggle[aria-expanded="true"] .bar:nth-child(3){
  transform: translateY(-7.5px) rotate(-45deg);
}

/* Backdrop overlay — sits behind the panel */
.mobile-menu-backdrop{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(31,50,71,.42);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  z-index: 54;
  opacity: 0;
  pointer-events: none;          /* CRITICAL: don't absorb taps when hidden */
  transition: opacity .35s var(--ease-smooth, cubic-bezier(.2,.8,.2,1));
}
.mobile-menu-backdrop.show{ opacity: 1; pointer-events: auto }

/* The panel itself — slides down from the top */
.mobile-menu{
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
  transform: translateY(-100%);
  transition: transform .45s cubic-bezier(.2,.9,.3,1.05);
  z-index: 55;
  padding: calc(86px + var(--safe-t, 0px)) 22px 28px;
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
  box-shadow: 0 24px 60px -16px rgba(44,62,80,.32),
              0 8px 16px -8px rgba(190,82,65,.18);
  max-height: 100dvh;
  overflow-y: auto;
  pointer-events: none;          /* CRITICAL: hidden panel must not absorb taps */
  visibility: hidden;
}
.mobile-menu.show{
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
}

.mobile-menu nav{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mobile-menu nav a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  min-height: 56px;
  border-radius: 14px;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.18rem;
  color: var(--navy);
  letter-spacing: -.01em;
  transition: background .25s, padding-left .3s var(--ease-smooth, cubic-bezier(.2,.8,.2,1)),
              color .2s;
  border-left: 3px solid transparent;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}
.mobile-menu nav a:active{
  background: rgba(232,155,142,.12);
  border-left-color: var(--blush);
  padding-left: 24px;
  color: var(--blush-deep);
}
.mobile-menu nav a .arrow{
  color: var(--navy-soft);
  font-size: 1.1rem;
  opacity: .55;
  transition: transform .3s var(--ease-spring, cubic-bezier(.22,1.2,.36,1)),
              opacity .2s, color .2s;
}
.mobile-menu nav a:active .arrow{ transform: translateX(4px); opacity: 1; color: var(--blush-deep) }

.mobile-menu-divider{
  height: 1px;
  margin: 14px 12px;
  background: repeating-linear-gradient(90deg, var(--blush) 0 6px, transparent 6px 14px);
  opacity: .45;
}

.mobile-menu-cta{
  margin: 10px 6px 0;
  display: block;
  text-align: center;
  background: var(--paper);
  color: var(--navy);
  border: 1.5px solid rgba(31,50,71,.18);
  padding: 16px 22px;
  border-radius: 14px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  letter-spacing: .01em;
  min-height: 52px;
  display: flex; align-items: center; justify-content: center;
}
.mobile-menu-cta-free{
  margin-top: 18px;
  background: linear-gradient(180deg, #F2A595 0%, #D86B58 100%);
  color: #fff;
  border: 0;
  font-weight: 700;
  font-size: 1.05rem;
  box-shadow: 0 18px 38px -14px rgba(216,107,88,.6),
              inset 0 1px 0 rgba(255,255,255,.28),
              inset 0 -2px 0 rgba(0,0,0,.18);
}

.mobile-menu-foot{
  margin-top: 14px;
  padding: 0 18px;
  font-size: .82rem;
  color: var(--navy-soft);
  text-align: center;
}

/* Lock body scroll when menu is open */
body.menu-open{ overflow: hidden; touch-action: none }

/* Show on mobile */
@media (max-width: 860px){
  .mobile-menu-toggle{ display: inline-flex }
  .mobile-menu-backdrop{ display: block }
  .mobile-menu{ display: block }
}

/* -----------------------------------------------------------
   2. Mobile header — bigger logo, restored "by Pip" tagline
   ----------------------------------------------------------- */
@media (max-width: 860px){
  /* Bring the brand mark back up to a comfortable visual weight */
  .brand{
    font-size: 1.22rem;
    letter-spacing: -.005em;
  }
  .brand .pip-mini{
    width: 40px;
    height: 40px;
    filter: drop-shadow(0 6px 12px rgba(232,155,142,.45));
  }
  /* Restore "·by Pip" — was hidden, now styled to fit */
  .brand small{
    display: inline-block !important;
    font-size: .92rem;
    margin-left: 4px;
    line-height: 1;
  }

  /* Tighten primary CTA in nav so it shares space with the new menu button */
  .btn-nav{
    padding: 9px 16px;
    min-height: 40px;
    font-size: .86rem;
  }

  /* Slim the nav vertical padding for a tighter mobile bar */
  header.nav{ padding: 10px 0; padding-top: calc(10px + var(--safe-t, 0px)) }
  header.nav.scrolled{ padding: 7px 0; padding-top: calc(7px + var(--safe-t, 0px)) }
}

/* Very small screens — drop "by Pip" again, slim CTA further */
@media (max-width: 400px){
  .brand small{ display: none !important }
  .brand{ font-size: 1.1rem }
  .brand .pip-mini{ width: 36px; height: 36px }
  .btn-nav{
    padding: 8px 13px;
    min-height: 38px;
    font-size: .82rem;
  }
  .nav-inner{ gap: 8px }
}

/* -----------------------------------------------------------
   3. Mobile hero — better balance, less crowded floating cards
   ----------------------------------------------------------- */
@media (max-width: 760px){
  /* Tighten hero vertical rhythm */
  .hero{ padding-top: clamp(20px, 5vw, 40px) }

  /* Hero h1 — slightly snappier sizing */
  .hero h1{
    font-size: clamp(2.2rem, 9vw, 3.4rem);
    letter-spacing: -.025em;
    line-height: 1.05;
  }
  .hero p.lead{
    font-size: 1.02rem;
    line-height: 1.55;
    max-width: 38ch;
  }
  .hero-tags{ gap: 6px; font-size: .78rem }
  .hero-tags span{ padding: 5px 12px }

  /* Tighten hero illustration block */
  .hero-art{
    aspect-ratio: 1 / 1.05;
    margin-bottom: 8px;
  }

  /* Floating cards — pull in tighter to the illustration */
  .hero-art .card{
    font-size: .76rem;
    padding: 8px 11px;
    border-radius: 14px;
  }
  .hero-art .card strong{ font-size: .88rem }
  .hero-art .card-c{ font-size: 1.05rem; padding: 6px 12px }
}

/* On really small viewports, let cards relax — they were colliding */
@media (max-width: 380px){
  .hero-art .card-a{ top: 0; left: -1% }
  .hero-art .card-b{ bottom: 4%; right: -1% }
  .hero-art .card-c{ top: 50%; left: -3%; font-size: .98rem }
  .hero-art .card{ max-width: 46% }
}

/* -----------------------------------------------------------
   4. Sticky mobile buy bar — premium glass + entrance
   ----------------------------------------------------------- */
@media (max-width: 860px){
  .sticky-buy{
    border-radius: 24px;
    padding: 11px 12px 11px 14px;
    background:
      linear-gradient(180deg, rgba(255,253,248,.94) 0%, rgba(251,248,243,.96) 100%);
    border: 1px solid rgba(44,62,80,.10);
    box-shadow:
      0 26px 56px -22px rgba(44,62,80,.42),
      0 12px 24px -10px rgba(201,122,109,.32),
      inset 0 1px 0 rgba(255,255,255,.6);
  }
  .sticky-buy .sb-pip{
    width: 44px; height: 44px;
    filter: drop-shadow(0 4px 10px rgba(232,155,142,.5));
  }
  .sticky-buy .sb-title{ font-size: .98rem }
  .sticky-buy .sb-price{ font-size: .8rem }
  .sticky-buy .sb-price b{ font-size: 1rem }
  .sticky-buy .btn{
    padding: 13px 20px;
    min-height: 46px;
    font-size: .96rem;
  }
}

/* -----------------------------------------------------------
   5. Mobile section padding — better vertical rhythm
   ----------------------------------------------------------- */
@media (max-width: 760px){
  section{ padding: clamp(48px, 10vw, 76px) 0 }
  .sec-head{ margin-bottom: clamp(28px, 6vw, 44px) }
  .sec-head h2{ font-size: clamp(1.7rem, 7vw, 2.6rem) }

  /* Tighter card grids on mobile — reduce empty space */
  .ps-card{ padding: 22px 20px }
  .benefit{ padding: 22px 20px; min-height: 0 }
  .step{ padding: 26px 16px 20px }
  .t-card{ padding: 24px 22px }
}

/* -----------------------------------------------------------
   6. Mobile footer — clean stacked layout
   ----------------------------------------------------------- */
@media (max-width: 480px){
  footer{ padding: 44px 0 22px; padding-bottom: calc(22px + var(--safe-b, 0px)) }
  .foot-grid{ gap: 28px; padding-bottom: 28px }
  .foot-col h4{ margin-bottom: 12px; font-size: .72rem }
  .foot-col p{ font-size: .88rem }
  .foot-col ul a{ font-size: .92rem; padding: 6px 0; min-height: 36px }
  .foot-bottom{ font-size: .76rem; gap: 10px; flex-direction: column; align-items: flex-start }
}

/* -----------------------------------------------------------
   7. Promo bar — better truncation on tiny screens
   ----------------------------------------------------------- */
@media (max-width: 480px){
  .promo{
    padding: 7px 14px;
    padding-top: calc(7px + var(--safe-t, 0px));
    font-size: .74rem;
  }
}
@media (max-width: 360px){
  /* Hide the promo on really tiny screens — it just adds clutter */
  .promo{ display: none }
}

/* -----------------------------------------------------------
   8. Mobile blog + post reading polish
   ----------------------------------------------------------- */
@media (max-width: 720px){
  /* Blog index — single column, better card breathing */
  .post-grid{ grid-template-columns: 1fr; gap: 18px }
  .post-card{ min-height: 0 }
  .post-card .body{ padding: 20px }
  .post-card h2{ font-size: 1.22rem }

  /* Blog hero — tighter top spacing */
  .blog-hero{ padding: 36px 0 20px }
  .blog-hero h1{ font-size: clamp(2rem, 9vw, 3rem) }
  .blog-hero .lead{ font-size: 1rem }

  /* Post hero — same treatment */
  .post-hero{ padding: 32px 0 16px; text-align: left }
  .post-hero .crumbs{ font-size: .78rem }
  .post-hero h1{
    font-size: clamp(1.85rem, 8vw, 2.6rem);
    line-height: 1.1;
    margin: 0 0 14px;
  }
  .post-hero .lead{ font-size: 1.05rem; margin-left: 0; margin-right: 0 }
  .post-hero .byline{ font-size: .82rem; padding: 8px 14px 8px 8px }
  .post-hero .byline .av{ width: 32px; height: 32px; font-size: .78rem }

  /* Post body — tuned for thumb scrolling */
  .post-prose{
    font-size: 1.05rem;
    line-height: 1.7;
    padding: 0 20px;
  }
  .post-prose h2{ font-size: 1.45rem; margin: 1.6em 0 .4em }
  .post-prose h3{ font-size: 1.18rem; margin: 1.3em 0 .3em }
  .post-prose ol li{ padding-left: 2em; margin-bottom: .5em }
  .post-prose ol li::before{ font-size: .92em }

  /* Drop-cap — smaller on mobile so it doesn't dominate */
  .post-prose .dropcap::first-letter{
    font-size: 3.2em;
    padding: .04em .1em 0 0;
  }

  /* Callout boxes — full width with refined inner */
  .post-prose .callout{
    flex-direction: column;
    text-align: left;
    padding: 22px 20px;
    gap: 12px;
  }
  .post-prose .callout-icon{ font-size: 1.8rem }
  .post-prose .callout .btn{ width: 100%; max-width: 320px }
}

/* -----------------------------------------------------------
   9. iOS PWA / standalone — shave Safari chrome behavior
   ----------------------------------------------------------- */
@media (display-mode: standalone){
  /* When user adds the site to home screen, treat like an app */
  .promo{ padding-top: max(11px, var(--safe-t, 0px)) }
}

/* -----------------------------------------------------------
  10. Faster mobile transitions — reduce jank, no hover dependency
   ----------------------------------------------------------- */
@media (max-width: 760px){
  /* Mobile uses :active rather than :hover — tune card press states */
  .ps-card:active, .benefit:active, .t-card:active, .step:active, .post-card:active, .topic:active{
    transform: scale(.98);
    transition: transform .12s ease;
  }
  /* Disable hover-only animations that don't fire on touch */
  .ps-card::after{ display: none }
}

/* -----------------------------------------------------------
  11. Mobile FAQ — tighter chevron + better tap area
   ----------------------------------------------------------- */
@media (max-width: 760px){
  .faq-q{
    padding: 18px 4px;
    min-height: 64px;
    font-size: 1rem;
  }
  .faq-q .pm{ width: 30px; height: 30px }
  .faq-a-inner, .faq-a{ font-size: .94rem }
}

/* -----------------------------------------------------------
  12. Mobile contact form — bigger inputs, easier tap
   ----------------------------------------------------------- */
@media (max-width: 720px){
  form.contact-form input,
  form.contact-form textarea,
  form.contact-form select{
    padding: 14px 16px;
    font-size: 16px;  /* prevents iOS auto-zoom on focus */
    border-radius: 12px;
  }
  form.contact-form label{ font-size: .78rem }
}

/* -----------------------------------------------------------
  13. Mobile final hardeners — a few edge-case fixes after audit
   ----------------------------------------------------------- */
@media (max-width: 760px){
  /* Hero "swoop" sometimes wraps awkwardly mid-phrase — keep it together
     unless we're on a very narrow Galaxy Fold class device. */
  .hero h1 .swoop{ white-space: nowrap }

  /* Make sure the sticky buy bar always has a visible margin from screen
     edges in landscape phones with a notch. */
  .sticky-buy{
    left:  max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
  }

  /* Long product titles in the sticky buy bar — let them ellipsize so the
     CTA never gets squeezed off-screen. */
  .sticky-buy .sb-info{ min-width: 0 }
  .sticky-buy .sb-title,
  .sticky-buy .sb-price{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* In landscape phones, the floating Pip illustration occasionally
     overlapped the trust row — give it a hard ceiling. */
  .hero-art{ max-width: min(540px, 86vw); margin-left: auto; margin-right: auto }
}

/* On the very narrowest screens, allow the swoop to wrap so it can't
   force horizontal overflow. */
@media (max-width: 380px){
  .hero h1 .swoop{ white-space: normal }
}

/* -----------------------------------------------------------
  14. Mobile menu — bottom safe-area + tap area inside the panel
   ----------------------------------------------------------- */
@media (max-width: 860px){
  .mobile-menu{
    /* Let the home-indicator never overlap the bottom CTA */
    padding-bottom: max(28px, calc(28px + env(safe-area-inset-bottom)));
  }
  .mobile-menu nav a{ min-height: 56px }
}

/* -----------------------------------------------------------
  15. iOS form input safe defaults — block double-tap zoom &
      keep the keyboard from shifting layout under the nav
   ----------------------------------------------------------- */
@media (max-width: 860px){
  input, textarea, select, button{ touch-action: manipulation }
  /* Prevent iOS rendering a faint inner shadow on inputs */
  input, textarea{ -webkit-appearance: none; appearance: none }
}