/* ==========================================================================
   KCAI KANSAS CITY PET EVENTS
   ==========================================================================

   MOBILE FIRST, WITHOUT QUALIFICATION. Every base rule below is the phone
   layout. There is no max-width query anywhere in this file - the only
   breakpoints are min-width, so a narrow viewport never has to undo a desktop
   rule it was served first.

   THE SPECIFICITY RULE - READ BEFORE ADDING A RULE.

   The KCAI design system sets `body.kcai h2`, `body.kcai p` and `body.kcai a`
   at specificity (0,1,1). A bare class is (0,1,0) and LOSES to them, silently:
   the symptom is a heading rendering at full display size, or an anchor button
   drawing blue text on a blue fill. That trap has cost this project four
   deploys across three plugins.

   So every rule here whose subject is a heading, a paragraph or an anchor is
   written as `.kcev .kcev-thing` - two classes, (0,2,0), which beats (0,1,1)
   on class count. No !important is used anywhere in this file.

   THE FALLBACK BLOCK. Every colour is a var() with a literal fallback, and the
   :root block below defines the tokens if the design system is absent. This
   plugin is self-contained: deactivate the presentation layer and the calendar
   is still legible and still on-brand, rather than unstyled white-on-white.
   ========================================================================== */

.kcev {
  /* Brand, matching the KCAI design system exactly. Fallbacks only - if
     kcai-ui.css is loaded, its :root values win because they are defined on a
     higher-level element. */
  --kcev-blue:     var(--kcai-blue, #00A4FD);
  --kcev-white:    var(--kcai-white, #FEFEFE);
  --kcev-black:    var(--kcai-black, #000000);
  --kcev-elevated: var(--kcai-elevated, #080B0F);
  --kcev-panel:    var(--kcai-panel, #10151B);
  --kcev-charcoal: var(--kcai-charcoal, #181F27);
  --kcev-border:   var(--kcai-border, #2A3541);
  --kcev-silver:   var(--kcai-silver, #C7D0D9);
  --kcev-muted:    var(--kcai-muted, #98A5B3);
  --kcev-slate:    var(--kcai-slate, #657789);
  --kcev-success:  var(--kcai-success, #31C48D);
  --kcev-warning:  var(--kcai-warning, #F5A623);
  --kcev-urgent:   var(--kcai-urgent, #E5484D);

  --kcev-font-head: var(--kcai-font-head, 'Space Grotesk', 'Segoe UI', system-ui, sans-serif);
  --kcev-font-body: var(--kcai-font-body, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);

  --kcev-s1: 4px;  --kcev-s2: 8px;  --kcev-s3: 12px; --kcev-s4: 16px;
  --kcev-s5: 24px; --kcev-s6: 32px; --kcev-s7: 48px; --kcev-s8: 64px;

  --kcev-radius: var(--kcai-radius, 12px);
  --kcev-radius-sm: var(--kcai-radius-sm, 8px);
  --kcev-maxw: var(--kcai-maxw, 1200px);

  /* CATEGORY FAMILY COLOURS.
     Seven, not sixteen. See KCAI_EV_Vocabulary for why the categories are
     grouped, and for the measured contrast of each on the panel surface. Every
     one clears 4.5:1 as text on #10151B; none is used as a fill behind body
     text. */
  --kcev-fam-adoption:  #00A4FD;
  --kcev-fam-clinic:    #31C48D;
  --kcev-fam-tnr:       #2DD4BF;
  --kcev-fam-community: #A78BFA;
  --kcev-fam-support:   #F5A623;
  --kcev-fam-education: #C7D0D9;
  --kcev-fam-other:     #98A5B3;

  /* The one variable a card reads. Each .kcev-fam-* class rebinds it, so the
     dot, the border accent and the category label all recolour from a single
     assignment instead of three rules per family. */
  --kcev-accent: var(--kcev-fam-other);

  font-family: var(--kcev-font-body);
  color: var(--kcev-silver);
  line-height: 1.6;
}

/* BOX-SIZING, AND WHY IT IS DECLARED HERE RATHER THAN ASSUMED.
   Twenty Twenty-Five does not apply border-box to every element, so a component
   with `width: 100%` and horizontal padding computes to wider than its
   container. On the homepage that made the section 407px inside a 390px
   viewport and gave the whole PAGE a horizontal scrollbar - while every
   descendant measured clean, because the offender was the section element
   itself. Scoped to this plugin's own namespace so it cannot alter the theme. */
.kcev, .kcev *, .kcev *::before, .kcev *::after,
.kcev-page, .kcev-page *, .kcev-event, .kcev-event * { box-sizing: border-box; }

.kcev-fam-adoption  { --kcev-accent: var(--kcev-fam-adoption); }
.kcev-fam-clinic    { --kcev-accent: var(--kcev-fam-clinic); }
.kcev-fam-tnr       { --kcev-accent: var(--kcev-fam-tnr); }
.kcev-fam-community { --kcev-accent: var(--kcev-fam-community); }
.kcev-fam-support   { --kcev-accent: var(--kcev-fam-support); }
.kcev-fam-education { --kcev-accent: var(--kcev-fam-education); }
.kcev-fam-other     { --kcev-accent: var(--kcev-fam-other); }

/* Escape the block theme's constrained layout. Twenty Twenty-Five caps every
   direct child of .is-layout-constrained at ~620px, which renders the whole
   calendar as a narrow column inside a wide black page. */
.kcev,
.is-layout-constrained > .kcev,
.wp-block-post-content > .kcev {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.kcev-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Focus: box-shadow, not outline, so a rounded control is not clipped by an
   ancestor's overflow. Matches the design system's own focus treatment. */
.kcev a:focus-visible,
.kcev button:focus-visible,
.kcev input:focus-visible,
.kcev select:focus-visible,
.kcev textarea:focus-visible,
.kcev summary:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px var(--kcev-black), 0 0 0 6px var(--kcev-blue);
  border-radius: var(--kcev-radius-sm);
}

/* ------------------------------------------------------------------ hero */

.kcev-hero {
  padding: var(--kcev-s6) var(--kcev-s4) var(--kcev-s7);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(0,164,253,0.14) 0%, rgba(0,164,253,0) 62%),
    var(--kcev-black);
  border-bottom: 1px solid var(--kcev-border);
}

.kcev .kcev-hero__eyebrow {
  font-family: var(--kcev-font-head);
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--kcev-blue);
  margin: 0 0 var(--kcev-s3);
}

.kcev .kcev-hero__title {
  font-family: var(--kcev-font-head);
  /* clamp so the headline never needs a breakpoint of its own. The 1.85rem
     floor is the largest size that keeps "Kansas City Pet Events Calendar" to
     three lines at 375px without hyphenation. */
  font-size: clamp(1.85rem, 7vw, 3.4rem);
  font-weight: 700; line-height: 1.1; letter-spacing: -0.02em;
  color: var(--kcev-white);
  margin: 0 0 var(--kcev-s4);
  max-width: 18ch;
}

.kcev .kcev-hero__lede {
  font-size: 1.05rem;
  color: var(--kcev-muted);
  max-width: 60ch;
  margin: 0 0 var(--kcev-s5);
}

.kcev .kcev-hero__stats {
  display: flex; flex-wrap: wrap; gap: var(--kcev-s4);
  margin: 0 0 var(--kcev-s5); padding: 0;
  font-size: 0.92rem; color: var(--kcev-muted);
}
.kcev-hero__stats strong { color: var(--kcev-white); font-size: 1.15rem; }

.kcev .kcev-hero__actions {
  display: flex; flex-wrap: wrap; gap: var(--kcev-s3);
  margin: 0 0 var(--kcev-s5);
}

.kcev .kcev-hero__powered {
  font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--kcev-muted);
  margin: 0 0 var(--kcev-s4);
}

.kcev .kcev-hero__disclaimer {
  font-size: 0.88rem; color: var(--kcev-muted);
  border-left: 2px solid var(--kcev-border);
  padding-left: var(--kcev-s3);
  max-width: 68ch; margin: 0;
}

/* --------------------------------------------------------------- buttons */

/* Two classes, so an <a class="kcev-btn"> beats `body.kcai a {color:...}` at
   (0,1,1). This is the exact bug that shipped blue-on-blue buttons at
   presentation v1.0.1 and again in the matching plugin. */
.kcev .kcev-btn,
.kcev-card .kcev-btn,
.kcev-event .kcev-btn {
  display: inline-flex; align-items: center; justify-content: center;
  /* 44px is the minimum comfortable touch target, and this page is used
     one-handed on a phone in a car park more than anywhere else. */
  min-height: 44px;
  padding: var(--kcev-s2) var(--kcev-s4);
  border: 1px solid var(--kcev-border);
  border-radius: var(--kcev-radius-sm);
  background: var(--kcev-charcoal);
  color: var(--kcev-white);
  font-family: var(--kcev-font-body);
  font-size: 0.92rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.kcev .kcev-btn:hover,
.kcev-card .kcev-btn:hover,
.kcev-event .kcev-btn:hover {
  background: var(--kcev-panel);
  border-color: var(--kcev-blue);
  color: var(--kcev-white);
}

.kcev .kcev-btn--primary,
.kcev-card .kcev-btn--primary,
.kcev-event .kcev-btn--primary {
  background: var(--kcev-blue);
  border-color: var(--kcev-blue);
  /* #001018 on #00A4FD measures 7.11:1. Pure black would be higher contrast
     and reads as a hole in the button; this is the design system's own value. */
  color: #001018;
}
.kcev .kcev-btn--primary:hover,
.kcev-card .kcev-btn--primary:hover,
.kcev-event .kcev-btn--primary:hover {
  background: #33B8FE; border-color: #33B8FE; color: #001018;
}

.kcev .kcev-btn--quiet,
.kcev-card .kcev-btn--quiet,
.kcev-event .kcev-btn--quiet {
  background: transparent; border-color: var(--kcev-border); color: var(--kcev-muted);
}
.kcev .kcev-btn--quiet:hover { color: var(--kcev-white); }

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

.kcev-controls {
  padding: var(--kcev-s5) var(--kcev-s4);
  background: var(--kcev-elevated);
  border-bottom: 1px solid var(--kcev-border);
  display: grid; gap: var(--kcev-s4);
}

.kcev-controls__row { display: grid; gap: var(--kcev-s3); }
.kcev-controls__row--search { grid-template-columns: 1fr; }

.kcev-field { display: grid; gap: var(--kcev-s1); }
.kcev .kcev-field > label,
.kcev-controls legend {
  font-family: var(--kcev-font-head);
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--kcev-muted);
}

.kcev-field input[type="search"],
.kcev-field input[type="text"],
.kcev-field input[type="url"],
.kcev-field input[type="email"],
.kcev-field input[type="date"],
.kcev-field input[type="time"],
.kcev-field input[type="file"],
.kcev-field select,
.kcev-field textarea {
  width: 100%;
  /* 16px exactly. Any smaller and iOS Safari zooms the whole page on focus,
     which on a filter form leaves the reader scrolled sideways into nothing. */
  font-size: 16px;
  min-height: 44px;
  padding: var(--kcev-s2) var(--kcev-s3);
  background: var(--kcev-panel);
  border: 1px solid var(--kcev-border);
  border-radius: var(--kcev-radius-sm);
  color: var(--kcev-white);
  font-family: var(--kcev-font-body);
}
.kcev-field textarea { min-height: 120px; line-height: 1.5; }
.kcev-field input::placeholder,
.kcev-field textarea::placeholder { color: var(--kcev-muted); }

/* The native date/time pickers render a black glyph on a dark field in
   WebKit and Chromium. Inverting it is the only way to see the control. */
.kcev-field input[type="date"]::-webkit-calendar-picker-indicator,
.kcev-field input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(0.7);
}

.kcev .kcev-hint {
  font-size: 0.84rem; color: var(--kcev-muted); margin: var(--kcev-s1) 0 0;
}
.kcev-req { color: var(--kcev-blue); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; }
.kcev-opt { color: var(--kcev-muted); font-size: 0.72rem; font-weight: 400; text-transform: none; letter-spacing: 0; }

/* Segmented controls built on radios, so arrow keys work and a screen reader
   announces one group of mutually exclusive choices - which is what they are.
   A row of <button>s would look identical and be none of those things. */
.kcev-controls__ranges,
.kcev-controls__species {
  border: 0; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: var(--kcev-s2);
  align-items: center;
}
.kcev-controls__ranges legend,
.kcev-controls__species legend { width: 100%; margin-bottom: var(--kcev-s2); }

.kcev-seg input { position: absolute; opacity: 0; pointer-events: none; }
.kcev .kcev-seg label {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: var(--kcev-s2) var(--kcev-s4);
  border: 1px solid var(--kcev-border);
  border-radius: 999px;
  background: var(--kcev-panel);
  color: var(--kcev-silver);
  font-size: 0.9rem; font-weight: 600;
  cursor: pointer;
}
.kcev-seg input:checked + label {
  background: var(--kcev-blue); border-color: var(--kcev-blue); color: #001018;
}
/* :focus-visible does not exist on a visually hidden input, so the ring has to
   be drawn on the label. Without this the segmented control is completely
   invisible to keyboard navigation. */
.kcev-seg input:focus-visible + label {
  box-shadow: 0 0 0 3px var(--kcev-black), 0 0 0 6px var(--kcev-blue);
}

.kcev-check { display: flex; align-items: flex-start; gap: var(--kcev-s2); }
.kcev-check input { width: 22px; height: 22px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--kcev-blue); }
.kcev .kcev-check label {
  font-size: 0.95rem; color: var(--kcev-silver);
  text-transform: none; letter-spacing: 0; font-weight: 500;
  cursor: pointer; line-height: 1.4;
}
.kcev-check--authority { padding: var(--kcev-s3); background: var(--kcev-panel); border: 1px solid var(--kcev-border); border-radius: var(--kcev-radius-sm); }

.kcev-controls__cats { border: 1px solid var(--kcev-border); border-radius: var(--kcev-radius-sm); background: var(--kcev-panel); }
.kcev-controls__cats > summary {
  padding: var(--kcev-s3) var(--kcev-s4);
  min-height: 44px; display: flex; align-items: center; gap: var(--kcev-s2);
  cursor: pointer; font-weight: 600; color: var(--kcev-white);
  font-family: var(--kcev-font-head); font-size: 0.9rem;
}
.kcev-controls__cats fieldset {
  border: 0; margin: 0; padding: 0 var(--kcev-s4) var(--kcev-s4);
  display: grid; gap: var(--kcev-s2);
}
.kcev-controls__badge {
  background: var(--kcev-blue); color: #001018;
  border-radius: 999px; padding: 0 8px; font-size: 0.78rem;
}

.kcev-check--cat label { display: flex; align-items: center; gap: var(--kcev-s2); }

.kcev-dot {
  width: 10px; height: 10px; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--kcev-accent);
}
.kcev-check--cat .kcev-dot { background: var(--kcev-accent); }

.kcev-controls__foot { display: flex; flex-wrap: wrap; gap: var(--kcev-s3); align-items: center; }
.kcev-viewtoggle { display: inline-flex; gap: 0; }
.kcev-viewtoggle .kcev-btn { border-radius: 0; }
.kcev-viewtoggle .kcev-btn:first-child { border-radius: var(--kcev-radius-sm) 0 0 var(--kcev-radius-sm); }
.kcev-viewtoggle .kcev-btn:last-child { border-radius: 0 var(--kcev-radius-sm) var(--kcev-radius-sm) 0; border-left: 0; }
.kcev-viewtoggle .kcev-btn.is-active { background: var(--kcev-blue); border-color: var(--kcev-blue); color: #001018; }

/* ------------------------------------------------------- strips and grid */

.kcev-strip,
.kcev-results,
.kcev-submit,
.kcev-missing {
  padding: var(--kcev-s7) var(--kcev-s4);
  border-bottom: 1px solid var(--kcev-border);
}
.kcev-strip__head,
.kcev-results__head { margin-bottom: var(--kcev-s5); }

.kcev .kcev-strip__head h2,
.kcev .kcev-results__head h2,
.kcev .kcev-submit__head h2,
.kcev .kcev-missing h2 {
  font-family: var(--kcev-font-head);
  font-size: clamp(1.4rem, 4.6vw, 2rem);
  font-weight: 600; line-height: 1.15; letter-spacing: -0.01em;
  color: var(--kcev-white);
  margin: 0 0 var(--kcev-s2);
}
.kcev .kcev-strip__head p,
.kcev .kcev-results__count { color: var(--kcev-muted); margin: 0; font-size: 0.95rem; }

.kcev-grid,
.kcev-list { display: grid; gap: var(--kcev-s4); }

.kcev .kcev-strip__more { margin: var(--kcev-s5) 0 0; }
.kcev .kcev-strip__more a { color: var(--kcev-blue); font-weight: 600; }

.kcev .kcev-empty {
  color: var(--kcev-muted);
  padding: var(--kcev-s5);
  border: 1px dashed var(--kcev-border);
  border-radius: var(--kcev-radius);
  margin: 0;
}

/* ------------------------------------------------------------------ card */

.kcev-card {
  background: var(--kcev-panel);
  border: 1px solid var(--kcev-border);
  /* The accent is a left rail rather than a fill. Sixteen categories as
     background colours would be the "visually chaotic" outcome the brief rules
     out; as a 3px rail the colour is scannable and the surface stays one
     colour across the whole page. */
  border-left: 3px solid var(--kcev-accent);
  border-radius: var(--kcev-radius);
  padding: var(--kcev-s4);
  display: grid; gap: var(--kcev-s3);
  align-content: start;
}

.kcev-card--past { opacity: 0.62; }
.kcev-card--disrupted { border-color: var(--kcev-urgent); }

.kcev .kcev-card__alert {
  margin: 0;
  padding: var(--kcev-s2) var(--kcev-s3);
  background: rgba(229, 72, 77, 0.14);
  border: 1px solid var(--kcev-urgent);
  border-radius: var(--kcev-radius-sm);
  color: var(--kcev-white);
  font-size: 0.88rem;
  display: grid; gap: 2px;
}
.kcev-card__alert strong { letter-spacing: 0.08em; color: #FF9AA0; }

.kcev-card__head { display: grid; gap: var(--kcev-s1); }

.kcev .kcev-card__cat,
.kcev .kcev-event__cat {
  display: flex; align-items: center; gap: var(--kcev-s2);
  font-family: var(--kcev-font-head);
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--kcev-accent);
  margin: 0;
}

.kcev .kcev-card__title {
  font-family: var(--kcev-font-head);
  font-size: 1.16rem; font-weight: 600; line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
}
.kcev .kcev-card__title a { color: var(--kcev-white); text-decoration: none; }
.kcev .kcev-card__title a:hover { color: var(--kcev-blue); text-decoration: underline; }

.kcev .kcev-card__org { margin: 0; font-size: 0.9rem; color: var(--kcev-muted); }

.kcev-card__facts {
  margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--kcev-s3);
}
.kcev-fact { min-width: 0; }
.kcev-card__facts dt {
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--kcev-muted); margin-bottom: 2px;
}
.kcev-card__facts dd {
  margin: 0; font-size: 0.94rem; color: var(--kcev-white);
  /* Long venue names must wrap rather than push the card wide. overflow-wrap
     alone does not break an unbroken string on some engines. */
  overflow-wrap: anywhere; word-break: break-word;
}
.kcev-venue, .kcev-city { display: block; }
.kcev-city { color: var(--kcev-muted); font-size: 0.88rem; }
.kcev-free { color: var(--kcev-success); font-weight: 600; }

.kcev .kcev-card__tags {
  display: flex; flex-wrap: wrap; gap: var(--kcev-s2);
  margin: 0;
}
.kcev-tag {
  font-size: 0.76rem;
  padding: 3px 10px;
  border: 1px solid var(--kcev-border);
  border-radius: 999px;
  color: var(--kcev-muted);
  background: var(--kcev-charcoal);
}
.kcev-tag--reg { color: var(--kcev-warning); border-color: rgba(245,166,35,0.4); }

.kcev .kcev-card__summary {
  margin: 0; font-size: 0.94rem; color: var(--kcev-silver);
}

.kcev .kcev-card__actions {
  display: flex; flex-wrap: wrap; gap: var(--kcev-s2);
  margin: 0;
}
.kcev-card__actions .kcev-btn { font-size: 0.84rem; padding: var(--kcev-s2) var(--kcev-s3); }

/* ----------------------------------------------------------- trust line */

.kcev .kcev-trust {
  margin: 0; padding-top: var(--kcev-s3);
  border-top: 1px solid var(--kcev-border);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--kcev-s2);
  font-size: 0.8rem;
}
.kcev-trust__badge {
  font-weight: 700; letter-spacing: 0.04em;
  padding: 2px 10px; border-radius: 999px;
  background: rgba(49,196,141,0.14);
  border: 1px solid var(--kcev-success);
  color: var(--kcev-success);
}
/* A submitted event's badge is deliberately NOT green. Green reads as
   "checked", and the whole point of this state is that KCAI has not checked
   it. See KCAI_EV_Vocabulary on the three verification states. */
.kcev-trust__badge--submitted {
  background: rgba(152,165,179,0.12);
  border-color: var(--kcev-muted); color: var(--kcev-muted);
}
.kcev-trust__badge--pending {
  background: rgba(245,166,35,0.12);
  border-color: var(--kcev-warning); color: var(--kcev-warning);
}
.kcev-trust__date { color: var(--kcev-muted); }

/* ------------------------------------------------------------ pagination */

.kcev-pager { display: flex; flex-wrap: wrap; gap: var(--kcev-s2); margin-top: var(--kcev-s5); }
.kcev .kcev-pager__link {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--kcev-border); border-radius: var(--kcev-radius-sm);
  background: var(--kcev-panel); color: var(--kcev-silver);
  text-decoration: none; font-weight: 600;
}
.kcev .kcev-pager__link.is-current {
  background: var(--kcev-blue); border-color: var(--kcev-blue); color: #001018;
}

.kcev-emptystate {
  padding: var(--kcev-s6) var(--kcev-s4);
  border: 1px dashed var(--kcev-border);
  border-radius: var(--kcev-radius);
  text-align: left;
}
.kcev .kcev-emptystate__title {
  font-family: var(--kcev-font-head); font-size: 1.15rem;
  color: var(--kcev-white); margin: 0 0 var(--kcev-s2);
}
.kcev .kcev-emptystate p { color: var(--kcev-muted); }

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

.kcev-month { display: grid; gap: var(--kcev-s3); }
.kcev-month__head { display: flex; align-items: center; justify-content: space-between; gap: var(--kcev-s3); }
.kcev .kcev-month__label { font-family: var(--kcev-font-head); font-size: 1.15rem; color: var(--kcev-white); margin: 0; }

.kcev-month__grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  background: var(--kcev-border);
  border: 1px solid var(--kcev-border);
  border-radius: var(--kcev-radius-sm);
  overflow: hidden;
}
.kcev-month__dow {
  background: var(--kcev-charcoal); color: var(--kcev-muted);
  font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  text-align: center; padding: var(--kcev-s2) 0;
}
.kcev-month__cell {
  background: var(--kcev-panel);
  /* A square-ish cell at every width. At 375px each column is ~48px, which is
     enough for the date number and up to two dots - hence the dot summary on
     phones and full titles only from 700px. */
  min-height: 62px;
  padding: 4px;
  display: flex; flex-direction: column; gap: 2px;
}
.kcev-month__cell--empty { background: var(--kcev-elevated); }
.kcev-month__cell--today { box-shadow: inset 0 0 0 2px var(--kcev-blue); }
.kcev-month__num { font-size: 0.74rem; color: var(--kcev-muted); }
.kcev-month__cell--has .kcev-month__num { color: var(--kcev-white); font-weight: 700; }

.kcev-month__dots { display: flex; flex-wrap: wrap; gap: 3px; }
.kcev-month__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--kcev-accent); }

.kcev-month__item { display: none; }
.kcev .kcev-month__more { font-size: 0.68rem; color: var(--kcev-muted); margin: 0; }

.kcev-month__legend { display: flex; flex-wrap: wrap; gap: var(--kcev-s3); font-size: 0.78rem; color: var(--kcev-muted); }
.kcev-month__legend span { display: inline-flex; align-items: center; gap: 6px; }

/* -------------------------------------------------------------- the form */

.kcev-form { display: grid; gap: var(--kcev-s5); margin-top: var(--kcev-s5); }
.kcev-form__group {
  border: 1px solid var(--kcev-border);
  border-radius: var(--kcev-radius);
  background: var(--kcev-elevated);
  padding: var(--kcev-s4);
  display: grid; gap: var(--kcev-s4);
  margin: 0;
}
.kcev-form__group legend {
  font-family: var(--kcev-font-head);
  font-size: 0.9rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--kcev-blue);
  padding: 0 var(--kcev-s2);
}
.kcev-form__row { display: grid; gap: var(--kcev-s4); }

