/* theme.css — bold per-page colour theme shared by every public-web page.
 *
 * Loaded AFTER each page's inline <style>, so it wins at equal specificity.
 * Pages keep layout CSS inline; colour, type and line work live here.
 * Each <body data-page="..."> picks the page colour (--page).
 * Square corners, 2px black lines, no soft shadows (hard offsets only).
 * Text on saturated backgrounds is black; white text only on black.
 */

:root {
  --ink: #000;
  --paper: #fff;
  --blue: #00a0ff;
  --lime: #00ff1e;
  --violet: #9443ff;
  --orange: #ff7a1a;
  --yellow: #ffff00;
  --teal: #00d6b4;
  --page: var(--blue);

  /* legacy names kept so inline page CSS keeps working */
  --surface: var(--paper);
  --text: var(--ink);
  --text-2: #1a1a1a;
  --text-muted: #333;
  --line: var(--ink);
  --line-input: var(--ink);
  --border: var(--ink);
  --header: var(--ink);
  --header-dark: var(--ink);
  --accent: var(--yellow);
  --accent-hover: #e6e600;
  --accent-2: var(--ink);
  --accent-tint: rgba(255, 255, 0, 0.45);
  --link: var(--ink);
  --ok: #0a6b33;
  --err: #b3261e;

  --radius: 0;
  --radius-sm: 0;
  --stroke: 2px solid var(--ink);
  --stroke-input: 2px solid var(--ink);
  --lift: 5px 5px 0 var(--ink);

  --display: 'Archivo', Impact, 'Arial Narrow Bold', sans-serif;
  --body: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* category colours (JS CAT_COLORS must equal these) */
  --cat-music: #ff8fc7;
  --cat-food: #ffd23f;
  --cat-sports: #86efac;
  --cat-art: #d8b4fe;
  --cat-theater: #ff7a6b;
  --cat-film: #93c5fd;
  --cat-nightlife: #a78bfa;
  --cat-community: #5eead4;
  --cat-outdoor: #bef264;
  --cat-learning: #7dd3fc;
  --cat-wellness: #fda4af;
  --cat-talks: #fdba74;
  --cat-other: #94a3b8;
}
body[data-page='browse'] {
  --page: var(--blue);
}
body[data-page='festivals'] {
  --page: var(--orange);
}
body[data-page='tours'] {
  --page: var(--teal);
}
body[data-page='map'] {
  --page: var(--lime);
}
body[data-page='publish'] {
  --page: var(--violet);
}
body[data-page='privacy'] {
  --page: var(--yellow);
}

/* ── Base ─────────────────────────────────────────────────────────── */
body {
  /* declared on body (not :root) so it follows the per-page --page */
  --bg: var(--page);
  background: var(--page);
  color: var(--ink);
  font-family: var(--body);
}
h1,
h2,
h3,
.header-title,
.search-card h2,
.results-title,
.section-title,
.event-card__title,
.tool-card h3,
.month-group__title,
.fest-card__title,
.band-card__name,
.events-magazine__col-header,
.site-bar__logo {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: var(--ink);
}
a {
  color: var(--ink);
}
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--yellow);
}
::selection {
  background: var(--yellow);
  color: var(--ink);
}
/* Text that sits directly on the page colour: always black. */
.results-title,
.results-meta,
.section-title,
.loading,
.status-line,
.empty-state,
.error-state,
.subtitle,
.events-magazine__col-header {
  color: var(--ink);
}
.results-meta,
.status-line,
.empty-state,
.error-state,
.loading {
  font-weight: 600;
}

