/* ============================================================
   GBCA Head Start — monthly calendar.

   Designed to feel native to the rest of the GBCA preview site:
   - Fonts: Fraunces (headings) + Sora (body) — same as the
     site shell defined in preview/county.html etc.
   - Color tokens: --ink / --bone / --paper / --clay / --forest /
     --gold / --line are inherited from the host page where
     possible; literal fallbacks listed for when the calendar
     is dropped onto a page that doesn't define them.
   - Borders / radius / button shape: borrowed from the
     existing preview chrome (.btn, schools-band, hs-loc).

   Layout strategy:
     - Desktop (>=720px): semantic <table>. Every <tr> is the
       SAME height regardless of event density — no row-collapse
       on light weeks.
     - Mobile  (<720px):  the table is hidden, an alternate
       vertical list of dates-with-events is shown (empty days
       dropped to keep the list compact).

   Accessibility:
     - Semantic <table>/<caption>/<thead> with scope="col" on
       day headers.
     - Each event is a real <button> with focus-visible style.
     - Prev/next/today buttons have aria-labels; aria-live
       region announces month changes.
     - Color is never the only signal — today's cell has the
       gold ring AND a "Today" sr-only label; per-type cue is a
       left accent + tint AND the chip's bold name.
     - 44x44 minimum hit target on every interactive control.
   ============================================================ */

