/* ============================================================================
   Fourth of July Events Map — styles
   Night-sky chrome (deep navy) over a clean light map, with ember-gold event
   pins and a standout sponsor red. Mobile-first; desktop refinements below.
   ========================================================================== */

:root {
  /* ---- Panhandle Weather brand palette ----------------------------------
     The flag, conveniently: blue, navy, red. Raw brand values live here; the
     semantic chrome tokens below are mapped onto them so the rest of the
     stylesheet never references a raw brand hex directly. */
  --brand-blue: #213D75;
  --brand-navy: #102342;
  --brand-red:  #C82129;

  /* Tints */
  --red-light:  #E86A70;
  --blue-light: #4B65A0;

  /* Shades */
  --red-dark:      #A31A1F;
  --midnight-blue: #0C1A32;
  --indigo-shadow: #1A2D5A;

  /* Neutrals */
  --white:      #F4F4F4;
  --gray-light: #E0E0E0;
  --gray-dark:  #37393C;
  --near-black: #1C1C1E;

  /* The signature element: blue -> navy, top to bottom. */
  --brand-gradient: linear-gradient(180deg, var(--brand-blue), var(--brand-navy));

  /* ---- Semantic chrome tokens (mapped onto the brand) ------------------- */
  --navy-900: var(--midnight-blue); /* deepest surface (page, header base) */
  --navy-800: var(--brand-navy);    /* raised surface (controls bar) */
  --navy-700: var(--indigo-shadow); /* borders, hover */
  --ink:      var(--near-black);    /* dark text on light popups */
  --paper:    var(--white);         /* primary light text */
  --muted:    rgba(244, 244, 244, 0.66); /* secondary text on dark — dimmed white for legibility */

  /* Event-type colors (markers + legend). Categorical: kept visually
     distinct from one another, with parade aligned to brand blue.
     NOTE: marker glyphs are drawn in js/app.js — keep TYPE_META in sync. */
  --type-fireworks: var(--brand-red); /* brand red */
  --type-parade:    #ffffff;          /* white */
  --type-festival:  #8b5cf6;          /* purple */
  --type-drone:     #17a2a6;          /* teal */
  --type-other:     #6b7c93;          /* slate gray */

  /* Sponsor (from sponsors.json branding) — brand red */
  --sponsor: var(--brand-red);
  --sponsor-ring: rgba(200, 33, 41, 0.28);

  /* Type scale + chrome */
  --radius: 10px;
  --frame-radius: 16px; /* rounding on the whole widget frame */
  --shadow: 0 6px 20px rgba(8, 18, 36, 0.18);
  --header-h: 60px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--paper);
  background: var(--navy-900);
  /* Lock the page to the viewport so the map fills the space below the chrome. */
  display: flex;
  flex-direction: column;
  /* Round the whole widget frame and clip the bars + map to the corners. */
  border-radius: var(--frame-radius);
  overflow: hidden;
}

/* ---- Top bar: the filter buttons ---------------------------------------- */

.legendbar {
  flex: 0 0 auto;
  background: var(--navy-800);
}

/* ---- Bottom bar: county filter, count, help ----------------------------- */

.statusbar {
  position: relative; /* anchors the help popover */
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--brand-gradient);
  border-top: 1px solid var(--navy-700);
}

.statusbar__view {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--navy-700);
  background: var(--navy-900);
  color: var(--paper);
  font: 600 13px/1 inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.statusbar__view:hover {
  border-color: var(--red-light);
  color: var(--red-light);
}

.statusbar__help {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--navy-700);
  background: var(--navy-900);
  color: var(--paper);
  font: 700 15px/1 inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.statusbar__help:hover,
.statusbar__help[aria-expanded="true"] {
  border-color: var(--red-light);
  color: var(--red-light);
}

.help-popover {
  position: absolute;
  right: 12px;
  bottom: calc(100% + 8px); /* float just above the bar */
  width: min(280px, calc(100vw - 24px));
  padding: 12px 14px;
  background: var(--navy-900);
  border: 1px solid var(--navy-700);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 600; /* above the map + notice */
}
.help-popover__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.help-popover__text strong { color: var(--paper); }