/* ── Motion ───────────────────────────────────────────────────────── */
@keyframes ticker-scroll {
  to {
    transform: translateX(-50%);
  }
}
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── Ticker + nav bar ─────────────────────────────────────────────── */
.ticker {
  background: var(--yellow);
  color: var(--ink);
  overflow: hidden;
  white-space: nowrap;
  border-bottom: var(--stroke);
  line-height: 1.2;
}
.ticker__track {
  display: inline-flex;
  gap: 2rem;
  padding: 0.45rem 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.8rem;
  text-transform: uppercase;
  animation: ticker-scroll 30s linear infinite;
}
.ticker__track span::after {
  content: '✦';
  margin-left: 2rem;
}
.site-bar {
  background: var(--ink);
  color: var(--paper);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.25rem;
  line-height: 1.2;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.site-bar__logo {
  color: var(--yellow);
  text-decoration: none;
  font-size: 1.6rem;
  margin-right: auto;
}
.site-bar__link {
  color: var(--paper);
  text-decoration: none;
  padding: 0.35rem 0.6rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.85rem;
  text-transform: uppercase;
}
.site-bar__link:hover,
.site-bar__link[aria-current] {
  background: var(--page);
  color: var(--ink);
}
.site-bar__cta {
  background: var(--yellow);
  color: var(--ink);
  text-decoration: none;
  padding: 0.5rem 1rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.85rem;
  text-transform: uppercase;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.site-bar__cta:hover {
  transform: translate(-3px, -3px);
  box-shadow: 3px 3px 0 var(--paper);
}
@media (max-width: 700px) {
  .site-bar__link {
    display: none;
  }
}

/* ── Header becomes the hero ──────────────────────────────────────── */
.site-header {
  background: transparent;
  color: var(--ink);
  border: 0;
}
.site-header::before {
  display: none;
}
.header-eyebrow {
  color: var(--ink);
  font-weight: 700;
}
.header-title {
  font-size: clamp(2.4rem, 8vw, 5.5rem);
  animation: rise-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.header-title em {
  font-style: normal;
  white-space: nowrap;
  color: var(--page);
  -webkit-text-stroke: 2px var(--ink);
}
.header-sub {
  color: var(--ink);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
  animation: rise-in 0.7s 0.12s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.stat-pill,
.experimental-badge {
  background: var(--paper);
  color: var(--ink);
  border: var(--stroke);
  border-radius: 0;
  font-weight: 600;
  backdrop-filter: none;
}
.stat-pill strong,
.experimental-badge strong,
.experimental-badge a,
.experimental-badge a:hover {
  color: var(--ink);
}
.experimental-badge a {
  text-decoration: underline;
}
.lang-selector__current {
  color: var(--ink);
  font-weight: 800;
  opacity: 1;
}
.lang-selector__sep {
  color: var(--ink);
}
.lang-selector__link,
.lang-selector__link:hover {
  color: var(--ink);
  text-decoration: underline;
}
.lang-selector__link:hover {
  background: var(--yellow);
}

/* ── Cards ────────────────────────────────────────────────────────── */
.search-card,
.event-card,
.tool-card,
.fest-card,
.band-card,
#cfg,
.ev-card,
.map-panel {
  background: var(--paper);
  border: var(--stroke);
  border-radius: 0;
  box-shadow: none;
}
/* Entry rise-in; "backwards" so the animation releases transform for hover. */
.event-card,
.fest-card,
.band-card {
  animation: rise-in 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  transition:
    transform 0.18s,
    box-shadow 0.18s;
}
.event-card:hover,
.fest-card:hover,
.band-card:hover {
  transform: translate(-5px, -5px);
  box-shadow: var(--lift);
  border-color: var(--ink);
}
.event-card__stripe,
.fest-card__stripe {
  width: 8px;
  border-right: var(--stroke);
}
.event-card__date,
.event-card__meta,
.event-card__desc,
.fest-card__place,
.fest-card__desc,
.fest-card__category,
.fest-card__date,
.fest-card__distance,
.band-card__next,
.band-card__count,
.band-show__place,
.band-show__distance,
.band-show__date {
  color: var(--ink);
}
.festival-card__sub {
  background: #f2f2f2;
  border: 0;
  border-radius: 0;
}
.festival-card__events {
  border-top: var(--stroke);
}
.events-magazine__col-header {
  border-bottom: var(--stroke);
}
.pin-popup__item + .pin-popup__item {
  border-top: var(--stroke);
}
.site-footer {
  background: var(--ink);
  color: var(--paper);
  border-top: 0;
}
.site-footer a {
  color: var(--yellow);
}
/* category label that sits on a card's top edge (use on a span inside the card) */
.cat-tab {
  display: inline-block;
  background: var(--cat, var(--yellow));
  color: var(--ink);
  padding: 0.3rem 0.8rem;
  font-family: var(--display);
  font-weight: 900;
  font-size: 0.75rem;
  text-transform: uppercase;
}

/* ── Chips, badges, tags ──────────────────────────────────────────── */
.event-card__badge,
.urgency-pill {
  color: var(--ink);
  border: 0;
  border-radius: 0;
  font-weight: 800;
}
.urgency-pill--outlined,
.urgency-pill--muted,
.urgency-pill--festival {
  background: var(--yellow);
  color: var(--ink);
  border: 0;
}
.tag {
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: 0;
}
.chip,
.toggle,
.tab {
  background: var(--paper);
  color: var(--ink);
  border: var(--stroke);
  border-radius: 0;
  font-weight: 700;
}
.chip:hover,
.toggle:hover,
.tab:hover {
  background: var(--yellow);
  border-color: var(--ink);
  color: var(--ink);
}
.chip[aria-pressed='true'],
.toggle[aria-pressed='true'],
.tab.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  font-weight: 700;
}

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn,
.controls button,
.pane button,
.error-state button,
.bm-link,
#cfg-save,
#pub-btn,
#cancel-btn,
.cfg-backup button {
  border: var(--stroke);
  border-radius: 0;
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--ink);
  box-shadow: none;
  transition:
    transform 0.15s,
    box-shadow 0.15s,
    background-color 0.15s;
}
/* primary: yellow fill */
.btn-primary,
.btn-search,
.pane button,
.error-state button,
.bm-link,
#cfg-save,
#pub-btn {
  background: var(--yellow);
  color: var(--ink);
}
/* secondary: white fill */
.btn-secondary,
.btn-ghost,
.btn-search-here,
#cancel-btn,
.cfg-backup button {
  background: var(--paper);
  color: var(--ink);
  border: var(--stroke);
}
.btn-primary:hover,
.btn-search:hover,
.pane button:hover:not(:disabled),
#pub-btn:hover:not(:disabled),
#cfg-save:hover,
.bm-link:hover,
.error-state button:hover {
  background: var(--yellow);
  color: var(--ink);
  transform: translate(-3px, -3px);
  box-shadow: 3px 3px 0 var(--ink);
}
.btn-secondary:hover,
.btn-ghost:hover,
.btn-search-here:hover:not(:disabled),
#cancel-btn:hover,
.cfg-backup button:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  box-shadow: none;
}
.btn:active,
.controls button:active:not(:disabled),
.pane button:active:not(:disabled),
.bm-link:active,
#cfg-save:active,
#pub-btn:active:not(:disabled),
#cancel-btn:active {
  transform: none;
  box-shadow: none;
}
.btn-ghost.copied {
  background: var(--lime);
  border-color: var(--ink);
  color: var(--ink);
}
.btn:disabled,
.btn-primary:disabled,
.btn-search-here:disabled,
.pane button:disabled,
#pub-btn:disabled {
  background: #d9d9d9;
  border-color: #777;
  color: #444;
  transform: none;
  box-shadow: none;
  cursor: not-allowed;
}

