/* ==========================================================================
   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 premium list, in the browser's own PDF viewer (assets/js/pdf-view.js).
   Nearly a screen tall, so a page of it reads without scrolling the page and
   the frame at once; never so short that a page is a sliver, nor so tall on
   a big monitor that its foot is out of reach. Without the viewer only the
   link shows, and it says "Read the premium list" instead of "Open the
   premium list full size". */
.zb-pdf__frame {
  display: block;
  width: 100%;
  height: clamp(32rem, 85vh, 60rem);
  margin-bottom: var(--zb-space-3);
  border: 1.5px solid var(--zb-rule);
  border-radius: var(--zb-radius-lg);
  background: var(--zb-surface);
}
.zb-pdf:not(.is-open) .zb-pdf__frame,
.zb-pdf__full,
.zb-pdf.is-open .zb-pdf__read { display: none; }
.zb-pdf.is-open .zb-pdf__full { display: inline; }
.zb-pdf__link { display: inline-flex; align-items: center; gap: 0.5rem; }

/* 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; }