/* ==========================================================================
   RQA Chicago — site.css
   Shared components the source prototype uses that tokens.css doesn't cover
   on its own: utility bar, nav dropdowns, jump-tabs, accordions, data
   tables, checklist, timeline, footer. Matches the design handoff prototype
   patterns (navy utility bar, dark footer, hairline-grid tables, cream-when-
   open accordions). Uses tokens.css variables only. Load after tokens.css.
   ========================================================================== */

.container {
  max-width: 1160px;
  margin: 0 auto;
}

main { display: block; }

/* --- Card as a link: a whole .card that's an <a>, e.g. the homepage
   programme picker. Resets link defaults, adds a hover affordance. -------- */
.card--link { display: block; color: inherit; text-decoration: none; transition: border-color .15s; }
.card--link:hover { border-color: var(--gold-500); color: inherit; text-decoration: none; }

/* --- Utility bar (top strip: address / email / hours) ---------------------- */

.utility-bar {
  background: var(--navy-800);
  color: var(--on-navy-bright);
  font-size: 13.5px;
  line-height: 1.7;
  padding: 9px clamp(16px, 4vw, 40px);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  justify-content: space-between;
  align-items: center;
}
.utility-bar a { color: var(--on-navy-bright); }
.utility-bar__right { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; }
.utility-bar__muted { color: var(--on-navy-muted); }

/* --- Header / nav ------------------------------------------------------------ */

.site-header { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--line); }

.site-nav {
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px clamp(16px, 4vw, 40px);
  flex-wrap: wrap;
}
.wordmark { display: flex; align-items: center; gap: 12px; flex: none; color: var(--text-hi); }
.wordmark img { width: 40px; height: 40px; object-fit: contain; display: block; }
.wordmark__name { font-family: var(--font-serif); font-weight: 400; font-size: 18px; color: var(--navy-800); line-height: 1.1; }
.wordmark__place { font: 600 9px var(--font-mono); letter-spacing: .18em; color: var(--gold-600); display: block; margin-top: 3px; }

.nav-groups { display: flex; gap: 2px; flex-wrap: wrap; }
.nav-item { position: relative; }
.nav-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  font: 500 15px var(--font-sans);
  color: var(--text-mid);
  cursor: pointer;
  padding: 9px 10px;
  border-bottom: 2px solid transparent;
}
.nav-trigger:hover, .nav-trigger[aria-expanded="true"] { color: var(--navy-600); border-bottom-color: var(--gold-500); }
.nav-trigger .caret { font-size: 10px; color: var(--gold-600); }
.nav-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: -8px;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 8px;
  z-index: 40;
  display: none;
  flex-direction: column;
  gap: 2px;
}
.nav-item--right .nav-menu { left: auto; right: -8px; }
.nav-item.is-open .nav-menu { display: flex; }
.nav-menu a {
  padding: 11px 14px;
  border-radius: 6px;
  color: var(--text-hi);
  font-size: 15px;
  text-decoration: none;
}
.nav-menu a:hover { background: var(--surface); color: var(--navy-600); text-decoration: none; }
.nav-menu__label {
  padding: 9px 14px 3px;
  font: 600 9.5px var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-600);
}
.nav-menu__label:first-child { padding-top: 4px; }
.nav-menu__divider { height: 1px; background: var(--line); margin: 4px 6px; }

.nav-cta { margin-left: auto; }

/* --- Mobile nav toggle + panel (see the @media block below for the
   collapsed layout — these base rules keep desktop unaffected). ------------- */
.nav-panel { display: flex; align-items: center; gap: 24px; flex: 1; flex-wrap: wrap; }
.nav-toggle {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: 40px;
  height: 40px;
  margin-left: auto;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.nav-toggle__bar { display: block; width: 22px; height: 2px; background: var(--navy-800); border-radius: 1px; transition: transform .18s, opacity .18s; }
/* Morph the three bars into an X while the panel is open, so there's a clear close affordance. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
body.nav-open { overflow: hidden; }

/* --- Jump tabs (programme pages) ---------------------------------------------- */

.jump-tabs {
  position: sticky;
  top: var(--header-h, 70px);
  z-index: 10;
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 0 clamp(16px, 4vw, 40px);
}
.jump-tabs .container { display: flex; align-items: center; gap: 8px 26px; flex-wrap: wrap; }
.jump-tabs__label { font: 600 10px var(--font-mono); letter-spacing: .14em; color: var(--gold-600); padding: 16px 0; }
.jump-tabs a {
  padding: 16px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-hi);
  border-bottom: 2px solid transparent;
  text-decoration: none;
}
.jump-tabs a:hover { border-bottom-color: var(--gold-500); text-decoration: none; }