/* ── Links ────────────────────────────────────────────────────────── */
.event-link,
.showtime,
.festival-card__toggle,
.festival-card__sub-link,
.ext-link,
.nav-link,
.result-actions button {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.event-link:hover,
.showtime:hover,
.festival-card__toggle:hover,
.festival-card__sub-link:hover,
.ext-link:hover,
.nav-link:hover,
.result-actions button:hover {
  color: var(--ink);
  background: var(--yellow);
}

/* ── Inputs ───────────────────────────────────────────────────────── */
input,
textarea,
select,
.filter-row select,
.filter-row input,
.controls input[type='text'],
.controls input[type='number'],
.controls input[type='datetime-local'],
.controls select,
#cfg-fields input,
.pane input[type='url'],
.pane input[type='text'] {
  background: var(--paper);
  color: var(--ink);
  border: var(--stroke-input);
  border-radius: 0;
  font-family: var(--body);
  font-weight: 500;
}
/* File pickers keep the browser's own control, not the text-input box. */
input[type='file'] {
  background: none;
  border: 0;
  border-radius: 0;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--ink);
  background: var(--paper);
  outline: 3px solid var(--ink);
  outline-offset: 0;
  box-shadow: 0 0 0 6px var(--yellow);
}
label,
#cfg-fields label {
  color: var(--ink);
  font-weight: 600;
}
.coords-display,
.ev-card .ev-url {
  background: #f2f2f2;
  border: var(--stroke);
  border-radius: 0;
  color: var(--ink);
}
.or-divider {
  color: var(--ink);
}
.or-divider::before,
.or-divider::after {
  height: 2px;
  background: var(--ink);
}
/* map control strip: white band with a black rule underneath */
.controls {
  background: var(--paper);
  border-bottom: var(--stroke);
}
.controls label,
.ctrl-unit,
.ctrl-sep {
  color: var(--ink);
}

