/* ─────────────────────────────────────────────────────────────────────
   eventchess.com — Overrides on top of YNEX (Spruko Bootstrap 5 admin).
   YNEX provides the heavy lifting (assets/css/styles.css). This file
   only carries app-specific tweaks the template doesn't ship with.
   ───────────────────────────────────────────────────────────────────── */

/* ─── Brand mark in header / login ─────────────────────────────── */
.ec-brand {
  display: inline-flex;
  align-items: baseline;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.018em;
  color: var(--default-text-color, #333);
  text-decoration: none;
}
.ec-brand .ec-brand-suffix { color: var(--primary-color); }

/* ─── MapLibre discovery map ───────────────────────────────────── */
.ec-map-wrap {
  position: relative;
  width: 100%;
  height: 460px;
  border: 1px solid var(--default-border, #f3f3f3);
  border-radius: 8px;
  overflow: hidden;
}
.ec-map-canvas { position: absolute; inset: 0; }

.ec-pin {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: transform 120ms ease;
}
.ec-pin:hover { transform: scale(1.18); }
.ec-pin-future  { background: #26bf94; }
.ec-pin-current { background: #f5b849; animation: ec-pin-pulse 1.6s ease-in-out infinite; }
.ec-pin-past    { background: #e6533c; }
@keyframes ec-pin-pulse {
  0%, 100% { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(245, 184, 73, 0.55); }
  50%      { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35), 0 0 0 8px rgba(245, 184, 73, 0); }
}

/* Legend dots in the filter bar */
.ec-pin-legend {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.ec-pin-legend-future  { background: #26bf94; }
.ec-pin-legend-current { background: #f5b849; }
.ec-pin-legend-past    { background: #e6533c; }

/* Legacy country-aggregate marker (kept in case it is still referenced) */
.ec-marker {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem 0.2rem 0.4rem;
  background: #fff;
  color: #14141a;
  border: 1px solid var(--gray-4, #dbdfe1);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  white-space: nowrap;
  transition: transform 120ms ease, border-color 120ms ease;
}
.ec-marker:hover { transform: translateY(-1px); border-color: var(--primary-color); }
.ec-marker-flag { font-size: 0.95rem; line-height: 1; }
.ec-marker-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 0.3rem;
  background: var(--primary-color);
  color: #fff;
  border-radius: 8px;
  font-size: 0.66rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ─── Country flag (used in cards + tables) ────────────────────── */
.flag-emoji { font-size: 1.05rem; line-height: 1; vertical-align: -2px; }

/* ─── Status callouts (dashed, used by empty/error states) ─────── */
.ec-status {
  padding: 1rem;
  border: 1px dashed var(--gray-4, #dbdfe1);
  border-radius: 8px;
  background: var(--gray-1, #f9fafb);
  color: var(--gray-7, #4d5875);
  font-size: 0.88rem;
}
.ec-status p { margin: 0; }
.ec-status p + p { margin-top: 0.4rem; }
.ec-status.is-error {
  border: 1px solid rgba(var(--danger-rgb), 0.4);
  background: rgba(var(--danger-rgb), 0.06);
  color: rgb(var(--danger-rgb));
}
.ec-status.is-loading::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 0.5rem;
  vertical-align: -2px;
  border: 2px solid var(--gray-4, #dbdfe1);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: ec-spin 700ms linear infinite;
}
@keyframes ec-spin { to { transform: rotate(360deg); } }

/* ─── Hero (home landing) ──────────────────────────────────────── */
.ec-hero {
  padding: 2.5rem 0 2rem;
  border-bottom: 1px solid var(--default-border, #f3f3f3);
  margin-bottom: 2rem;
}
.ec-hero-eyebrow {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary-color);
  margin-bottom: 0.6rem;
}
.ec-hero-title {
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0 0 1rem;
  color: var(--default-text-color, #14141a);
  max-width: 22ch;
}
.ec-hero-title em {
  font-style: italic;
  font-weight: 700;
  color: var(--primary-color);
}
.ec-hero-lead {
  max-width: 56ch;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--gray-7, #4d5875);
  margin: 0 0 1.25rem;
}

/* ─── MapLibre popup styling alignment ─────────────────────────── */
.maplibregl-popup-content { font-family: var(--default-font-family, sans-serif); }
.maplibregl-popup-content strong { font-weight: 700; }