/* Community Events — standalone page, same brand tokens as the main site.
   No scroll-engine dependency: this page must work even if index.html changes. */

:root {
  --bg: #08111F;            /* Midnight Navy */
  --ink: #F5F8FC;           /* Ice White */
  --ink-soft: #A8B6C5;      /* Soft Gray */
  --accent: #2EC5FF;        /* Signal Cyan */
  --surface: #142334;       /* Slate Blue */
  --elevated: #20364B;      /* Steel Blue */
  --muted: #6F8193;         /* Slate Gray */
  --alert: #D94A4A;         /* Crimson */
  --ok: #3ECF8E;
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: Inter, system-ui, sans-serif;
  --pad: clamp(20px, 6vw, 80px);
}

* { box-sizing: border-box; }
/* Author display rules (e.g. .ev-form { display:grid }) silently defeat the
   HTML hidden attribute — which is exactly why the submitted form stayed on
   screen with the confirmation stranded below it. Never let that recur. */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }

/* ------------------------------------------------------------------ header */
.ev-top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 22px;
  padding: 14px var(--pad);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--ink-soft) 18%, transparent);
}
.ev-top__logo {
  display: block; width: 54px; height: 52px;
  background: url('assets/logo.webp') center / contain no-repeat;
}
.ev-top__nav { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.ev-top__nav a {
  color: var(--ink-soft); text-decoration: none;
  font-weight: 600; font-size: .92rem; padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.ev-top__nav a:hover { color: var(--ink); }
.ev-top__nav a.is-here { color: var(--ink); border-bottom-color: var(--alert); }

/* ------------------------------------------------------------------ shared */
#ev-main { min-height: 70vh; padding: 0 var(--pad) clamp(70px, 12vh, 130px); }

.ev-hero { padding: clamp(36px, 7vh, 70px) 0 8px; max-width: 880px; }
.ev-hero--tight { padding-top: 10px; }
.ev-eyebrow {
  font-family: var(--font-display); font-weight: 700;
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--alert); margin: 0 0 14px;
}
.ev-hero h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.7rem, 4.4vw, 2.9rem); line-height: 1.1;
  letter-spacing: -.02em; margin: 0 0 14px;
}
.ev-lede { color: var(--ink-soft); max-width: 62ch; margin: 0; }

.ev-btn {
  font: inherit; font-size: .9rem; font-weight: 600;
  padding: 10px 18px; border-radius: 10px; cursor: pointer;
  background: var(--elevated); color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ink-soft) 25%, transparent);
  transition: background .2s, border-color .2s;
}
.ev-btn:hover { border-color: var(--accent); }
.ev-btn--primary { background: var(--alert); border-color: var(--alert); color: #fff; }
.ev-btn--primary:hover { background: #E15C5C; border-color: #E15C5C; }
.ev-btn--ghost { background: transparent; }
.ev-btn--big { font-size: 1rem; padding: 14px 26px; }

.ev-back { margin: 26px 0 0; }
.ev-back a { text-decoration: none; color: var(--ink-soft); }
.ev-back a:hover { color: var(--accent); }
.ev-status { color: var(--muted); font-size: .86rem; min-height: 1.2em; }

/* ------------------------------------------------------------------ search */
.ev-search {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: 22px 0 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink-soft) 14%, transparent);
  margin-bottom: 18px;
}
.ev-search__zip { display: flex; gap: 8px; }
.ev-search input, .ev-search select,
.ev-form input, .ev-form select, .ev-form textarea {
  font: inherit; font-size: .92rem;
  color: var(--ink); background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--ink-soft) 25%, transparent);
  border-radius: 10px; padding: 10px 12px;
}
.ev-search input:focus, .ev-form :is(input, select, textarea):focus {
  outline: none; border-color: var(--accent);
}
/* Native pickers: dark panels instead of the white popup, and Signal Cyan
   calendar/clock indicators instead of near-invisible black ones. The filter
   chain builds the accent color from a black glyph. */
.ev-form input[type="date"], .ev-form input[type="time"] { color-scheme: dark; }
.ev-form input[type="date"]::-webkit-calendar-picker-indicator,
.ev-form input[type="time"]::-webkit-calendar-picker-indicator {
  filter: brightness(0) saturate(100%) invert(66%) sepia(52%) saturate(1800%)
          hue-rotate(166deg) brightness(103%);
  cursor: pointer;
}
#f-zip { width: 110px; }
.ev-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ev-chip {
  font: inherit; font-size: .82rem; cursor: pointer;
  padding: 8px 14px; border-radius: 999px;
  background: transparent; color: var(--ink-soft);
  border: 1px solid color-mix(in srgb, var(--ink-soft) 24%, transparent);
}
.ev-chip:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink-soft) 55%, transparent); }
.ev-chip.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 600; }
#f-state { margin-left: auto; }

