/* ============================================================
   CLEAR CREEK TRAIL TOUR — Stylesheet
   Brand: Great Peninsula Conservancy (official)
   
   Colors:
     Bay Blue    #006596  (primary — wordmark, CTAs)
     GPC Teal    #19796d  (secondary — accents, tips)
     Moss Green  #748d39  (nature accent)
     Bluff Brown #a45734  (warm earth)
     Salmon      #eb6c39  (callouts, highlights)
     Banana Slug #eaab10  (pinecone top, emphasis)
     Salal Berry #3f2c48  (dark — splash BG)
     Cloudy Day  #e5e2cd  (warm off-white — panels)
   
   Fonts (Google Fonts approximations):
     Red Hat Display Bold  → 'Red Hat Display', weight 700
     Red Hat Display Med   → 'Red Hat Display', weight 500
     Red Hat Text Regular  → 'Red Hat Text', weight 400
     Protest Riot (callouts) → 'Protest Riot'
   ============================================================ */

:root {
  /* GPC Official Palette */
  --bay-blue:     #006596;
  --bay-blue-dk:  #004f75;
  --bay-blue-lt:  #1a7fb5;
  --gpc-teal:     #19796d;
  --gpc-teal-lt:  #1fa394;
  --moss:         #748d39;
  --moss-lt:      #8fac45;
  --bluff:        #a45734;
  --salmon:       #eb6c39;
  --banana:       #eaab10;
  --berry:        #3f2c48;
  --berry-mid:    #5a3f68;
  --cloudy:       #e5e2cd;
  --cloudy-dk:    #d5d1ba;
  --gpc-black:    #1a1a1a;
  --gpc-white:    #ffffff;

  /* Semantic aliases */
  --primary:       var(--bay-blue);
  --primary-dk:    var(--bay-blue-dk);
  --primary-lt:    var(--bay-blue-lt);
  --accent:        var(--gpc-teal);
  --accent-lt:     var(--gpc-teal-lt);
  --surface:       var(--cloudy);
  --text-dark:     #0d1a0d;
  --text-mid:      #2a3a2a;
  --text-muted:    #556655;

  /* Shape */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 14px;

  /* Shadow */
  --shadow-card:  0 2px 14px rgba(0,101,150,0.14);
  --shadow-panel: 0 -8px 36px rgba(0,0,0,0.2);

  /* Typography */
  --font-head: 'Red Hat Display', 'Montserrat', system-ui, sans-serif;
  --font-body: 'Red Hat Text', 'Montserrat', system-ui, sans-serif;
  --font-callout: 'Protest Riot', 'Red Hat Display', cursive;

  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--font-body);
  background: var(--berry);
  color: var(--text-dark);
}
a { color: var(--bay-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
.hidden { display: none !important; }

/* ============================================================
   SPLASH SCREEN
   ============================================================ */
#splash {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  overflow-y: auto;
  transition: opacity 0.5s ease;
}

@media (max-width: 480px) {
  #splash {
    align-items: flex-start;
  }
}
#splash.fade-out { opacity: 0; pointer-events: none; }

/* Deep Salal Berry background + topo contour overlay */
.splash-bg {
  position: absolute; inset: 0;
  background: linear-gradient(155deg, #2a1c33 0%, #3f2c48 50%, #4a3458 100%);
  z-index: 0;
}

/* Real GPC topographic texture — tiled over dark background */
.splash-bg::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url('../assets/Topographic_texture_-_Dark.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.35;
  z-index: 0;
}

/* Bay Blue accent bar along top — matches GPC nav */
.splash-bg::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--bay-blue);
  z-index: 1;
}