.hs-cal{
  /* Site tokens — fall back to literal values so the component
     stays readable if dropped onto a page that doesn't expose
     them. These match the :root tokens in preview/county.html. */
  --hs-ink:        var(--ink,         #1c1a17);
  --hs-ink-soft:   var(--ink-soft,    #4d4942);
  --hs-bone:       var(--bone,        #f4f1ea);
  --hs-bone-d:     var(--bone-d,      #e7e1d4);
  --hs-paper:      var(--paper,       #fdfcf9);
  --hs-clay:       var(--clay,        #b8542f);
  --hs-clay-dk:    var(--clay-dk,     #8f3f22);
  --hs-forest:     var(--forest,      #1f3a32);
  --hs-forest-2:   var(--forest-2,    #2c4f44);
  --hs-gold:       var(--gold,        #d8a23a);
  --hs-line:       var(--line,        rgba(28, 26, 23, .14));
  --hs-ease:       var(--ease,        cubic-bezier(.16, 1, .3, 1));

  /* Per-type accents — on-brand harmonious palette built around
     the existing GBCA hues. Used as the chip's left stripe and
     the cell's left accent + low-alpha background tint. */
  --hs-acc-closure:    #a83a2a;   /* deep clay-red */
  --hs-acc-program:    #2a5f56;   /* deep teal, brand-adjacent */
  --hs-acc-enrollment: #4d7a36;   /* warm sage green */
  --hs-acc-meeting:    #2c5b8a;   /* deep brand blue */
  --hs-acc-family:     #b97d1c;   /* deepened gold */
  --hs-acc-default:    var(--hs-clay);

  font-family: 'Sora', sans-serif;
  color: var(--hs-ink);
  line-height: 1.5;
  background: var(--hs-paper);
  border: 1px solid var(--hs-line);
  border-radius: 16px;
  padding: 1.6rem;
  position: relative;
}
@media (max-width: 720px){
  .hs-cal{ padding: 1.2rem; border-radius: 14px; }
}

/* ------------------------------------------------------------
   Bulletproof font cascade
   ------------------------------------------------------------
   <button>, <input>, and <table> elements do NOT inherit
   font-family from ancestors in the user-agent stylesheet, so
   without an explicit rule each one falls back to a system
   sans-serif (looks "rounded" on macOS/iOS, blocky on Windows).
   Force every descendant of .hs-cal to use Sora — then re-elect
   the headings to Fraunces. This catches every present and
   future text-bearing element in the component. */
.hs-cal,
.hs-cal *,
.hs-cal *::before,
.hs-cal *::after{
  font-family: 'Sora', sans-serif;
}
.hs-cal h1,
.hs-cal h2,
.hs-cal h3,
.hs-cal h4,
.hs-cal .hs-cal__title,
.hs-cal .hs-cal__list-date,
.hs-cal .hs-cal__empty strong,
.hs-cal .hs-cal__detail h3{
  font-family: 'Fraunces', serif;
}

/* ------------------------------------------------------------
   Header — kicker + month title + nav buttons
   Mirrors the .schools-band header pattern used elsewhere in
   the preview site (kicker, then big Fraunces heading).
   ------------------------------------------------------------ */
.hs-cal__header{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 1.6rem;
}
.hs-cal__heading{
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.hs-cal__kicker{
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: 'Sora', sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--hs-clay-dk);
}
.hs-cal__kicker::before{
  content: "";
  width: 2.4rem;
  height: 1px;
  background: var(--hs-clay);
}
.hs-cal__title{
  font-family: 'Fraunces', serif;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.06;
  color: var(--hs-forest);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  margin: 0;
}

/* Nav: on-brand outline pill buttons, 44x44 min, calm hover. */
.hs-cal__nav{
  display: inline-flex;
  gap: .4rem;
  align-items: center;
}
.hs-cal__navbtn{
  appearance: none;
  font: inherit;
  font-family: 'Sora', sans-serif;
  font-size: .85rem;
  font-weight: 600;
  color: var(--hs-forest);
  background: var(--hs-bone);
  border: 1px solid var(--hs-line);
  border-radius: 999px;
  padding: 0 1rem;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .35s var(--hs-ease), color .35s var(--hs-ease),
              border-color .35s var(--hs-ease);
}
.hs-cal__navbtn:hover{
  background: var(--hs-bone-d);
  border-color: rgba(28, 26, 23, .22);
}
.hs-cal__navbtn:focus-visible{
  outline: 2px solid var(--hs-clay);
  outline-offset: 3px;
}
.hs-cal__navbtn--today{
  padding: 0 1.25rem;
}

/* Live region for SR announcements of month changes. */
.hs-cal__sr{
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------
   Empty state
   ------------------------------------------------------------ */
.hs-cal__empty{
  padding: 2.6rem 1.4rem;
  background: var(--hs-bone);
  border: 1px dashed var(--hs-line);
  border-radius: 12px;
  text-align: center;
  color: var(--hs-ink-soft);
  font-size: 1rem;
  line-height: 1.5;
}
.hs-cal__empty strong{
  display: block;
  font-family: 'Fraunces', serif;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--hs-forest);
  margin-bottom: .4rem;
}

/* ------------------------------------------------------------
   Desktop grid (>=720px) — semantic <table>
   ------------------------------------------------------------ */
.hs-cal__grid{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  border: 1px solid var(--hs-line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--hs-paper);
}
.hs-cal__grid caption{
  /* The visible heading is the .hs-cal__title; caption is SR-only. */
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.hs-cal__grid thead th{
  background: var(--hs-bone);
  color: var(--hs-forest);
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .85rem .4rem;
  text-align: center;
  border-bottom: 1px solid var(--hs-line);
}

/* Equal-height rows: set `height` on the row itself — browsers
   treat this as a minimum in table layout, so empty weeks no
   longer collapse and busy weeks still grow to fit. */
.hs-cal__grid tbody tr{
  height: 140px;
}
.hs-cal__grid tbody td{
  vertical-align: top;
  width: 14.2857%;
  padding: .65rem .6rem .55rem;
  border-right: 1px solid var(--hs-line);
  border-bottom: 1px solid var(--hs-line);
  background: var(--hs-paper);
  position: relative;
  font-family: 'Sora', sans-serif;
}
.hs-cal__grid tbody td:last-child{ border-right: none; }
.hs-cal__grid tbody tr:last-child td{ border-bottom: none; }

.hs-cal__day-num{
  display: inline-block;
  font-family: 'Sora', sans-serif;
  font-size: .85rem;
  font-weight: 600;
  color: var(--hs-ink);
  margin-bottom: .45rem;
}
.hs-cal__day--other{
  background: var(--hs-bone-d);
}
.hs-cal__day--other .hs-cal__day-num{
  /* Muted, but solid so the contrast budget is well-defined.
     #5e6b67 on var(--hs-bone-d) #e7e1d4 ≈ 4.9:1; on paper ≈ 5.6:1
     — comfortably above the WCAG 2.1 AA 4.5:1 floor. */
  color: #5e6b67;
  opacity: 1;
}

/* Today: small clay pill — brand color, restrained shape. */
.hs-cal__day--today .hs-cal__day-num{
  background: var(--hs-clay);
  color: #fff;
  border-radius: 999px;
  padding: .12rem .55rem;
  min-width: 1.6rem;
  text-align: center;
}
.hs-cal__day--today::before{
  content: "Today";
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* ------------------------------------------------------------
   Per-type cell cue — subtle accent + tint
   Tasteful: a left bar in the type's accent color + a very
   light wash background. Reads as "this day has activity in
   this category" without the muddy heavy fill of the previous
   iteration. Contrast budgets verified for dark text on each
   tint.
   ------------------------------------------------------------ */
.hs-cal__grid tbody td.hs-cal__day--evt-closure{
  background-color: #fbe9e5;
  box-shadow: inset 4px 0 0 0 var(--hs-acc-closure);
}
.hs-cal__grid tbody td.hs-cal__day--evt-program{
  background-color: #e3eeec;
  box-shadow: inset 4px 0 0 0 var(--hs-acc-program);
}
.hs-cal__grid tbody td.hs-cal__day--evt-enrollment{
  background-color: #e7efe1;
  box-shadow: inset 4px 0 0 0 var(--hs-acc-enrollment);
}
.hs-cal__grid tbody td.hs-cal__day--evt-meeting{
  background-color: #e3ecf5;
  box-shadow: inset 4px 0 0 0 var(--hs-acc-meeting);
}
.hs-cal__grid tbody td.hs-cal__day--evt-family{
  background-color: #f7ead0;
  box-shadow: inset 4px 0 0 0 var(--hs-acc-family);
}
.hs-cal__grid tbody td.hs-cal__day--evt-default{
  background-color: #f6e1d4;
  box-shadow: inset 4px 0 0 0 var(--hs-acc-default);
}
/* On event cells nudge the inside padding so day number + chip
   clear the inset accent bar. */
.hs-cal__grid tbody td[class*="--evt-"]{
  padding-left: .85rem;
}

/* ------------------------------------------------------------
   Event chip
   ------------------------------------------------------------ */
.hs-cal__events{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.hs-cal__events > li{
  list-style: none;
  margin: 0;
  padding: 0;
}
.hs-cal__event-btn{
  appearance: none;
  font: inherit;
  font-family: 'Sora', sans-serif;
  text-align: left;
  width: 100%;
  color: var(--hs-ink);
  background: var(--hs-bone);
  border: 1px solid var(--hs-line);
  border-left: 4px solid var(--evt-accent, var(--hs-clay));
  border-radius: 8px;
  padding: .4rem .55rem .45rem .6rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.2;
  transition: background .2s var(--hs-ease), border-color .2s var(--hs-ease),
              transform .2s var(--hs-ease);
}
.hs-cal__event-btn:hover{
  background: var(--hs-bone-d);
  border-color: rgba(28, 26, 23, .22);
  border-left-color: var(--evt-accent, var(--hs-clay));
  transform: translateY(-1px);
}
.hs-cal__event-btn:focus-visible{
  outline: 2px solid var(--hs-clay);
  outline-offset: 2px;
}
.hs-cal__event-btn .hs-cal__event-title{
  display: block;
  font-family: 'Sora', sans-serif;
  font-size: .85rem;
  /* Weight 600 to match the rest of the GBCA site exactly — the
     site's heaviest sans is Sora 600 (.nav-cta, .school__contact
     links + dt labels, .kicker, .brand). Sora 700 looked subtly
     rounder/heavier than every other bold element in the design
     system; this lines the chip up with them. */
  font-weight: 600;
  line-height: 1.25;
  /* No ellipsis — full event name always renders, wrapping as
     needed. */
  overflow: visible;
  text-overflow: clip;
  word-break: normal;
}
.hs-cal__event-btn .hs-cal__event-time{
  display: block;
  font-family: 'Sora', sans-serif;
  font-size: .7rem;
  font-weight: 500;
  color: var(--hs-ink-soft);
  font-variant-numeric: tabular-nums;
  margin-top: .05rem;
}

/* Per-type chip accent (sets --evt-accent so the left edge
   matches the cell's left bar). */
.hs-cal__event-btn--closure   { --evt-accent: var(--hs-acc-closure);    }
.hs-cal__event-btn--program   { --evt-accent: var(--hs-acc-program);    }
.hs-cal__event-btn--enrollment{ --evt-accent: var(--hs-acc-enrollment); }
.hs-cal__event-btn--meeting   { --evt-accent: var(--hs-acc-meeting);    }
.hs-cal__event-btn--family    { --evt-accent: var(--hs-acc-family);     }
.hs-cal__event-btn--default   { --evt-accent: var(--hs-acc-default);    }

/* ------------------------------------------------------------
   Mobile list (<720px)
   ------------------------------------------------------------ */
.hs-cal__list{
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
}
.hs-cal__list-day{
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--hs-line);
}
.hs-cal__list-day:last-child{ border-bottom: none; }
.hs-cal__list-date{
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--hs-forest);
  margin: 0 0 .6rem;
  display: flex;
  align-items: baseline;
  gap: .6rem;
}
.hs-cal__list-date small{
  font-family: 'Sora', sans-serif;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hs-ink-soft);
}
.hs-cal__list-events{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.hs-cal__list-events .hs-cal__event-btn{
  font-size: .92rem;
  padding: .6rem .8rem;
  min-height: 44px;
}
@media (max-width: 719px){
  .hs-cal__grid{ display: none; }
  .hs-cal__list{ display: block; }
}

/* ------------------------------------------------------------
   Event detail disclosure (modeless aside)
   ------------------------------------------------------------ */
.hs-cal__detail{
  position: fixed;
  inset: auto 1rem 1rem 1rem;
  max-width: 520px;
  margin: 0 auto;
  background: var(--hs-paper);
  border: 1px solid var(--hs-line);
  border-top: 4px solid var(--hs-clay);
  border-radius: 12px;
  padding: 1.2rem 1.3rem 1.3rem;
  box-shadow: 0 24px 40px -16px rgba(28, 26, 23, .4);
  z-index: 1000;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--hs-ink);
}
@media (min-width: 720px){
  .hs-cal__detail{
    inset: auto auto 2rem 50%;
    transform: translateX(-50%);
  }
}
.hs-cal__detail[hidden]{ display: none; }
.hs-cal__detail-close{
  position: absolute;
  top: .5rem; right: .5rem;
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--hs-ink-soft);
}
.hs-cal__detail-close:hover{
  background: var(--hs-bone);
  color: var(--hs-ink);
}
.hs-cal__detail-close:focus-visible{
  outline: 2px solid var(--hs-clay);
  outline-offset: 2px;
}
.hs-cal__detail h3{
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--hs-forest);
  margin: 0 2rem .4rem 0;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.hs-cal__detail-meta{
  font-size: .85rem;
  color: var(--hs-ink-soft);
  margin: 0 0 .8rem;
}
.hs-cal__detail-meta strong{
  color: var(--hs-ink);
  font-weight: 600;
}
.hs-cal__detail-desc{
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* ------------------------------------------------------------
   Loading / error state
   ------------------------------------------------------------ */
.hs-cal__status{
  padding: 2rem 1rem;
  text-align: center;
  color: var(--hs-ink-soft);
  font-size: .95rem;
}
.hs-cal__status--error{
  color: var(--hs-clay-dk);
}

/* ============================================================
   Print — clean grid, ink-friendly, fits one Letter page
   ============================================================ */
@media print {
  .hs-cal{
    background: #fff !important;
    border: 1px solid #444;
    padding: 0;
    border-radius: 0;
  }
  .hs-cal__nav,
  .hs-cal__detail,
  .hs-cal__sr{
    display: none !important;
  }
  .hs-cal__title{ color: #000; font-size: 1.3rem; margin: 0 0 .6rem; }
  .hs-cal__kicker{ display: none; }
  .hs-cal__grid{
    border-collapse: collapse;
    border: 1px solid #444;
    page-break-inside: avoid;
  }
  .hs-cal__grid thead th{
    background: #fff;
    color: #000;
    font-size: .6rem;
    padding: .25rem;
    border: 1px solid #444;
  }
  .hs-cal__grid tbody tr{ height: auto; }
  .hs-cal__grid tbody td{
    background: #fff !important;
    box-shadow: none !important;
    padding: .2rem;
    border: 1px solid #444;
  }
  .hs-cal__day--today .hs-cal__day-num{
    background: transparent;
    color: #000;
    padding: 0;
    border: 1px solid #000;
    border-radius: 0;
  }
  .hs-cal__event-btn{
    background: #fff !important;
    color: #000 !important;
    border-color: #888 !important;
    border-left-width: 3px !important;
    font-size: .58rem !important;
    padding: .1rem .25rem;
  }
  .hs-cal__event-btn .hs-cal__event-title{ font-size: .58rem !important; }
  .hs-cal__event-btn .hs-cal__event-time{ font-size: .5rem !important; color: #444; }
  @page{ margin: 0.5in; }
}