/* IBS Mobile · Minimal Hamburger Menu · Clean version */

/* Mobile: hide the desktop nav-links, show only brand and hamburger */
@media (max-width: 720px){
  .nav-links { display: none !important; }
  .topbar { display: none !important; }
  .site-header {
    padding: 8px 60px 8px 12px !important;
    background: #046f25 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
  }
  .site-header .brand { color: #fff !important; }
  .site-header .brand-name strong { color: #fff !important; font-size: .95rem !important; }
  .site-header .brand-name span { color: #f2c400 !important; font-size: .7rem !important; }
  .brand-logo { height: 34px !important; width: auto !important; }
  h1, .hero h1 { font-size: 1.9rem !important; line-height: 1.2 !important; }
  h2 { font-size: 1.5rem !important; }
  input, textarea, select { font-size: 16px !important; }
  a, button { min-height: 44px; }
  .grid, .grid-2, .grid-3, .grid-4, .g2, .g3, .g4, .profile-grid, .contact-wrap {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Inline grid styles cannot be reached by the class rules above, and 29 of
     them exist across the site with fixed column counts like repeat(4,1fr).
     At 390px a four-column grid of contact cards measured 434px wide and was
     the single largest source of horizontal scroll. auto-fit lets each of them
     reflow to whatever fits instead of forcing one column everywhere. */
  [style*="grid-template-columns"]{
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  }

  * { max-width: 100vw; box-sizing: border-box; }

  /* overflow-x on body alone does not stop the page scrolling sideways: the
     off-canvas drawer is position:fixed and translated 100% to the right, and
     the root element still counts it. `clip` rather than `hidden` because
     hidden on html creates a scroll container and kills the sticky header
     declared above. */
  html { overflow-x: hidden; overflow-x: clip; }
  body { overflow-x: hidden; overflow-x: clip; }

  img { max-width: 100%; height: auto; }

  /* WCAG 2.2 AA 2.5.8 asks for 24x24 CSS px on anything you tap. The footer
     and utility navigation were rendering 19-20px tall, which on a phone in
     one hand means hitting "Calendar" when you wanted "Departments".
     `a, button { min-height: 44px }` above does not reach these because they
     are inline elements inside list items, where min-height does nothing.
     Padding is what actually grows the hit area.

     Links inside a paragraph are deliberately excluded: WCAG exempts them, and
     padding them would break the line spacing of body text. */
  .ed-footer li a,
  .ed-util-links a,
  .ed-footer .bottom .socials a {
    display: inline-block;
    padding: 6px 2px;
    min-height: 24px;
  }
  .ed-footer li { margin-bottom: 4px; }

  /* Same problem, wider case: a list item whose entire content is one link is a
     navigation control, not prose, and was rendering ~20px tall in the "Related"
     cards. `:only-child` is the discriminator - it means the link IS the item,
     so padding it cannot disturb the spacing of a sentence that happens to
     contain a link. */
  li > a:only-child {
    display: inline-block;
    padding: 5px 0;
    min-height: 24px;
  }

  /* A very short label can still miss the 24px minimum on width alone -
     "PTA" measured 23px. Horizontal padding is the wrong tool here because it
     would shift the text; min-width grows the hit area without moving anything. */
  li > a:only-child,
  .ed-footer li a,
  .ed-util-links a {
    min-width: 24px;
  }

  /* Breadcrumbs and the department contact links are standalone controls that
     happen to be inline, so neither of the rules above reaches them. */
  nav.crumbs a,
  .dept a {
    display: inline-block;
    padding: 4px 0;
    min-height: 24px;
    min-width: 24px;
  }
}

/* The floating hamburger button */
#ibsHam {
  display: none;
  position: fixed;
  top: 12px;
  right: 12px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #046f25;
  color: #f2c400;
  border: 2px solid #f2c400;
  z-index: 999999;
  font-size: 26px;
  font-weight: 900;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
}
@media (max-width: 720px){ #ibsHam { display: flex !important; } }

/* Drawer + backdrop */
#ibsDrawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(320px, 88vw);
  background: #fff;
  z-index: 999998;
  overflow-y: auto;
  box-shadow: -8px 0 30px rgba(0,0,0,.4);
  transform: translateX(100%);
  transition: transform .3s ease;
  padding: 20px 0 40px 0;
}
#ibsDrawer.on { transform: translateX(0); }
#ibsBackdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 999997;
  display: none;
}
#ibsBackdrop.on { display: block; }

#ibsDrawer .ihd-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #f2c400; color: #046f25;
  border: 0; font-size: 22px; font-weight: 900;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
#ibsDrawer .ihd-brand {
  padding: 4px 20px 14px;
  border-bottom: 2px solid #f2c400;
  color: #046f25;
  font-family: Georgia, serif;
  font-size: 1.1rem;
  font-weight: 700;
}
#ibsDrawer .ihd-brand small {
  display: block;
  color: #d9a900;
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin-top: 2px;
  font-weight: 800;
}
#ibsDrawer h4 {
  margin: 12px 20px 4px;
  color: #d9a900;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 800;
  padding-top: 12px;
  border-top: 1px solid #eef7e6;
}
#ibsDrawer h4:first-of-type { border-top: 0; padding-top: 4px; }
#ibsDrawer a {
  display: block;
  padding: 12px 20px;
  color: #111 !important;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  border-left: 3px solid transparent;
}
#ibsDrawer a:active,
#ibsDrawer a:hover {
  background: #eef7e6;
  color: #046f25 !important;
  border-left-color: #068029;
}
#ibsDrawer a.pri {
  background: linear-gradient(135deg, #046f25, #068029);
  color: #fff !important;
  margin: 6px 12px;
  border-radius: 8px;
  text-align: center;
  padding: 12px 16px;
  border: 0;
  font-weight: 800;
}
body.ibs-menu-open { overflow: hidden; }

