/* ==========================================================================
   Sr. LS International Public School — Navbar
   Custom CSS (transitions / behavior Tailwind utilities can't express alone)
   ========================================================================== */

:root {
  --brand: #890C25;
  --brand-dark: #131313;
  --brand-soft: rgba(137, 12, 37, 0.1);
}

* { box-sizing: border-box; }

body {
  font-family: 'Inter', system-ui, sans-serif;
}

.font-logo {
  font-family: 'Playfair Display', Georgia, serif;
}

/* Visible keyboard focus */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Desktop dropdown ---------- */
.dropdown-panel {
  opacity: 0;
  transform: translate(-50%, -10px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.dropdown-group:hover .dropdown-panel,
.dropdown-group:focus-within .dropdown-panel,
.dropdown-group.js-open .dropdown-panel {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.dropdown-caret {
  transition: transform 0.25s ease, color 0.2s ease;
}
.dropdown-group:hover .dropdown-caret,
.dropdown-group:focus-within .dropdown-caret,
.dropdown-group.js-open .dropdown-caret {
  transform: rotate(45deg);
  color: var(--brand);
}

/* ---------- Offcanvas panel + backdrop ---------- */
.offcanvas-backdrop {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.offcanvas-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.offcanvas-panel {
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.offcanvas-panel.is-open {
  transform: translateX(0);
}

/* ---------- Mobile accordion (Management) ---------- */
.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.accordion-panel.is-open {
  max-height: 12rem;
}
.accordion-caret {
  transition: transform 0.3s ease;
}
.accordion-caret.is-open {
  transform: rotate(45deg);
}

/* Prevent body scroll when offcanvas is open */
body.offcanvas-locked {
  overflow: hidden;
}