/**
 * RYB Connect — accessibility & responsive fix layer
 * ---------------------------------------------------------------------------
 * Loaded LAST so it can correct issues that live scattered across the large
 * legacy stylesheets (ryb-connect-filter.css ~169KB, ryb-connect-design.css
 * ~100KB) without editing them in dozens of places. Keeping the corrections in
 * one file makes them reviewable and revertable in a single diff.
 *
 * Scope: every public funnel surface — wizard, custom funnel, finder/filter,
 * camps / new-camps / trials templates, embeddable form.
 *
 * Sections
 *   1. Utilities (screen-reader-only)
 *   2. Sticky submit bar overlap        (consent checkbox was unreachable)
 *   3. Focus visibility                 (keyboard users had no focus ring)
 *   4. Touch targets (>= 44px)
 *   5. Viewport / overflow robustness
 *   6. Text contrast (WCAG AA)
 *   7. Third-party chat-widget safe area
 *   8. Reduced motion
 */

:root {
  /* Space reserved above a pinned bar so it cannot sit on top of content.
     Two values because the two cases differ:
       - form: the consent control now lives INSIDE the action bar, so the
         body only needs a normal gap before the bar (a large value just
         leaves dead space between the last field and the bar).
       - class list: the sticky `.controls` bar genuinely overlaps the last
         result card, so that list still needs a full bar's height. */
  --ryb-form-bottom-space: 32px;
  --ryb-sticky-submit-space: 152px;
  /* Accessible text colors, verified against #fff:
     --ryb-text-muted  #5b6472  ~6.0:1
     --ryb-text-subtle #6b7280  ~4.8:1 (>=4.5:1, use at >=13px) */
  --ryb-text-muted: #5b6472;
  --ryb-text-subtle: #6b7280;
  --ryb-focus-ring: var(--ryb-primary-color, #6026d5);
}

/* ==========================================================================
   1. Utilities
   ========================================================================== */

/* Visually hidden but exposed to assistive tech. Used by the form <label>s
   that replaced placeholder-only labelling. */
.ryb-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Error text should not occupy space when empty (we now keep the node in the
   DOM so aria-describedby stays valid instead of removing it). */
#ryb-connect .error-message:empty {
  display: none !important;
}

/* ==========================================================================
   2. Sticky submit bar overlap
   --------------------------------------------------------------------------
   `.step-control` / `.controls` are position:sticky; bottom:0 with an opaque
   white background. When the scroll container overflows, the bar is pulled up
   from its flow position and paints over the content immediately above it —
   which is the SMS-consent checkbox and the last form field. On a 900px-tall
   laptop the consent control was completely covered, so users could not see
   or tick it. Reserve space equal to the bar's height.
   ========================================================================== */

#ryb-connect .box.child .form-box.step-box,
#ryb-connect.custom-funnel .box.child .form-box.step-box {
  padding-bottom: var(--ryb-form-bottom-space) !important;
}

/* Returning-user branch hides the contact form, leaving the filters block as
   the last content above the bar. */
#ryb-connect .box.child .step-box--filters:last-of-type {
  padding-bottom: var(--ryb-form-bottom-space) !important;
}

/* --------------------------------------------------------------------------
   Consent relocated into the action bar.
   The SMS-consent control now renders inside `.step-control--submit` so it is
   always visible next to the submit button. All of its original styling was
   scoped to `#registration-form .checkbox-wrapper`, which no longer matches —
   reproduce it here.
   -------------------------------------------------------------------------- */

#ryb-connect .step-control--submit .checkbox-wrapper--consent {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin: 0 0 14px 0 !important;
  text-align: left !important;
}

#ryb-connect .step-control--submit .checkbox-wrapper--consent input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  min-width: 24px;
  min-height: 24px;
  width: 24px;
  height: 24px;
  margin: 0;
  background: #fff;
  border: 2px solid rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
}

#ryb-connect .step-control--submit .checkbox-wrapper--consent input[type="checkbox"]:hover {
  border-color: var(--ryb-primary-color);
}

#ryb-connect .step-control--submit .checkbox-wrapper--consent input[type="checkbox"]:checked {
  background-color: var(--ryb-primary-color);
  border-color: var(--ryb-primary-color);
  background-image: var(--ryb-checkbox-image);
}

#ryb-connect .step-control--submit .checkbox-wrapper--consent label {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--ryb-text-muted) !important;
  cursor: pointer;
  margin: 0 !important;
}

