/* Shared design tokens & custom behaviour — St. Xavier's Secondary School.
   Tailwind handles utilities; this file adds tokens-driven custom chrome. */

:root {
  /* Brand */
  --primary: #4faed2;
  --primary-dark: #245a78;
  --primary-light: #d9f2fa;

  --secondary: #C69214;
  --secondary-dark: #A97400;

  --accent-red: #c94a4a;

  /* Backgrounds */
  --background: #f8fbfc;
  --surface: #ffffff;
  --surface-alt: #eef7fa;

  /* Typography */
  --text-primary: #17313f;
  --text-secondary: #60737d;
  --text-on-primary: #ffffff;

  /* UI */
  --border: #d6e4e9;
  --focus: #4faed2;

  /* Status */
  --success: #268a62;
  --warning: #d99a22;
  --error: #c94a4a;
}

html { scroll-behavior: smooth; }
body { font-family: "Inter", ui-sans-serif, system-ui, sans-serif; }

/* ---- Dropdowns: hover bridge so the menu never drops while crossing the gap ---- */
.dropdown-trigger { position: relative; }
.dropdown-trigger > .dropdown-panel {
  position: absolute; left: 0; top: 100%; min-width: 230px; padding-top: 10px;
  visibility: hidden; opacity: 0; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  pointer-events: none; z-index: 50;
}
.dropdown-trigger > .dropdown-panel::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px;
}
.dropdown-trigger:hover > .dropdown-panel,
.dropdown-trigger:focus-within > .dropdown-panel,
.dropdown-trrigger.is-open > .dropdown-panel {
  visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto;
}
.dropdown-panel > div {
  background: #fff; border: 1px solid var(--line); border-radius: 0.9rem;
  box-shadow: 0 20px 40px rgba(11, 35, 88, .14); overflow: hidden; padding: .4rem;
}