.splash-content {
  position: relative; z-index: 1;
  max-width: 520px; width: 100%;
  padding: 48px 36px 48px;
  display: flex; flex-direction: column; gap: 22px;
  animation: slideUp 0.7s cubic-bezier(0.4,0,0.2,1) both;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* GPC Logo on splash — fir cone + wordmark, links to GPC site */
.splash-logo {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  opacity: 1;
  transition: opacity var(--transition);
}
.splash-logo:hover {
  opacity: 0.82;
  text-decoration: none;
}
.splash-cone {
  height: 64px;
  width: auto;
  flex-shrink: 0;
}
.splash-wordmark {
  height: 52px;
  width: auto;
  max-width: 220px;
  filter: brightness(0) invert(1);
  opacity: 0.88;
}

/* Stack vertically on narrow screens */
@media (max-width: 420px) {
  .splash-logo {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .splash-cone {
    height: 52px;
  }
  .splash-wordmark {
    height: 42px;
    max-width: 200px;
  }
}

/* Thin Bay Blue rule — GPC design pattern */
.splash-rule {
  width: 48px; height: 3px;
  background: var(--bay-blue);
  border: none;
  border-radius: 1px;
}

.splash-eyebrow {
  font-family: var(--font-head);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gpc-teal-lt);
}

/* Red Hat Display Bold headline */
.splash-title {
  font-family: var(--font-head);
  font-size: clamp(2.6rem, 7vw, 3.8rem);
  font-weight: 700;
  line-height: 1.0;
  color: var(--gpc-white);
}
.splash-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--cloudy);
}

.splash-description {
  font-family: var(--font-body);
  font-size: 0.93rem;
  line-height: 1.72;
  color: rgba(229, 226, 205, 0.8);
  font-weight: 400;
}

.splash-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.splash-meta span {
  background: rgba(0,101,150,0.25);
  border: 1px solid rgba(0,101,150,0.45);
  color: var(--cloudy);
  padding: 5px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.splash-instructions {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-left: 3px solid var(--bay-blue);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
}
.splash-instructions h3 {
  font-family: var(--font-head);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gpc-teal-lt);
  margin-bottom: 14px;
}
.splash-instructions ol {
  padding-left: 18px;
  display: flex; flex-direction: column; gap: 9px;
}
.splash-instructions li {
  font-family: var(--font-body);
  color: rgba(229,226,205,0.72);
  font-size: 0.875rem;
  line-height: 1.5;
}
.splash-instructions strong {
  color: var(--gpc-white);
  font-weight: 600;
}

/* GPC CTA button — Bay Blue, square corners, Red Hat bold all-caps */
.btn-primary {
  background: var(--bay-blue);
  color: var(--gpc-white);
  border: none;
  padding: 14px 30px;
  border-radius: var(--radius-sm);
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  align-self: flex-start;
  box-shadow: 0 3px 16px rgba(0,101,150,0.45);
}
.btn-primary:hover {
  background: var(--bay-blue-lt);
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(0,101,150,0.55);
}
.btn-primary:active { transform: translateY(0); }

.splash-credit {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: rgba(229,226,205,0.35);
}
.splash-credit a { color: rgba(229,226,205,0.5); }
.splash-credit a:hover { color: var(--cloudy); text-decoration: none; }

/* ============================================================
   MAIN APP
   ============================================================ */
#app {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
}

/* ---------- Header — Bay Blue bar ---------- */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  height: 54px;
  background: var(--bay-blue);
  border-bottom: 3px solid var(--bay-blue-dk);
  z-index: 400;
  flex-shrink: 0;
  gap: 10px;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  justify-content: center;
}

/* Real GPC fir cone in header */
.header-pinecone {
  height: 32px;
  width: auto;
  flex-shrink: 0;
}

.app-title {
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  white-space: nowrap;
}

