/* Mobile formatting overrides (Phase 8 /mobile-audit, 2026-07-18). Scoped
   fixes layered over the exported Webflow CSS — never edit the generated
   files. Desktop stays pixel-identical: rules are media-queried or visually
   inert (invisible tap-area growth). */

/* Invisible tap-target growth (WCAG 2.5.8): swiper pagination bullets
   (0.75rem dots) and the footer disclosure link measure under 24px. A
   pseudo-element grows the hit box without changing the render. */
.swiper-bullet,
.footer_disclosure-link {
  position: relative;
}
.footer_disclosure-link::after {
  content: "";
  position: absolute;
  inset: -16px;
}
/* Pagination dots sit 4px apart, so a hit box that grows sideways swallows its
   neighbours: tapping one dot landed on the next dot, or on the button beside
   the row, and the carousel never moved (caught 2026-07-31). The dots get more
   room between them and their hit boxes grow to meet in the middle, never past
   it. Height is free - the row already reserves 44px. */
.swiper-bullet-wrapper {
  grid-column-gap: 1rem;
  column-gap: 1rem;
}
.swiper-bullet::after {
  content: "";
  position: absolute;
  inset: -16px -8px;
}

/* ---------------------------------------------------------------------------
 * TOUCH TARGETS (mobile pass, 2026-07-30). Andrew: "make it absolutely 100%
 * perfect for mobile ... we want this site to convert sales."
 *
 * Apple's HIG and WCAG 2.5.5 both put the floor at 44px. Measured on a 390px
 * phone, most of the site's controls sat at 21-42px: small buttons 40, footer
 * links 37, social icons 32, text buttons 24, session pills 35. A missed tap
 * on a Register button is a lost sale, so every real control is brought to 44.
 *
 * Height is added with PADDING, never display changes: the export mixes block,
 * inline-block and flex buttons and swapping display would resize half of them.
 * Icon-only controls get an explicit box instead. Scoped under 992px, which is
 * where Webflow collapses the site into its mobile layout - desktop with a
 * mouse is untouched.
 * ------------------------------------------------------------------------ */
