/* ==========================================================================
   WebPro360 — sitewide touch / small-screen pass  (mobile.css)
   Loads after site.css and nav.css. Nothing here affects mouse-driven desktop.
   ========================================================================== */

html{
  -webkit-text-size-adjust:100%;
  /* the fixed header used to eat anchor targets; --navh is measured by nav.js */
  scroll-padding-top:calc(var(--navh,72px) + 14px);
}

/* Anchor targets clear the sticky header even without smooth scroll */
[id]{scroll-margin-top:calc(var(--navh,72px) + 14px)}

/* --------------------------------------------------------------------------
   FORMS — the booking modal is the money path on a phone
   iOS Safari force-zooms any focused field under 16px. Every field is 16px.
   -------------------------------------------------------------------------- */
@media (max-width:1040px){
  .field input,.field textarea,.field select,
  .inline-form input,.inline-form select{
    font-size:16px;
    min-height:48px;
    border-radius:12px;
  }
  .field textarea{min-height:110px}
  .field label{font-size:.86rem}
  .form-btn{min-height:54px;font-size:1.02rem}
  .inline-form{flex-direction:column;align-items:stretch}
  .inline-form input{min-width:0;width:100%}
  .inline-form .btn,.inline-form button{width:100%;justify-content:center;min-height:52px}
}

/* --------------------------------------------------------------------------
   BOOKING MODAL on small screens
   -------------------------------------------------------------------------- */
@media (max-width:620px){
  .modal-backdrop.open{padding:16px 12px calc(24px + env(safe-area-inset-bottom,0px))}
  .modal{padding:24px 18px;border-radius:16px}
  .modal h3{font-size:1.32rem;padding-right:44px}
  .modal .x{width:44px;height:44px;top:10px;right:10px;font-size:1.05rem}
}
/* keep the page behind the modal from scrolling under it (set by mobile.js) */
body.modal-open{overflow:hidden}

/* --------------------------------------------------------------------------
   TOUCH TARGETS — WCAG 2.5.8 (24px min) with a 44px comfort goal.
   Scoped to coarse pointers so desktop density is untouched.
   -------------------------------------------------------------------------- */
@media (pointer:coarse){
  .foot-grid a{padding:11px 0}                    /* 26px → 44px */
  .crumbs a{display:inline-block;padding:8px 2px} /* 16px → 34px */
  .crumbs{margin-bottom:10px}

  /* a link that is the entire paragraph is a button in disguise */
  p > .ulink:only-child,
  div > .ulink:only-child{
    display:inline-flex;align-items:center;min-height:44px;
  }

  a[href^="tel:"]{padding:6px 0;display:inline-block}

  .ba-tab{min-height:44px;display:inline-flex;align-items:center}
  .modal .x{min-width:44px;min-height:44px}

  button,.btn,.form-btn,a{-webkit-tap-highlight-color:rgba(43,184,196,.14)}
  .btn,.form-btn,button{touch-action:manipulation}
}

/* --------------------------------------------------------------------------
   HOVER STATES DON'T EXIST ON A FINGER.
   Without this, iOS leaves a card lifted/scaled after you tap it and it stays
   that way until you tap somewhere else. Underlines that only appear on hover
   simply never appear.
   -------------------------------------------------------------------------- */
@media (pointer:coarse){
  .ulink::after{transform:scaleX(1);transform-origin:left}   /* always underlined */

  .post-card:hover,
  .bac.before:hover,.bac.after:hover,
  .glow-img:hover,
  .marquee .logo-chip:hover{transform:none;box-shadow:none}
  .glow-img:hover{border-color:var(--line)!important}
  .member:hover .photo img{transform:none}
  .member:hover .sheen,.spot:hover::before{opacity:0}

  /* give back a real, momentary press state */
  .post-card:active,.bac:active,.glow-img:active{transform:scale(.995)}
  .btn:active,.form-btn:active{transform:scale(.98)}
}

/* --------------------------------------------------------------------------
   SMALL-PHONE TYPOGRAPHY + SPACING
   -------------------------------------------------------------------------- */
@media (max-width:430px){
  .modal .msub,.field label{line-height:1.5}
  .stat-row{gap:14px}
  .crumbs{font-size:.8rem}
}

/* Respect the notch / home indicator on full-bleed footers and CTAs */
@media (max-width:1040px){
  .foot{padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
}