/* --- Toggle pills: a small pill-button group that switches which
   [data-filter-panel] is visible (faq.html's All/Preschool/Elementary,
   handbook.html's Preschool/Elementary). ------------------------------------ */

.toggle-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.toggle-pills button {
  font: 600 13.5px var(--font-sans);
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text-mid);
  cursor: pointer;
}
.toggle-pills button:hover { border-color: var(--gold-500); color: var(--text-hi); }
.toggle-pills button.is-active { background: var(--navy-600); border-color: var(--navy-600); color: #fff; }

/* Sub-filter variant: a second, visually quieter pill row underneath the
   main toggle (e.g. faq.html's category filter, narrowing whatever the
   school toggle above it already selected). */
.toggle-pills--sub { margin-top: -12px; }
.toggle-pills--sub button { padding: 6px 14px; font-size: 12.5px; font-weight: 500; }
.toggle-pills--sub button.is-active { background: var(--gold-600); border-color: var(--gold-600); }

/* --- Accordion (native details/summary) ---------------------------------------- */

.accordion { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.accordion-item { border-bottom: 1px solid var(--line-100); background: #fff; }
.accordion-item:last-child { border-bottom: none; }
.accordion-item[open] { background: var(--surface); }
.accordion-item summary {
  list-style: none;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  align-items: center;
  padding: 19px 24px;
  cursor: pointer;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 19px;
  color: var(--navy-800);
}
.accordion-item summary::-webkit-details-marker { display: none; }
.accordion-item summary .sign { flex: none; color: var(--navy-600); font-size: 20px; font-family: var(--font-sans); font-weight: 400; }
.accordion-item .accordion-body { padding: 0 24px 22px; font-size: 16px; line-height: 1.75; color: var(--ink-700); }
.accordion-item .accordion-body p { margin: 0 0 12px; }
.accordion-item .accordion-body p:last-child { margin-bottom: 0; }

/* --- Data tables (calendar, schedule, staff, hours) ------------------------------- */

.data-table-wrap { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.data-table-scroll { overflow-x: auto; }
table.data-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
table.data-table thead th {
  text-align: left;
  background: var(--navy-800);
  color: #fff;
  font: 600 11.5px var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 13px 18px;
}
table.data-table tbody td {
  padding: 14px 18px;
  border-top: 1px solid var(--line-100);
  color: var(--ink-700);
  vertical-align: top;
}
table.data-table tbody tr.is-head td { background: var(--surface); font-weight: 600; color: var(--navy-800); }
table.data-table tbody tr.is-meal td { background: var(--blue-50); }
table.data-table tbody td.label { font-weight: 600; color: var(--navy-800); }
table.data-table tbody td .sub { display: block; font-weight: 400; font-size: 13.5px; color: var(--text-lo); margin-top: 2px; }

/* --- Schedule column filter: reuses .toggle-pills (see faq.html/handbook.html);
   see initScheduleFilter() in interactions.js for the show/hide logic. -------- */

/* --- Registration checklist ------------------------------------------------------------ */

.checklist { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.checklist-progress {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  font: 600 12.5px var(--font-mono);
  color: var(--navy-800);
}
.checklist-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 20px;
  border-bottom: 1px dashed var(--dash-300);
}
.checklist-row:last-child { border-bottom: none; }
.checklist-row.is-checked { background: var(--success-bg); }
.checklist-row input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--navy-600); }
.checklist-row .title { font-weight: 600; font-size: 15px; color: var(--navy-800); }
.checklist-row .detail { font-size: 13.5px; color: var(--ink-600); margin-top: 3px; }

/* --- Timeline (Our Journey) --------------------------------------------------------------- */

.timeline { border-left: 2px solid var(--gold-100); padding-left: 26px; display: grid; gap: 28px; }
.timeline-step { position: relative; }
.timeline-step::before {
  content: '';
  position: absolute;
  left: -33px;
  top: 6px;
  width: 12px;
  height: 12px;
  background: var(--navy-600);
  border-radius: 50%;
}
.timeline-step.is-current::before {
  width: 14px; height: 14px; left: -34px; top: 5px;
  background: var(--crimson-500);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--crimson-500);
}
.timeline-step .kicker-inline { font: 600 12px var(--font-mono); letter-spacing: .06em; color: var(--gold-600); margin-bottom: 6px; }

/* --- Footer ----------------------------------------------------------------------------- */

.site-footer { background: var(--navy-900); color: var(--on-navy-muted); }
.footer-groups {
  display: grid;
  grid-template-columns: 1.3fr repeat(5, 1fr);
  gap: 24px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 44px clamp(16px, 4vw, 40px);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.footer-brand .wordmark__name { color: #fff; font-size: 17px; }
.footer-brand .wordmark__place { color: var(--gold-300); }
.footer-brand p { font-size: 13.5px; margin-top: 12px; color: var(--on-navy-muted); }
.footer-brand a { color: var(--gold-300); }
.footer-group h4 {
  font: 600 10.5px var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-navy-faint);
  margin: 0 0 12px;
}
.footer-group a { display: block; font-size: 14px; color: var(--on-navy-muted); padding: 5px 0; }
.footer-group a:hover { color: var(--gold-300); }
.footer-legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 18px clamp(16px, 4vw, 40px);
  font-size: 12.5px;
  color: var(--on-navy-faint);
}
.footer-legal a { color: var(--on-navy-faint); }

/* --- Downloads / forms rows ---------------------------------------------------------------- */

.download-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
}
.download-row + .download-row { margin-top: 12px; }
.download-row .name { font-weight: 600; font-size: 15px; color: var(--navy-800); }
.download-row .meta { font-size: 12.5px; color: var(--text-lo); margin-top: 3px; }