@media (max-width: 991px) {
  /* Solid buttons. Padding grows, the label stays centred, the button reads
     the same, just taller. */
  .button.is-small,
  .button.is-nav-mobile,
  .button-2.is-small,
  input.button,
  input.button-2,
  input.button-s-2,
  input[type="submit"] {
    padding-top: 0.62rem;
    padding-bottom: 0.62rem;
  }
  .button.is-session {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
  }
  .button.is-navbar {
    padding-top: 0.72rem;
    padding-bottom: 0.72rem;
  }
  .program_button {
    padding-top: 0.72rem;
    padding-bottom: 0.72rem;
  }

  /* Text-styled buttons ("Back to Blogs", "Learn More", the landing pages'
     secondary line). They are bare text at 24px tall; the padding is
     transparent so nothing new appears on the page. */
  .button.is-link,
  .lp-cta-alt,
  .pack_item-wrapper,
  .content_link {
    padding-top: 0.62rem;
    padding-bottom: 0.62rem;
  }

  /* Icon-only controls: give the box a real 44px, the icon inside keeps its
     own size because these are all centring flex containers. */
  .social-link-wrapper,
  .tweet-link-wrapper,
  .bio_social-link-wrapper,
  .play_buton-wrapper,
  .modal_close-button,
  .hl-ask-close {
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* The icon rows were spaced for 32px boxes; pull the extra width back out so
     the row occupies the same space it did. */
  .social-list,
  .bio_social-list {
    margin-left: -0.375rem;
    margin-right: -0.375rem;
  }

  /* Footer links sit at 37px in a tight column. */
  .footer_link {
    padding-top: 0.72rem;
    padding-bottom: 0.72rem;
  }

  /* Site chrome: the logo link and the hamburger. */
  .navbar_logo-link,
  .links_menu-link,
  .footer_logo-link {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
  }
  .navbar_menu-button {
    min-width: 2.75rem;
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Hand-built schedule filter chips. */
  .sch-chip {
    min-height: 2.75rem;
  }

  /* Second pass: controls that were still short after the padding above.
     Form submit buttons are replaced elements, so a min-height centres their
     label on its own. */
  input.button,
  input.button-2,
  input.button-s-2,
  input[type="submit"] {
    min-height: 2.75rem;
  }
  /* Text-styled buttons start at 16px of content, so they need more padding
     than the solid ones to clear 44. */
  .button.is-link {
    padding-top: 0.88rem;
    padding-bottom: 0.88rem;
  }
  .pack_item-wrapper {
    padding-top: 0.78rem;
    padding-bottom: 0.78rem;
  }
  .lp-cta-alt {
    padding-top: 0.72rem;
    padding-bottom: 0.72rem;
  }
  .content_link {
    min-height: 2.75rem;
  }
  /* The hero video's play/pause control is capped at 2rem by the export. */
  .play_buton-wrapper {
    max-width: 2.75rem;
  }

  /* Inline text links that carry a real action - a phone number, an email
     address, a standalone "Apply here" line. Growing the box would push the
     copy around, so an invisible pseudo-element takes the extra 24px. */
  .text-style-link,
  .is-phone-link,
  .contact_item a,
  p > a:only-child {
    position: relative;
  }
  .text-style-link::after,
  .is-phone-link::after,
  .contact_item a::after,
  p > a:only-child::after {
    content: "";
    position: absolute;
    inset: -13px 0;
  }
}

/* The floating "have a question?" bubble sits over the mobile menu's Register
   button while the menu is open. The menu wins. */
body:has(.w-nav-button.w--open) .hl-ask-launcher {
  display: none;
}

/* Phone numbers the converter turned into tel: links inside contact cards
   keep the surrounding text's look — they were plain text before. */
.is-phone-link {
  color: inherit;
  text-decoration: none;
}

@media (max-width: 1024px) {
  /* Testimonial swiper slides + experience cards bleed 7-8px past the
     tablet viewport (measured on camp/program pages). Clip at the shell. */
  .page-wrapper {
    overflow-x: clip;
  }
}

@media (max-width: 767px) {
  /* Spring-league bracket labels measure 11px; 12px is the legibility
     floor. The bracket ships its own inline <style> block AFTER this
     sheet, so the element+class specificity is what wins here. */
  div.bracket-game-title,
  div.bracket-date {
    font-size: 12px;
  }
}

@media (max-width: 479px) {
  /* media-kit: a fixed ~445px column overflows a 390px phone by 75px+. */
  .media-content-left {
    width: 100%;
    max-width: 100%;
  }
  /* our-partners: .bio_list keeps its four desktop columns and overflows
     phones by 300px+; collapse to two fluid columns. */
  .bio_list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* contact-us: the FAQ tab-button row (flex, no wrap) overflows 360px
     phones by 16px. */
  .faq_menu {
    flex-wrap: wrap;
  }
}

/* Dead space above the fold is the most expensive space on the site. On phones
   the first section of a page opens with 48px of padding under a 66px navbar,
   which pushed the headline (and everything under it) down a full inch before
   a word was read. Half that on phones; every section after the first keeps its
   breathing room. Mobile pass, 2026-07-30. */
@media (max-width: 479px) {
  main > *:first-child .padding-section-small,
  main > *:first-child .padding-section-medium,
  main > *:first-child .padding-section-large {
    padding-top: 1.5rem;
  }
}

/* ---------------------------------------------------------------------------
 * The welcome popup on the Regina home page (2026-07-31).
 *
 * It fires five seconds after load, which on a phone is long enough for
 * someone to have opened the hamburger menu. It then lands on top of the menu
 * at z-index 99999: the menu is still visible but every tap goes into the
 * overlay. While the menu is open the popup stays out of the way and comes
 * back the moment the menu is closed. The JS sets display inline, so these
 * have to be !important.
 *
 * The offer tag shipped at 11.5px, under the phone legibility floor. The
 * popup's own scoped <style> block uses #popup selectors and renders after
 * this sheet, so the override needs to outrank it on specificity, not order.
 * ------------------------------------------------------------------------ */
body:has(.w-nav-button.w--open) #popup {
  display: none !important;
}
body #popup .popup_kicker {
  font-size: 12px;
}

/* TOUCH TARGETS — the author byline link (added 2026-07-31 so /authors/<slug>
   is not an orphan page). It is inline text inside a byline, so it cannot be
   padded without moving the layout: it gets an invisible 44px hit area
   instead, the same trick the swiper bullets and the footer disclosure use. */
@media (max-width: 61.9375rem) {
  .hl-author-link {
    position: relative;
  }
  .hl-author-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2.75rem;
    transform: translateY(-50%);
  }
}

/* YOUNG STARS — on a phone the nav dropdown hides each entry's description
   line (.hide-mobile-landscape, max-width 767px), so "Young Stars" gave no
   clue who it is for. The heading carries the age range, shown only in that
   same range so it never doubles up with the description (Andrew, 2026-08-02). */
.hl-nav-ages {
  display: none;
}
@media screen and (max-width: 47.9375rem) {
  .hl-nav-ages {
    display: inline;
  }
}

/* The careers resume button lost paint-order ties to its own section wrapper
   (elementFromPoint returned the ancestor, so real taps never reached the
   label - found by verify:mobile-taps, 2026-08-03). Positioning it puts it
   back on top everywhere. */
.w-file-upload-label {
  position: relative;
  z-index: 1;
}