/* ============================================================
   Custom site styles layered on top of the compiled Tailwind
   build (styles-DNj_wSG-.css). Handles the fixed header offset,
   anchor scroll positioning and a few shared helpers.
   ============================================================ */

/* Fixed nav (64px). When banner is visible an extra 44px is added (banner
   height) plus a visible gap so content does not sit flush against the banner.
   When the banner is dismissed, body.rb-banner-hidden drops back to nav only. */
:root {
  --rb-banner-h: 44px;   /* banner strip height */
  --rb-nav-h:    64px;   /* fixed nav bar height */
  --rb-gap:      24px;   /* visible breathing room below banner */
  --rb-offset:   calc(var(--rb-nav-h) + var(--rb-banner-h) + var(--rb-gap));
}
/* Wider screens — extra gap looks better */
@media (min-width: 768px) {
  :root { --rb-gap: 36px; }
}
body.rb-banner-hidden {
  --rb-offset: var(--rb-nav-h);
}

main {
  padding-top: var(--rb-offset);
}

/* The hero/first section sits flush under the fixed header — the
   header offset is already provided by main's padding-top, so we
   strip any large top padding the original first section carried. */
main > section:first-child {
  padding-top: 0;
}

/* Anchored sections clear the fixed header when jumped to. */
[id] {
  scroll-margin-top: calc(var(--rb-offset) + 16px);
}

html {
  scroll-behavior: smooth;
}

/* Reveal-on-scroll initial state (revealed by main.js). */
.reveal {
  opacity: 0;
}
.reveal.fade-in-up {
  opacity: 1;
}

/* Keep floating WhatsApp button clear of small screens' edges. */
#rb-floaters {
  max-width: calc(100vw - 1.5rem);
}

/* Active nav link — brand purple, no underline. */
[data-nav][aria-current="page"] {
  color: #7c2ae8 !important;
  text-decoration: none !important;
}
[data-nav][aria-current="page"]::after {
  display: none !important;
}

/* FAQ accordion smooth expand/collapse. */
.faq-wrapper {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s ease;
}
.faq-wrapper.open {
  max-height: 600px;
}

/* ── Mobile / responsive polish ─────────────────────────────────────── */

/* Student Enquiry pill — prevent it from overlapping tappable content
   on very small screens; clamp width so it never bleeds off-screen. */
#rb-student-pill {
  max-height: 60vh;
}

/* Prevent long words / headings from overflowing on narrow screens. */
h1, h2, h3, h4 {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Make sure form inputs don't overflow their container on mobile. */
input, select, textarea {
  max-width: 100%;
}

/* Ensure buttons never overflow their container on mobile. */
.btn-primary, .btn-secondary, button[type="submit"] {
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
}

/* Mobile nav — ensure hamburger menu renders over content. */
@media (max-width: 767px) {
  /* Banner: update variable so it matches the taller wrapped banner */
  :root {
    --rb-banner-h: 52px;
  }
}