.btn-icon {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.9);
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition);
  flex-shrink: 0;
}
.btn-icon:hover {
  background: rgba(255,255,255,0.28);
  color: var(--gpc-white);
}
.btn-icon.locating {
  color: var(--banana);
  animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ---------- Map ---------- */
#map { flex: 1; z-index: 100; }

/* Leaflet chrome styled to GPC */
.leaflet-control-attribution {
  font-size: 0.62rem !important;
  background: rgba(0,37,56,0.82) !important;
  color: rgba(229,226,205,0.6) !important;
}
.leaflet-control-attribution a { color: rgba(0,101,150,0.9) !important; }

.leaflet-control-zoom a {
  background: var(--bay-blue) !important;
  color: var(--gpc-white) !important;
  border-color: var(--bay-blue-dk) !important;
  font-weight: 700 !important;
}
.leaflet-control-zoom a:hover {
  background: var(--bay-blue-lt) !important;
}

/* Popups used by amenity markers (see addPOIMarker in app.js) —
   styled to match the rest of the map chrome above rather than
   left as Leaflet's plain default. */
.leaflet-popup-content-wrapper {
  border-radius: var(--radius-md) !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.25) !important;
}
.leaflet-popup-content {
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  line-height: 1.55 !important;
  color: var(--text-dark) !important;
  margin: 12px 16px !important;
}
.leaflet-popup-content strong {
  font-family: var(--font-head) !important;
  color: var(--bay-blue-dk) !important;
}
.leaflet-popup-tip-container { display: block !important; }

/* ---------- Stop Markers — teardrop shape, colored by category ----------
   Marker background color is set inline per-stop in app.js (addStopMarker),
   using the color defined for that stop's category in js/tour-data.js. */
.stop-marker { background: transparent !important; border: none !important; }

.marker-inner {
  width: 36px; height: 36px;
  border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  border: 2px solid rgba(255,255,255,0.9);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(0,0,0,0.35);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.marker-inner svg {
  width: 16px; height: 16px;
  transform: rotate(45deg); /* counter-rotate so the icon stays upright inside the rotated teardrop */
  color: #fff;
  stroke: #fff;
  flex-shrink: 0;
}

.stop-marker:hover .marker-inner,
.marker-inner.active {
  transform: rotate(-45deg) scale(1.18);
  box-shadow: 0 5px 18px rgba(0,0,0,0.45);
  filter: brightness(1.15);
}

/* ---------- Location Dot ---------- */
.location-dot { background: transparent !important; border: none !important; }
.location-dot-inner {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--salmon);
  border: 2.5px solid #fff;
  box-shadow: 0 2px 8px rgba(235,108,57,0.55);
}

/* ============================================================
   STOP DETAIL PANEL
   ============================================================ */
.stop-panel {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--cloudy);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-panel);
  padding: 10px 26px 44px;
  z-index: 300;
  max-height: 74vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform var(--transition);
  border-top: 4px solid var(--bay-blue);
}
.stop-panel.open { transform: translateY(0); }

.panel-handle {
  width: 36px; height: 3px;
  background: var(--cloudy-dk);
  border-radius: 2px;
  margin: 8px auto 18px;
}

.panel-close {
  position: absolute;
  top: 14px; right: 18px;
  background: var(--cloudy-dk);
  border: none;
  color: var(--text-mid);
  width: 30px; height: 30px;
  border-radius: 50%;
  font-size: 0.8rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), color var(--transition);
}
.panel-close:hover {
  background: var(--bay-blue);
  color: var(--gpc-white);
}

/* Category badge in the stop detail panel — background color and SVG icon
   are set inline in app.js (openPanel) based on the stop's category. */
.panel-badge {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  margin-bottom: 14px;
  flex-shrink: 0;
}

.panel-badge svg {
  width: 16px; height: 16px;
  transform: rotate(45deg);
  stroke: #fff;
  color: #fff;
}

#panel-title {
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--bay-blue-dk);
  line-height: 1.2;
  margin-bottom: 8px;
}

/* Thin Bay Blue rule under title */
.panel-title-rule {
  width: 40px; height: 2px;
  background: var(--bay-blue);
  border-radius: 1px;
  margin-bottom: 14px;
}

.panel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 16px;
}
.tag {
  background: rgba(0,101,150,0.1);
  border: 1px solid rgba(0,101,150,0.2);
  color: var(--bay-blue-dk);
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-head);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Stop photo — inset, rounded, Bay Blue top border accent */
.panel-photo {
  width: 100%;
  margin: 0 0 18px 0;
  display: block;
  height: 200px;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-md);
  border-top: 3px solid var(--bay-blue);
  box-shadow: 0 2px 12px rgba(0,101,150,0.15);
}