/* Class-selection step: the sticky `.controls` bar covered the final card. */
#ryb-connect .box.classes.show .wizard-results,
#ryb-connect .box.classes.show .classes-list {
  padding-bottom: var(--ryb-sticky-submit-space) !important;
}

/* Keep programmatic scrollIntoView() from parking a field under the bar —
   the funnel calls this on filter change and input focus. */
#ryb-connect .bg-white {
  scroll-padding-bottom: calc(var(--ryb-sticky-submit-space) + 16px);
}

/* Below 768px the legacy CSS already switches the bar to position:relative,
   so the reserved space is no longer needed and would just add dead scroll. */
@media only screen and (max-width: 768px) {
  #ryb-connect .box.child .form-box.step-box,
  #ryb-connect.custom-funnel .box.child .form-box.step-box,
  #ryb-connect .box.child .step-box--filters:last-of-type {
    padding-bottom: 24px !important;
  }
}

/* ==========================================================================
   3. Focus visibility
   --------------------------------------------------------------------------
   design.css sets `outline: none !important` on some :focus-visible selectors,
   which deletes the focus ring authored in wizard.css. Because this file loads
   last, an equally-specific !important rule here wins on source order.
   ========================================================================== */

#ryb-connect a:focus-visible,
#ryb-connect button:focus-visible,
#ryb-connect input:focus-visible,
#ryb-connect select:focus-visible,
#ryb-connect textarea:focus-visible,
#ryb-connect [tabindex]:focus-visible,
#ryb-connect [role="button"]:focus-visible,
#ryb-connect [role="option"]:focus-visible,
#ryb-connect .wizard-stage .user-type li:focus-visible,
#ryb-connect .wizard-stage .user-type li a:focus-visible,
#ryb-connect.custom-funnel .wizard-stage .user-type li a:focus-visible,
#class-finder [tabindex]:focus-visible,
#class-finder [role="button"]:focus-visible,
#class-finder [role="option"]:focus-visible,
.ryb-connect-modal :focus-visible,
.ryb-connect-overlay :focus-visible {
  outline: 3px solid var(--ryb-focus-ring) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

/* The SMS-consent checkbox is `-webkit-appearance: none` with `outline: none`
   and had no :focus rule anywhere — keyboard users got zero indication that
   focus had landed on a control they are legally required to read. */
#ryb-connect #registration-form .checkbox-wrapper input[type="checkbox"]:focus-visible,
#ryb-connect .checkbox-wrapper input[type="checkbox"]:focus-visible,
.ryb-connect-modal .checkbox-wrapper input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--ryb-focus-ring) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ryb-focus-ring) 20%, transparent) !important;
}

/* Newly keyboard-operable controls get a hover/focus affordance. */
#ryb-connect [role="button"],
#class-finder [role="button"],
#class-finder [role="option"] {
  cursor: pointer;
}

/* ==========================================================================
   4. Touch targets (WCAG 2.5.5 / iOS HIG: 44x44 minimum)
   ========================================================================== */

/* The primary Enroll CTA in the results grid was forced to ~32px tall on the
   exact devices where it is tapped with a thumb. */
@media only screen and (max-width: 767px) {
  #class-finder .result-grid-cell .enroll-button,
  #class-finder .enroll-button,
  #class-finder a.enroll,
  #class-finder button.enroll {
    min-height: 44px !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Modal / overlay dismiss controls — the last exit from a dialog. */
.ryb-connect-modal .close-modal,
.ryb-connect-overlay .close-modal,
#ryb-connect .close-modal,
.redirect-modal-close,
.camps-modal-close {
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Filter pills: the camps template got a 44px floor with a "WCAG 2.5.5"
   comment; the new-camps fork of the same component never received it. */
#class-finder .camps-filter-pill,
#class-finder.template-new-camps .camps-filter-pill {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Day-column accordion toggle and the result-card "info" affordance are real
   controls (they expand results / open the details modal), not decoration. */
#class-finder .accordion,
#class-finder .result-grid-cell .info {
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Camp row expand/collapse chip. */
#class-finder .camp-row-toggle {
  min-height: 44px !important;
  min-width: 44px !important;
}

/* ==========================================================================
   5. Viewport / overflow robustness
   ========================================================================== */

/* Mobile browsers report 100vh as the LARGE viewport (URL bar excluded), so
   the bottom of the funnel rendered below the fold while body scroll was
   locked. dvh tracks the visible viewport. */
@supports (height: 100dvh) {
  #ryb-connect {
    height: 100dvh;
  }

  #ryb-connect .wizard-stage {
    height: calc(100dvh - 130px);
  }

  body.admin-bar #ryb-connect {
    height: calc(100dvh - 36px);
  }
}