.kcev .kcev-submit__lede { color: var(--kcev-muted); margin: 0 0 var(--kcev-s3); }
.kcev .kcev-submit__notice {
  margin: 0; padding: var(--kcev-s3);
  border: 1px solid var(--kcev-blue);
  background: rgba(0,164,253,0.08);
  border-radius: var(--kcev-radius-sm);
  color: var(--kcev-white); font-size: 0.94rem;
}

.kcev-form__foot { display: grid; gap: var(--kcev-s3); }
.kcev .kcev-form__legal { font-size: 0.86rem; color: var(--kcev-muted); margin: 0; }
.kcev .kcev-form__submit { min-height: 52px; font-size: 1rem; }

/* The honeypot. Positioned off-canvas rather than display:none, because some
   bots skip fields that are display:none. aria-hidden and tabindex=-1 in the
   markup keep it away from anybody real. */
.kcev-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

.kcev-formnotice {
  padding: var(--kcev-s4);
  border-radius: var(--kcev-radius-sm);
  border: 1px solid var(--kcev-border);
  margin: var(--kcev-s4) 0 0;
}
.kcev-formnotice--success { border-color: var(--kcev-success); background: rgba(49,196,141,0.10); }
.kcev-formnotice--error { border-color: var(--kcev-urgent); background: rgba(229,72,77,0.10); }
.kcev .kcev-formnotice p { margin: 0; color: var(--kcev-white); }
.kcev-formnotice ul { margin: var(--kcev-s2) 0 0; padding-left: 1.2em; color: var(--kcev-silver); }