#panel-body {
  font-family: var(--font-body);
  color: var(--text-dark);
  font-size: 0.9rem;
  line-height: 1.74;
}
#panel-body p + p { margin-top: 12px; }
#panel-body strong { font-weight: 600; color: var(--bay-blue-dk); }
#panel-body em { font-style: italic; }

/* "Look & listen" tip — Teal left border, Protest Riot label */
.panel-tip {
  margin-top: 18px;
  background: rgba(25,121,109,0.08);
  border-left: 3px solid var(--gpc-teal);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 12px 16px;
  font-size: 0.86rem;
  line-height: 1.62;
  color: var(--text-mid);
}
.panel-tip strong {
  font-family: var(--font-callout);
  font-size: 0.8rem;
  color: var(--gpc-teal) !important;
  font-weight: 400;
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 4px;
}

/* ============================================================
   TOAST
   ============================================================ */
.toast {
  position: absolute;
  top: 64px; left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--berry);
  color: var(--cloudy);
  padding: 9px 20px;
  border-radius: var(--radius-sm);
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: var(--shadow-card);
  z-index: 500;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  border-left: 3px solid var(--bay-blue);
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 480px) {
  .splash-content {
    padding: 48px 24px 36px;
    gap: 18px;
  }
}

@media (min-width: 600px) {
  .stop-panel {
    max-width: 400px;
    left: 12px; right: auto;
    bottom: 12px;
    border-radius: var(--radius-md);
    border-top: 4px solid var(--bay-blue);
    transform: translateX(-120%);
    max-height: calc(100vh - 78px);
  }
  .stop-panel.open { transform: translateX(0); }
}

/* Scrollbar */
.stop-panel::-webkit-scrollbar { width: 4px; }
.stop-panel::-webkit-scrollbar-track { background: transparent; }
.stop-panel::-webkit-scrollbar-thumb { background: rgba(0,101,150,0.2); border-radius: 2px; }
/* ============================================================
   MENU DRAWER
   ============================================================ */

/* Overlay behind drawer */
.menu-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 450;
  transition: opacity var(--transition);
}
.menu-overlay.hidden { display: none !important; }

/* Drawer slides in from left */
.menu-drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: min(320px, 85vw);
  background: var(--gpc-white);
  z-index: 500;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 24px rgba(0,0,0,0.25);
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.menu-drawer.hidden {
  display: flex !important; /* keep in DOM for animation */
  transform: translateX(-100%);
}
.menu-drawer.open {
  transform: translateX(0);
}

/* Drawer header */
.menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 54px;
  background: var(--bay-blue);
  flex-shrink: 0;
}
.menu-title {
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
}
.menu-close-btn {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.9);
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition);
}
.menu-close-btn:hover {
  background: rgba(255,255,255,0.28);
}

/* Stop list */
.menu-list {
  list-style: none;
  overflow-y: auto;
  flex: 1;
  padding: 8px 0;
}
.menu-list::-webkit-scrollbar { width: 4px; }
.menu-list::-webkit-scrollbar-track { background: transparent; }
.menu-list::-webkit-scrollbar-thumb { background: rgba(0,101,150,0.15); border-radius: 2px; }

.menu-divider {
  height: 1px;
  background: var(--cloudy-dk);
  margin: 6px 0;
}

/* Each stop button */
.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 18px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  text-decoration: none; /* keeps <a>-based menu items (e.g. Get Involved) visually consistent with <button>-based ones */
  transition: background var(--transition);
  font-family: var(--font-body);
}
.menu-item:hover {
  background: rgba(0,101,150,0.07);
  text-decoration: none;
}
.menu-item:active {
  background: rgba(0,101,150,0.14);
}

/* Home item */
.menu-item-home {
  padding: 14px 18px;
}
.menu-item-home .menu-item-icon {
  font-size: 1.1rem;
  color: var(--bay-blue);
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.menu-item-home .menu-item-label {
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--bay-blue);
  letter-spacing: 0.04em;
}