.controls__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 0 1 auto; /* size to the dropdown itself instead of stretching the bar */
}

.controls__field-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.controls__select {
  appearance: none;
  width: 100%;
  background-color: var(--navy-900);
  color: var(--paper);
  border: 1px solid var(--navy-700);
  border-radius: var(--radius);
  padding: 5px 30px 5px 12px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  min-width: 160px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239fb2c9' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.controls__count {
  margin: 0;
  margin-left: auto;
  font-size: 13px;
  color: var(--muted);
}

/* Full-width legend: five large filter buttons spread evenly across the top.
   Four type buttons carry the brand gradient; the sponsor "Buy Fireworks"
   button is solid brand red. Pressed = shown on the map; unpressed = dimmed. */
.legend {
  display: flex;
  width: 100%;
}

.legend__btn {
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  border-right: 1px solid rgba(244, 244, 244, 0.18); /* divider between buttons */
  border-bottom: 4px solid var(--bar, transparent);  /* matches the pin color */
  padding: 16px 12px;
  font-family: inherit;
  font-size: clamp(13px, 1.4vw, 16px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: opacity 0.15s ease, filter 0.15s ease;
}

.legend__btn:last-child { border-right: 0; }

.legend__btn--type { background: var(--brand-gradient); }
.legend__btn--buy {
  background: var(--sponsor);
  /* Shares the equal 5-way split (flex: 1 1 0 from .legend__btn) when there's
     room, so it matches the other buttons' width. As the screen narrows it
     shrinks along with them, but min-width floors it at its own text so it
     never truncates — the type buttons give up the remaining width. */
  min-width: max-content;
}

.legend__btn:hover { filter: brightness(1.08); }

/* Filtered out: dim and desaturate so the "off" state reads clearly. */
.legend__btn[aria-pressed="false"] { opacity: 0.4; }

/* ---- Map ---------------------------------------------------------------- */

.map-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0; /* lets the map shrink correctly inside the flex column */
}

#map {
  position: absolute;
  inset: 0;
  /* Dark, so un-loaded tiles blend with the satellite imagery instead of
     flashing bright before they paint. */
  background: var(--midnight-blue);
}

/* ---- Countdown overlay (map page) --------------------------------------
   A small Panhandle-Weather-gradient chip floating over the bottom-right of
   the map, ticking down to midnight on the Fourth. Doesn't capture pointer
   events so it never gets in the way of panning. */
.countdown {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 450; /* above the map + markers, below the detail card */
  padding: 9px 14px;
  border-radius: var(--radius);
  background: var(--brand-gradient);
  color: var(--white);
  text-align: center;
  box-shadow: var(--shadow);
  border: 1px solid rgba(244, 244, 244, 0.14);
  pointer-events: none;
  user-select: none;
}
.countdown[hidden] { display: none; }

.countdown__label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(244, 244, 244, 0.78);
}
.countdown__time {
  display: block;
  margin-top: 3px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums; /* keep digits from jittering as they tick */
}
@media (max-width: 520px) {
  .countdown { left: 8px; bottom: 8px; padding: 7px 11px; }
  .countdown__time { font-size: 16px; }
}

/* ---- Event list (toggled view, sits over the map) -----------------------
   The same filtered events as the map, as a scrollable list. Shown/hidden by
   the "List view" toggle in the status bar; it covers the map with an opaque
   navy surface so the two views never bleed into each other. */
