/* ---- what's on (events near me) --------------------------------------------
   Its own sheet, the way record.css is: one page needs it, and appending to
   style.css would mean re-stamping 250-odd pages for a block only this page shows.
   Every value comes from the existing custom properties, so it cannot drift. */

.ev-lede {
  color: var(--ink-soft);
  max-width: 42rem;
  margin: 0 0 4px;
}

.ev-locate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 22px 0 10px;
}

.ev-or {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  color: var(--ink-soft);
}

.ev-btn {
  font: inherit;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1;
  padding: 11px 16px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}

.ev-btn:hover { filter: brightness(0.94); }

.ev-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ev-btn-quiet {
  background: transparent;
  color: var(--accent);
  border-color: var(--rule);
}

.ev-btn-quiet:hover {
  border-color: var(--accent);
  filter: none;
}

.ev-town-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ev-town-form input {
  font: inherit;
  font-size: 15px;
  padding: 10px 12px;
  min-width: 12rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
}

.ev-town-form input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.ev-status {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  color: var(--ink-soft);
  margin: 14px 0 0;
  min-height: 1.2em;
}

.ev-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  max-width: 46rem;
}

.ev-item {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 4px 18px;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
}

.ev-when {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  color: var(--ink-soft);
  white-space: nowrap;
  padding-top: 3px;
}

.ev-what { min-width: 0; }

.ev-name {
  display: block;
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--ink);
}

.ev-name a {
  color: var(--accent-ink);
  text-decoration: none;
}

.ev-name a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.ev-meta {
  display: block;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 3px;
}

.ev-venue { color: var(--ink); }

.ev-dist { white-space: nowrap; }

.ev-dot {
  color: var(--rule);
  padding: 0 6px;
}

.ev-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  max-width: 46rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  color: var(--ink-soft);
  margin: 26px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}

/* The Data Thistle mark. Their wordmark is fill="#fff" so that it reads on their own
   dark site; on Keek's paper it would vanish, so the logotype takes the site ink and
   the thistle keeps the #09f it came with. Only the type is restyled, never the mark. */
.ev-brand {
  display: block;
  line-height: 0;
}

.ev-brand svg {
  display: block;
  width: auto;
  height: 30px;
}

.ev-brand .logotype { fill: var(--ink); }

.ev-foot-text a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}

.ev-foot-text a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.ev-sep { padding: 0 4px; }

/* On a phone the date sits above the name rather than beside it: 11rem of column
   would leave about four words for the title. */
@media (max-width: 620px) {
  .ev-item { grid-template-columns: 1fr; gap: 2px; }
  .ev-when { padding-top: 0; }
  .ev-town-form input { min-width: 0; flex: 1; }
  .ev-locate { gap: 8px; }
}

/* ---- the door in the hero ---------------------------------------------------
   He wanted the phrase that sat under the search box moved into it, and a What's on
   button where the phrase was. This is that button: the band's own button style, as a
   link, so the two cannot drift apart in look. */

.hero-events {
  margin: 20px 0 0;
}

.hero-events-btn {
  display: inline-block;
  text-decoration: none;
}

/* A venue name links out to the venue's OWN website when we hold one. Quiet until
   hovered: it is context on the card, not a competing call to action. */
a.ev-venue {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}

a.ev-venue:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
/* ---- ONE COLOUR PER CLASS ---------------------------------------------------
   The Architect: "every class should have its own colour thats the point." Until now
   the sheet shared hues - indigo across five classes, ochre across two, teal across two -
   and charity, estate and worship had none at all and fell back to the register slate.

   Generated by meridian/keek_build/venues/build_class_palette.js, which is the place to
   change a colour. It lives in this sheet rather than style.css for one practical
   reason: this one loads AFTER style.css on the only page where cards are drawn, and
   editing style.css would mean re-stamping about two hundred and fifty pages.

   SIXTEEN CLASSES IN ONE MUTED REGISTER means some pairs sit close. Named here so nobody
   has to guess which are neighbours: party and public bodies are both blues, hospital and
   dentist both teals, wines and roses sit near each other. Any two that read the same at
   9px can be pulled apart with a single line below. */

.result.company { border-left-color: #5f7381; }  /* the register */
.result.party { border-left-color: #4a63a8; }  /* civic: parties */
.result.body.publicbody { border-left-color: #332288; }  /* civic: public bodies */
.result.body.court { border-left-color: #6d5ba6; }  /* civic: courts */
.result.body.school { border-left-color: #117733; }  /* civic: schools */
.result.body.library { border-left-color: #999933; }  /* civic: libraries */
.result.body.hospital { border-left-color: #1f8a76; }  /* health: hospitals */
.result.body.dentist { border-left-color: #44aa99; }  /* health: dentists */
.result.body.care { border-left-color: #c25a3f; }  /* care services */
.result.body.heritage { border-left-color: #8a4f8f; }  /* somewhere to visit */
.result.body.fhis { border-left-color: #b07a1c; }  /* food and drink */
.result.body.distillery { border-left-color: #882255; }  /* food and drink: distilleries */
.result.body.estate { border-left-color: #556b2f; }  /* land */
.result.body.charity { border-left-color: #cc6677; }  /* charities */
.result.body.worship { border-left-color: #3f5f8a; }  /* places of worship */
.result.body.venue { border-left-color: #a3446b; }  /* venues */

.result.company .r-num::before { background: #5f7381; }
.result.party .r-num::before { background: #4a63a8; }
.result.body.publicbody .r-num::before { background: #332288; }
.result.body.court .r-num::before { background: #6d5ba6; }
.result.body.school .r-num::before { background: #117733; }
.result.body.library .r-num::before { background: #999933; }
.result.body.hospital .r-num::before { background: #1f8a76; }
.result.body.dentist .r-num::before { background: #44aa99; }
.result.body.care .r-num::before { background: #c25a3f; }
.result.body.heritage .r-num::before { background: #8a4f8f; }
.result.body.fhis .r-num::before { background: #b07a1c; }
.result.body.distillery .r-num::before { background: #882255; }
.result.body.estate .r-num::before { background: #556b2f; }
.result.body.charity .r-num::before { background: #cc6677; }
.result.body.worship .r-num::before { background: #3f5f8a; }
.result.body.venue .r-num::before { background: #a3446b; }