/* Category badge shown next to each stop in the menu — background color
   set inline per-stop in app.js (buildMenuStopList), icon is an inline SVG. */
.menu-item-badge {
  width: 28px; height: 28px;
  border-radius: 50% 50% 50% 3px;
  transform: rotate(-45deg);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,0.8);
}

.menu-item-icon {
  transform: rotate(45deg); /* counter-rotate so the icon stays upright */
  display: flex; align-items: center;
}

.menu-item-icon svg {
  width: 13px; height: 13px;
  stroke: #fff;
  color: #fff;
}

.menu-item-label {
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--text-dark);
  line-height: 1.3;
}
/* ============================================================
   CATEGORY MARKERS
   (marker shape/color rules now consolidated under "Stop Markers" above)
   ============================================================ */

/* ============================================================
   PANEL CATEGORY CHIP
   ============================================================ */
.panel-category-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 6px;
  border-radius: 99px;
  border: 1px solid;
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.panel-category-chip .chip-icon {
  width: 14px; height: 14px;
  display: flex; align-items: center;
}
.panel-category-chip .chip-icon svg {
  width: 14px; height: 14px;
  stroke: currentColor;
}

/* ============================================================
   MAP LEGEND
   ============================================================
   One combined legend covering both narrative tour-stop categories
   (teardrop dots, matching the map markers) and trail amenities
   (circular dots, also matching their map markers) — collapsible via
   the header button so it doesn't permanently take up map space,
   especially on small screens. See addLegend() in app.js. */
.map-legend {
  background: rgba(255,255,255,0.95);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  border: 1px solid rgba(0,0,0,0.08);
  min-width: 190px;
}

.legend-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0 8px;
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bay-blue-dk);
}
.map-legend.collapsed .legend-toggle {
  padding-bottom: 0;
}

.legend-chevron {
  width: 14px; height: 14px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.map-legend.collapsed .legend-chevron {
  transform: rotate(-90deg);
}

.legend-body {
  max-height: 480px;
  overflow: hidden;
  opacity: 1;
  transition: max-height 0.25s ease, opacity 0.2s ease;
}
.map-legend.collapsed .legend-body {
  max-height: 0;
  opacity: 0;
}

.legend-divider {
  height: 1px;
  background: rgba(0,0,0,0.08);
  margin: 6px 0;
}

.legend-section-label {
  font-family: var(--font-head);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 2px 0 4px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}
.legend-item:not(:last-child) {
  border-bottom: 1px solid rgba(0,0,0,0.05);
  padding-bottom: 6px;
  margin-bottom: 2px;
}

/* Teardrop dot — matches narrative tour-stop markers */
.legend-dot {
  width: 28px; height: 28px;
  border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.legend-dot svg {
  width: 12px; height: 12px;
  transform: rotate(45deg);
  stroke: #fff;
  color: #fff;
}

/* Circular dot — matches amenity (POI) markers */
.legend-dot-circle {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--gpc-white);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 2px solid currentColor;
}
.legend-dot-circle svg {
  width: 12px; height: 12px;
}

.legend-label {
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-dark);
  line-height: 1.2;
}

/* ============================================================
   AMENITY MARKERS (parking/trailheads, restrooms, kiosks)
   ============================================================
   Deliberately circular rather than the teardrop shape used for
   narrative tour stops (see "Stop Markers" above) — this makes it
   immediately clear, at a glance, that these are quick-reference
   amenity points rather than "tap to read about this place" stops.
   Color and icon are set inline per-point in app.js (addPOIMarkers),
   driven by POI_TYPES in js/points-data.js. */
.poi-marker { background: transparent !important; border: none !important; }

.poi-marker-inner {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--gpc-white);
  border: 2px solid currentColor;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.poi-marker-inner svg {
  width: 14px; height: 14px;
  flex-shrink: 0;
}

.poi-marker:hover .poi-marker-inner {
  transform: scale(1.15);
  box-shadow: 0 3px 12px rgba(0,0,0,0.4);
}