.eventlist {
  position: absolute;
  inset: 0;
  z-index: 400; /* above the map, below the notice + help popover + card */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* small uniform gutter only — the rows fill the width and scroll freely,
     with no large empty buffer above or below */
  padding: 12px;
  /* a deeper navy than the page so the rows read as floating above it */
  background: #060E1C;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* hidden must beat the display:flex above, or the list stays painted. */
.eventlist[hidden] { display: none; }

/* Each row is a button: tapping it opens the same detail card as the pin. */
.eventlist__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%; /* fill the full panel width */
  max-width: none;
  text-align: left;
  border: 1px solid var(--navy-700);
  border-radius: var(--radius);
  background: var(--navy-800);
  color: var(--paper);
  padding: 12px 14px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.eventlist__item:hover {
  border-color: var(--blue-light);
  background: var(--indigo-shadow);
}

.eventlist__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Type label with a color dot — not color alone, so it reads without sight. */
.eventlist__type {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.eventlist__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  /* an outline so a white (parade) dot still shows on the navy row */
  border: 1px solid rgba(244, 244, 244, 0.35);
  flex: 0 0 auto;
}

.eventlist__when {
  font-size: 13px;
  font-weight: 600;
  color: var(--paper);
  white-space: nowrap;
}

.eventlist__name {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
}

.eventlist__meta {
  font-size: 13px;
  color: var(--muted);
}

.eventlist__flag {
  align-self: flex-start;
  margin-top: 2px;
  font-size: 11px;
  color: var(--red-light);
}

.eventlist__empty {
  margin: auto;
  max-width: 320px;
  text-align: center;
  color: var(--muted);
  line-height: 1.5;
}

/* ---- Markers (built as divIcons in app.js) ------------------------------ */

/* isolate so the sponsor ring (z-index 0) can sit behind the pin (z-index 1)
   without slipping behind other markers or the tiles. */
.marker { position: relative; isolation: isolate; }

.marker__glyph {
  display: block;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 2px 3px rgba(8, 18, 36, 0.35));
}

/* ---- Sponsor callout marker --------------------------------------------
   A rounded white card holding the sponsor logo, with a triangle tail on the
   bottom edge. The tail tip is the icon anchor, so it points at the location.
   Card + tail dimensions are mirrored in js/app.js (SPONSOR_PIN). */
.sponsor-pin {
  position: relative;
  filter: drop-shadow(0 3px 6px rgba(8, 18, 36, 0.35));
}

.sponsor-pin__card {
  position: relative;
  box-sizing: border-box;
  width: 144px;
  height: 46px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px solid var(--sponsor);
  border-radius: 10px;
}

/* Tail: two stacked triangles — the larger brand-red one reads as the border,
   the slightly smaller white one fills it. Both hang off the bottom edge. */
.sponsor-pin__card::before,
.sponsor-pin__card::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: 0;
  border-style: solid;
}
.sponsor-pin__card::before {
  margin-left: -9px;
  border-width: 11px 9px 0 9px;
  border-color: var(--sponsor) transparent transparent transparent;
}
.sponsor-pin__card::after {
  margin-left: -7px;
  border-width: 9px 7px 0 7px;
  border-color: #fff transparent transparent transparent;
}

.sponsor-pin__logo {
  display: block;
  /* Explicit width/height (NOT max-width — Leaflet forces max-width:none
     !important on marker images, which overrides any cap). 100% resolves
     against the card's definite content box, so the logo scales with the
     card; object-fit keeps the artwork's aspect ratio without distortion. */
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sponsor-pin__label {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  color: var(--sponsor);
}

/* ---- Detail card (opens on pin click) ----------------------------------
   A fixed overlay centered over the map. The dark scrim separates the card
   from the imagery so the content reads cleanly; the card itself stays put
   while the map pans behind it. Built in index.html, opened from app.js. */

.card-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000; /* above the map, markers, and bars */
  display: grid;
  place-items: center;
  padding: 16px;
}
/* hidden must beat the display:grid above, or the card stays painted. */
.card-overlay[hidden] { display: none; }

.card-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.card {
  position: relative; /* sits above the scrim */
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(440px, 100%);
  height: 72vh;        /* roughly three-quarters of the viewport, top to bottom */
  border-radius: 18px;
  overflow: hidden;    /* clip the header + close bar to the rounded corners */
  /* The signature panhandle-weather blue gradient across the card body. */
  background: var(--brand-gradient);
  color: var(--paper);
  box-shadow: 0 24px 60px rgba(8, 18, 36, 0.55);
}

