/* ============================================================
   99 — Planet Sensory pre-launch QA fixes (2026-10-21 audit)
   Loads after every other section stylesheet so these overrides win.
   ============================================================ */

/* --- Hero spacing under the menu bar. The home hero was a full-viewport box
   with its content centred, so the gap above the eyebrow grew with the
   screen height (124px at 1440x900, far more on taller monitors). Let it
   size to its content instead. Interior heroes keep their own min-height
   but sit a little closer to the bar. --- */
.sec-02-hero {
  min-height: 0;
  align-items: flex-start;
  padding-top: calc(var(--nav-h) + clamp(1.5rem, 3vw, 2.75rem));
}
.sec-00-inthero {
  padding-top: calc(var(--nav-h) + clamp(1.5rem, 3vw, 2.5rem));
}

/* --- Footer: the "Hours" heading sat flush under the last link in the
   For Parents column, so it read like part of the link list. --- */
.sec-14-footer .sec-14-footer__list + .sec-14-footer__heading {
  margin-top: 1.75rem;
}

/* --- Prose lists: base.css resets ul[class] to padding 0, which outranks
   .sec-23-prose__list and pushed the bullets to the viewport edge on phones.
   The paragraph after a list also had no space above it. --- */
.sec-23-prose .sec-23-prose__list {
  padding-left: 1.25rem;
}
.sec-23-prose .sec-23-prose__list + p {
  margin-top: 1.1rem;
}

/* --- Mobile carousels with a single card (the one-provider team grid)
   showed two disabled arrows. --- */
.m-carousel:has(> :only-child) + .m-carousel-nav {
  display: none !important;
}

/* --- Back-to-top: hidden while it sits over the map, where it covered the
   map's own controls (class toggled by js/sections/99-client-fixes.js). --- */
/* --- Back-to-top: the LeadConnector chat bubble owns the bottom-right corner,
   so the button moves to the bottom-left instead of stacking under it. --- */
.back-to-top {
  right: auto;
  left: clamp(1rem, 2.5vw, 1.75rem);
}

.back-to-top.is-over-map {
  opacity: 0;
  visibility: hidden;
}

/* --- VS badge: pinned to the panel's vertical middle, which is only the seam
   when both halves are the same height.
   Desktop condition pages: give the seam-facing sides room for the badge, as
   20-waiting already does. --- */
@media (min-width: 721px) {
  .sec-55-cond-waiting__half--dim {
    padding-right: calc(clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem) + clamp(52px, 5vw + 36px, 76px) / 2);
  }
  .sec-55-cond-waiting__half--lit {
    padding-left: calc(clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem) + clamp(52px, 5vw + 36px, 76px) / 2);
  }
}

/* Side-by-side layout: base.css "html.js [data-reveal].is-visible { transform: none }"
   outranks the section's own centering transform once the spin animation ends, so the
   badge drifted half its width right and down, onto the "If you start now" list. */
html.js .sec-20-waiting__vs[data-reveal],
html.js .sec-20-waiting__vs[data-reveal].is-visible,
html.js .sec-55-cond-waiting__vs[data-reveal],
html.js .sec-55-cond-waiting__vs[data-reveal].is-visible {
  transform: translate(-50%, -50%);
}

/* Stacked (phone) layout: the badge becomes a zero-height grid row between the
   two halves, so it always sits on the seam instead of on the list text. */
@media (max-width: 760px) {
  .sec-20-waiting__vs,
  html.js .sec-20-waiting__vs[data-reveal],
  html.js .sec-20-waiting__vs[data-reveal].is-visible {
    position: relative;
    left: auto;
    top: auto;
    justify-self: center;
    margin-block: calc(clamp(56px, 5vw + 40px, 84px) / -2);
    transform: none;
    animation: none;
  }
}
@media (max-width: 720px) {
  .sec-55-cond-waiting__vs,
  html.js .sec-55-cond-waiting__vs[data-reveal],
  html.js .sec-55-cond-waiting__vs[data-reveal].is-visible {
    position: relative;
    left: auto;
    top: auto;
    justify-self: center;
    margin-block: calc(clamp(52px, 5vw + 36px, 76px) / -2);
    transform: none;
    animation: none;
  }
}

@media (max-width: 820px) {
  /* --- Tap targets (44px minimum) --- */
  .sec-01-nav .sec-01-nav__toggle {
    width: 44px;
    height: 44px;
  }
  .sec-01-nav .sec-01-nav__logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .sec-14-footer .sec-14-footer__list {
    gap: 0;
  }
  .sec-14-footer .sec-14-footer__list a {
    display: block;
    padding-block: 12px;
  }
  .sec-14-footer .sec-14-footer__contact-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin-bottom: 0;
  }
  .sec-00-inthero__crumbs a {
    display: inline-block;
    padding: 12px 4px;
    margin: -12px -4px;
  }
  .sec-50-wwt-grid .sec-50-wwt-grid__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* --- Readable text: sentences at 16px, small labels at 13px+ --- */
  .sec-23-prose p,
  .sec-23-prose li,
  .sec-60-svc-grid__benefits li,
  .sec-55-cond-treatment__desc,
  .sec-55-cond-related__card p,
  .sec-55-cond-proof__before,
  .sec-10-testimonials__snippet,
  .sec-16-comebacks__before,
  .sec-40-about-typical__item,
  .sec-40-about-values__copy,
  .sec-40-about-story__caption,
  .sec-04-conditions__body p,
  .sec-50-wwt-grid__card p,
  .sec-07-results__trust,
  .sec-09-team__quote,
  .sec-09-team__ask-text,
  .sec-11-insurance__footnote,
  .sec-11-insurance__reassurance,
  .sec-12-booking__hint {
    font-size: 1rem;
  }
  .eyebrow,
  .sec-12-booking__chip,
  .sec-07-results__label,
  .sec-11-insurance__field > span {
    font-size: 0.8125rem;
  }
  .m-carousel-nav .m-carousel-nav__btn,
  .back-to-top {
    width: 44px;
    height: 44px;
  }
  .sec-13-location .sec-13-location__row a,
  .sec-21-elfsight .sec-21-elfsight__link a,
  .sec-12-booking .sec-12-booking__row-link,
  .sec-04-conditions .sec-04-conditions__link,
  .sec-09-team .sec-09-team__book,
  .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;
  }
}

/* --- Benefits-check and careers forms: per-field messages under each input. --- */
.sec-11-insurance__field-error:empty {
  display: none;
}
.sec-11-insurance__field-error {
  display: block;
  font-size: 0.875rem;
  line-height: 1.35;
  color: #b42318;
}