/* ==========================================================================
   events.css — the calendar.

   Loaded only by the pages that need it: the list, the month grid, one
   event, and the printable season schedule. Everything here builds on the
   chips, badges and event rows already in zoiboyz.css.
   ========================================================================== */

/* -- The filter bar --------------------------------------------------------
   Sticky, because the list runs long and people scroll it while deciding
   what to narrow down. */

.zb-filters {
  position: sticky;
  top: 0;
  z-index: 20;
  padding-block: var(--zb-space-4);
  margin-bottom: var(--zb-space-4);
  background: var(--zb-bg);
  border-bottom: 1.5px solid var(--zb-rule);
}

.zb-filters__chips,
.zb-filters__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zb-space-2);
}

.zb-filters__row { margin-top: var(--zb-space-3); gap: var(--zb-space-3); }
.zb-filters__row .form-select { width: auto; min-width: 11rem; }
.zb-filters__row .form-control[type="search"] { width: auto; min-width: 12rem; flex: 1 1 12rem; }

.zb-filters__check {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  font-weight: 600;
}

.zb-filters__check input { width: 24px; height: 24px; }

/* A chip that is also a link, and can be switched on. */
.zb-chip[href] { text-decoration: none; }
.zb-chip[href]:hover { background: color-mix(in srgb, var(--chip-color) 12%, var(--zb-surface-raised)); }

/* Filled when it is switched on. The label and the icon invert against it —
   which only works because the chip colour is its own property: with
   "background: currentColor" the text would be the same colour as the
   background it sits on, and the chip would read as an empty pill. */
/* The page background as the text, so it flips with the theme: in dark mode
   the chip colours are lifted, and fixed paper on them was 2.1:1. */
.zb-chip.is-on {
  background: var(--chip-color);
  color: var(--zb-bg);
  border-color: var(--chip-color);
}

.zb-chip.is-on svg { fill: currentColor; }
.zb-chip--all { --chip-color: var(--zb-text-muted); }   /* stone in light, lifted in dark */

/* -- The list -------------------------------------------------------------- */

.zb-events__tools,
.zb-events__links,
.zb-events__years {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zb-space-2) var(--zb-space-4);
}

.zb-events__tools { justify-content: space-between; margin-bottom: var(--zb-space-5); }
.zb-events__count { margin: 0; font-weight: 600; }
.zb-events__links a { display: inline-flex; align-items: center; gap: 0.35rem; }

.zb-events__month {
  margin-top: var(--zb-space-7);
  margin-bottom: var(--zb-space-2);
  padding-bottom: var(--zb-space-2);
  border-bottom: 1.5px solid var(--zb-rule);
  font-size: var(--zb-size-h3);
}

.zb-event__main { min-width: 0; }
.zb-event__title a { text-decoration: none; }
.zb-event__title a:hover { text-decoration: underline; text-underline-offset: 0.18em; }
.zb-event__to { font-size: 0.75rem; font-weight: 600; color: var(--zb-text-muted); }
.zb-event__meta a { display: inline-flex; align-items: center; gap: 0.3rem; }

/* A past event stays readable, just clearly behind us. */
.zb-event--past .zb-event__date { opacity: 0.65; }

/* -- One event ------------------------------------------------------------- */

.zb-crumbs { margin-bottom: var(--zb-space-4); font-size: var(--zb-size-small); color: var(--zb-text-muted); }
.zb-crumbs a { color: inherit; }

.zb-event-head__chips { display: flex; flex-wrap: wrap; gap: var(--zb-space-2); margin-bottom: var(--zb-space-3); }

.zb-event-grid { display: grid; gap: var(--zb-space-6); margin-top: var(--zb-space-6); }

