/* === Fonts === */
body {
  font-family: 'C64 Pro Mono', 'Courier New', Courier, monospace;
  margin: 0;
  padding: 0;
}

h1, h2, .bbs-title {
  font-family: 'C64 Pro', sans-serif;
}
/* === C64 Themed Button === */
.info-button {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  font-family: 'C64 Pro Mono', 'Courier New', monospace;
  font-size: 1rem;
  font-weight: bold;
  color: #EEEE77; /* C64 Yellow */
  background: #111; /* Dark C64 background */
  border: 2px solid #DD8855; /* C64 Orange */
  border-radius: 4px;
  text-decoration: none;
  text-shadow: 0 0 3px #000;
  box-shadow: 0 0 8px rgba(221, 136, 85, 0.6); /* Orange glow */
  transition: 0.2s ease-in-out;
}

.info-button:hover {
  background: #222;
  border-color: #FFAA66;
  box-shadow: 0 0 12px rgba(255, 170, 102, 0.9);
  color: #FFFFAA;
}

/* === Layout Container === */
.map-info {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem;
  box-sizing: border-box;
}

/* === Left column (info card) === */
.map-card {
  flex: 1;
  max-width: 600px;
  min-height: 400px;
  background: #111;
  color: #EEEE77; /* C64 Yellow */
  padding: 1rem;
  border-radius: 6px;
  box-shadow: 0 0 8px rgba(221, 136, 85, 0.6); /* C64 Orange glow */
  text-align: left;
  overflow-y: auto;
  text-shadow: 0 0 2px #000;
}

/* === Enhanced map-card content === */
.section-title {
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
  color: #AAAAFF; /* C64 Cyan */
  text-shadow: 0 0 4px #AAAAFF;
}

.network-list {
  list-style: none;
  padding-left: 0;
}

.network-list li {
  margin-bottom: 1.2rem;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-left: 4px solid #DD8855; /* C64 Orange */
  border-radius: 4px;
  transition: background 0.3s ease;
}
.network-list li:hover {
  background: rgba(255, 255, 255, 0.1);
}

.net-name {
  font-weight: bold;
  color: #EEEE77; /* C64 Yellow */
  font-family: 'C64 Pro', sans-serif;
  text-shadow: 0 0 3px #DD8855; /* Orange glow */
}

.indent {
  margin-left: 1rem;
  font-size: 0.95rem;
  color: #BBBBBB; /* C64 Light Grey */
}

/* === Right column (map) === */
.map-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;  /* let #map stretch full width */
  min-height: 520px;
  max-width: 600px;
}

#map {
  flex: 1;
  width: 100%;
  min-height: 400px;
  height: 60vh;
  max-height: 500px;
  border: 2px solid #DD8855;
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(170, 170, 255, 0.5);
  margin-bottom: 1rem; /* <-- added spacing */
}

/* ============================================================
   SEARCH BOX + DROPDOWN (C64 FIRE PALETTE, MODERN READABLE FONT)
   ============================================================ */

/* Search container */
.map-search {
  margin-top: 0.5rem;
  text-align: center;
  position: relative; /* anchors dropdown */
}

/* Input + button */
.map-search input,
.map-search button {
  font-family: Arial, Helvetica, sans-serif; /* clean, readable */
  font-size: 0.9rem;
  padding: 0.3rem 0.5rem;
  box-sizing: border-box;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .map-search {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .map-search input {
    font-size: 0.8rem;
    padding: 0.4rem;
    width: 100%;
  }
  .map-search button {
    font-size: 0.8rem;
    padding: 0.4rem;
    width: 100%;
    margin-top: 0.25rem;
  }
}

/* ============================================================
   DROPDOWN RESULTS
   ============================================================ */

.ftn-search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;

  background: #111;
  border: 2px solid #DD8855; /* C64 Orange */
  border-radius: 4px;
  box-shadow: 0 0 12px rgba(221, 136, 85, 0.7);

  font-family: Arial, Helvetica, sans-serif; /* modern readable */
  font-size: 0.75rem; /* smaller, clean */
  line-height: 1.2;
  color: #EEEE77;

  display: none;
  z-index: 9999;
  max-height: 220px;
  overflow-y: auto;
  text-align: left;
}

/* Dropdown visible */
.ftn-search-open {
  display: block;
}

/* List container */
.ftn-search-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Each result row */
.ftn-search-item {
  padding: 4px 8px; /* tighter spacing */
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* prevents overflow */
}

/* Hover + keyboard highlight */
.ftn-search-item:hover,
.ftn-search-item-active {
  background: rgba(255,170,102,0.25); /* warm orange glow */
  color: #FFFFAA;
}