/* ============================================================
   Mobile carousels — .gallery-grid becomes a swipeable horizontal
   scroller on phones, keeping the desktop 3-col grid untouched.
   ============================================================ */
@media (max-width: 720px){
  .gallery-grid {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    gap: 12px !important;
    padding: 4px 16px 20px !important;
    margin: 16px -16px 0 !important;
    scrollbar-width: none;
  }
  .gallery-grid::-webkit-scrollbar { display: none; }
  .gallery-grid > figure {
    flex: 0 0 82vw !important;
    max-width: 82vw !important;
    min-width: 260px !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
    margin: 0 !important;
  }
  .gallery-grid > figure img {
    aspect-ratio: 4/3 !important;
    width: 100% !important;
    object-fit: cover !important;
  }
  .gallery-grid > figure figcaption {
    padding: 14px 18px 18px !important;
  }
  .gallery-grid > figure figcaption strong {
    font-size: 1.05rem !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }
  .gallery-grid > figure figcaption small {
    font-size: .92rem !important;
    line-height: 1.45 !important;
    display: block !important;
    margin-top: 4px !important;
  }
  /* Optional pagination dots container injected by ibs-m.js */
  .ibs-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: -4px 0 20px;
  }
  .ibs-carousel-dots span {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #d6e4c7;
    transition: background .2s, transform .2s;
  }
  .ibs-carousel-dots span.on {
    background: #068029;
    transform: scale(1.35);
  }
}


/* ---------------------------------------------------------------------------
   Touch target sizing (added 2026-07-29 after commissioning)
   Commissioning found 25-28 links per page rendering at 14-19px tall on a
   390px viewport. WCAG 2.5.8 asks for 24x24 CSS px minimum; these were well
   under it. Most IBS parents reach the site on a phone, so footer contact
   links and utility-bar navigation were genuinely fiddly to tap.
   Padding is added only on touch screens, so desktop layout is unchanged.
--------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
  footer a,
  .site-footer a,
  .ibs-footer a,
  .utility-bar a,
  .util a,
  nav a,
  .nav a,
  .footer-links a,
  .ibs-email-strip a {
    display: inline-block;
    min-height: 24px;
    padding-top: 6px;
    padding-bottom: 6px;
    line-height: 1.5;
  }

  /* Contact details are the ones people actually tap - give them more room. */
  footer a[href^="tel:"],
  footer a[href^="mailto:"],
  .ibs-email-strip a[href^="mailto:"],
  a[href^="tel:"],
  a[href^="mailto:"] {
    min-height: 34px;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  /* Keep inline links inside body copy readable - no padding there, it would
     break line spacing in paragraphs. */
  p > a:not([href^="tel:"]):not([href^="mailto:"]) {
    padding-top: 0;
    padding-bottom: 0;
    min-height: 0;
    display: inline;
  }

  /* Utility bar (injected by ibs-shell.js) and list links. These were the
     remaining sub-24px targets after the first pass: the bar renders at 14px
     and list links at 20px. Padding rather than font-size, so the visual
     design is unchanged. */
  .ed-util-links a,
  .ed-util a,
  li > a {
    display: inline-block;
    min-height: 24px;
    padding-top: 5px;
    padding-bottom: 5px;
    line-height: 1.45;
  }

  /* A link that is the whole list item gets a slightly larger target. */
  li > a:only-child {
    padding-top: 7px;
    padding-bottom: 7px;
  }
}