.email-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: 14.5px;
}
.email-card > div { display: grid; grid-template-columns: 82px 1fr; border-bottom: 1px solid var(--line-100); }
.email-card > div:last-child { border-bottom: none; }
.email-card span:first-child { padding: 11px 14px; color: var(--ink-400); font: 12px var(--font-mono); }
.email-card span:last-child { padding: 11px 14px; color: var(--text-hi); }

/* --- Utility ------------------------------------------------------------------------------- */

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-bottom: 26px; }

/* --- Responsive -------------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .utility-bar { display: none; }
  .site-nav { padding: 12px 20px; }

  .nav-toggle { display: flex; }

  .nav-panel {
    display: none;
    position: fixed;
    top: var(--header-h, 68px);
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    padding: 12px 20px 24px;
    overflow-y: auto;
    z-index: 30;
  }
  .nav-panel.is-open { display: flex; }

  .nav-groups { flex-direction: column; gap: 0; width: 100%; }
  .nav-item { width: 100%; border-bottom: 1px solid var(--line); }
  .nav-item:last-child { border-bottom: none; }
  .nav-trigger { width: 100%; justify-content: space-between; padding: 15px 4px; font-size: 16px; }
  .nav-menu {
    position: static;
    display: none;
    min-width: 0;
    border: none;
    box-shadow: none;
    padding: 0 0 10px 10px;
  }
  .nav-item.is-open .nav-menu { display: flex; }
  .nav-item--right .nav-menu { right: auto; }
  .nav-menu a { padding: 12px 14px; }

  .nav-cta { margin: 18px 4px 0; text-align: center; }

  .jump-tabs { padding: 0 20px; }
  .footer-groups { grid-template-columns: 1fr 1fr; padding: 32px 20px; }
  .footer-legal { padding: 16px 20px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  table.data-table { min-width: 480px; }
}

/* ==========================================================================
   Real form fields — used by absence.html (and future functional forms).
   Distinct from the site's placeholder/mailto pattern: these submit to the
   /api Managed Function. Uses tokens.css variables only.
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.field[hidden] { display: none; } /* [hidden] and .field have equal specificity — without this, .field's own display:flex wins and the field stays visible. */
.field label { font-size: 13.5px; font-weight: 600; color: var(--text-hi); }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field select,
.field textarea {
  font: 15px var(--font-sans);
  color: var(--text-hi);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 80px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--gold-500);
  outline-offset: 1px;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } }

.form-success {
  display: none;
  background: var(--success-bg);
  color: var(--success-fg);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  font-size: 14.5px;
}
.form-success.is-shown { display: block; }
.form-success strong { display: block; font-size: 16px; margin-bottom: 6px; }

.form-error {
  display: none;
  background: var(--error-bg);
  color: var(--error-fg);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-size: 13.5px;
  margin-bottom: 18px;
}
.form-error.is-shown { display: block; }