/* Central Mass Kids Calendar
   Palette and type follow MOMS Club International's observed brand (momsclub.org, verified
   2026-08-08): a single saturated blue on white with black text, Marcellus display over Jost
   body at weight 500. Chapters are not required to inherit this, so it lives in one block and
   can be swapped without touching layout. */

:root {
  /* MOMS Club observed brand */
  --brand:      #0c71c3;   /* primary blue: headings, links, actions */
  --brand-dark: #034c8c;   /* hover / deeper accent */
  --brand-soft: #3f87c1;   /* secondary blue */
  --brand-wash: #E8F1FA;

  --ink:        #000000;   /* body text, per --gcid-body-color */
  --ink-soft:   #4A4F55;
  --ink-faint:  #7C848C;
  --paper:      #FFFFFF;
  --card:       #FFFFFF;
  --rule:       #DCE3EA;

  --accent:     var(--brand);
  --accent-ink: var(--brand-dark);
  --accent-wash:var(--brand-wash);

  --stamp:      #034c8c;
  --stamp-wash: #E8F1FA;

  --free:       #0c71c3;
  --free-wash:  #E8F1FA;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(3,76,140,.07), 0 6px 16px -10px rgba(3,76,140,.28);

  --f: 'Jost', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fd: 'Marcellus', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 18px; }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: 6px; z-index: 50;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------------------------------------------------------------- masthead */

.masthead { padding: 30px 0 20px; }
.eyebrow {
  margin: 0 0 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-ink);
}
.masthead h1 {
  margin: 0;
  font-family: var(--fd);
  font-size: clamp(32px, 9.5vw, 52px);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--brand);
  line-height: 1.02;
}
.lede {
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
  max-width: 46ch;
}

/* ---------------------------------------------------------------- controls */

.controls {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
  padding: 12px 0;
}

.chiprow {
  display: flex; gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
  margin: 0 -18px 10px;
  padding-inline: 18px;
}
.chiprow::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  font: inherit; font-size: 14px; font-weight: 600;
  padding: 8px 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.chip:hover { border-color: var(--ink-faint); color: var(--ink); }
.chip.is-on {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}

.selrow { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }

.sel { display: flex; flex-direction: column; gap: 3px; flex: 1 1 140px; min-width: 0; }
.sel > span {
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint);
}
.sel select {
  font: inherit; font-size: 14.5px; font-weight: 500;
  padding: 7px 10px;
  border: 1px solid var(--rule); border-radius: 8px;
  background: var(--card); color: var(--ink);
  width: 100%;
}

.check { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink-soft); flex: 0 0 auto; }
.check input { width: 17px; height: 17px; accent-color: var(--accent); }

:where(button, select, input, a):focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- results */

main { padding: 18px 0 40px; }

.count { margin: 0 0 4px; font-size: 13.5px; color: var(--ink-soft); font-weight: 500; }
.agenote {
  margin: 0 0 14px; font-size: 13px; color: var(--ink-soft);
  background: var(--stamp-wash); border-left: 3px solid var(--stamp);
  padding: 9px 12px; border-radius: 0 6px 6px 0;
}

/* Signature: the day divider set as a library date stamp. */
.daystamp {
  display: inline-flex; align-items: baseline; gap: 9px;
  margin: 26px 0 12px;
  padding: 6px 13px 5px;
  border: 2px solid var(--stamp);
  border-radius: 3px;
  color: var(--stamp);
  transform: rotate(-1.1deg);
  transform-origin: left center;
}
.daystamp:first-of-type { margin-top: 6px; }
.daystamp b {
  font-size: 12.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
}
.daystamp i {
  font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; opacity: .72;
}

.card {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 0 14px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 14px 15px;
  margin-bottom: 9px;
  box-shadow: var(--shadow);
}

/* The risk: time leads, not the title. A parent's binding constraint is when. */
.time {
  grid-row: 1 / span 3;
  font-size: 17px; font-weight: 800; letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1.15;
  padding-top: 1px;
}
.time small { display: block; font-size: 12px; font-weight: 600; color: var(--ink-faint); letter-spacing: 0; }

.card h3 { margin: 0 0 3px; font-family: var(--fd); font-size: 17px; font-weight: 400; line-height: 1.3; letter-spacing: 0; color: var(--brand); }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }

.where { margin: 0 0 7px; font-size: 13.5px; color: var(--ink-soft); }
.where b { font-weight: 600; color: var(--ink); }

.tags { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.tag {
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
  padding: 3px 8px; border-radius: 5px;
  background: var(--paper); color: var(--ink-soft); border: 1px solid var(--rule);
}
.tag.age  { background: var(--accent-wash); color: var(--accent-ink); border-color: transparent; }
.tag.free { background: var(--free-wash);   color: var(--free);       border-color: transparent; }
.tag.reg  { background: var(--stamp-wash);  color: var(--stamp);      border-color: transparent; }
.tag.unk  { color: var(--ink-faint); font-weight: 500; }

.go {
  grid-column: 2;
  margin-top: 9px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13.5px; font-weight: 700;
  color: var(--accent-ink); text-decoration: none;
  justify-self: start;
}
.go:hover { text-decoration: underline; text-underline-offset: 3px; }
.go svg { width: 13px; height: 13px; }

.empty {
  margin: 30px 0; padding: 22px; text-align: center;
  background: var(--card); border: 1px dashed var(--rule); border-radius: var(--radius);
  color: var(--ink-soft); font-size: 14.5px;
}
.empty b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 5px; }

/* ---------------------------------------------------------------- footer */

.foot { border-top: 1px solid var(--rule); padding: 24px 0 34px; margin-top: 20px; }
.foot-lead { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-soft); max-width: 52ch; }
.foot-src  { margin: 0 0 16px; font-size: 12px; color: var(--ink-faint); line-height: 1.7; }
.foot-tag  { margin: 0; font-size: 12.5px; color: var(--ink-faint); }
.foot-tag a { color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.foot-tag a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- responsive */

@media (min-width: 620px) {
  .card { grid-template-columns: 92px 1fr; padding: 16px 18px; }
  .time { font-size: 19px; }
  .card h3 { font-size: 19px; }
  .masthead { padding: 44px 0 26px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .daystamp { transform: none; }
}

.foot-tm {
  margin: 14px 0 0;
  font-size: 11px; line-height: 1.6; color: var(--ink-faint);
  max-width: 60ch;
}