/* ------------------------------------------------------- missing section */

.kcev .kcev-missing p { color: var(--kcev-silver); max-width: 70ch; }
.kcev-missing__list { margin: var(--kcev-s4) 0; padding-left: 1.2em; display: grid; gap: var(--kcev-s2); color: var(--kcev-silver); }
.kcev-missing__list strong { color: var(--kcev-white); }
.kcev .kcev-missing__note { color: var(--kcev-muted); font-size: 0.88rem; }

/* ================================================== the single event page */

.kcev-page { background: var(--kcev-black); min-height: 60vh; }
.kcev-wrap { max-width: var(--kcev-maxw); margin: 0 auto; padding: var(--kcev-s5) var(--kcev-s4) var(--kcev-s8); }

.kcev-event {
  --kcev-blue:     var(--kcai-blue, #00A4FD);
  --kcev-white:    var(--kcai-white, #FEFEFE);
  --kcev-black:    var(--kcai-black, #000000);
  --kcev-elevated: var(--kcai-elevated, #080B0F);
  --kcev-panel:    var(--kcai-panel, #10151B);
  --kcev-charcoal: var(--kcai-charcoal, #181F27);
  --kcev-border:   var(--kcai-border, #2A3541);
  --kcev-silver:   var(--kcai-silver, #C7D0D9);
  --kcev-muted:    var(--kcai-muted, #98A5B3);
  --kcev-success:  var(--kcai-success, #31C48D);
  --kcev-warning:  var(--kcai-warning, #F5A623);
  --kcev-urgent:   var(--kcai-urgent, #E5484D);
  --kcev-font-head: var(--kcai-font-head, 'Space Grotesk', 'Segoe UI', system-ui, sans-serif);
  --kcev-font-body: var(--kcai-font-body, 'Inter', system-ui, -apple-system, sans-serif);
  --kcev-s1: 4px;  --kcev-s2: 8px;  --kcev-s3: 12px; --kcev-s4: 16px;
  --kcev-s5: 24px; --kcev-s6: 32px; --kcev-s7: 48px; --kcev-s8: 64px;
  --kcev-radius: var(--kcai-radius, 12px);
  --kcev-radius-sm: var(--kcai-radius-sm, 8px);
  --kcev-maxw: var(--kcai-maxw, 1200px);
  --kcev-accent: var(--kcev-fam-other, #98A5B3);
  color: var(--kcev-silver);
  font-family: var(--kcev-font-body);
}
.kcev-event.kcev-fam-adoption  { --kcev-accent: #00A4FD; }
.kcev-event.kcev-fam-clinic    { --kcev-accent: #31C48D; }
.kcev-event.kcev-fam-tnr       { --kcev-accent: #2DD4BF; }
.kcev-event.kcev-fam-community { --kcev-accent: #A78BFA; }
.kcev-event.kcev-fam-support   { --kcev-accent: #F5A623; }
.kcev-event.kcev-fam-education { --kcev-accent: #C7D0D9; }
.kcev-event.kcev-fam-other     { --kcev-accent: #98A5B3; }

.kcev-crumbs { margin-bottom: var(--kcev-s5); font-size: 0.86rem; }
.kcev-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--kcev-s2); }
.kcev-crumbs li { color: var(--kcai-muted, #98A5B3); }
.kcev-crumbs li + li::before { content: "/"; margin-right: var(--kcev-s2); color: var(--kcai-muted, #98A5B3); }
.kcev-crumbs a { color: var(--kcai-blue, #00A4FD); }

.kcev-alert {
  border: 1px solid var(--kcev-urgent);
  background: rgba(229,72,77,0.12);
  border-radius: var(--kcev-radius);
  padding: var(--kcev-s4);
  margin-bottom: var(--kcev-s5);
}
.kcev-alert--past { border-color: var(--kcev-border); background: var(--kcev-charcoal); }
.kcev-event .kcev-alert__title {
  font-family: var(--kcev-font-head); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--kcev-white); margin: 0 0 var(--kcev-s2);
}
.kcev-event .kcev-alert p { margin: 0; color: var(--kcev-silver); }

.kcev-event__head { margin-bottom: var(--kcev-s5); }
.kcev-event .kcev-event__title {
  font-family: var(--kcev-font-head);
  font-size: clamp(1.7rem, 6vw, 2.9rem);
  font-weight: 700; line-height: 1.12; letter-spacing: -0.02em;
  color: var(--kcev-white); margin: 0 0 var(--kcev-s3);
}
.kcev-event .kcev-event__org { color: var(--kcev-muted); margin: 0; }
.kcev-event .kcev-event__org a { color: var(--kcev-blue); }

.kcev-event__media { margin: 0 0 var(--kcev-s5); }
.kcev-event__media img {
  width: 100%; height: auto; display: block;
  border-radius: var(--kcev-radius);
  border: 1px solid var(--kcev-border);
}

.kcev-event__grid { display: grid; gap: var(--kcev-s6); }

.kcev-event .kcev-event__desc { color: var(--kcev-silver); }
.kcev-event .kcev-event__desc p { margin: 0 0 var(--kcev-s4); }
.kcev-event .kcev-event__sourcenote { color: var(--kcev-muted); font-size: 0.92rem; }

.kcev-event__side {
  background: var(--kcev-panel);
  border: 1px solid var(--kcev-border);
  border-left: 3px solid var(--kcev-accent);
  border-radius: var(--kcev-radius);
  padding: var(--kcev-s4);
  display: grid; gap: var(--kcev-s4);
  align-content: start;
}
.kcev-event__facts { margin: 0; display: grid; grid-template-columns: 1fr; gap: var(--kcev-s3); }
.kcev-event__facts dt {
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--kcev-muted);
}
.kcev-event__facts dd { margin: 0 0 var(--kcev-s2); color: var(--kcev-white); overflow-wrap: anywhere; }
.kcev-tzhint { color: var(--kcev-muted); font-size: 0.82rem; }

.kcev-event .kcev-event__dates h2,
.kcev-event .kcev-event__sources h2,
.kcev-event .kcev-related h2 {
  font-family: var(--kcev-font-head);
  font-size: 1.15rem; color: var(--kcev-white);
  margin: 0 0 var(--kcev-s3);
}
.kcev-event__dates { margin-top: var(--kcev-s6); }
.kcev-event .kcev-event__recur { color: var(--kcev-muted); font-size: 0.92rem; }

.kcev-datelist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--kcev-s2); }
.kcev-datelist li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--kcev-s2);
  padding: var(--kcev-s3);
  background: var(--kcev-charcoal);
  border: 1px solid var(--kcev-border);
  border-radius: var(--kcev-radius-sm);
}
.kcev-datelist li.is-current { border-color: var(--kcev-blue); }
.kcev-datelist a { color: var(--kcev-white); text-decoration: none; font-weight: 600; }
.kcev-datelist a:hover { color: var(--kcev-blue); }
.kcev-datelist span { color: var(--kcev-muted); font-size: 0.9rem; }

.kcev-event__sources ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--kcev-s2); }
.kcev-event__sources a { color: var(--kcev-blue); font-size: 0.9rem; }

.kcev-event .kcev-disclaimer {
  margin: var(--kcev-s6) 0 0;
  padding: var(--kcev-s4);
  border: 1px solid var(--kcev-border);
  border-radius: var(--kcev-radius-sm);
  background: var(--kcev-elevated);
  color: var(--kcev-muted);
  font-size: 0.9rem;
}

.kcev-related { margin-top: var(--kcev-s6); }
.kcev-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--kcev-s2); }
.kcev-related a { color: var(--kcev-blue); }

/* ==========================================================================
   BREAKPOINTS - min-width only.

   540  two-column card facts stop being cramped; the search row can put the
        button beside the field.
   700  the month grid has room for event titles instead of dots; card grids
        go to two columns.
   960  the event page splits into content + sidebar; card grids go to three.
   ========================================================================== */

@media (min-width: 540px) {
  .kcev-controls__row--search { grid-template-columns: 1fr auto; align-items: end; }
  .kcev-controls__go { min-height: 44px; }
  .kcev-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kcev-field--narrow { max-width: 160px; }
  .kcev-controls__cats fieldset { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 700px) {
  .kcev-hero,
  .kcev-controls,
  .kcev-strip,
  .kcev-results,
  .kcev-submit,
  .kcev-missing { padding-left: var(--kcev-s6); padding-right: var(--kcev-s6); }

  /* minmax(min(320px,100%), 1fr) rather than minmax(320px, 1fr).
     A bare 320px minimum cannot shrink below 320px, so at a viewport narrower
     than the track plus its gutters the grid overflows the page and the whole
     document scrolls sideways. The min() makes the floor collapse instead.
     This exact fix was needed across the KCPSR site. */
  .kcev-grid,
  .kcev-list { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }

  .kcev-controls__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kcev-controls__cats fieldset { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .kcev-month__cell { min-height: 96px; }
  .kcev-month__dots { display: none; }
  .kcev-month__item {
    display: block;
    font-size: 0.7rem; line-height: 1.25;
    padding: 2px 4px;
    border-left: 3px solid var(--kcev-accent);
    background: var(--kcev-charcoal);
    border-radius: 3px;
    color: var(--kcev-white);
    text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .kcev-month__item:hover { background: var(--kcev-border); }
}

@media (min-width: 960px) {
  .kcev-wrap { padding-left: var(--kcev-s6); padding-right: var(--kcev-s6); }
  .kcev-event__grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
  .kcev-hero { padding: var(--kcev-s8) var(--kcev-s6); }
  .kcev-card__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kcev-card--compact .kcev-card__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kcev-controls__cats fieldset { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   HOMEPAGE SECTION — "More Ways KCAI Connects Kansas City's Pet Community"
   ==========================================================================

   A COMPACT PREVIEW, NOT A SECOND CALENDAR. Deliberately constrained:

   - Each panel holds at most three items and the item is a ROW, not a card.
     Full event cards here would make the section taller than the homepage
     content it sits under and would read as a second directory.
   - No map, no embedded calendar, no submission form - all three are one click
     away and none of them belongs on a front page whose job is lost-and-found
     matching.
   - Both panels are equal-width on desktop and equal-weight visually. Reunions
     are not the "real" content with events as an afterthought, or the reverse.
   - Fixed thumbnail box with object-fit: cover and object-position 50% 40%,
     matching the directory's photo rule - a pet's head sits above centre, so a
     centred crop takes the top off it.

   The panels are `align-content: start` inside a stretched grid so an empty
   panel does not balloon to match a full one, and the primary button is pinned
   to the bottom of each panel with margin-top: auto so the two buttons line up
   across the row however much text is above them. */

.kcev-home {
  padding: var(--kcev-s7) var(--kcev-s4);
  background: var(--kcev-black);
  border-top: 1px solid var(--kcev-border);
  border-bottom: 1px solid var(--kcev-border);
}

.kcev-home__inner { max-width: var(--kcev-maxw); margin: 0 auto; }

.kcev-home__head { margin-bottom: var(--kcev-s6); }

.kcev .kcev-home__title {
  font-family: var(--kcev-font-head);
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 600; line-height: 1.15; letter-spacing: -0.01em;
  color: var(--kcev-white);
  margin: 0; max-width: 24ch;
}

/* One column on phones; two equal columns from 860px. The minmax(min(...))
   floor is the same overflow guard used across this stylesheet. */
.kcev-home__grid { display: grid; gap: var(--kcev-s5); }

.kcev-home__panel {
  display: flex; flex-direction: column;
  background: var(--kcev-panel);
  border: 1px solid var(--kcev-border);
  border-radius: var(--kcev-radius);
  padding: var(--kcev-s5) var(--kcev-s4);
}

.kcev-home__panelhead { margin-bottom: var(--kcev-s4); }

.kcev .kcev-home__eyebrow {
  font-family: var(--kcev-font-head);
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--kcev-blue);
  margin: 0 0 var(--kcev-s2);
}

.kcev .kcev-home__paneltitle {
  font-family: var(--kcev-font-head);
  font-size: 1.2rem; font-weight: 600; line-height: 1.2;
  color: var(--kcev-white);
  margin: 0 0 var(--kcev-s2);
}

.kcev .kcev-home__panelsub {
  font-size: 0.94rem; color: var(--kcev-muted);
  margin: 0; max-width: 46ch;
}

.kcev-home__list {
  list-style: none; margin: 0 0 var(--kcev-s4); padding: 0;
  display: grid; gap: var(--kcev-s3);
}

.kcev-home__item {
  display: flex; gap: var(--kcev-s3); align-items: flex-start;
  padding: var(--kcev-s3);
  background: var(--kcev-charcoal);
  border: 1px solid var(--kcev-border);
  border-radius: var(--kcev-radius-sm);
}
.kcev-home__item--event { border-left: 3px solid var(--kcev-accent); }

.kcev-home__thumb {
  flex: 0 0 auto; width: 56px; height: 56px;
  border-radius: var(--kcev-radius-sm); overflow: hidden;
  background: var(--kcev-elevated);
}
.kcev-home__thumb img {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
  /* Heads sit above centre. A plain centre crop decapitates the pet, which on
     a reunion story is both wrong and unkind. */
  object-position: 50% 40%;
}

.kcev-home__itembody { min-width: 0; flex: 1 1 auto; }

.kcev .kcev-home__itemcat {
  display: flex; align-items: center; gap: var(--kcev-s2);
  font-family: var(--kcev-font-head);
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--kcev-accent);
  margin: 0 0 4px;
}

.kcev-home__free, .kcev-home__paid {
  font-size: 0.62rem; letter-spacing: 0.08em;
  padding: 1px 7px; border-radius: 999px;
  border: 1px solid currentColor;
}
.kcev-home__free { color: var(--kcev-success); }
.kcev-home__paid { color: var(--kcev-muted); }

.kcev .kcev-home__itemtitle {
  font-family: var(--kcev-font-head);
  font-size: 1rem; font-weight: 600; line-height: 1.3;
  color: var(--kcev-white);
  margin: 0 0 3px;
  overflow-wrap: anywhere;
}
/* TAP TARGETS. These are the primary link in each preview row, and on a phone
   they are what people actually press - so they carry the 44px minimum even
   though they are text links rather than buttons. flex + min-height rather than
   padding, so a title that wraps to two lines grows instead of gaining dead
   space above and below it. */
.kcev .kcev-home__itemtitle a {
  color: var(--kcev-white); text-decoration: none;
  display: flex; align-items: center; min-height: 44px;
}
.kcev .kcev-home__itemtitle a:hover { color: var(--kcev-blue); text-decoration: underline; }

.kcev .kcev-home__itemmeta {
  font-size: 0.86rem; color: var(--kcev-muted); margin: 0;
  overflow-wrap: anywhere;
}
.kcev-home__sep { margin: 0 4px; }

.kcev .kcev-home__itemtext {
  font-size: 0.88rem; color: var(--kcev-silver); margin: 4px 0 0;
}

.kcev .kcev-home__note {
  font-size: 0.78rem; color: var(--kcev-muted);
  margin: 6px 0 0; font-style: italic;
}

/* The empty state must not leave a broken or oversized panel - so it is a
   normal-weight block with its own min-height, roughly the height of one item,
   rather than either a bare line of text or a large placeholder. */
.kcev-home__empty {
  padding: var(--kcev-s4);
  border: 1px dashed var(--kcev-border);
  border-radius: var(--kcev-radius-sm);
  margin-bottom: var(--kcev-s4);
  min-height: 84px;
  display: flex; align-items: center;
}
.kcev .kcev-home__empty p { margin: 0; color: var(--kcev-muted); font-size: 0.92rem; }

/* THE BUTTON FOLLOWS THE CONTENT. It is NOT pinned to the bottom of the panel.
   An earlier revision used margin-top:auto to line the two primary buttons up
   across the row. It looked right while both panels were full and wrong the
   moment one was not: with no eligible reunion stories, the reunion panel
   stretched to match the events panel and left its button stranded at the foot
   of roughly 400px of empty card. That is exactly the "empty state leaves a
   broken or oversized section" outcome the brief rules out - and the empty
   state is the NORMAL state here until the launch gate opens, so it is the case
   to design for rather than the exception. */
.kcev .kcev-home__action { margin: var(--kcev-s2) 0 0; }
.kcev .kcev-home__secondary { margin: var(--kcev-s2) 0 0; font-size: 0.92rem; }
.kcev .kcev-home__secondary a {
  color: var(--kcev-blue);
  display: inline-flex; align-items: center; min-height: 44px;
}

@media (min-width: 860px) {
  .kcev-home { padding: var(--kcev-s8) var(--kcev-s6); }
  .kcev-home__grid {
    grid-template-columns: repeat(2, minmax(min(380px, 100%), 1fr));
    /* start, not stretch. Each panel is as tall as its own content, so a panel
       with nothing to show is simply a shorter card rather than a tall one
       containing a void. The two stay "balanced" through equal width, identical
       padding and identical treatment - which is what balance means here, not
       forced equal height. */
    align-items: start;
  }
  .kcev-home__panel { padding: var(--kcev-s6) var(--kcev-s5); }
}

/* ==========================================================================
   HOST STYLESHEET OVERRIDE — DO NOT DELETE, DO NOT "TIDY UP" THE !important.
   ==========================================================================

   THE ONLY PLACE IN THIS FILE THAT USES !important FOR COLOUR, AND THE ONLY
   PLACE THAT SHOULD.

   WHAT WAS ACTUALLY WRONG, MEASURED ON THE LIVE PAGE:

     * every <button> rendered #F6CFF4 pink with white text — contrast 1.39:1
       against a 4.5:1 requirement. Search, Apply filters, the month navigation,
       Share and the submission form's submit button were all unreadable.
     * every text input, date input, select and textarea rendered as a WHITE box
       on a black page.

   WHO IS DOING IT. Not the theme. This host injects a stylesheet with the id
   `wp-site-designer-contrast-fallback`, and its selectors are built to win:

     .wp-site-blocks button[type=submit]:not(.wp-element-button)
       -> (0,3,1)

     body .wp-site-blocks input:not([type=submit]):not([type=button])
       :not([type=reset]):not([type=checkbox]):not([type=radio])
       :not([type=file]):not([type=image]):not([type=hidden])
       -> (0,9,2)

   Every argument inside a :not() counts towards specificity, so that input
   selector carries NINE class-level components by construction. There is no
   sane selector that outranks it: matching it would take a chain of seven
   repeated classes, which is the kind of thing the next person deletes on sight
   because it looks like a mistake.

   WHY NOT THE :not(.wp-element-button) ESCAPE HATCH. It exists for buttons and
   would work for them - but there is no equivalent for inputs, so buttons and
   inputs would then be fixed by two different mechanisms for one problem. One
   explanation is better than two.

   SO: !important, scoped to colour, background and border on this plugin's own
   namespaced controls only. It cannot leak - every selector is inside .kcev or
   .kcev-event. Nothing else in this file uses it except the
   prefers-reduced-motion block, where overriding every transition is the point.

   The element qualifiers are kept as well, so if the host stylesheet ever
   disappears these rules still beat the theme's own (0,2,1) button styling on
   specificity alone.
   ========================================================================== */

body .kcev button.kcev-btn,
body .kcev a.kcev-btn,
body .kcev-event button.kcev-btn,
body .kcev-event a.kcev-btn {
  background: var(--kcev-charcoal) !important;
  border: 1px solid var(--kcev-border) !important;
  color: var(--kcev-white) !important;
}

body .kcev button.kcev-btn--primary,
body .kcev a.kcev-btn--primary,
body .kcev-event button.kcev-btn--primary,
body .kcev-event a.kcev-btn--primary {
  background: var(--kcev-blue) !important;
  border-color: var(--kcev-blue) !important;
  color: #001018 !important;           /* measured 7.11:1 on #00A4FD */
}

body .kcev button.kcev-btn--quiet,
body .kcev a.kcev-btn--quiet,
body .kcev-event button.kcev-btn--quiet,
body .kcev-event a.kcev-btn--quiet {
  background: transparent !important;
  border-color: var(--kcev-border) !important;
  color: var(--kcev-muted) !important;
}

body .kcev button.kcev-btn:hover,
body .kcev a.kcev-btn:hover,
body .kcev-event button.kcev-btn:hover,
body .kcev-event a.kcev-btn:hover {
  background: var(--kcev-panel) !important;
  border-color: var(--kcev-blue) !important;
  color: var(--kcev-white) !important;
}

body .kcev button.kcev-btn--primary:hover,
body .kcev a.kcev-btn--primary:hover,
body .kcev-event button.kcev-btn--primary:hover,
body .kcev-event a.kcev-btn--primary:hover {
  background: #33B8FE !important;
  border-color: #33B8FE !important;
  color: #001018 !important;
}

body .kcev .kcev-viewtoggle button.kcev-btn.is-active {
  background: var(--kcev-blue) !important;
  border-color: var(--kcev-blue) !important;
  color: #001018 !important;
}

body .kcev .kcev-field input[type="search"],
body .kcev .kcev-field input[type="text"],
body .kcev .kcev-field input[type="url"],
body .kcev .kcev-field input[type="email"],
body .kcev .kcev-field input[type="date"],
body .kcev .kcev-field input[type="time"],
body .kcev .kcev-field input[type="file"],
body .kcev .kcev-field select,
body .kcev .kcev-field textarea {
  background: var(--kcev-panel) !important;
  border: 1px solid var(--kcev-border) !important;
  color: var(--kcev-white) !important;
  font-size: 16px;                     /* below 16px iOS Safari zooms on focus */
  min-height: 44px;
}

body .kcev .kcev-field textarea { min-height: 120px; }

body .kcev .kcev-field input::placeholder,
body .kcev .kcev-field textarea::placeholder { color: var(--kcev-muted) !important; }

/* The native option list is drawn by the OS and inherits the control's colours
   on several platforms; without this the dropdown is dark text on dark. */
body .kcev .kcev-field select option {
  background: var(--kcev-panel) !important;
  color: var(--kcev-white) !important;
}

/* Somebody who has asked for reduced motion has asked for it. */
@media (prefers-reduced-motion: reduce) {
  .kcev *,
  .kcev-event * { transition: none !important; animation: none !important; }
}

/* Printing an event page is a real use: people print a flyer for a clinic and
   take it with them. Turn the page white, drop the chrome, and expose the URLs
   behind the links - a printed page with no addresses is useless. */
@media print {
  .kcev-page, .kcev-event, .kcev { background: #fff; color: #000; }
  .kcev-event .kcev-event__title,
  .kcev-event__facts dd { color: #000; }
  .kcev-card__actions, .kcev-controls, .kcev-share, .kcev-crumbs, .kcev-related { display: none; }
  .kcev-event__side { border: 1px solid #999; }
  .kcev-event a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; word-break: break-all; }
}