/* European Travel Explorer — Shared Styles
   Matches jonathangurvey.com design system exactly */

:root {
  --night-sky:      #0a1628;
  --midnight-blue:  #1a2744;
  --moonlight-cyan: #4dd0e1;
  --warm-glow:      #ffa726;
  --cottage-gold:   #ffb74d;
  --text-light:     #e8eaf6;
  --card-dark:      #1e2d47;
  --starlight:      #b3e5fc;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-light);
  background-color: var(--night-sky);
  background-image:
    radial-gradient(white 1px, transparent 1px),
    radial-gradient(white 1px, transparent 1px);
  background-size: 50px 50px;
  background-position: 0 0, 25px 25px;
  animation: twinkle 8s infinite alternate;
  min-height: 100vh;
}

@keyframes twinkle {
  0%   { background-size: 50px 50px, 50px 50px; }
  50%  { background-size: 52px 52px, 48px 48px; }
  100% { background-size: 50px 50px, 50px 50px; }
}

/* ── Navigation ── */
nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--midnight-blue);
  border-bottom: 1px solid var(--moonlight-cyan);
  padding: 0 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 56px;
}

.nav-brand {
  font-size: 1rem;
  font-weight: 700;
  color: var(--moonlight-cyan);
  text-decoration: none;
  margin-right: auto;
  letter-spacing: 0.02em;
}

nav a {
  color: var(--text-light);
  font-size: 0.95rem;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
  white-space: nowrap;
}

nav a:hover,
nav a.active {
  color: var(--moonlight-cyan);
  border-color: var(--moonlight-cyan);
}

/* ── Typography ── */
h1, h2, h3, h4 { line-height: 1.3; }

h2 {
  color: var(--moonlight-cyan);
  text-shadow: 0 0 12px rgba(77, 208, 225, 0.4);
  font-size: 1.6rem;
  margin-bottom: 1rem;
}

h3 { color: var(--cottage-gold); font-size: 1.1rem; }