/* ============================================================
   MENU CATEGORY HEADINGS
   ============================================================ */
.menu-category-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 6px;
  font-family: var(--font-head);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 4px;
}
.menu-cat-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ============================================================
   PHOTO SLIDESHOW
   ============================================================ */
.panel-slideshow {
  width: calc(100% + 52px);
  margin: 0 -26px 18px -26px;
}

.slideshow-track {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  background: var(--cloudy-dk);
}

.panel-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: opacity 0.15s ease;
  border-top: 3px solid var(--bay-blue);
}

.slideshow-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 4px;
  background: var(--cloudy-dk);
}

.slide-btn {
  background: var(--bay-blue);
  color: #fff;
  border: none;
  width: 30px; height: 30px;
  border-radius: var(--radius-sm);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition);
}
.slide-btn:hover { background: var(--bay-blue-lt); }

.slideshow-footer {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.slide-caption {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.4;
  display: none;
}

.slide-counter {
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--bay-blue);
  letter-spacing: 0.06em;
  display: none;
}

/* ============================================================
   VIDEO EMBED
   ============================================================ */
.panel-video {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
  background: #000;
  transition: opacity 0.15s ease;
}

/* ============================================================
   BIRDS PANEL
   ============================================================ */
.birds-panel {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--cloudy);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-panel);
  z-index: 300;
  display: flex;
  flex-direction: column;
  max-height: 82vh;
  transform: translateY(100%);
  transition: transform var(--transition);
  border-top: 4px solid #748d39;
}
.birds-panel.open { transform: translateY(0); }

.birds-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px 10px;
  flex-shrink: 0;
}
.birds-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  color: #4a5e28;
}
.birds-panel-title svg { stroke: #748d39; }

/* Sub-tabs */
.birds-tabs {
  display: flex;
  border-bottom: 2px solid var(--cloudy-dk);
  flex-shrink: 0;
  padding: 0 18px;
  gap: 4px;
}
.birds-tab {
  background: none;
  border: none;
  padding: 8px 14px;
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color var(--transition), border-color var(--transition);
}
.birds-tab.active {
  color: #748d39;
  border-bottom-color: #748d39;
}
.birds-tab:hover { color: #748d39; }

/* Content area */
.birds-content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
.birds-content::-webkit-scrollbar { width: 4px; }
.birds-content::-webkit-scrollbar-thumb { background: rgba(116,141,57,0.2); border-radius: 2px; }

.birds-meta {
  font-family: var(--font-head);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
  padding: 10px 18px 6px;
}

.birds-date-group {
  margin-bottom: 4px;
}
.birds-date-header {
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gpc-white);
  background: #748d39;
  padding: 5px 18px;
  position: sticky;
  top: 0;
  z-index: 1;
}

.birds-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 18px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  transition: background var(--transition);
}
.birds-row:hover { background: rgba(116,141,57,0.06); }

.birds-name {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.birds-common {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dark);
}
.birds-sci {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-style: italic;
  color: var(--text-muted);
}
.birds-count {
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 700;
  color: #748d39;
  flex-shrink: 0;
  margin-left: 12px;
}

/* Loading + empty states */
.birds-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 48px 24px;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.88rem;
}
.birds-spinner {
  width: 28px; height: 28px;
  border: 3px solid rgba(116,141,57,0.2);
  border-top-color: #748d39;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.birds-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.6;
}