@media (min-width: 62em) {
  .zb-event-grid { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
}

.zb-factbox {
  padding: var(--zb-space-5);
  background: var(--zb-surface);
  border: 1.5px solid var(--zb-rule);
  border-radius: var(--zb-radius-lg);
}

.zb-factbox + .zb-factbox { margin-top: var(--zb-space-4); }

.zb-factbox__title {
  margin: var(--zb-space-4) 0 0.25rem;
  font-family: var(--zb-font-text);
  font-size: var(--zb-size-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zb-text-muted);
}

.zb-factbox__title:first-child { margin-top: 0; }
.zb-factbox p { margin-bottom: 0.5rem; }
.zb-factbox__links { display: flex; flex-wrap: wrap; gap: var(--zb-space-3); }
.zb-factbox__links a { display: inline-flex; align-items: center; gap: 0.35rem; }

.zb-factbox__actions { display: flex; flex-direction: column; gap: var(--zb-space-3); margin-top: var(--zb-space-5); }
.zb-factbox__actions .btn { width: 100%; justify-content: center; }

/* The club's flyer, under the facts. Usually a portrait page of small print:
   on a phone it is kept to a width that can be read rather than stretched,
   and tapping it opens the largest copy. */
.zb-event-flyer { max-width: 32rem; margin: var(--zb-space-4) 0 0; }
.zb-event-flyer a { display: block; }
.zb-event-flyer img {
  display: block;
  width: 100%;
  height: auto;
  border: 1.5px solid var(--zb-rule);
  border-radius: var(--zb-radius-lg);
  background-size: cover;
}
.zb-event-flyer figcaption { margin-top: var(--zb-space-2); font-size: var(--zb-size-small); color: var(--zb-text-muted); }

/* The ranch forecast, on events here within the week. */
.zb-weather { list-style: none; margin: 0; padding: 0; }

.zb-weather li {
  display: grid;
  grid-template-columns: 2.5rem auto 1fr auto;
  gap: var(--zb-space-3);
  align-items: baseline;
  padding-block: 0.4rem;
  border-bottom: 1px solid var(--zb-rule);
}

.zb-weather li:last-child { border-bottom: 0; }
.zb-weather__day { font-weight: 700; }
.zb-weather__temp { font-variant-numeric: tabular-nums; font-weight: 600; }
.zb-weather__low { color: var(--zb-text-muted); font-weight: 400; }
.zb-weather__text { color: var(--zb-text-muted); font-size: var(--zb-size-small); }
.zb-weather__rain { color: var(--zb-sport-akc); font-size: var(--zb-size-small); font-variant-numeric: tabular-nums; }

/* -- The month grid -------------------------------------------------------- */

.zb-month__nav { display: flex; flex-wrap: wrap; gap: var(--zb-space-3); margin-bottom: var(--zb-space-5); }
.zb-month__nav .btn { display: inline-flex; align-items: center; gap: 0.4rem; }

.zb-month {
  border: 1.5px solid var(--zb-rule);
  border-radius: var(--zb-radius-lg);
  overflow: hidden;
}

.zb-month__head,
.zb-month__week { display: grid; grid-template-columns: repeat(7, 1fr); }

.zb-month__head { background: var(--zb-bg-tint); }

.zb-month__dayname {
  padding: 0.5rem;
  font-size: var(--zb-size-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--zb-text-muted);
}

.zb-month__cell {
  min-height: 7rem;
  padding: 0.4rem;
  border-top: 1px solid var(--zb-rule);
  border-left: 1px solid var(--zb-rule);
}

.zb-month__cell:first-child { border-left: 0; }
.zb-month__cell--empty { background: color-mix(in srgb, var(--zb-bg-tint) 50%, transparent); }
.zb-month__cell.is-quiet { background: color-mix(in srgb, var(--zb-bg-tint) 25%, transparent); }
.zb-month__cell.is-today { outline: 2px solid var(--zb-pasture); outline-offset: -2px; }
.zb-month__cell:focus-visible { outline: 3px solid var(--zb-focus); outline-offset: -3px; }

.zb-month__num { display: block; font-weight: 700; font-variant-numeric: tabular-nums; }
.zb-month__events { list-style: none; margin: 0.25rem 0 0; padding: 0; }

/* 24px tall at least (WCAG 2.2 target size): the grid shows on tablets,
   and three 18px links stacked edge to edge are easy to mis-tap. Three
   of them and the day number still fit the 7rem cell. */
.zb-month__event {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 1.5rem;
  padding: 0.1rem 0;
  font-size: 0.75rem;
  line-height: 1.25;
  text-decoration: none;
  color: var(--zb-text);
}

.zb-month__event:hover { text-decoration: underline; }
.zb-month__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.zb-month__dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}

/* The dot takes the sport colour; the label stays readable. */
.zb-month__event--asfa .zb-month__dot         { background: var(--zb-sport-asfa); }
.zb-month__event--akc .zb-month__dot          { background: var(--zb-sport-akc); }
.zb-month__event--lgra .zb-month__dot         { background: var(--zb-sport-lgra); }
.zb-month__event--notra .zb-month__dot        { background: var(--zb-sport-notra); }
.zb-month__event--zassc .zb-month__dot        { background: var(--zb-sport-zassc); }
.zb-month__event--funrun .zb-month__dot       { background: var(--zb-sport-funrun); }
.zb-month__event--conformation .zb-month__dot { background: var(--zb-sport-conformation); }
.zb-month__event--nationals .zb-month__dot    { background: var(--zb-sport-nationals); }

.zb-month__more { font-size: 0.7rem; color: var(--zb-text-muted); }
.zb-month__list { margin-top: var(--zb-space-7); }

/* A grid of 40px squares is no use on a phone. The list underneath is. */
@media (max-width: 47.99em) {
  .zb-month { display: none; }
}

/* -- The printable season schedule ----------------------------------------- */

.zb-schedule__tools { display: flex; flex-wrap: wrap; gap: var(--zb-space-3); align-items: center; margin-bottom: var(--zb-space-5); }
.zb-schedule__years { display: flex; flex-wrap: wrap; gap: var(--zb-space-2); }

.zb-legend { margin-bottom: var(--zb-space-6); }
.zb-legend ul { display: flex; flex-wrap: wrap; gap: var(--zb-space-2); list-style: none; margin: 0 0 var(--zb-space-3); padding: 0; }

.zb-schedule__month { margin-top: var(--zb-space-6); font-size: var(--zb-size-h3); }

.zb-schedule__table { width: 100%; margin-bottom: var(--zb-space-5); }
.zb-schedule__table th,
.zb-schedule__table td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--zb-rule); text-align: left; vertical-align: top; }
.zb-schedule__table th { font-size: var(--zb-size-eyebrow); text-transform: uppercase; letter-spacing: 0.06em; color: var(--zb-text-muted); }
.zb-schedule__table .zb-event--ranch td { font-weight: 700; }
.zb-schedule__table .zb-event--tentative td { font-style: italic; }

/* On screen these belong only to the printed sheet. print.css shows them. */
.zb-print-header,
.zb-print-updated { display: none; }