/* ─────────────────────────────────────────────────────────────────────────────
   MOHR - site-wide mobile refinements.
   Loaded LAST on every page so it can settle small-screen details that the
   page stylesheets leave open. Layout itself stays in each page's own CSS;
   this file only fixes touch, legibility and tap-target issues on phones.
   Shared tokens only: no new colours or fonts.
   ───────────────────────────────────────────────────────────────────────────── */

/* Media never pushes a page wider than the screen. */
img,video{max-width:100%;height:auto;}

@media (max-width:899px){
  /* In-page anchor jumps (#faq, #pricing...) land below the sticky header,
     not underneath it. */
  html{scroll-padding-top:76px;}

  /* Taps: no grey flash, no 300ms double-tap-zoom delay on controls. */
  a,button,summary,label,input,select,textarea,[role="button"]{-webkit-tap-highlight-color:transparent;}
  a,button,summary,label,.btn{touch-action:manipulation;}
  /* Touch screens have no hover, so give buttons a pressed state instead. */
  .btn:active{opacity:.86;}
}

@media (max-width:767px){
  /* Pill buttons: the desktop tracking made long labels like
     "Book Your Hair Assessment" break over three lines inside cards. */
  .btn{letter-spacing:.06em;}

  /* Form fields at 16px or larger, so iOS Safari doesn't zoom the page in
     when a field is tapped. Checkboxes/radios are unaffected. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  select,textarea{font-size:max(16px,1em);}

  /* Phone, email and Instagram links are thumb-sized without changing the
     line spacing around them. */
  a:is([href^="tel:"],[href^="mailto:"]):not(.btn,[class*="btn"]),footer.site a[href*="instagram.com"]:not(.btn){
    display:inline-block;padding-block:.5rem;margin-block:-.5rem;
  }

  /* Smallest labels raised to a legible 11px floor. */
  .ba__tag,
  .founding__save,
  .ltoc__h,
  .lnote__label,
  .ltable caption,
  .ltable thead th,
  .hc-shots figcaption{font-size:11px;}

  /* Long words, URLs and email addresses wrap instead of overflowing. */
  h1,h2,h3,h4,p,li,dd,td,th,figcaption,address{overflow-wrap:break-word;}
}

@media (max-width:899px){
  /* One sticky booking bar at a time. Pages that carry the site-wide
     HairCheck + Book bar (.sticky-cta) don't also show their own page-level
     action bar, which stacked on top of it and covered a third of the screen. */
  body:has(.sticky-cta) .actionbar{display:none !important;}

  /* Centred checklists (assessment hero): keep each tick beside its text
     when an item wraps: the list is one centred, left-aligned column. */
  .glance__list{align-items:flex-start;width:fit-content;max-width:100%;margin-inline:auto;}
  .glance__list li{text-align:left;}
}

/* Small phones: the header's Book button never crowds the menu button off
   screen. Tighter tracking, and on the narrowest screens the struck-through
   launch price drops out of the header (it is still on the page and in the
   sticky bar) so the button reads "Book, $299". */
@media (max-width:420px){
  header.site .btn{letter-spacing:.04em;padding-inline:.8rem;}
  header.site .nav__end{gap:.25rem;}
}
@media (max-width:389px){
  header.site .btn .price-was{display:none;}
  header.site .btn{font-size:12px;padding-inline:.7rem;}
}

/* HairCheck header's text link: a full-height tap target. */
@media (max-width:767px){
  .hc-head__link{display:inline-flex;align-items:center;min-height:44px;font-size:12px;}
}