/* Highlighted marker on map */
.ftn-search-highlight {
  filter: drop-shadow(0 0 6px #FFAA66);
}

/* === Marker sizing variable === */
:root {
  --pin-size: 15px; /* unified size for all non-HUB pins */
}

/* === Base marker style (single pins) === */
.custom-marker div {
  width: var(--pin-size);
  height: var(--pin-size);
  border-radius: 50%;
  border: none;
}

/* === Network-specific colors === */
.custom-marker.araknet div    { background: #0000FF; box-shadow: 0 0 10px #0000FF; }
.custom-marker.disciplenet div{ background: #EEEE77; box-shadow: 0 0 10px #EEEE77; }
.custom-marker.cnet div       { background: #00FF00; box-shadow: 0 0 10px #00FF00; }
.custom-marker.pinet div      { background: #00CCFF; box-shadow: 0 0 10px #00CCFF; }
.custom-marker.retronet div   { background: #CC00FF; box-shadow: 0 0 10px #CC00FF; }

/* === Pie marker styling === */
.custom-marker.pie svg {
  width: var(--pin-size);
  height: var(--pin-size);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255,255,255,0.6);
  transition: transform 0.2s ease;
}
.custom-marker.pie svg:hover {
  transform: scale(1.2);
  filter: drop-shadow(0 0 6px #fff);
}
.custom-marker.pie path {
  stroke: #000;
  stroke-width: 1;
}

/* === Special flame pin for Chattanooga hub === */
.custom-marker.flame {
  width: 26px;
  height: 26px;
}
.custom-marker.flame .bi-fire {
  font-size: 26px;
  color: #ff6600;
  text-shadow: 0 0 6px #ff3300, 0 0 12px #cc0000;
  animation: flame-flicker 0.8s infinite alternate;
}
@keyframes flame-flicker {
  0%   { transform: scale(1) rotate(0deg); color: #ff6600; text-shadow: 0 0 6px #ff3300, 0 0 12px #cc0000; }
  50%  { transform: scale(1.1) rotate(-3deg); color: #ff9933; text-shadow: 0 0 10px #ff6600, 0 0 18px #cc0000; }
  100% { transform: scale(1.05) rotate(3deg); color: #ff3300; text-shadow: 0 0 8px #cc0000, 0 0 14px #ff6600; }
}

/* === Popup styling === */
.leaflet-popup-content-wrapper {
  background: #000;
  border: 2px solid #00AA00; /* Green */
  font-family: 'C64 Pro Mono', 'Courier New', monospace;
  color: #00AA00;
  border-radius: 6px;
  min-width: 480px;
  max-width: none;
  max-height: 180px;
  overflow: visible;
}
.leaflet-popup-tip {
  background: #000;
  border: 2px solid #00AA00;
}
.leaflet-popup-content {
  margin: 0;
  padding: 0.25rem;
  font-size: 0.50rem;
  line-height: 1.2;
  white-space: nowrap;
}
.popup-label { color: #AAAAFF; font-weight: bold; }
.popup-value { color: #EEEE77; display: inline-block; white-space: nowrap; }
.leaflet-popup-content b { color: #DD8855; display: block; margin-bottom: 0.10rem; }

/* ============================
   LEGEND CONTAINER (BOTTOM RIGHT)
   ============================ */
.legend {
  position: absolute;
  bottom: 15px;
  right: 15px;
  background: rgba(0,0,0,0.65);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.85em;
  color: #fff;
  z-index: 9999;
}

/* ============================
   GRID LAYOUT (2×3 + HUB)
   ============================ */
.legend-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 6px 12px;
}

.legend-item {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

/* HUB spans both columns */
.legend-hub {
  grid-column: 1 / span 2;
  text-align: center;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.25);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

/* ============================
   PIN ICONS
   ============================ */
.legend i.legend-color {
  margin-right: 6px;
  opacity: 0.9;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.legend i.legend-color:hover {
  transform: scale(1.4);
  box-shadow: 0 0 8px #fff;
}

/* Flame hub */
.legend i.flame {
  font-size: 14px;
  color: #ff6600;
  text-shadow: 0 0 6px #ff3300, 0 0 12px #cc0000;
}

/* DiscipleNet cross */
.legend i.disciplenet {
  font-size: 14px;
  color: #EEEE77;
  text-shadow: 0 0 6px #DD8855, 0 0 12px #AAAAFF;
}

/* === Legend pin colors (match map markers) === */
.legend i.araknet {
  background: #0000FF;
  box-shadow: 0 0 6px #0000FF;
}

.legend i.cnet {
  background: #00FF00;
  box-shadow: 0 0 6px #00FF00;
}

.legend i.pinet {
  background: #00CCFF;
  box-shadow: 0 0 6px #00CCFF;
}

.legend i.retronet {
  background: #CC00FF;
  box-shadow: 0 0 6px #CC00FF;
}

/* ============================
   SVG PIE (5‑slice PETSCII)
   ============================ */
.legend-pie-svg {
  width: 14px;
  height: 14px;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.6));
  transform-origin: 50% 50%;
}

/* Slow constant spin */
.legend-pie-svg.spin {
  animation: pie-spin 8s linear infinite;
}

@keyframes pie-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes pie-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes pie-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ============================
   MOBILE BREAKPOINTS
   ============================ */
@media (max-width: 600px) {
  .legend {
    font-size: 0.7em;
    padding: 5px 6px;
  }

  .legend i.legend-color {
    width: 10px;
    height: 10px;
  }

  .legend i.flame {
    font-size: 12px;
  }
}