/* Footer */
.birds-footer {
  padding: 10px 18px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--text-muted);
  border-top: 1px solid var(--cloudy-dk);
  flex-shrink: 0;
}
.birds-footer a { color: #748d39; }

/* Menu Birds button */
.menu-item-birds {
  color: #748d39;
}
.menu-item-icon-birds svg { stroke: #748d39; }
.menu-item-birds .menu-item-label {
  font-weight: 600;
  color: #4a5e28;
}

/* eBird button inside stop panel */
.ebird-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  padding: 10px 18px;
  background: #748d39;
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
  box-shadow: 0 2px 10px rgba(116,141,57,0.35);
}
.ebird-btn:hover {
  background: #5a7029;
  transform: translateY(-1px);
}
.ebird-btn svg { stroke: #fff; flex-shrink: 0; }

/* Desktop sidebar for birds panel */
@media (min-width: 600px) {
  .birds-panel {
    max-width: 400px;
    left: 12px; right: auto;
    bottom: 12px;
    border-radius: var(--radius-md);
    border-top: 4px solid #748d39;
    transform: translateX(-120%);
    max-height: calc(100vh - 78px);
  }
  .birds-panel.open { transform: translateX(0); }
}

/* ============================================================
   BIRDS LAUNCH BUTTON (inside Birds of Clear Creek stop panel)
   ============================================================ */
.birds-launch-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 20px;
  padding: 14px 18px;
  background: #748d39;
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
  box-shadow: 0 3px 12px rgba(116,141,57,0.35);
}
.birds-launch-btn:hover {
  background: #8fac45;
  transform: translateY(-1px);
}

/* Menu birds button accent */
.menu-item-birds .menu-item-label,
.menu-item-home .menu-item-label {
  font-weight: 600;
}

/* ============================================================
   WEATHER WIDGET
   ============================================================ */
.weather-widget {
  background: var(--gpc-white);
  border-bottom: 2px solid var(--cloudy-dk);
  padding: 14px 16px 12px;
  flex-shrink: 0;
  overflow: hidden;
}

.weather-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-muted);
  min-height: 48px;
}

.weather-current {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.weather-main {
  display: flex;
  align-items: center;
  gap: 14px;
}

.weather-icon-large {
  font-size: 2.4rem;
  line-height: 1;
  flex-shrink: 0;
}

.weather-temps-main {
  flex: 1;
}

.weather-temp {
  font-family: var(--font-head);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--bay-blue-dk);
  line-height: 1;
}

.weather-condition {
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-dark);
  margin-top: 2px;
}

.weather-meta {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Trail advice callout */
.weather-advice {
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 8px 12px;
  border-left: 3px solid;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(0,0,0,0.04);
  letter-spacing: 0.02em;
}

/* 5-day forecast strip */
.weather-forecast {
  display: flex;
  gap: 4px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.weather-forecast::-webkit-scrollbar { display: none; }

.weather-day {
  flex: 1;
  min-width: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--cloudy);
  border-radius: var(--radius-sm);
  padding: 8px 4px 6px;
}

.weather-day-label {
  font-family: var(--font-head);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.weather-day-icon {
  font-size: 1.3rem;
  line-height: 1;
  margin: 2px 0;
}

.weather-day-temps {
  display: flex;
  gap: 4px;
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 600;
}
.weather-hi { color: var(--bay-blue-dk); }
.weather-lo { color: var(--text-muted); }

.weather-day-pcp {
  font-size: 0.62rem;
  color: var(--gpc-teal);
  font-family: var(--font-body);
}

.weather-credit {
  font-family: var(--font-body);
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 10px;
  text-align: right;
}
.weather-credit a { color: var(--gpc-teal); }

.weather-error {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--bluff);
  padding: 8px 0;
}
/* ============================================================
   WEATHER BAR — slides down from header
   ============================================================ */
.weather-bar {
  position: absolute;
  top: 54px; /* header height */
  left: 0; right: 0;
  background: var(--gpc-white);
  z-index: 390;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
  transform: translateY(-110%);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  border-bottom: 3px solid var(--bay-blue);
  max-height: 70vh;
  overflow-y: auto;
}
.weather-bar.open {
  transform: translateY(0);
}

.weather-bar-content {
  padding: 16px 18px 12px;
}

.weather-bar-close {
  width: 100%;
  padding: 10px;
  background: var(--cloudy);
  border: none;
  border-top: 1px solid var(--cloudy-dk);
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--transition);
}
.weather-bar-close:hover {
  background: var(--cloudy-dk);
  color: var(--text-dark);
}

/* Simple icon for top menu items (no teardrop badge) */
.menu-item-icon-simple {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}