/* The wizard error modal was a hard 360x200 box with no max-width, so the
   default copy overflowed the card and the card itself was wider than a
   360px phone. */
#ryb-connect .error-overlay .error-modal,
.error-overlay .error-modal {
  width: auto !important;
  max-width: min(360px, calc(100vw - 32px)) !important;
  height: auto !important;
  min-height: 200px !important;
  overflow: visible !important;
}

/* Finder filter row could not wrap between 769px and 1250px, and the parent
   clips overflow — making filters unreachable rather than scrollable. */
#class-finder .filter-top .filter-controls {
  flex-wrap: wrap !important;
}

/* Never let a funnel scroll the page sideways. */
#ryb-connect,
#class-finder {
  max-width: 100%;
}

#ryb-connect img,
#class-finder img {
  max-width: 100%;
  height: auto;
}

/* Long unbroken strings (emails, URLs, class names) shouldn't force overflow. */
#ryb-connect .error-message,
#class-finder .result-grid-cell .name,
#ryb-connect .location-item-address {
  overflow-wrap: anywhere;
}

/* ==========================================================================
   6. Text contrast (WCAG AA)
   --------------------------------------------------------------------------
   All of the originals used !important, so these do too.
   ========================================================================== */

/* Consent disclosure with the Privacy Policy / Terms links — was rgba(0,0,0,.4)
   at 12px (~2.9:1), the worst size+contrast combination in the funnel.
   NOTE: design.css also ships `#ryb-connect.custom-funnel .wizard-stage
   .privacy-policy p` (specificity 0,1,3,1), so the plain `#ryb-connect
   .wizard-stage ...` form (0,1,2,1) loses regardless of source order. Match
   that selector explicitly. */
#ryb-connect .wizard-stage .privacy-policy p,
#ryb-connect.custom-funnel .wizard-stage .privacy-policy p,
#ryb-connect .privacy-policy p,
#ryb-connect .privacy-policy {
  color: var(--ryb-text-muted) !important;
  font-size: 13px !important;
}

#ryb-connect .wizard-stage .privacy-policy p a,
#ryb-connect.custom-funnel .wizard-stage .privacy-policy p a,
#ryb-connect .privacy-policy a {
  color: var(--ryb-text-muted) !important;
  text-decoration: underline !important;
}

/* SMS-consent label — informed consent copy at ~3.9:1. */
#ryb-connect #registration-form .checkbox-wrapper label,
#ryb-connect .checkbox-wrapper label,
.ryb-connect-modal .checkbox-wrapper label {
  color: var(--ryb-text-muted) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* Placeholders double as the visible field label. */
#ryb-connect #registration-form .input-wrapper input::placeholder,
#ryb-connect .input-wrapper input::placeholder,
#ryb-connect .input-wrapper textarea::placeholder {
  color: var(--ryb-text-subtle) !important;
  opacity: 1 !important;
}

/* Structural labels and status text that were #b0b0b0 / #9ca3af / #999. */
#ryb-connect .filter-top .dropdown-group-header,
#class-finder .filter-top .dropdown-group-header {
  color: var(--ryb-text-muted) !important;
  font-size: 11px !important;
}

#class-finder .camp-status.waitlist,
#class-finder .camps-pill-label,
#class-finder .session-info-label,
#ryb-connect .result-grid-cell .classes-per-week {
  color: var(--ryb-text-muted) !important;
}

/* Small-print labels below 12px are hard to read regardless of contrast. */
#class-finder .session-info-label {
  font-size: 12px !important;
}

/* Background scroll lock while a dialog is open. Applied by
   common/utils/modal-a11y.util.ts. Without this the page scrolled behind the
   modal on touch, so users lost their place in the results list. */
body.ryb-modal-open {
  overflow: hidden !important;
  touch-action: none;
}

/* ==========================================================================
   7. Third-party chat-widget safe area
   --------------------------------------------------------------------------
   The site chat bubble is fixed bottom-right and was covering the phone field
   and the SMS-consent row on mobile, making them untappable without first
   dismissing the widget.
   ========================================================================== */

@media only screen and (max-width: 768px) {
  #ryb-connect .bg-white .container-wrapper,
  #ryb-connect.custom-funnel .bg-white .container-wrapper {
    padding-bottom: 96px;
  }
}

/* ==========================================================================
   8. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  #ryb-connect *,
  #class-finder * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}