/* ==========================================================================
   99-client-readability — Elevate post-launch QA fixes (2026-10-08)
   Loads last (build.mjs sorts css/sections/), so these override the section
   files without editing the shared system. Every selector stays under its
   section root class, per the template's scoping rule.
     1. Phones: body copy >= 16px; short labels (chips, tags, crumbs) >= 14px.
     2. Phones/tablets: 44px tap targets for links and buttons that were 9-42px.
     3. About gallery: keep the 2-col phone grid inside the page gutter.
     4. Short laptop screens: 3-col condition/service dropdowns so the whole
        list fits without the panel's inner scrollbar.
   ========================================================================== */

/* --- 1. Readable text on phones --- */
@media (max-width: 600px) {
  /* Body copy */
  .sec-14-footer .sec-14-footer__copy,
  .sec-14-footer .sec-14-footer__a11y,
  .sec-12-booking .sec-12-booking__row-text,
  .sec-12-booking .sec-12-booking__row-sub,
  .sec-12-booking .sec-12-booking__trust,
  .sec-12-booking .sec-12-booking__hint,
  .sec-55-cond-treatment .sec-55-cond-treatment__desc,
  .sec-55-cond-proof .sec-55-cond-proof__before,
  .sec-55-cond-related .sec-55-cond-related__card p,
  .sec-23-prose .sec-23-prose__wrap p,
  .sec-23-prose .sec-23-prose__list li,
  .sec-09-team .sec-09-team__quote,
  .sec-09-team .sec-09-team__ask-text,
  .sec-10-testimonials .sec-10-testimonials__snippet,
  .sec-21-elfsight .sec-21-elfsight__link,
  .sec-11-insurance .sec-11-insurance__panel-sub,
  .sec-11-insurance .sec-11-insurance__footnote,
  .sec-11-insurance .sec-11-insurance__reassurance,
  .sec-18-faq .sec-18-faq__card-link,
  .sec-22-awards .sec-22-awards__blurb,
  .sec-04-conditions .bm-card p,
  .sec-05-services .sec-05-services__desc,
  .sec-16-comebacks .sec-16-comebacks__before,
  .sec-07-results .sec-07-results__trust,
  .sec-40-about-values .sec-40-about-values__copy,
  .sec-40-about-typical .sec-40-about-typical__item span,
  .sec-40-about-team .sec-40-about-team__bio,
  .sec-50-wwt-grid .sec-50-wwt-grid__card p,
  .sec-60-svc-grid .sec-60-svc-grid__benefits li,
  .sec-70-careers-apply .sec-70-careers-apply__consent span {
    font-size: 1rem;
  }
  .sec-21-elfsight .sec-21-elfsight__link a { font-size: inherit; }

  /* Short labels: stay compact, but never below 14px */
  .sec-12-booking .sec-12-booking__chip,
  .sec-55-cond-proof .sec-55-cond-proof__tag,
  .sec-16-comebacks .sec-16-comebacks__tag,
  .sec-65-serv-what .sec-65-serv-what__chip,
  .sec-00-inthero .sec-00-inthero__chip,
  .sec-00-inthero .sec-00-inthero__crumbs,
  .sec-03-trust .sec-03-trust__chip,
  .sec-40-about-story .sec-40-about-story__caption {
    font-size: 0.875rem;
  }
}

/* --- 2. 44px tap targets (phones and tablets; matches the 820px mobile bar) --- */
@media (max-width: 820px) {
  .sec-01-nav .sec-01-nav__toggle { width: 44px; height: 44px; }

  /* Logo links: grow the hit area without moving the layout */
  .sec-01-nav .sec-01-nav__logo,
  .sec-14-footer .sec-14-footer__logo {
    padding-block: 7px;
    margin-block: -7px;
  }

  /* Footer link lists: each row 44px tall; drop the old gap so the list
     only grows by the difference */
  .sec-14-footer .sec-14-footer__list { gap: 0; }
  .sec-14-footer .sec-14-footer__list a,
  .sec-14-footer .sec-14-footer__contact-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .sec-14-footer .sec-14-footer__list a { min-width: 44px; }
  .sec-00-inthero .sec-00-inthero__crumbs a { min-width: 44px; }

  /* Standalone text links and phone/email rows */
  .sec-13-location .sec-13-location__row a,
  .sec-12-booking .sec-12-booking__row-link,
  .sec-00-inthero .sec-00-inthero__crumbs a,
  .sec-09-team .sec-09-team__book,
  .sec-40-about-team .sec-40-about-team__book,
  .sec-04-conditions .bm-card__link,
  .sec-50-wwt-grid .sec-50-wwt-grid__link,
  .sec-50-wwt-bodymap .sec-50-wwt-bodymap__card-link,
  .sec-10-testimonials .sec-10-testimonials__lockup-link,
  .sec-18-faq .sec-18-faq__card-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Links inside prose lists sit in running text: pad the hit area only
     (vertical padding on an inline box does not change the line height) */
  .sec-23-prose .sec-23-prose__list a {
    padding-block: 12px;
  }

  /* Carousel dots stay small visually; an invisible 44px target sits on top,
     and the row spreads so neighbouring targets do not overlap */
  .sec-10-testimonials .sec-10-testimonials__dots { gap: calc(44px - 0.55rem); }
  .sec-10-testimonials .sec-10-testimonials__dot { position: relative; }
  .sec-10-testimonials .sec-10-testimonials__dot::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
}

/* --- 3. About gallery: phone grid inside the gutter --- */
@media (max-width: 700px) {
  .sec-40-about-gallery .sec-40-about-gallery__scroll {
    padding-inline: 1.25rem;
  }
}

/* --- 4. Short laptop screens: whole dropdown visible --- */
@media (min-width: 1201px) and (max-height: 760px) {
  .sec-01-nav .sec-01-nav__dropdown--cols2 {
    grid-template-columns: repeat(3, minmax(190px, 1fr));
    min-width: 660px;
  }
  .sec-01-nav .sec-01-nav__dropdown--cols2 .sec-01-nav__dropdown-link {
    padding-block: 0.45rem;
  }
}