/* ------------------------------------------------------------------- cards */
.ev-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  padding-top: 10px;
}
.ev-card {
  display: flex; flex-direction: column; text-align: left;
  padding: 22px; border-radius: 14px; cursor: pointer;
  font: inherit; color: var(--ink);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink-soft) 16%, transparent);
  transition: border-color .2s, transform .2s;
}
.ev-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); transform: translateY(-2px); }
.ev-card__type {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}
.ev-card__type--action { color: var(--alert); }
.ev-card__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.08rem; line-height: 1.3; margin: 0 0 12px;
}
.ev-card__when { color: var(--ink); font-size: .92rem; font-weight: 600; }
.ev-card__where, .ev-card__org { color: var(--ink-soft); font-size: .88rem; }
.ev-card__org { margin-top: 10px; }
.ev-card__dist { color: var(--muted); font-size: .8rem; }
.ev-badge {
  display: inline-block; margin-bottom: 10px; width: fit-content;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  padding: 3px 10px; border-radius: 6px;
}
.ev-badge--cancelled { background: color-mix(in srgb, var(--alert) 25%, transparent); color: #FF9B9B; }
.ev-badge--postponed { background: color-mix(in srgb, #E7B75F 22%, transparent); color: #E7B75F; }
.ev-badge--gov { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.ev-badge--verified { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }

.ev-empty {
  text-align: center; padding: clamp(50px, 10vh, 100px) 20px;
  color: var(--ink-soft); max-width: 560px; margin: 0 auto;
}
.ev-empty h2 { font-family: var(--font-display); color: var(--ink); }

/* ------------------------------------------------------------------ detail */
.ev-detail__head { max-width: 860px; padding-top: 26px; }
.ev-detail__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 3.6vw, 2.4rem); line-height: 1.15; margin: 8px 0 18px;
}
.ev-detail__facts {
  display: grid; gap: 6px 22px; grid-template-columns: max-content 1fr;
  padding: 18px 20px; border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink-soft) 16%, transparent);
  font-size: .94rem; max-width: 640px;
}
.ev-detail__facts dt { color: var(--muted); }
.ev-detail__facts dd { margin: 0; }
.ev-detail__desc { max-width: 72ch; color: var(--ink-soft); white-space: pre-line; }
.ev-detail__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0; }
.ev-statusbar {
  max-width: 640px; margin: 18px 0; padding: 14px 18px; border-radius: 12px;
  font-weight: 600;
}
.ev-statusbar--cancelled { background: color-mix(in srgb, var(--alert) 18%, transparent); color: #FF9B9B; }
.ev-statusbar--postponed { background: color-mix(in srgb, #E7B75F 15%, transparent); color: #E7B75F; }

.ev-report { max-width: 640px; margin-top: 40px; padding-top: 22px;
  border-top: 1px solid color-mix(in srgb, var(--ink-soft) 14%, transparent); }
#report-form { display: grid; gap: 14px; margin-top: 18px; }
#report-form label { display: grid; gap: 6px; font-size: .9rem; color: var(--ink-soft); }

/* -------------------------------------------------------------------- form */
.ev-form { max-width: 720px; display: grid; gap: 26px; padding-top: 18px; }
.ev-form fieldset {
  border: 1px solid color-mix(in srgb, var(--ink-soft) 16%, transparent);
  border-radius: 14px; padding: 20px 22px 24px;
  display: grid; gap: 16px; margin: 0;
}
.ev-form legend {
  font-family: var(--font-display); font-weight: 700; padding: 0 8px;
}
.ev-form label { display: grid; gap: 6px; font-size: .9rem; color: var(--ink-soft); }
.ev-form .req {
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.ev-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
/* Labels in a row must not stretch to the tallest sibling — an input next to
   a label with one fewer line of text was inflating to fill the difference. */
.ev-row label { align-content: start; }
.req--opt { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.ev-check { display: flex !important; gap: 10px; align-items: flex-start; line-height: 1.5; }
.ev-check input { margin-top: 3px; }
label.is-invalid input, label.is-invalid select, label.is-invalid textarea { border-color: var(--alert); }
.ev-field-error { color: #FF9B9B; font-size: .8rem; }
.ev-form-error { color: #FF9B9B; font-weight: 600; }
.ev-success { color: var(--ok); font-weight: 600; }
.ev-hint { color: var(--muted); font-size: .84rem; margin: 0; }
.ev-turnstile { min-height: 66px; }

/* ------------------------------------------------------------------ footer */
.ev-foot {
  padding: 30px var(--pad) 60px;
  border-top: 1px solid color-mix(in srgb, var(--ink-soft) 14%, transparent);
  color: var(--muted); font-size: .82rem; line-height: 1.7;
}
.ev-foot p { margin: 4px 0; max-width: 90ch; }

@media (max-width: 640px) {
  .ev-top { flex-wrap: wrap; }
  .ev-grid { grid-template-columns: 1fr; }
  #f-state { margin-left: 0; }
  .ev-detail__facts { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ev-card { transition: none; } .ev-card:hover { transform: none; }
}

/* Submission confirmation — a card that owns the page, not a footnote. */
#submit-done {
  border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--ok) 7%, transparent);
  margin-top: 40px;
}
#submit-done h2 { color: var(--ok); font-size: 1.6rem; }
#submit-done h2::before { content: "✓  "; }

/* footer nav (matches .bfn-foot__nav in site.css) */
.bfn-foot__nav { display: flex; gap: 22px; width: 100%; margin-bottom: 10px; }
.bfn-foot__nav a { color: var(--ink-soft); text-decoration: none; font-weight: 600; }
.bfn-foot__nav a:hover { color: var(--accent); }

/* ---- Stay Informed band — its own piece, anchored above the footer ---- */
.bfn-stay {
  padding: clamp(44px, 7vh, 70px) clamp(20px, 6vw, 80px);
  border-top: 1px solid rgba(168, 182, 197, .14);
  text-align: center;
}
.bfn-stay .bfn-newsletter { margin: 0 auto; }
.bfn-stay .nlw-title {
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  margin-bottom: 18px;
}
/* more breathing room between the paragraph and the form */
.bfn-stay .nlw-copy { margin: 0 auto 30px; }
.bfn-stay .nlw-row { justify-content: center; }
/* fine print centered under the form, with a little gap above it */
.bfn-stay .nlw-fine { text-align: center; margin-top: 16px; }

.ev-disclaimer {
  color: var(--muted); font-size: .78rem; line-height: 1.6;
  margin: 10px 0 0; max-width: 70ch;
}
.ev-foot__row {
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  align-items: baseline; justify-content: space-between;
}
.ev-foot__row a {
  color: var(--ink-soft); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--ink-soft) 35%, transparent);
}
.ev-foot__row a:hover { color: var(--accent); border-bottom-color: var(--accent); }


/* ---- footer layout ---------------------------------------------------------
   Two columns. The left one reads down: links, copyright, "Built by
   ByteBunny.io". The social profiles sit on the RIGHT, deliberately apart —
   stacked under the ByteBunny credit they read as ByteBunny's accounts rather
   than BlockFlockNow's, and proximity is what implies ownership.

   Grid rather than space-between, because the left column has to stack while
   the right stays beside it. */
.bfn-foot {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 4px 28px;
}
.bfn-foot__nav { grid-column: 1 / -1; }
.bfn-foot__legal { grid-column: 1; grid-row: 2; }
.bfn-foot__credit { grid-column: 1; grid-row: 3; margin-top: 2px; }
.bfn-foot .bfn-social {
  grid-column: 2; grid-row: 2 / span 2;
  align-self: center; margin-top: 0;
}

/* Events page carries its own footer class and puts both lines in one row. */
.ev-foot {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 4px 28px;
}
.ev-foot__nav, .ev-foot .bfn-foot__nav { grid-column: 1 / -1; }
.ev-foot__row { grid-column: 1; grid-row: 2; display: block; }
.ev-foot__row p { margin: 0; }
.ev-foot__row p + p { margin-top: 2px; }
.ev-foot .bfn-social {
  grid-column: 2; grid-row: 2;
  align-self: center; margin-top: 0;
}

/* Narrow screens: one column, profiles below with room to breathe. */
@media (max-width: 640px) {
  .bfn-foot, .ev-foot { grid-template-columns: 1fr; }
  .bfn-foot .bfn-social, .ev-foot .bfn-social {
    grid-column: 1; grid-row: auto; margin-top: 14px;
  }
}

/* Icon base styles. Duplicated from site.css because events.html loads only
   this stylesheet; without them the SVGs render at zero size and vanish.
   (Removed once by a careless truncation — if the events footer icons ever
   disappear again, look here first.) */
.bfn-social { display: flex; gap: 14px; align-items: center; }
.bfn-social a {
  display: inline-flex; width: 22px; height: 22px;
  color: var(--muted, #6F8193);
  transition: color .15s, transform .15s;
}
.bfn-social a:hover, .bfn-social a:focus-visible {
  color: var(--accent, #2EC5FF);
  transform: translateY(-1px);
}
.bfn-social svg { width: 100%; height: 100%; fill: currentColor; display: block; }

/* Submit an Event moved out of the crowded header and into the page.
   It sits in the content flow at the end of the hero, directly above the
   ZIP search, at its natural width — same placement on every screen size.
   (An earlier absolute top-right placement floated in dead space.)
   WARNING: this file is loaded by every page — keep additions scoped. */
.ev-hero .ev-submit-cta {
  display: inline-block;
  background: #CC4040; color: #fff; border: 0; font-weight: 700;
  text-decoration: none;
  margin: 18px 0 4px;
}
.ev-hero .ev-submit-cta:hover { background: #D94A4A; color: #fff; }