/* ============================================
   RV Trip Zuid-West USA — Stylesheet
   ============================================ */

:root {
  --sand: #f4e8d1;
  --rust: #c1440e;
  --sky: #2d6a9f;
  --sage: #6b7f5e;
  --dark: #2c2416;
  --warm: #e8a948;
  --snow-warn: #3b82f6;
  --heat-warn: #ef4444;
  --card-bg: #fffbf3;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
@media (pointer: coarse) {
  nav.toc a { min-height: 44px; display: inline-flex; align-items: center; }
  .stop-header { min-height: 56px; }
  .camp-links a, .camp-card .reserve-link { min-height: 44px; display: inline-flex; align-items: center; }
}
html { scroll-behavior: smooth; scroll-padding-top: 56px; }
body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: var(--sand); color: var(--dark); line-height: 1.6; }

/* Skip link (accessibility) */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--dark);
  color: var(--warm);
  padding: 0.5rem 1rem;
  border-radius: 0 0 4px 4px;
  z-index: 200;
  text-decoration: none;
  font-weight: bold;
}
.skip-link:focus { top: 0; }

/* ============================================
   Hero — Multi-layer desert landscape gradient
   ============================================ */
.hero {
  position: relative;
  color: white;
  padding: 5rem 1rem 4rem;
  text-align: center;
  overflow: hidden;
  /* Sky gradient */
  background:
    /* Stars (subtle dots) */
    radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 30% 8%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 55% 12%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 75% 5%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 90% 18%, rgba(255,255,255,0.4), transparent),
    /* Sky */
    linear-gradient(180deg,
      #1a1a3e 0%,
      #2d1b4e 15%,
      #6b3a5e 30%,
      #c1440e 50%,
      #e8a948 65%,
      #d4873a 75%,
      #a65e2e 100%
    );
}
.hero::before {
  /* Far mountains silhouette */
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 55%;
  background:
    /* Mesa/butte left */
    linear-gradient(170deg, transparent 40%, #4a3428 40%, #4a3428 45%, transparent 45%),
    /* Main mountain range */
    linear-gradient(160deg, transparent 30%, #3d2b20 30%, #3d2b20 35%, transparent 35%),
    linear-gradient(175deg, transparent 35%, #5a4030 35%, #5a4030 42%, transparent 42%),
    linear-gradient(185deg, transparent 25%, #4a3428 25%, #4a3428 38%, transparent 38%),
    linear-gradient(195deg, transparent 32%, #3d2b20 32%, #3d2b20 40%, transparent 40%),
    /* Desert floor */
    linear-gradient(180deg, transparent 55%, #6b4c35 55%, #5a3f28 70%, #4a3320 100%);
  pointer-events: none;
  z-index: 0;
}
.hero::after {
  /* Near mesa silhouettes */
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 30%;
  background:
    /* Left butte */
    linear-gradient(175deg, transparent 20%, #2c1e14 20%, #2c1e14 35%, transparent 35%),
    /* Right butte */
    linear-gradient(185deg, transparent 55%, #2c1e14 55%, #2c1e14 70%, transparent 70%),
    /* Ground */
    linear-gradient(180deg, transparent 50%, #2c1e14 50%);
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }
.hero h1 { font-size: 2.8rem; margin-bottom: 0.5rem; text-shadow: 2px 2px 8px rgba(0,0,0,0.5); letter-spacing: 0.02em; }
.hero p { font-size: 1.2rem; opacity: 0.9; text-shadow: 1px 1px 4px rgba(0,0,0,0.4); }

/* ============================================
   Navigation
   ============================================ */
nav.toc { background: var(--dark); color: white; padding: 0.8rem 1rem; position: sticky; top: 0; z-index: 100; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
nav.toc::-webkit-scrollbar { display: none; }
nav.toc a {
  color: var(--warm);
  text-decoration: none;
  margin: 0 0.3rem;
  font-size: 0.85rem;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  display: inline-block;
  transition: background 0.2s, color 0.2s;
}
nav.toc a:hover { background: rgba(255,255,255,0.1); }
nav.toc a.active { background: var(--warm); color: var(--dark); }
nav.toc a:focus-visible { outline: 2px solid var(--warm); outline-offset: 2px; }

/* ============================================
   Container
   ============================================ */
.container { max-width: 1200px; margin: 0 auto; padding: 1rem; }

/* ============================================
   Route Overview
   ============================================ */
.overall-map { background: var(--dark); color: white; padding: 2rem; border-radius: 12px; margin: 2rem 0; }
.route-line { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem; margin: 1rem 0; }
.route-dot { background: var(--warm); color: var(--dark); padding: 0.3rem 0.8rem; border-radius: 20px; font-size: 0.8rem; font-weight: bold; white-space: nowrap; }
.route-arrow { color: var(--warm); font-size: 1.2rem; }

/* Leaflet map container */
#trip-map { border-radius: 8px; margin: 1.5rem 0; border: 2px solid rgba(255,255,255,0.2); z-index: 1; }

/* Elevation profile */
.elevation-profile { margin: 1.5rem 0; }
.elevation-profile svg { width: 100%; height: auto; }

/* ============================================
   Stop Cards
   ============================================ */
.stop { margin: 2rem 0; background: var(--card-bg); border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); overflow: hidden; }
.stop-header {
  padding: 1.5rem;
  color: white;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  cursor: pointer;
  user-select: none;
  transition: filter 0.2s;
}
.stop-header:hover { filter: brightness(1.1); }
.stop-header:focus-visible { outline: 3px solid var(--warm); outline-offset: -3px; }
.stop-header h2 { font-size: 1.8rem; flex: 1; }
.stop-number { background: rgba(255,255,255,0.2); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.2rem; flex-shrink: 0; }

/* Stop header icons */
.stop-icon { flex-shrink: 0; opacity: 0.85; }
.stop-icon svg { display: block; }

/* Collapse chevron */
.stop-chevron {
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.3s ease;
  opacity: 0.7;
}
.stop.collapsed .stop-chevron { transform: rotate(-90deg); }

/* Collapsible stop body */
.stop-body {
  padding: 1.5rem;
  transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
  overflow: hidden;
}
.stop.collapsed .stop-body {
  max-height: 0 !important;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}

.stop-meta { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.meta-badge { background: var(--sand); padding: 0.3rem 0.8rem; border-radius: 20px; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 0.3rem; }

/* ============================================
   Weather
   ============================================ */
.weather-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.8rem; margin: 1rem 0; }
.weather-card { background: linear-gradient(135deg, #e0f2fe, #bae6fd); padding: 0.8rem; border-radius: 8px; text-align: center; }
.weather-card.warn-cold { background: linear-gradient(135deg, #dbeafe, #93c5fd); border: 2px solid var(--snow-warn); }
.weather-card.warn-warm { background: linear-gradient(135deg, #fef9c3, #fde68a); border: 2px solid var(--warm); }
.weather-card.warn-hot { background: linear-gradient(135deg, #fee2e2, #fecaca); border: 2px solid var(--heat-warn); }
.weather-card .temp { font-size: 1.5rem; font-weight: bold; }
.weather-card .label { font-size: 0.75rem; color: #555; }
.weather-icon { display: inline-block; vertical-align: middle; }
.weather-icon svg { display: inline-block; vertical-align: middle; }

/* ============================================
   Warning Boxes
   ============================================ */
.warn-box { padding: 0.8rem 1rem; border-radius: 8px; margin: 0.8rem 0; display: flex; align-items: flex-start; gap: 0.5rem; }
.warn-box.snow { background: #dbeafe; border-left: 4px solid var(--snow-warn); }
.warn-box.heat { background: #fef3c7; border-left: 4px solid var(--heat-warn); }
.warn-box.tip { background: #d1fae5; border-left: 4px solid var(--sage); }
.warn-box.fuel { background: #fef3c7; border-left: 4px solid var(--warm); }
.warn-box.emergency { background: #fce7f3; border-left: 4px solid #be185d; }

/* ============================================
   Section Titles
   ============================================ */
.section-title { font-size: 1.3rem; color: var(--rust); margin: 1.5rem 0 0.8rem; border-bottom: 2px solid var(--warm); padding-bottom: 0.3rem; }

/* ============================================
   Campground Cards
   ============================================ */
.camp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin: 0.8rem 0; }
.camp-card { border: 1px solid #ddd; border-radius: 8px; padding: 1rem; background: white; }
.camp-card h4 { color: var(--sage); margin-bottom: 0.3rem; }
.camp-card h4 a { color: var(--sage); text-decoration: none; border-bottom: 1px dotted var(--sage); transition: color 0.2s, border-color 0.2s; }
.camp-card h4 a:hover { color: var(--sky); border-bottom-color: var(--sky); }
.camp-card h4 a:visited { color: var(--sage); }
.camp-card .price { font-weight: bold; color: var(--rust); }
.camp-card .tag { display: inline-block; font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: 10px; margin: 0.2rem 0.2rem 0.2rem 0; }
.camp-card .reserve-link { display: inline-block; margin-top: 0.5rem; font-size: 0.8rem; color: var(--sky); text-decoration: none; }
.camp-card .reserve-link:hover { text-decoration: underline; }
.tag-free { background: #d1fae5; color: #065f46; }
.tag-fcfs { background: #fef3c7; color: #92400e; }
.tag-reserve { background: #dbeafe; color: #1e40af; }
.tag-rv { background: #f3e8ff; color: #6b21a8; }
.tag-top { background: #fce7f3; color: #9d174d; }
.tag-blm { background: #fef3c7; color: #78350f; }
.tag-dispersed { background: #d1fae5; color: #064e3b; }
.tag-forest { background: #dcfce7; color: #14532d; }

.camp-distance {
  font-size: 0.8rem;
  color: #6b7280;
  margin: 0.25rem 0;
}

/* ============================================
   Trail Tables
   ============================================ */
.trail-table { width: 100%; border-collapse: collapse; margin: 0.8rem 0; font-size: 0.9rem; }
.trail-table th { background: var(--sage); color: white; padding: 0.5rem; text-align: left; }
.trail-table td { padding: 0.5rem; border-bottom: 1px solid #eee; }
.trail-table tr:hover { background: #f9f5eb; }
.diff-easy { color: #16a34a; font-weight: bold; }
.diff-mod { color: var(--warm); font-weight: bold; }
.diff-hard { color: var(--rust); font-weight: bold; }

/* ============================================
   Attraction / Todo Cards
   ============================================ */
.todo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0.8rem; margin: 0.8rem 0; }
.todo-card { background: white; border: 1px solid #ddd; border-radius: 8px; padding: 0.8rem; }
.todo-card h4 { font-size: 0.95rem; margin-bottom: 0.3rem; }
.todo-card h4 a { color: var(--dark); text-decoration: none; border-bottom: 1px dotted var(--warm); transition: color 0.2s, border-color 0.2s; }
.todo-card h4 a:hover { color: var(--sky); border-bottom-color: var(--sky); }
.todo-card h4 a:visited { color: var(--dark); }
.todo-card p { font-size: 0.85rem; color: #555; }

/* ============================================
   Food Lists
   ============================================ */
.food-list { list-style: none; }
.food-list li { padding: 0.4rem 0; border-bottom: 1px solid #f0ebe0; display: flex; gap: 0.5rem; align-items: baseline; }
.food-list .name { font-weight: bold; }
.food-list .price { color: var(--sage); font-size: 0.85rem; }
.food-list .desc { color: #666; font-size: 0.85rem; }

/* ============================================
   Link Lists
   ============================================ */
.link-list { list-style: none; margin: 0.5rem 0; }
.link-list li { padding: 0.3rem 0; }
.link-list a { color: var(--sky); text-decoration: none; }
.link-list a:hover { text-decoration: underline; }

/* ============================================
   Between-Stop Sections
   ============================================ */
.between-stop { background: linear-gradient(90deg, var(--warm) 0%, transparent 100%); padding: 1rem 1.5rem; margin: 0.5rem 0; border-radius: 8px; }
.between-stop h3 { font-size: 1.1rem; color: var(--dark); }

/* ============================================
   Video Grid
   ============================================ */
.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin: 0.8rem 0; }
.video-card { background: white; border-radius: 8px; overflow: hidden; border: 1px solid #ddd; }
.video-card .thumb { width: 100%; aspect-ratio: 16/9; background: #333; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.9rem; cursor: pointer; position: relative; }
.video-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-card .vid-title { padding: 0.5rem; font-size: 0.85rem; }

/* ============================================
   Collapsible Content (YouTube etc.)
   ============================================ */
.collapsible { cursor: pointer; user-select: none; }
.collapsible::after { content: ' +'; font-weight: bold; color: var(--warm); }
.collapsible.open::after { content: ' −'; }
.collapse-content { display: none; }
.collapse-content.show { display: block; }

/* ============================================
   Stop Photo Gallery
   ============================================ */
.stop-gallery { display: flex; gap: 0.5rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; margin-bottom: 1rem; -webkit-overflow-scrolling: touch; }
.stop-gallery img { border-radius: 8px; min-width: 280px; height: 180px; object-fit: cover; scroll-snap-align: start; flex-shrink: 0; }
.stop-gallery::-webkit-scrollbar { height: 6px; }
.stop-gallery::-webkit-scrollbar-thumb { background: var(--warm); border-radius: 3px; }

/* ============================================
   Stop Highlight ("Waarom hier?")
   ============================================ */
.stop-highlight { background: linear-gradient(135deg, rgba(232,169,72,0.1), rgba(193,68,14,0.05)); padding: 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.95rem; color: var(--dark); border-left: 4px solid var(--warm); }

/* ============================================
   Campground Reviews
   ============================================ */
.camp-reviews { margin-top: 0.5rem; font-size: 0.8rem; }
.camp-rating { color: #f59e0b; font-weight: bold; }
.camp-review-count { color: #888; }
.camp-links { margin-top: 0.3rem; }
.camp-links a { color: var(--sky); margin-right: 0.8rem; font-size: 0.8rem; text-decoration: none; }
.camp-links a:hover { text-decoration: underline; }

/* ============================================
   Food List Links
   ============================================ */
.food-list a.name { font-weight: bold; color: var(--dark); text-decoration: none; }
.food-list a.name:hover { color: var(--sky); text-decoration: underline; }

/* ============================================
   Stay Duration Table (in route overview)
   ============================================ */
.stay-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: 1rem; }
.stay-table th { background: rgba(255,255,255,0.1); color: var(--warm); padding: 0.5rem; text-align: left; }
.stay-table td { padding: 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.1); color: #ccc; }
.stay-table tr:hover { background: rgba(255,255,255,0.05); }

/* ============================================
   Emergency Contacts Section
   ============================================ */
.emergency-section { background: white; padding: 1.5rem; border-radius: 12px; margin: 2rem 0; border: 2px solid #be185d; }
.emergency-section h3 { color: #be185d; margin-bottom: 0.8rem; }
.emergency-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.emergency-table th { background: #be185d; color: white; padding: 0.5rem; text-align: left; }
.emergency-table td { padding: 0.5rem; border-bottom: 1px solid #eee; vertical-align: top; }
.emergency-table tr:hover { background: #fdf2f8; }

/* ============================================
   Footer
   ============================================ */
footer { background: var(--dark); color: #aaa; text-align: center; padding: 2rem; margin-top: 2rem; }
footer a { color: var(--warm); }

/* ============================================
   Responsive — Tablet (≤ 768px)
   ============================================ */
@media (max-width: 768px) {
  /* Hero */
  .hero { padding: 3rem 1rem 2.5rem; }
  .hero h1 { font-size: 1.8rem; }
  .hero p { font-size: 1rem; }

  /* Container */
  .container { padding: 0.5rem; }

  /* Route overview */
  .overall-map { padding: 1.2rem; border-radius: 8px; margin: 1rem 0; }
  .route-dot { font-size: 0.7rem; padding: 0.2rem 0.5rem; }
  .route-arrow { font-size: 1rem; }

  /* Map */
  #trip-map { height: 300px !important; }

  /* Stop headers */
  .stop { margin: 1rem 0; }
  .stop-header { padding: 1rem; gap: 0.6rem; }
  .stop-header h2 { font-size: 1.3rem; }
  .stop-header p { font-size: 0.8rem; }
  .stop-number { width: 32px; height: 32px; font-size: 1rem; }
  .stop-icon svg { width: 20px; height: 20px; }

  /* Stop body */
  .stop-body { padding: 1rem; }

  /* Gallery */
  .stop-gallery img { min-width: 220px; height: 140px; }

  /* Meta badges */
  .stop-meta { gap: 0.5rem; }
  .meta-badge { font-size: 0.75rem; padding: 0.2rem 0.6rem; }

  /* Section titles */
  .section-title { font-size: 1.1rem; margin: 1rem 0 0.6rem; }

  /* Grids → single column */
  .camp-grid, .video-grid, .todo-grid { grid-template-columns: 1fr; }

  /* Trail tables → horizontal scroll */
  .trail-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .trail-table th, .trail-table td { white-space: nowrap; font-size: 0.8rem; padding: 0.4rem; }
  .trail-table td:last-child { white-space: normal; min-width: 150px; }

  /* Weather grid */
  .weather-grid { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 0.5rem; }
  .weather-card .temp { font-size: 1.2rem; }
  .weather-card .label { font-size: 0.65rem; }
  .weather-icon svg { width: 22px; height: 22px; }

  /* Food list */
  .food-list li { flex-wrap: wrap; gap: 0.3rem; }
  .food-list .desc { flex-basis: 100%; }

  /* Emergency */
  .emergency-section { padding: 1rem; }
  .emergency-table { font-size: 0.75rem; }
  .emergency-table td, .emergency-table th { padding: 0.3rem; }

  /* Stay table */
  .stay-table { font-size: 0.75rem; }

  /* Between-stop */
  .between-stop { padding: 0.8rem 1rem; }
  .between-stop h3 { font-size: 0.95rem; }

  /* Footer */
  footer { padding: 1.5rem 1rem; }
}

/* ============================================
   Responsive — Small phone (≤ 480px)
   ============================================ */
@media (max-width: 480px) {
  /* Hero */
  .hero { padding: 2rem 0.8rem 1.8rem; }
  .hero h1 { font-size: 1.4rem; letter-spacing: 0; }
  .hero p { font-size: 0.85rem; }

  /* Nav — smaller pills */
  nav.toc { padding: 0.5rem 0.6rem; }
  nav.toc a { font-size: 0.75rem; padding: 0.25rem 0.4rem; margin: 0 0.15rem; }

  /* Container */
  .container { padding: 0.3rem; }

  /* Route overview */
  .overall-map { padding: 0.8rem; margin: 0.5rem 0; }
  .overall-map h2 { font-size: 1.2rem; }
  .route-line { gap: 0.2rem; }
  .route-dot { font-size: 0.6rem; padding: 0.15rem 0.4rem; }
  .route-arrow { font-size: 0.8rem; }

  /* Map */
  #trip-map { height: 220px !important; margin: 0.8rem 0; }

  /* Stop headers — stack vertically */
  .stop { margin: 0.8rem 0; border-radius: 8px; }
  .stop-header { padding: 0.8rem; gap: 0.5rem; flex-wrap: nowrap; }
  .stop-header h2 { font-size: 1.1rem; line-height: 1.3; }
  .stop-header p { font-size: 0.7rem; display: none; }
  .stop-number { width: 28px; height: 28px; font-size: 0.85rem; }
  .stop-icon { display: none; }
  .stop-chevron svg { width: 16px; height: 16px; }

  /* Stop body */
  .stop-body { padding: 0.8rem; }

  /* Gallery — smaller images */
  .stop-gallery { gap: 0.4rem; margin-bottom: 0.8rem; }
  .stop-gallery img { min-width: 200px; height: 120px; border-radius: 6px; }

  /* Highlight */
  .stop-highlight { padding: 0.8rem; font-size: 0.85rem; }

  /* Meta badges — wrap tighter */
  .stop-meta { gap: 0.3rem; margin-bottom: 0.8rem; }
  .meta-badge { font-size: 0.7rem; padding: 0.15rem 0.5rem; }

  /* Section titles */
  .section-title { font-size: 1rem; margin: 0.8rem 0 0.5rem; }

  /* Camp cards */
  .camp-card { padding: 0.8rem; }
  .camp-card h4 { font-size: 0.9rem; }
  .camp-card p { font-size: 0.8rem; }
  .camp-card .tag { font-size: 0.6rem; }

  /* Trail tables — card-style on very small screens */
  .trail-table thead { display: none; }
  .trail-table, .trail-table tbody, .trail-table tr, .trail-table td { display: block; width: 100%; }
  .trail-table tr { background: white; border: 1px solid #eee; border-radius: 8px; padding: 0.6rem; margin-bottom: 0.5rem; }
  .trail-table tr:hover { background: #f9f5eb; }
  .trail-table td { border-bottom: none; padding: 0.15rem 0; white-space: normal; font-size: 0.85rem; }
  .trail-table td:first-child { font-size: 0.95rem; margin-bottom: 0.2rem; }
  .trail-table td:first-child::before { content: none; }
  .trail-table td:nth-child(2)::before { content: '📏 '; }
  .trail-table td:nth-child(3)::before { content: ''; }
  .trail-table td:last-child { color: #666; font-size: 0.8rem; margin-top: 0.2rem; }

  /* Weather grid */
  .weather-grid { grid-template-columns: repeat(2, 1fr); gap: 0.4rem; }
  .weather-card { padding: 0.5rem; }
  .weather-card .temp { font-size: 1.1rem; }

  /* Warning boxes */
  .warn-box { font-size: 0.85rem; padding: 0.6rem 0.8rem; }

  /* Food list */
  .food-list li { padding: 0.3rem 0; font-size: 0.85rem; }
  .food-list .price { font-size: 0.75rem; }
  .food-list .desc { font-size: 0.75rem; }

  /* Todo / attraction cards */
  .todo-grid { grid-template-columns: 1fr; gap: 0.5rem; }
  .todo-card { padding: 0.6rem; }
  .todo-card h4 { font-size: 0.85rem; }
  .todo-card p { font-size: 0.8rem; }

  /* Emergency table → stacked */
  .emergency-section { padding: 0.8rem; border-radius: 8px; }
  .emergency-table thead { display: none; }
  .emergency-table, .emergency-table tbody, .emergency-table tr, .emergency-table td { display: block; width: 100%; }
  .emergency-table tr { border: 1px solid #eee; border-radius: 6px; padding: 0.5rem; margin-bottom: 0.5rem; background: white; }
  .emergency-table td { border-bottom: none; padding: 0.1rem 0; font-size: 0.8rem; }
  .emergency-table td:first-child { font-weight: bold; color: #be185d; font-size: 0.85rem; }

  /* Stay table → stacked */
  .stay-table thead { display: none; }
  .stay-table, .stay-table tbody, .stay-table tr, .stay-table td { display: block; width: 100%; }
  .stay-table tr { border-bottom: 1px solid rgba(255,255,255,0.1); padding: 0.4rem 0; }
  .stay-table td { padding: 0.1rem 0; font-size: 0.8rem; }
  .stay-table td:first-child { color: var(--warm); font-weight: bold; }
  .stay-table td:nth-child(2)::before { content: '📅 '; }
  .stay-table td:last-child { font-size: 0.7rem; color: #999; }

  /* Camp reviews */
  .camp-reviews { font-size: 0.75rem; }
  .camp-links a { font-size: 0.75rem; }

  /* Between-stop */
  .between-stop { padding: 0.6rem 0.8rem; border-radius: 6px; }
  .between-stop h3 { font-size: 0.85rem; }

  /* Video */
  .video-grid { grid-template-columns: 1fr; }

  /* Footer */
  footer { padding: 1rem 0.8rem; font-size: 0.85rem; }
  footer p { font-size: 0.75rem; }
}