/* ---- Scroll reveal (JS toggles .is-visible) ---- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---- WhatsApp float ---- */
.whatsapp-float {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem; border-radius: 9999px;
  background: linear-gradient(135deg, #25d366, #128c7e); color: #fff;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .25); transition: transform .2s ease;
}
.whatsapp-float:hover { transform: scale(1.07); }

/* ---- Tables ---- */
.table-wrap { overflow-x: auto; }
.table-wrap table { min-width: 640px; }

/* ---- Gallery filter chips ---- */
.filter-chip {
  cursor: pointer; user-select: none;
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  font-weight: 600; font-size: .85rem; padding: .5rem 1rem; border-radius: 9999px;
  transition: all .2s ease;
}
.filter-chip:hover { border-color: var(--navy); color: var(--navy); }
.filter-chip.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ---- FAQ accordion ---- */
.faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.faq-panel > div { overflow: hidden; }
.faq-item.is-open .faq-panel { grid-template-rows: 1fr; }
.faq-item.is-open .faq-chevron { transform: rotate(180deg); }
.faq-chevron { transition: transform .3s ease; }

/* ---- Number counters ---- */
.stat-value { font-variant-numeric: tabular-nums; }

/* ---- Misc polish ---- */
.img-card { border-radius: 1.25rem; box-shadow: 0 18px 40px rgba(11, 35, 88, .12); }
.eyebrow {
  color: var(--secondary); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; font-size: .78rem;
}
.card-hover { transition: transform .25s ease, box-shadow .25s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 24px 48px rgba(11, 35, 88, .12); }

/* ---- Academic calendar ---- */
.calendar-page,
.calendar-detail-page {
  min-height: 70vh;
  background:
    radial-gradient(circle at 8% 0%, rgba(79, 174, 210, .12), transparent 30rem),
    var(--surface-alt);
  color: var(--text-primary);
}
.calendar-hero { margin-bottom: 1.4rem; }
.calendar-hero__copy { max-width: 72rem; }
.calendar-hero__title-row { display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; margin-top:.65rem; }
.calendar-hero h1 { margin:0; color:var(--primary-dark); font-size:clamp(2rem, 4vw, 3.15rem); line-height:1.05; letter-spacing:-.045em; font-weight:800; }
.calendar-hero p { max-width: 46rem; margin:.85rem 0 0; color:var(--text-secondary); font-size:1rem; line-height:1.7; }
.calendar-download-link,
.calendar-primary-link,
.calendar-secondary-link,
.calendar-back-link { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:.45rem; font-weight:750; transition:color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease; }
.calendar-download-link { flex:0 0 auto; padding:.7rem 1rem; border:1px solid var(--primary-dark); border-radius:.75rem; color:var(--primary-dark); background:rgba(255,255,255,.65); font-size:.85rem; }
.calendar-download-link:hover { background:var(--primary-dark); color:#fff; transform:translateY(-1px); }
.calendar-hero__meta { display:flex; flex-wrap:wrap; gap:.7rem 1.1rem; margin-top:1.35rem; color:var(--text-secondary); font-size:.78rem; font-weight:650; }
.calendar-hero__meta span { display:inline-flex; align-items:center; gap:.42rem; }
.calendar-meta-dot { width:.55rem; height:.55rem; display:inline-block; border-radius:50%; background:var(--primary); box-shadow:0 0 0 4px rgba(79,174,210,.12); }
.calendar-meta-dot--date { background:var(--secondary); box-shadow:0 0 0 4px rgba(198,146,20,.12); }
.calendar-meta-dot--school { background:var(--success); box-shadow:0 0 0 4px rgba(38,138,98,.12); }
.calendar-filters { display:grid; grid-template-columns:1.25fr repeat(3, minmax(0,1fr)); align-items:end; gap:.8rem; margin-bottom:1rem; padding:1rem; background:rgba(255,255,255,.78); border:1px solid rgba(214,228,233,.9); border-radius:1rem; box-shadow:0 10px 28px rgba(36,90,120,.06); }
.calendar-filters__intro { padding:.35rem .4rem; }
.calendar-filters__intro span { display:block; color:var(--primary-dark); font-size:.88rem; font-weight:800; }
.calendar-filters__intro small { display:block; margin-top:.2rem; color:var(--text-secondary); font-size:.75rem; line-height:1.35; }
.calendar-filters label { color:var(--text-primary); font-size:.76rem; font-weight:750; letter-spacing:.02em; }
.calendar-filters select { width:100%; min-height:44px; margin-top:.35rem; padding:.55rem 2rem .55rem .75rem; border:1px solid var(--border); border-radius:.65rem; background:#fff; color:var(--text-primary); font-size:1rem; }
.calendar-filters select:focus-visible { outline:3px solid rgba(79,174,210,.35); outline-offset:2px; border-color:var(--focus); }
.calendar-legend { display:flex; align-items:center; flex-wrap:wrap; gap:.55rem .9rem; margin-bottom:1rem; padding:.2rem .2rem; }
.calendar-legend__title { color:var(--text-secondary); font-size:.72rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.calendar-legend__item { display:inline-flex; align-items:center; gap:.35rem; color:var(--text-primary); font-size:.75rem; font-weight:650; }
.calendar-legend__item i,
.calendar-category-label i,
.calendar-detail__category-mark i { width:.58rem; height:.58rem; display:inline-block; flex:0 0 auto; border-radius:50%; background:var(--event-color, var(--primary-dark)); box-shadow:0 0 0 4px color-mix(in srgb, var(--event-color, var(--primary-dark)) 13%, transparent); }
.calendar-workspace { display:grid; grid-template-columns:minmax(0, 1.45fr) minmax(20rem, .75fr); align-items:start; gap:1rem; }
.calendar-card,
.calendar-upcoming-panel,
.calendar-detail { overflow:hidden; border:1px solid rgba(214,228,233,.95); border-radius:1.1rem; background:var(--surface); box-shadow:0 18px 44px rgba(36,90,120,.09); }
.calendar-card__header,
.calendar-upcoming-panel__header { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; padding:1.15rem 1.25rem; border-bottom:1px solid #e8f0f3; }
.calendar-card__kicker { display:block; color:var(--secondary-dark); font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.calendar-card__header h2,
.calendar-upcoming-panel__header h2 { margin:.22rem 0 0; color:var(--primary-dark); font-size:1.25rem; line-height:1.15; letter-spacing:-.02em; font-weight:800; }
.calendar-card__header p { margin:0; color:var(--text-secondary); font-size:.75rem; text-align:right; }
.calendar-shell { padding:.7rem; }
.calendar-shell .fc { --fc-border-color:#e5eef2; --fc-button-bg-color:#245A78; --fc-button-border-color:#245A78; --fc-button-hover-bg-color:#17313F; --fc-button-hover-border-color:#17313F; --fc-today-bg-color:#fff8e6; font-size:.87rem; }
.calendar-shell .fc .fc-toolbar { flex-wrap:wrap; gap:.7rem; padding:.25rem .25rem 1rem; }
.calendar-shell .fc .fc-toolbar-title { color:var(--primary-dark); font-size:1.1rem; font-weight:800; letter-spacing:-.02em; }
.calendar-shell .fc .fc-button { min-height:40px; border-radius:.6rem; font-weight:750; box-shadow:none; }
.calendar-shell .fc .fc-button:focus-visible { outline:3px solid rgba(79,174,210,.35); outline-offset:2px; }
.calendar-shell .fc .fc-col-header-cell-cushion { padding:.65rem .25rem; color:var(--text-secondary); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; }
.calendar-shell .fc .fc-daygrid-day-number { padding:.55rem .55rem; color:var(--primary-dark); font-weight:750; }
.calendar-shell .fc .fc-day-today { background:rgba(255,248,230,.75); }
.calendar-shell .fc-event { border:0; border-left:4px solid var(--event-color, var(--primary-dark)); border-radius:.35rem; background:#f4f8fa; background:color-mix(in srgb, var(--event-color, var(--primary-dark)) 12%, #fff); color:var(--text-primary); cursor:pointer; padding:2px 4px; }
.calendar-shell .fc-event:hover { filter:brightness(.97); }
.calendar-shell .fc-event .fc-event-title,
.calendar-shell .fc-event .fc-event-time { color:inherit; font-weight:750; }
.calendar-status-postponed { opacity:.85; border-style:dashed !important; }
.calendar-status-cancelled { text-decoration:line-through; opacity:.7; }
.calendar-status-revised { box-shadow:inset 3px 0 var(--secondary); }
.calendar-status-archived { opacity:.5; }
.calendar-upcoming-panel { min-width:0; }
.calendar-upcoming-panel__header { align-items:center; }
.calendar-upcoming-count { padding:.35rem .55rem; border-radius:.45rem; background:var(--primary-light); color:var(--primary-dark); font-size:.7rem; font-weight:800; white-space:nowrap; }
.calendar-upcoming-list { max-height:44rem; overflow:auto; padding:.35rem .55rem .55rem; }
.calendar-upcoming-list:focus-visible { outline:3px solid rgba(79,174,210,.35); outline-offset:-3px; }
.calendar-event-card { --event-color:var(--primary-dark); display:grid; grid-template-columns:2.9rem minmax(0,1fr) 1rem; align-items:start; gap:.7rem; min-height:76px; padding:.78rem .65rem; border-bottom:1px solid #edf3f5; color:inherit; text-decoration:none; transition:background-color .2s ease, transform .2s ease; }
.calendar-event-card:last-child { border-bottom:0; }
.calendar-event-card:hover { background:#f8fbfc; transform:translateX(2px); }
.calendar-event-card:focus-visible { position:relative; z-index:1; outline:3px solid rgba(79,174,210,.35); outline-offset:-3px; border-radius:.65rem; }
.calendar-event-card__date { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:2.85rem; border-radius:.6rem; background:color-mix(in srgb, var(--event-color) 10%, #fff); color:var(--event-color); }
.calendar-event-card__date strong { font-size:1.05rem; line-height:1; font-variant-numeric:tabular-nums; }
.calendar-event-card__date small { margin-top:.16rem; font-size:.62rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.calendar-event-card__body { min-width:0; }
.calendar-event-card__topline { display:flex; align-items:center; justify-content:space-between; gap:.45rem; }
.calendar-category-label { display:inline-flex; align-items:center; gap:.4rem; color:var(--event-color, var(--primary-dark)); font-size:.68rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.calendar-status-label { color:var(--text-secondary); font-size:.66rem; font-weight:650; white-space:nowrap; }
.calendar-event-card__title { display:block; margin-top:.24rem; overflow:hidden; color:var(--primary-dark); font-size:.86rem; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.calendar-event-card__date-label { display:block; margin-top:.2rem; overflow:hidden; color:var(--text-secondary); font-size:.7rem; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.calendar-event-card__arrow { align-self:center; color:var(--event-color); font-size:1.1rem; font-weight:700; opacity:.75; }
.calendar-empty-state { margin:0; padding:1.5rem; color:var(--text-secondary); font-size:.9rem; line-height:1.6; text-align:center; }
.calendar-empty-state--large { max-width:42rem; margin:2rem auto 0; padding:3rem 1.5rem; border:1px solid var(--border); border-radius:1.1rem; background:var(--surface); box-shadow:0 18px 44px rgba(36,90,120,.09); text-align:center; }
.calendar-empty-state__icon { display:grid; place-items:center; width:2.5rem; height:2.5rem; margin:0 auto 1rem; border-radius:.75rem; background:#fff5e8; color:#b86f00; font-weight:850; }
.calendar-empty-state h1 { margin:0; color:var(--primary-dark); font-size:1.5rem; }
.calendar-empty-state p { margin:.55rem auto 0; color:var(--text-secondary); }
.calendar-primary-link { margin-top:1.25rem; padding:.7rem 1rem; border-radius:.7rem; background:var(--primary-dark); color:#fff; }
.calendar-primary-link:hover { background:#17313f; transform:translateY(-1px); }

/* ---- Calendar event detail ---- */
.calendar-detail-page .container { max-width:72rem; }
.calendar-back-link { justify-content:flex-start; margin-bottom:1rem; color:var(--primary-dark); font-size:.86rem; }
.calendar-back-link:hover { color:var(--primary); }
.calendar-detail { position:relative; display:grid; grid-template-columns:minmax(0, 1fr) 16rem; }
.calendar-detail__accent { position:absolute; inset:0 auto 0 0; width:.45rem; background:var(--event-color); }
.calendar-detail__main { min-width:0; padding:clamp(1.4rem, 4vw, 3rem); }
.calendar-detail__eyebrow { display:flex; flex-wrap:wrap; gap:.4rem; color:var(--text-secondary); font-size:.72rem; font-weight:750; letter-spacing:.04em; text-transform:uppercase; }
.calendar-detail__labels { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-top:1.2rem; }
.calendar-detail h1 { max-width:47rem; margin:.9rem 0 0; color:var(--primary-dark); font-size:clamp(2rem, 4.3vw, 3.6rem); line-height:1.04; letter-spacing:-.045em; font-weight:850; text-wrap:balance; }
.calendar-detail__summary { max-width:43rem; margin:.85rem 0 0; color:var(--text-secondary); font-size:1rem; line-height:1.7; }
.calendar-event-facts { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.65rem; margin:2rem 0 0; }
.calendar-event-facts > div { padding:.9rem; border:1px solid #e6eff2; border-radius:.8rem; background:#f8fbfc; }
.calendar-event-facts dt { display:flex; align-items:center; gap:.4rem; color:var(--text-secondary); font-size:.7rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.calendar-event-facts dt span { color:var(--event-color); font-size:1rem; }
.calendar-event-facts dd { margin:.4rem 0 0; color:var(--primary-dark); font-size:.9rem; font-weight:750; line-height:1.45; }
.calendar-event-facts dd small { display:block; margin-top:.2rem; color:var(--text-secondary); font-size:.7rem; font-weight:600; }
.calendar-detail__section { margin-top:2.15rem; padding-top:1.45rem; border-top:1px solid #e6eff2; }
.calendar-detail__section h2 { margin:0; color:var(--primary-dark); font-size:1.1rem; font-weight:820; }
.calendar-detail__description { max-width:53rem; margin-top:.7rem; color:var(--text-primary); font-size:.98rem; line-height:1.85; }
.calendar-detail__notice { margin-top:1.5rem; padding:1rem 1rem 1rem 1.1rem; border:1px solid color-mix(in srgb, var(--event-color) 22%, #e6eff2); border-left:4px solid var(--event-color); border-radius:.75rem; background:color-mix(in srgb, var(--event-color) 7%, #fff); color:var(--text-primary); }
.calendar-detail__notice strong { color:var(--primary-dark); font-size:.8rem; }
.calendar-detail__notice p { margin:.25rem 0 0; color:var(--text-secondary); font-size:.86rem; line-height:1.6; }
.calendar-detail__attachments ul { margin:.7rem 0 0; padding:0; list-style:none; }
.calendar-detail__attachments li + li { margin-top:.5rem; }
.calendar-detail__attachments a { color:var(--primary-dark); font-size:.88rem; font-weight:750; }
.calendar-detail__attachments a:hover { color:var(--primary); text-decoration:underline; }
.calendar-detail__aside { display:flex; flex-direction:column; gap:1rem; padding:1.25rem; border-left:1px solid #e6eff2; background:#f8fbfc; }
.calendar-detail__aside-card { padding:1rem; border:1px solid #e1ecef; border-radius:.85rem; background:#fff; }
.calendar-detail__category-mark { display:flex; align-items:center; gap:.55rem; margin-top:1rem; color:var(--primary-dark); font-size:1rem; }
.calendar-detail__category-mark i { width:.75rem; height:.75rem; }
.calendar-detail__aside-card p { margin:.75rem 0 0; color:var(--text-secondary); font-size:.78rem; line-height:1.6; }
.calendar-secondary-link { justify-content:space-between; padding:.8rem .85rem; border:1px solid var(--border); border-radius:.7rem; color:var(--primary-dark); background:#fff; font-size:.8rem; }
.calendar-secondary-link:hover { border-color:var(--primary); background:var(--primary-light); }

@media (max-width: 1000px) {
  .calendar-filters { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .calendar-filters__intro { grid-column:1 / -1; padding:0 .4rem; }
  .calendar-workspace { grid-template-columns:minmax(0,1fr); }
  .calendar-upcoming-list { max-height:none; }
  .calendar-detail { grid-template-columns:minmax(0,1fr); }
  .calendar-detail__aside { flex-direction:row; align-items:stretch; border-top:1px solid #e6eff2; border-left:0; }
  .calendar-detail__aside-card { flex:1; }
  .calendar-secondary-link { flex:0 0 15rem; }
}
@media (max-width: 767px) {
  .calendar-hero__title-row { align-items:flex-start; flex-direction:column; }
  .calendar-download-link { width:100%; }
  .calendar-filters { grid-template-columns:1fr; }
  .calendar-legend { gap:.5rem .75rem; }
  .calendar-legend__title { flex-basis:100%; }
  .calendar-card__header { align-items:flex-start; flex-direction:column; }
  .calendar-card__header p { text-align:left; }
  .calendar-shell { padding:.3rem; }
  .calendar-card--month .calendar-shell .fc { display:none; }
  .calendar-event-card { grid-template-columns:2.75rem minmax(0,1fr) .9rem; padding:.8rem .4rem; }
  .calendar-event-card__title { white-space:normal; }
  .calendar-event-card__date-label { white-space:normal; }
  .calendar-detail__main { padding:1.35rem 1.15rem 1.6rem 1.35rem; }
  .calendar-detail h1 { font-size:2.15rem; }
  .calendar-event-facts { grid-template-columns:1fr; margin-top:1.5rem; }
  .calendar-detail__aside { flex-direction:column; }
  .calendar-secondary-link { flex-basis:auto; }
}
@media (prefers-reduced-motion: reduce) {
  .calendar-download-link,
  .calendar-primary-link,
  .calendar-secondary-link,
  .calendar-back-link,
  .calendar-event-card { transition:none; }
}