/* Title strip: full width, flush to the top edge, tinted to the pin's color
   with a subtle top-to-bottom gradient. Type name centered in large letters. */
.card__header {
  flex: 0 0 auto;
  padding: 20px 24px;
  text-align: center;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--card-color, var(--brand-blue)) 82%, white),
    var(--card-color, var(--brand-blue))
  );
}

.card__type {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-family: inherit; /* match the rest of the document (Inter) */
  font-size: clamp(26px, 6vw, 34px);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--card-text, #fff);
}

/* PC Fireworks Plus logo, on a white plate so the artwork reads against the
   navy card. Sits just above the Close bar. */
.card__brand {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  padding: 14px 20px 16px;
}
.card__brand-logo {
  width: min(230px, 72%);
  height: auto;
  background: #fff;
  border-radius: 10px;
  padding: 8px 12px;
}

/* Middle content scrolls if it outgrows the card (refined in a later pass). */
.card__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px 24px;
}

/* Close bar: full width, flush to the bottom edge, a touch lighter than the
   card body so it reads as the obvious dismiss action. "X  Close". */
.card__close {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 0;
  padding: 18px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(180deg, var(--blue-light), var(--brand-blue));
  transition: filter 0.15s ease;
}
.card__close:hover { filter: brightness(1.08); }

.card__close-x {
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
}

/* ---- Popups (legacy Leaflet popups; body classes reused inside the card) - */

.popup__type {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--type-other);
  margin-bottom: 8px;
}

/* Event/sponsor name: matches the document font, centered, allowed to wrap. */
.popup__title {
  margin: 0 0 4px;
  font-family: inherit; /* Inter — match the rest of the document */
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

/* Date + time line, centered under the title. */
.popup__when {
  margin: 0 0 12px;
  text-align: center;
  font-size: 16px;
  color: var(--paper);
}
.popup__when strong { font-weight: 600; }

/* Venue / county: left-aligned, a touch larger than before. */
.popup__meta { margin: 3px 0; color: var(--muted); font-size: 15px; text-align: center; }
.popup__meta strong { color: var(--paper); font-weight: 500; }

.popup__desc { margin: 12px 0 0; font-size: 16px; line-height: 1.5; color: #d7e2f0; }

.popup__link {
  display: inline-block;
  margin-top: 10px;
  font-weight: 600;
  color: var(--red-light);
  text-decoration: none;
}
.popup__link:hover { text-decoration: underline; }

.popup__unverified {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--navy-700);
  padding-top: 8px;
}

.popup__sponsor-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--sponsor);
  color: #fff;
  margin-bottom: 8px;
}

/* ---- Notice (data-load fallback) --------------------------------------- */

.notice {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--navy-900);
  z-index: 500;
}

/* The hidden attribute must win over the display rule above, or the notice
   stays painted on top of the map even when there's nothing to report. */
.notice[hidden] { display: none; }

.notice__card {
  max-width: 440px;
  text-align: center;
}

.notice__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 22px;
  margin: 0 0 10px;
}

.notice__body { color: var(--muted); line-height: 1.6; font-size: 15px; }
.notice__body code {
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-radius: 6px;
  padding: 1px 6px;
  color: var(--paper);
  font-size: 13px;
}

/* ---- Responsive --------------------------------------------------------- */

@media (min-width: 720px) {
  .statusbar { padding: 12px 24px; }
}

/* On narrow screens, keep five buttons readable: tighter padding + font so the
   shrinking type buttons still show their full labels alongside Buy Fireworks. */
@media (max-width: 520px) {
  .legend__btn {
    padding: 10px 4px;
    font-size: 10px;
    letter-spacing: 0.01em;
    /* wrap instead of truncating, so labels are never clipped on small screens */
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.15;
    text-align: center;
  }
  /* let the dropdown downsize with everything else instead of staying oversized */
  .controls__select {
    min-width: 0;
    font-size: 13px;
    padding: 5px 28px 5px 10px;
  }
}

/* ---- Accessibility ------------------------------------------------------ */

:focus-visible {
  outline: 2px solid var(--red-light);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}