a { color: var(--moonlight-cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Page layout ── */
.page-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2.5rem 2rem;
}

.page-header {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid rgba(77, 208, 225, 0.3);
}

.page-header h1 {
  font-size: 2rem;
  color: var(--moonlight-cyan);
  text-shadow: 0 0 16px rgba(77, 208, 225, 0.4);
}

.page-header p {
  color: var(--starlight);
  margin-top: 0.4rem;
  font-size: 0.95rem;
}

/* ── Section dividers ── */
section + section {
  border-top: 2px dashed rgba(77, 208, 225, 0.3);
  padding-top: 2rem;
  margin-top: 2rem;
}

/* ── Cards ── */
.card {
  background: var(--card-dark);
  border-left: 4px solid var(--warm-glow);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(255, 167, 38, 0.25);
}

.card h3 {
  margin-bottom: 0.4rem;
  font-size: 1rem;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5rem 0;
}

.badge {
  display: inline-block;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid var(--moonlight-cyan);
  color: var(--moonlight-cyan);
  text-transform: capitalize;
  font-weight: 500;
}

.badge.category-personal       { border-color: #7986cb; color: #7986cb; }
.badge.category-accommodation  { border-color: var(--warm-glow); color: var(--warm-glow); }
.badge.category-professional   { border-color: #81c784; color: #81c784; }
.badge.category-event          { border-color: #f06292; color: #f06292; }
.badge.category-landmark       { border-color: var(--starlight); color: var(--starlight); }
.badge.category-saved          { border-color: var(--moonlight-cyan); color: var(--moonlight-cyan); }
.badge.category-wishlist       { border-color: var(--cottage-gold); color: var(--cottage-gold); }
.badge.category-city           { border-color: #a5d6a7; color: #a5d6a7; }

.card-address {
  font-size: 0.82rem;
  color: var(--starlight);
  margin-top: 0.4rem;
  opacity: 0.8;
}

/* Card detail panel (places page) */
.card-detail {
  display: none;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(77, 208, 225, 0.2);
}

.card-detail.open { display: block; }

.mini-map {
  width: 100%;
  height: 200px;
  border-radius: 6px;
  border: 1px solid rgba(77, 208, 225, 0.3);
  margin-top: 0.75rem;
  background: var(--night-sky);
}

/* ── Card grid ── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

@media (max-width: 1100px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .card-grid { grid-template-columns: 1fr; } }

/* ── Filter bar ── */
.filter-bar {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.filter-bar label {
  font-size: 0.85rem;
  color: var(--starlight);
  margin-right: 0.25rem;
}

.filter-bar select {
  background: var(--card-dark);
  color: var(--text-light);
  border: 1px solid var(--moonlight-cyan);
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 0.9rem;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}

.filter-bar select:hover,
.filter-bar select:focus { border-color: var(--warm-glow); }

.filter-count {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--starlight);
}

/* ── Buttons ── */
.btn-primary {
  background: var(--warm-glow);
  color: #0a1628;
  border: none;
  border-radius: 4px;
  padding: 0.5rem 1.2rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
  font-size: 0.9rem;
}

.btn-primary:hover { opacity: 0.85; }

.btn-secondary {
  background: transparent;
  color: var(--moonlight-cyan);
  border: 1px solid var(--moonlight-cyan);
  border-radius: 4px;
  padding: 0.5rem 1.2rem;
  cursor: pointer;
  transition: background 0.2s;
  font-size: 0.9rem;
}

.btn-secondary:hover { background: rgba(77, 208, 225, 0.1); }

/* ── Stats cards ── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-bottom: 2rem;
}

@media (max-width: 900px)  { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px)  { .stat-grid { grid-template-columns: 1fr; } }

.stat-card {
  background: var(--card-dark);
  border-left: 4px solid var(--moonlight-cyan);
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
}

.stat-number {
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--moonlight-cyan);
  line-height: 1;
  display: block;
}

.stat-label {
  font-size: 0.85rem;
  color: var(--starlight);
  margin-top: 0.4rem;
  display: block;
}

.stat-sub {
  font-size: 0.78rem;
  color: var(--text-light);
  opacity: 0.6;
  margin-top: 0.2rem;
  display: block;
}

/* ── Countries table ── */
.countries-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

@media (max-width: 700px) { .countries-grid { grid-template-columns: 1fr; } }

.country-row {
  background: var(--card-dark);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-left: 3px solid var(--warm-glow);
}

.country-name { font-weight: 500; color: var(--text-light); }
.country-year { font-size: 0.82rem; color: var(--starlight); }

/* ── Attribution list ── */
.attribution-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.attribution-list li {
  font-size: 0.88rem;
  color: var(--starlight);
  padding-left: 1rem;
  border-left: 2px solid rgba(77, 208, 225, 0.3);
}

.attribution-list strong { color: var(--text-light); }
.attribution-list a { color: var(--moonlight-cyan); }
.attribution-list a:hover { text-decoration: underline; }

/* ── Leaflet popup override ── */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: var(--card-dark) !important;
  color: var(--text-light) !important;
  border: 1px solid var(--warm-glow) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important;
}

.leaflet-popup-content-wrapper { border-radius: 8px !important; }

.map-popup { padding: 2px 0; }
.map-popup strong { color: var(--cottage-gold); font-size: 0.95rem; }
.popup-category { font-size: 0.78rem; color: var(--moonlight-cyan); text-transform: capitalize; }
.popup-country  { font-size: 0.82rem; color: var(--starlight); }
.popup-address  { font-size: 0.78rem; color: var(--text-light); opacity: 0.7; margin-top: 3px; display: block; }
.popup-route    { font-size: 0.88rem; color: var(--text-light); margin-top: 2px; }
.popup-route span { color: var(--starlight); font-size: 0.78rem; }

/* ── Leaflet layer control override ── */
.leaflet-control-layers {
  background: var(--card-dark) !important;
  border: 1px solid var(--moonlight-cyan) !important;
  border-radius: 6px !important;
  color: var(--text-light) !important;
}

.leaflet-control-layers-expanded { padding: 8px 12px !important; }
.leaflet-control-layers label    { color: var(--text-light) !important; font-size: 0.88rem !important; }

/* ── No-stars override (places & stats pages) ── */
body.no-stars {
  background-image: none;
  animation: none;
}

/* ── Fade-in animation ── */
.fade-in-section {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-in-section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Empty state ── */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--starlight);
  grid-column: 1 / -1;
}

/* ── Loading state ── */
#map-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 500;
  background: var(--card-dark);
  color: var(--moonlight-cyan);
  padding: 1rem 2rem;
  border-radius: 8px;
  border: 1px solid var(--moonlight-cyan);
  font-size: 0.9rem;
  pointer-events: none;
}