/* ── Status ───────────────────────────────────────────────────────── */
.status-info,
.status-error,
.status-ok,
#mapStatus.info,
#mapStatus.error {
  border: var(--stroke);
  border-radius: 0;
  color: var(--ink);
  font-weight: 600;
}
.status-info,
#mapStatus.info {
  background: var(--paper);
}
.status-error,
#mapStatus.error {
  background: #ffd6d2;
}
.status-ok {
  background: var(--lime);
}
.notice-line {
  color: var(--ink);
  font-weight: 600;
}
/* publish status sits on violet: black text in a white/lime block */
#status.err,
#status.ok,
#status.info {
  color: var(--ink);
  font-weight: 600;
}
#status.err,
#status.ok {
  border: var(--stroke);
  padding: 6px 10px;
}
#status.err {
  background: #ffd6d2;
}
#status.ok {
  background: var(--lime);
}
.spinner {
  border: 3px solid rgba(0, 0, 0, 0.2);
  border-top-color: var(--ink);
}

/* ── Maps ─────────────────────────────────────────────────────────── */
#map {
  background: #e9efe4;
}
.leaflet-popup-content-wrapper {
  background: var(--paper);
  color: var(--ink);
  border: var(--stroke);
  border-radius: 0;
  box-shadow: none;
}
.leaflet-popup-tip {
  background: var(--paper);
  border: var(--stroke);
  box-shadow: none;
}
.leaflet-popup-content a {
  color: var(--ink);
}
/* Contain Leaflet's internal z-indices (panes 400, controls 1000) so the
   sticky .site-bar (z-index 1000) always stays above a scrolled map. */
.leaflet-container {
  isolation: isolate;
}
.leaflet-bar,
.leaflet-touch .leaflet-bar {
  border: var(--stroke);
  border-radius: 0;
  box-shadow: none;
}
.leaflet-bar a,
.leaflet-bar a:first-child,
.leaflet-bar a:last-child,
.leaflet-touch .leaflet-bar a:first-child,
.leaflet-touch .leaflet-bar a:last-child {
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
  background: var(--yellow);
  color: var(--ink);
}
.leaflet-container .leaflet-control-attribution {
  background: var(--paper);
  color: var(--ink);
  border-top: var(--stroke);
  border-left: var(--stroke);
  border-radius: 0;
}
.leaflet-container .leaflet-control-attribution a {
  color: var(--ink);
}

/* ── Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* publish and privacy pad/narrow <body>: let the ticker and bar run full-bleed */
body[data-page='publish'] > .ticker,
body[data-page='publish'] > .site-bar,
body[data-page='privacy'] > .ticker,
body[data-page='privacy'] > .site-bar {
  margin-inline: calc(50% - 50vw);
}
body[data-page='publish'] > .ticker {
  margin-top: -12px;
}
body[data-page='publish'] > .site-bar {
  margin-bottom: 16px;
}
body[data-page='privacy'] > .ticker {
  margin-top: -3rem;
}
body[data-page='privacy'] > .site-bar {
  margin-bottom: 2.5rem;
}

/* map: compact header so the full-height map keeps most of the viewport */
body[data-page='map'] .header-inner {
  max-width: none;
  padding: 12px 24px 14px;
}
body[data-page='map'] .header-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
}
body[data-page='map'] .header-sub {
  font-size: 1rem;
  margin-top: 4px;
}
body[data-page='map'] .experimental-badge {
  top: 8px;
  padding: 4px 10px;
}
body[data-page='map'] .lang-selector {
  bottom: 6px;
}
@media (max-width: 700px) {
  body[data-page='map'] .header-inner {
    padding: 10px 16px 6px;
  }
  body[data-page='map'] .header-sub {
    font-size: 0.9rem;
  }
  body[data-page='map'] .experimental-badge {
    display: none;
  }
  body[data-page='map'] .lang-selector {
    position: static;
    padding: 0 16px 10px;
  }
}