/* ============================================
   SWIMMING HOLES - STYLES
   Outdoor/rugged vibe: dark tones, earthy colors,
   topo textures, trail guide feel
   Adapted from North Fork kayak trip design system
   ============================================ */

:root {
  --bg-dark: #1a1d17;
  --bg-darker: #14160f;
  --bg-card: #232820;
  --bg-card-hover: #2a3024;
  --bg-section-alt: #1e2219;
  --text-primary: #e8e4db;
  --text-secondary: #b5b0a3;
  --text-muted: #8a8577;
  --accent-green: #6b9e5a;
  --accent-green-bright: #8bc373;
  --accent-gold: #c9a84c;
  --accent-gold-dim: #a88e3d;
  --accent-red: #c45a4a;
  --accent-red-dim: #9e4a3d;
  --accent-blue: #5a8fb5;
  --accent-teal: #5aaa8a;
  --border-color: #3a3d33;
  --border-light: #4a4d40;
  --font-heading: 'Outfit', system-ui, sans-serif;
  --font-body: 'Source Serif 4', Georgia, serif;
  --nav-height: 56px;

  /* Swimming-specific variables */
  --accent-water: #4a9eba;
  --accent-water-light: #6bbdd4;
  --tier-1: var(--accent-green);
  --tier-2: var(--accent-gold);
  --tier-3: var(--accent-blue);
  --legal-public: var(--accent-green);
  --legal-permit: var(--accent-gold);
  --legal-private: var(--accent-red);
  --crowd-low: var(--accent-green);
  --crowd-moderate: var(--accent-gold);
  --crowd-high: var(--accent-red);
}

/* ============================================
   RESET & BASE
   ============================================ */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  background: var(--bg-dark);
  color: var(--text-primary);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
}

a {
  color: var(--accent-water-light);
  text-decoration: none;
  transition: color 0.2s;
}
a:hover { color: var(--accent-gold); }

img { max-width: 100%; height: auto; }

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.container-wide {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================
   NAVIGATION
   ============================================ */

#main-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(20, 22, 15, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
  height: var(--nav-height);
  transition: background 0.3s;
}

#main-nav.scrolled {
  background: rgba(20, 22, 15, 0.98);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.nav-brand {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--accent-water) !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.nav-brand:hover {
  color: var(--accent-water-light) !important;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 4px;
}

.nav-links a {
  display: block;
  padding: 8px 12px;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: 6px;
  transition: all 0.2s;
  letter-spacing: 0.3px;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--text-primary);
  background: rgba(74, 158, 186, 0.15);
}

.nav-links a.active {
  color: var(--accent-water-light);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  gap: 5px;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-secondary);
  border-radius: 2px;
  transition: all 0.3s;
}

.nav-toggle.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.nav-toggle.open span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ============================================
   HERO SECTION
   ============================================ */

#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 24px 60px;
  background: var(--bg-darker);
  background-image: url('images/hero.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.topo-overlay {
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background-image: url('images/topo-texture.png');
  background-size: 300px 300px;
  background-repeat: repeat;
  pointer-events: none;
  mix-blend-mode: overlay;
}

#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(20, 22, 15, 0.65);
  pointer-events: none;
}

#hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(74, 158, 186, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(90, 170, 138, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
}

.hero-tag {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--accent-water);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

#hero h1 {
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 12px;
  letter-spacing: -1px;
}

.hero-subtitle {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--accent-water-light);
  margin-bottom: 24px;
  letter-spacing: 1px;
}

.hero-desc {
  font-size: 1.05rem;
  color: var(--text-secondary);
  max-width: 580px;
  margin: 0 auto 36px;
  line-height: 1.8;
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 36px;
}

.hero-stat {
  text-align: center;
}

.hero-stat-number {
  display: block;
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  color: var(--accent-gold);
  line-height: 1.1;
}

.hero-stat-label {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-muted);
  animation: bounce 2s infinite;
  z-index: 1;
}

.hero-scroll-hint svg {
  width: 24px;
  height: 24px;
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 12px 28px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  letter-spacing: 0.5px;
}

.btn-primary {
  background: var(--accent-water);
  color: #fff;
}
.btn-primary:hover {
  background: var(--accent-water-light);
  color: #fff;
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  color: var(--accent-gold);
  border: 1px solid var(--accent-gold-dim);
}
.btn-secondary:hover {
  background: rgba(201, 168, 76, 0.1);
  color: var(--accent-gold);
}

.btn-outline {
  background: transparent;
  color: var(--accent-water-light);
  border: 1px solid var(--accent-water);
}
.btn-outline:hover {
  background: rgba(74, 158, 186, 0.1);
  color: var(--accent-water-light);
}

.btn-small {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.2s;
}
.btn-small:hover {
  background: rgba(74, 158, 186, 0.15);
  color: var(--accent-water-light);
  border-color: var(--accent-water);
}

.btn-danger {
  background: transparent;
  color: var(--accent-red);
  border: 1px solid var(--accent-red-dim);
}
.btn-danger:hover {
  background: rgba(196, 90, 74, 0.15);
  color: var(--accent-red);
  border-color: var(--accent-red);
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-icon svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ============================================
   SECTIONS
   ============================================ */

.section {
  padding: 80px 0;
}

.section-dark {
  background: var(--bg-section-alt);
}

.section-title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  position: relative;
}

.section-title::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--accent-water);
  margin-top: 12px;
  border-radius: 2px;
}

.section-title-center {
  text-align: center;
}

.section-title-center::after {
  margin-left: auto;
  margin-right: auto;
}

.section-lead {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 680px;
  margin-bottom: 40px;
  line-height: 1.8;
}

.section-lead-center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   OVERVIEW / STAT CARDS
   ============================================ */

.overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 40px;
}

.overview-text p {
  margin-bottom: 16px;
  color: var(--text-secondary);
}

.overview-text strong { color: var(--text-primary); }

.overview-stats,
.river-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 24px 16px;
  text-align: center;
  transition: border-color 0.2s, transform 0.2s;
}

.stat-card:hover {
  border-color: var(--border-light);
  transform: translateY(-1px);
}

.stat-number {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent-water);
  line-height: 1.1;
  margin-bottom: 6px;
}

.stat-number-gold { color: var(--accent-gold); }
.stat-number-green { color: var(--accent-green-bright); }
.stat-number-red { color: var(--accent-red); }
.stat-number-teal { color: var(--accent-teal); }

.stat-label {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-card-wide {
  grid-column: 1 / -1;
}

.region-badge {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.region-badge-wv {
  background: rgba(107, 158, 90, 0.15);
  color: var(--accent-green-bright);
}

.region-badge-md {
  background: rgba(201, 168, 76, 0.12);
  color: var(--accent-gold);
}

.region-badge-va {
  background: rgba(90, 143, 181, 0.15);
  color: var(--accent-blue);
}

.region-badge-pa {
  background: rgba(196, 90, 74, 0.12);
  color: var(--accent-red);
}

/* Info callout box */
.info-box {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent-water);
  border-radius: 8px;
  padding: 20px 24px;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.info-box strong { color: var(--text-primary); }

.info-box-icon {
  flex-shrink: 0;
  color: var(--accent-water);
  margin-top: 2px;
}

.info-box-warning {
  border-left-color: var(--accent-gold);
}
.info-box-warning .info-box-icon { color: var(--accent-gold); }

.info-box-danger {
  border-left-color: var(--accent-red);
}
.info-box-danger .info-box-icon { color: var(--accent-red); }

/* ============================================
   MAP SECTION
   ============================================ */

#map-container {
  position: relative;
}

#swim-map {
  width: 100%;
  height: 500px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  margin-bottom: 20px;
  z-index: 1;
}

.map-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.map-filter-btn {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 20px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.2s;
}

.map-filter-btn:hover {
  background: rgba(74, 158, 186, 0.1);
  color: var(--text-secondary);
  border-color: var(--border-light);
}

.map-filter-btn.active {
  background: rgba(74, 158, 186, 0.2);
  color: var(--accent-water-light);
  border-color: var(--accent-water);
}

.map-filter-btn[data-tier="1"].active {
  background: rgba(107, 158, 90, 0.2);
  color: var(--accent-green-bright);
  border-color: var(--accent-green);
}

.map-filter-btn[data-tier="2"].active {
  background: rgba(201, 168, 76, 0.15);
  color: var(--accent-gold);
  border-color: var(--accent-gold-dim);
}

.map-filter-btn[data-tier="3"].active {
  background: rgba(90, 143, 181, 0.2);
  color: var(--accent-blue);
  border-color: var(--accent-blue);
}

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-line {
  display: inline-block;
  width: 24px;
  height: 3px;
  border-radius: 2px;
}

.legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.legend-dot-tier1 { background: var(--accent-green); }
.legend-dot-tier2 { background: var(--accent-gold); }
.legend-dot-tier3 { background: var(--accent-blue); }
.legend-dot-gauge { background: var(--accent-water); }

.legend-swatch {
  display: inline-block;
  width: 16px;
  height: 10px;
  border-radius: 3px;
}

.map-info-panel {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(35, 40, 32, 0.95);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 16px;
  max-width: 260px;
  z-index: 500;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  display: none;
}

.map-info-panel.visible {
  display: block;
}

.map-info-panel h4 {
  font-size: 0.95rem;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.map-info-panel p {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 6px;
  line-height: 1.5;
}

.map-info-panel .tier-badge {
  position: static;
  margin-bottom: 8px;
}

/* ============================================
   FILTER BAR
   ============================================ */

.filter-bar {
  position: sticky;
  top: var(--nav-height);
  z-index: 100;
  background: rgba(20, 22, 15, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
  padding: 12px 0;
  margin-bottom: 32px;
}

.filter-bar-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.filter-bar-inner::-webkit-scrollbar {
  display: none;
}

.filter-bar-label {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
  margin-right: 4px;
}

.filter-pill {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 6px 16px;
  border-radius: 20px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.filter-pill:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  border-color: var(--border-light);
}

.filter-pill.active {
  background: rgba(74, 158, 186, 0.2);
  color: var(--accent-water-light);
  border-color: var(--accent-water);
}

.filter-pill[data-filter="all"].active {
  background: rgba(74, 158, 186, 0.2);
  color: var(--accent-water-light);
  border-color: var(--accent-water);
}

.filter-pill[data-tier="1"].active {
  background: rgba(107, 158, 90, 0.2);
  color: var(--accent-green-bright);
  border-color: var(--accent-green);
}

.filter-pill[data-tier="2"].active {
  background: rgba(201, 168, 76, 0.15);
  color: var(--accent-gold);
  border-color: var(--accent-gold-dim);
}

.filter-pill[data-tier="3"].active {
  background: rgba(90, 143, 181, 0.2);
  color: var(--accent-blue);
  border-color: var(--accent-blue);
}

.filter-pill[data-feature].active {
  background: rgba(74, 158, 186, 0.15);
  color: var(--accent-water-light);
  border-color: var(--accent-water);
}

.filter-divider {
  width: 1px;
  height: 20px;
  background: var(--border-color);
  flex-shrink: 0;
  margin: 0 4px;
}

.filter-count {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
}

.filter-count strong {
  color: var(--accent-water-light);
}

/* ============================================
   LOCATION CARDS / HOLES GRID
   ============================================ */

.holes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.holes-grid-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 24px;
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 1rem;
}

.holes-grid-empty p {
  margin-bottom: 12px;
}

.hole-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.hole-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-light);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.hole-card-tier1 {
  border-color: rgba(107, 158, 90, 0.3);
}
.hole-card-tier1:hover {
  border-color: var(--accent-green);
  box-shadow: 0 8px 24px rgba(107, 158, 90, 0.1);
}

.hole-card-tier2 {
  border-color: rgba(201, 168, 76, 0.2);
}
.hole-card-tier2:hover {
  border-color: var(--accent-gold-dim);
  box-shadow: 0 8px 24px rgba(201, 168, 76, 0.1);
}

.hole-card-tier3 {
  border-color: rgba(90, 143, 181, 0.2);
}
.hole-card-tier3:hover {
  border-color: var(--accent-blue);
  box-shadow: 0 8px 24px rgba(90, 143, 181, 0.1);
}

/* Card image */
.hole-card-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.hole-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}

.hole-card:hover .hole-card-image img {
  transform: scale(1.03);
}

.hole-card-image-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--bg-darker) 0%, var(--bg-card) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 0.85rem;
}

/* Tier badge */
.tier-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  z-index: 2;
}

.tier-badge-1 {
  background: rgba(107, 158, 90, 0.9);
  color: #fff;
}

.tier-badge-2 {
  background: rgba(201, 168, 76, 0.9);
  color: #1a1d17;
}

.tier-badge-3 {
  background: rgba(90, 143, 181, 0.9);
  color: #fff;
}

/* Distance badge */
.distance-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(20, 22, 15, 0.85);
  color: var(--text-secondary);
  backdrop-filter: blur(4px);
  z-index: 2;
}

/* Card body */
.hole-card-body {
  padding: 16px 20px;
}

.hole-card-name {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.3;
}

.hole-card-location {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.hole-card-location svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0.6;
}

.hole-card-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 12px;
}

/* Features */
.hole-card-features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.feature-pill {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 12px;
  letter-spacing: 0.3px;
}

.feature-pill[data-feature="waterfall"] {
  background: rgba(74, 158, 186, 0.2);
  color: #6bbdd4;
}

.feature-pill[data-feature="cliff-jump"],
.feature-pill[data-feature="cliff-jumping"] {
  background: rgba(196, 90, 74, 0.2);
  color: #c45a4a;
}

.feature-pill[data-feature="rope-swing"] {
  background: rgba(201, 168, 76, 0.2);
  color: #c9a84c;
}

.feature-pill[data-feature="rock-slide"] {
  background: rgba(139, 195, 115, 0.2);
  color: #8bc373;
}

.feature-pill[data-feature="deep-pool"] {
  background: rgba(90, 143, 181, 0.2);
  color: #5a8fb5;
}

.feature-pill[data-feature="cave"] {
  background: rgba(138, 133, 119, 0.2);
  color: #b5b0a3;
}

.feature-pill[data-feature="ruins"] {
  background: rgba(168, 142, 61, 0.2);
  color: #a88e3d;
}

.feature-pill[data-feature="shallow-wade"] {
  background: rgba(90, 170, 138, 0.2);
  color: #5aaa8a;
}

.feature-pill[data-feature="swimming"] {
  background: rgba(74, 158, 186, 0.15);
  color: var(--accent-water-light);
}

.feature-pill[data-feature="tubing"] {
  background: rgba(107, 158, 90, 0.15);
  color: var(--accent-green-bright);
}

.feature-pill[data-feature="camping"] {
  background: rgba(168, 142, 61, 0.15);
  color: var(--accent-gold);
}

.feature-pill[data-feature="fishing"] {
  background: rgba(90, 170, 138, 0.15);
  color: var(--accent-teal);
}

.feature-pill[data-feature="hiking"] {
  background: rgba(138, 133, 119, 0.15);
  color: var(--text-secondary);
}

.feature-pill[data-feature="scenic"] {
  background: rgba(139, 195, 115, 0.12);
  color: var(--accent-green-bright);
}

/* Additional feature colors matching actual data values */
.feature-pill[data-feature="river"],
.feature-pill[data-feature="creek"] {
  background: rgba(74, 158, 186, 0.15);
  color: var(--accent-water-light);
}
.feature-pill[data-feature="lake"],
.feature-pill[data-feature="lake-beach"] {
  background: rgba(90, 143, 181, 0.15);
  color: #5a8fb5;
}
.feature-pill[data-feature="family-friendly"],
.feature-pill[data-feature="easy-access"] {
  background: rgba(107, 158, 90, 0.15);
  color: var(--accent-green-bright);
}
.feature-pill[data-feature="shallow"],
.feature-pill[data-feature="sandy-bottom"],
.feature-pill[data-feature="sandy-beach"],
.feature-pill[data-feature="warm-water"] {
  background: rgba(201, 168, 76, 0.12);
  color: var(--accent-gold);
}
.feature-pill[data-feature="rock-ledges"],
.feature-pill[data-feature="rock-formations"],
.feature-pill[data-feature="boulders"],
.feature-pill[data-feature="limestone"] {
  background: rgba(138, 133, 119, 0.15);
  color: var(--text-secondary);
}
.feature-pill[data-feature="hiking-required"] {
  background: rgba(196, 90, 74, 0.12);
  color: var(--accent-red);
}
.feature-pill[data-feature="national-park"],
.feature-pill[data-feature="state-park"] {
  background: rgba(107, 158, 90, 0.12);
  color: var(--accent-green);
}
.feature-pill[data-feature="historic"] {
  background: rgba(168, 142, 61, 0.12);
  color: var(--accent-gold-dim);
}
.feature-pill[data-feature="secluded"],
.feature-pill[data-feature="shaded"] {
  background: rgba(90, 143, 181, 0.1);
  color: #5a8fb5;
}
.feature-pill[data-feature="clear-water"],
.feature-pill[data-feature="spring-fed"] {
  background: rgba(74, 158, 186, 0.18);
  color: #6bbdd4;
}
.feature-pill[data-feature="restrooms"],
.feature-pill[data-feature="lifeguards"],
.feature-pill[data-feature="picnic-area"] {
  background: rgba(107, 158, 90, 0.12);
  color: var(--accent-green-bright);
}
.feature-pill[data-feature="no-current"],
.feature-pill[data-feature="wide-pool"] {
  background: rgba(90, 170, 138, 0.12);
  color: var(--accent-teal);
}
.feature-pill[data-feature="multiple-access"],
.feature-pill[data-feature="loop-trail"],
.feature-pill[data-feature="park"],
.feature-pill[data-feature="backcountry"] {
  background: rgba(138, 133, 119, 0.1);
  color: var(--text-muted);
}

/* Status badges */
.hole-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.legal-badge {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.legal-badge-public {
  background: rgba(107, 158, 90, 0.15);
  color: var(--accent-green-bright);
}

.legal-badge-permit {
  background: rgba(201, 168, 76, 0.12);
  color: var(--accent-gold);
}

.legal-badge-private {
  background: rgba(196, 90, 74, 0.12);
  color: var(--accent-red);
}

.legal-badge-mixed {
  background: rgba(90, 143, 181, 0.12);
  color: var(--accent-blue);
}

.difficulty-badge {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.difficulty-easy {
  background: rgba(107, 158, 90, 0.15);
  color: var(--accent-green-bright);
}

.difficulty-moderate {
  background: rgba(201, 168, 76, 0.12);
  color: var(--accent-gold);
}

.difficulty-hard {
  background: rgba(196, 90, 74, 0.12);
  color: var(--accent-red);
}

.crowd-badge {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.crowd-low {
  background: rgba(107, 158, 90, 0.12);
  color: var(--accent-green-bright);
}

.crowd-moderate {
  background: rgba(201, 168, 76, 0.1);
  color: var(--accent-gold);
}

.crowd-high {
  background: rgba(196, 90, 74, 0.1);
  color: var(--accent-red);
}

/* Card meta row */
.hole-card-meta {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  color: var(--text-muted);
}

.hole-card-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.hole-card-meta-item svg {
  width: 14px;
  height: 14px;
  opacity: 0.6;
}

/* Card expand/collapse */
.hole-card-expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: none;
  border-top: 1px solid var(--border-color);
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.hole-card-expand-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
}

.hole-card-expand-btn svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s;
}

.hole-card.expanded .hole-card-expand-btn svg {
  transform: rotate(180deg);
}

/* Card details (expanded content) */
.hole-card-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.3s ease;
  opacity: 0;
}

.hole-card.expanded .hole-card-details {
  max-height: 800px;
  opacity: 1;
}

.hole-card-details-inner {
  padding: 16px 20px 20px;
  border-top: 1px solid var(--border-color);
}

.hole-card-detail-section {
  margin-bottom: 16px;
}

.hole-card-detail-section:last-child {
  margin-bottom: 0;
}

.hole-card-detail-section h4 {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent-water-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.hole-card-detail-section p {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 8px;
}

.hole-card-detail-section ul {
  padding-left: 20px;
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.hole-card-detail-section li {
  margin-bottom: 4px;
}

.hole-card-detail-section strong {
  color: var(--text-primary);
}

/* Depth indicator */
.depth-indicator {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.depth-bar {
  flex: 1;
  height: 6px;
  background: var(--bg-darker);
  border-radius: 3px;
  overflow: hidden;
}

.depth-bar-fill {
  height: 100%;
  background: var(--accent-water);
  border-radius: 3px;
  transition: width 0.3s;
}

.depth-label {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Water temp indicator */
.temp-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 0.82rem;
}

.temp-value {
  font-weight: 700;
  color: var(--accent-water-light);
}

.temp-label {
  color: var(--text-muted);
  font-size: 0.72rem;
}

/* Card actions */
.hole-card-actions {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border-color);
}

.hole-card-actions .btn-small {
  flex: 1;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.hole-card-actions .btn-small svg {
  width: 12px;
  height: 12px;
}

.hole-card-actions .btn-directions {
  background: rgba(74, 158, 186, 0.1);
  color: var(--accent-water-light);
  border-color: rgba(74, 158, 186, 0.3);
}

.hole-card-actions .btn-directions:hover {
  background: rgba(74, 158, 186, 0.2);
}

.hole-card-actions .btn-photos {
  background: rgba(201, 168, 76, 0.08);
  color: var(--accent-gold);
  border-color: rgba(201, 168, 76, 0.2);
}

.hole-card-actions .btn-photos:hover {
  background: rgba(201, 168, 76, 0.15);
}

/* Map link buttons */
.location-links {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.btn-map {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 6px;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
  flex: 1;
  justify-content: center;
}

.btn-apple {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.btn-apple:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--text-primary);
}

.btn-google {
  background: rgba(74, 158, 186, 0.12);
  color: var(--accent-water-light);
  border: 1px solid rgba(74, 158, 186, 0.2);
}
.btn-google:hover {
  background: rgba(74, 158, 186, 0.2);
  color: var(--accent-water-light);
}

/* ============================================
   GAUGE DASHBOARD
   ============================================ */

.gauge-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.gauge-widget {
  background: rgba(30, 28, 24, 0.85);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  backdrop-filter: blur(8px);
  transition: border-color 0.2s;
}

.gauge-widget:hover {
  border-color: var(--border-light);
}

.gauge-widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.gauge-widget-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
}

.gauge-widget-title svg {
  width: 16px;
  height: 16px;
  color: var(--accent-water);
}

.gauge-site-name {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 400;
  display: block;
}

.gauge-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(74, 158, 186, 0.15);
  color: var(--accent-water-light);
  border: 1px solid rgba(74, 158, 186, 0.3);
  border-radius: 6px;
  padding: 4px 10px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.gauge-refresh-btn:hover {
  background: rgba(74, 158, 186, 0.25);
}

.gauge-refresh-btn.spinning svg {
  animation: spin 0.8s linear infinite;
}

.gauge-refresh-sm {
  padding: 4px 8px;
  font-size: 0;
}

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

.gauge-readings {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.gauge-reading-card {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}

.gauge-reading-label {
  display: block;
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 2px;
}

.gauge-reading-value {
  display: block;
  color: var(--text-primary);
  font-size: 1.4rem;
  font-weight: 700;
  font-family: monospace;
  line-height: 1.2;
}

.gauge-reading-unit {
  display: block;
  color: var(--text-muted);
  font-size: 0.68rem;
}

.gauge-verdict {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  border-radius: 6px;
  margin-bottom: 8px;
}

.gauge-verdict-safe {
  background: rgba(107, 158, 90, 0.15);
  color: var(--accent-green-bright);
}

.gauge-verdict-caution {
  background: rgba(201, 168, 76, 0.12);
  color: var(--accent-gold);
}

.gauge-verdict-danger {
  background: rgba(196, 90, 74, 0.12);
  color: var(--accent-red);
}

.gauge-verdict-unknown {
  background: rgba(138, 133, 119, 0.12);
  color: var(--text-muted);
}

.gauge-time {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.verdict-nogo { color: #e74c3c !important; }
.verdict-marginal { color: #f39c12 !important; }
.verdict-go { color: #2ecc71 !important; }
.verdict-ideal { color: #8fbc6a !important; }
.verdict-caution { color: #e67e22 !important; }

.gauge-chart-wrap {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 8px;
}

.gauge-chart-wrap canvas {
  width: 100%;
  height: 80px;
  display: block;
}

.gauge-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.gauge-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 0.65rem;
}

.gauge-legend-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

/* Gauge dashboard header */
.gauge-dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.gauge-dashboard-controls {
  display: flex;
  gap: 8px;
}

.gauge-last-updated {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Related holes for each gauge */
.gauge-related-holes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
}

.gauge-hole-link {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  transition: all 0.2s;
}

.gauge-hole-link:hover {
  color: var(--accent-water-light);
  background: rgba(74, 158, 186, 0.1);
}

/* ============================================
   WEATHER SECTION
   ============================================ */

.weather-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.weather-block {
  background: rgba(30, 28, 24, 0.7);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 20px;
}

.weather-block h3 {
  color: var(--text-primary);
  margin-bottom: 12px;
  font-size: 1.05rem;
}

.weather-block-wide {
  grid-column: 1 / -1;
}

.weather-loading {
  color: var(--text-muted);
  font-style: italic;
}

.weather-note {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 12px;
}

.weather-current-grid {
  display: flex;
  align-items: center;
  gap: 20px;
}

.weather-current-temp {
  font-size: 3rem;
  font-weight: 800;
  color: var(--text-primary);
  font-family: monospace;
  line-height: 1;
}

.weather-current-temp span {
  font-size: 1.2rem;
  font-weight: 400;
}

.weather-current-details {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
}

.weather-detail strong {
  color: var(--text-primary);
}

.weather-forecast-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.weather-forecast-card {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}

.weather-night {
  background: rgba(0, 0, 0, 0.2);
}

.weather-forecast-name {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.weather-forecast-temp {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-primary);
  font-family: monospace;
}

.weather-forecast-desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin: 4px 0;
  line-height: 1.3;
}

.weather-forecast-wind {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Water temperature section */
.water-temp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}

.water-temp-card {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 14px;
  text-align: center;
}

.water-temp-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.water-temp-value {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--accent-water-light);
  font-family: monospace;
  line-height: 1.2;
}

.water-temp-note {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Historical weather */
.weather-history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}

.weather-history-card {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 14px;
  text-align: center;
}

.weather-history-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.weather-history-value {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-primary);
  font-family: monospace;
  line-height: 1.2;
}

.weather-history-note {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* What to expect */
.weather-expect-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.weather-expect-item {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 14px;
}

.weather-expect-item strong {
  display: block;
  color: var(--text-primary);
  margin-bottom: 6px;
  font-size: 0.9rem;
}

.weather-expect-item p {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin: 0;
  line-height: 1.5;
}

.weather-links {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
  align-items: center;
}

/* Swimming condition indicator */
.swim-condition {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: rgba(74, 158, 186, 0.06);
  border: 1px solid rgba(74, 158, 186, 0.15);
  border-radius: 10px;
  margin-top: 16px;
}

.swim-condition-icon {
  font-size: 1.5rem;
}

.swim-condition-text {
  flex: 1;
}

.swim-condition-text strong {
  display: block;
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  margin-bottom: 2px;
}

.swim-condition-text p {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin: 0;
}

/* ============================================
   SAFETY SECTION
   ============================================ */

.safety-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.safety-block {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 24px;
}

.safety-block h3 {
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.safety-block p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.safety-block strong { color: var(--text-primary); }

.safety-block ul {
  padding-left: 20px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.safety-block li { margin-bottom: 6px; }

.safety-warning {
  border-color: var(--accent-gold-dim);
  border-left: 3px solid var(--accent-gold);
}

.safety-critical {
  border-color: var(--accent-red-dim);
  border-left: 3px solid var(--accent-red);
}

.safety-info {
  border-color: rgba(74, 158, 186, 0.3);
  border-left: 3px solid var(--accent-water);
}

.safety-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.safety-table td {
  padding: 8px 4px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary);
  vertical-align: top;
}

.safety-table td:first-child {
  white-space: nowrap;
  padding-right: 16px;
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-weight: 500;
}

.warning-text { color: var(--accent-red) !important; }

.safety-abort {
  background: rgba(196, 90, 74, 0.08);
  border: 1px solid rgba(196, 90, 74, 0.2);
  border-radius: 8px;
  padding: 16px;
  margin-top: 12px;
}

.safety-abort h4 {
  font-size: 0.85rem;
  color: var(--accent-red);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.safety-abort ul { font-size: 0.85rem; }

/* Water safety levels */
.safety-level-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.safety-level-card {
  padding: 14px;
  border-radius: 8px;
  text-align: center;
  font-family: var(--font-heading);
}

.safety-level-safe {
  background: rgba(107, 158, 90, 0.1);
  border: 1px solid rgba(107, 158, 90, 0.2);
}
.safety-level-safe .safety-level-label { color: var(--accent-green-bright); }

.safety-level-caution {
  background: rgba(201, 168, 76, 0.08);
  border: 1px solid rgba(201, 168, 76, 0.2);
}
.safety-level-caution .safety-level-label { color: var(--accent-gold); }

.safety-level-danger {
  background: rgba(196, 90, 74, 0.08);
  border: 1px solid rgba(196, 90, 74, 0.2);
}
.safety-level-danger .safety-level-label { color: var(--accent-red); }

.safety-level-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.safety-level-value {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.safety-level-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 400;
}

/* Emergency contacts */
.emergency-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.emergency-card {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  padding: 14px;
}

.emergency-card h4 {
  font-size: 0.82rem;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.emergency-card p {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 0;
}

.emergency-card a {
  color: var(--accent-water-light);
  font-weight: 600;
}

/* ============================================
   GALLERY
   ============================================ */

.gallery-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
}

.gallery-tabs::-webkit-scrollbar {
  display: none;
}

.gallery-tab {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: 20px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.gallery-tab:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  border-color: var(--border-light);
}

.gallery-tab.active {
  background: rgba(74, 158, 186, 0.15);
  color: var(--accent-water-light);
  border-color: var(--accent-water);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.gallery-item {
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  border: 1px solid var(--border-color);
  transition: transform 0.2s, border-color 0.2s;
}

.gallery-item:hover {
  transform: translateY(-2px);
  border-color: var(--accent-water);
}

.gallery-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}

.gallery-item:hover img {
  transform: scale(1.03);
}

.gallery-item-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 12px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  font-family: var(--font-heading);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.85);
}

.gallery-item-location {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.55);
}

/* Masonry layout option */
.gallery-grid-masonry {
  columns: 3;
  column-gap: 12px;
}

.gallery-grid-masonry .gallery-item {
  break-inside: avoid;
  margin-bottom: 12px;
}

.gallery-grid-masonry .gallery-item img {
  height: auto;
}

/* ============================================
   LIGHTBOX
   ============================================ */

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 40px;
  cursor: pointer;
}

.lightbox-close {
  position: absolute;
  top: 16px;
  right: 24px;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.5rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
  line-height: 1;
  z-index: 10000;
}

.lightbox-close:hover {
  opacity: 1;
}

.lightbox-image {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

.lightbox-caption {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 16px;
  text-align: center;
  max-width: 600px;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

.lightbox-counter {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 8px;
}

/* ============================================
   SEASONAL CALENDAR
   ============================================ */

.seasonal-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.month-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 20px 16px;
  text-align: center;
  transition: border-color 0.2s, transform 0.2s;
}

.month-card:hover {
  border-color: var(--border-light);
  transform: translateY(-1px);
}

.month-card-peak {
  border-color: rgba(107, 158, 90, 0.4);
  background: rgba(107, 158, 90, 0.04);
}
.month-card-peak:hover {
  border-color: var(--accent-green);
}

.month-card-good {
  border-color: rgba(74, 158, 186, 0.3);
  background: rgba(74, 158, 186, 0.03);
}
.month-card-good:hover {
  border-color: var(--accent-water);
}

.month-card-shoulder {
  border-color: rgba(201, 168, 76, 0.25);
  background: rgba(201, 168, 76, 0.03);
}
.month-card-shoulder:hover {
  border-color: var(--accent-gold-dim);
}

.month-name {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.month-rating {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 10px;
  margin-bottom: 12px;
  display: inline-block;
}

.month-rating-peak {
  background: rgba(107, 158, 90, 0.2);
  color: var(--accent-green-bright);
}

.month-rating-good {
  background: rgba(74, 158, 186, 0.2);
  color: var(--accent-water-light);
}

.month-rating-shoulder {
  background: rgba(201, 168, 76, 0.15);
  color: var(--accent-gold);
}

.month-rating-early {
  background: rgba(138, 133, 119, 0.15);
  color: var(--text-muted);
}

.month-temps {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
  font-family: var(--font-heading);
  font-size: 0.78rem;
}

.month-temp-air {
  color: var(--accent-gold);
}

.month-temp-water {
  color: var(--accent-water-light);
}

.month-spots {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.month-spots strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.month-note {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 8px;
  font-style: italic;
}

/* ============================================
   ACCESS GUIDE
   ============================================ */

.access-timeline {
  position: relative;
  padding-left: 28px;
  margin-bottom: 40px;
}

.access-timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-color);
}

.access-step {
  position: relative;
  margin-bottom: 24px;
  padding-left: 24px;
}

.access-step::before {
  content: '';
  position: absolute;
  left: -24px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-water);
  border: 2px solid var(--bg-section-alt);
}

.access-step-number {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-water-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.access-content h4 {
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.access-content p {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.access-content strong { color: var(--text-primary); }

/* Parking cards */
.parking-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin: 30px 0;
}

.parking-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 20px;
}

.parking-card h3 {
  color: var(--text-primary);
  margin-bottom: 8px;
  font-size: 1.05rem;
}

.parking-card ul {
  list-style: none;
  padding: 0;
  margin: 12px 0;
}

.parking-card li {
  padding: 6px 0;
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.5;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.parking-card li:last-child {
  border-bottom: none;
}

.parking-card .location-links {
  margin-top: 12px;
}

.parking-status {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
}

.parking-formal {
  background: rgba(46, 204, 113, 0.15);
  color: #2ecc71;
}

.parking-informal {
  background: rgba(243, 156, 18, 0.15);
  color: #f39c12;
}

.parking-free {
  background: rgba(107, 158, 90, 0.15);
  color: var(--accent-green-bright);
}

.parking-paid {
  background: rgba(201, 168, 76, 0.12);
  color: var(--accent-gold);
}

.parking-limited {
  background: rgba(196, 90, 74, 0.12);
  color: var(--accent-red);
}

/* Trail difficulty */
.trail-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.trail-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 20px;
}

.trail-card h4 {
  font-size: 0.95rem;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.trail-card p {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.trail-difficulty-bar {
  display: flex;
  gap: 2px;
  margin-top: 8px;
}

.trail-difficulty-segment {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--border-color);
}

.trail-difficulty-segment.active {
  background: var(--accent-water);
}

.trail-difficulty-segment.active.hard {
  background: var(--accent-red);
}

.trail-difficulty-segment.active.moderate {
  background: var(--accent-gold);
}

/* Driving directions */
.drive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.drive-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 20px;
}

.drive-card h4 {
  font-size: 0.95rem;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.drive-time {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  color: var(--accent-water-light);
  font-weight: 600;
  margin-bottom: 8px;
}

.drive-card p {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Coordinates display */
.sat-coords {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-family: monospace;
  margin: 6px 0 4px;
}

/* ============================================
   HISTORY & CULTURE
   ============================================ */

.history-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.history-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 28px;
  transition: border-color 0.2s;
}

.history-card:hover {
  border-color: var(--border-light);
}

.history-icon {
  color: var(--accent-gold);
  margin-bottom: 16px;
}

.history-card h3 {
  font-size: 1.1rem;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.history-card p {
  font-size: 0.92rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.history-fact {
  background: rgba(201, 168, 76, 0.08);
  border-left: 3px solid var(--accent-gold-dim);
  padding: 12px 16px;
  border-radius: 0 8px 8px 0;
  font-size: 0.88rem;
  margin-bottom: 0;
}

.history-fact strong { color: var(--accent-gold); }

.history-card-image {
  margin: -28px -28px 20px -28px;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  position: relative;
}

.history-card-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.history-card-image .photo-credit {
  position: absolute;
  bottom: 6px;
  right: 10px;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  margin: 0;
}

/* ============================================
   TIPS / KNOW-BEFORE-YOU-GO
   ============================================ */

.tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.tip-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 24px;
  transition: border-color 0.2s;
}

.tip-card:hover {
  border-color: var(--border-light);
}

.tip-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-size: 1.2rem;
}

.tip-card-icon-water {
  background: rgba(74, 158, 186, 0.15);
  color: var(--accent-water-light);
}

.tip-card-icon-safety {
  background: rgba(196, 90, 74, 0.12);
  color: var(--accent-red);
}

.tip-card-icon-gear {
  background: rgba(201, 168, 76, 0.12);
  color: var(--accent-gold);
}

.tip-card-icon-nature {
  background: rgba(107, 158, 90, 0.15);
  color: var(--accent-green-bright);
}

.tip-card h3 {
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.tip-card p {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
  line-height: 1.6;
}

.tip-card ul {
  padding-left: 20px;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.tip-card li {
  margin-bottom: 4px;
}

/* ============================================
   CFS / WATER LEVEL REFERENCE TABLE
   ============================================ */

.cfs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.cfs-table th {
  font-family: var(--font-heading);
  font-weight: 600;
  text-align: left;
  padding: 10px 8px;
  border-bottom: 2px solid var(--border-light);
  color: var(--text-primary);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cfs-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.cfs-nogo td { opacity: 0.6; }
.cfs-nogo td:last-child {
  color: var(--accent-red);
  font-weight: 600;
  opacity: 1;
  font-family: var(--font-heading);
}
.cfs-marginal td:last-child {
  color: var(--accent-gold);
  font-weight: 600;
  font-family: var(--font-heading);
}
.cfs-go td:last-child {
  color: var(--accent-green-bright);
  font-weight: 600;
  font-family: var(--font-heading);
}
.cfs-ideal td:last-child {
  color: var(--accent-water-light);
  font-weight: 700;
  font-family: var(--font-heading);
}
.cfs-caution td:last-child {
  color: var(--accent-gold);
  font-weight: 600;
  font-family: var(--font-heading);
}

/* ============================================
   PHOTO CREDITS
   ============================================ */

.photo-credit {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 6px;
  opacity: 0.7;
}

/* ============================================
   INLINE MAP LINKS
   ============================================ */

.inline-map-link {
  color: var(--accent-water-light);
  text-decoration: none;
  border-bottom: 1px dashed var(--accent-water-light);
  transition: color 0.2s, border-color 0.2s;
}
.inline-map-link:hover {
  color: var(--accent-water);
  border-color: var(--accent-water);
}

.map-link-wrap {
  display: block;
  position: relative;
  text-decoration: none;
  cursor: pointer;
}
.map-link-wrap:hover .map-link-badge {
  opacity: 1;
}
.map-link-wrap:hover img {
  filter: brightness(1.1);
}

.map-link-badge {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(35, 40, 32, 0.9);
  color: var(--text-primary);
  padding: 8px 20px;
  border-radius: 6px;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  opacity: 0.7;
  transition: opacity 0.2s;
  backdrop-filter: blur(4px);
}

/* ============================================
   HERO / SECTION IMAGES
   ============================================ */

.section-hero-image {
  margin-bottom: 32px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.section-hero-image img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  display: block;
}

.section-secondary-image {
  margin: 32px 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.section-secondary-image img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
}

/* ============================================
   COMPARISON TABLE
   ============================================ */

.comparison-table {
  overflow-x: auto;
  margin: 30px 0;
}

.comparison-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.comparison-table th,
.comparison-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.comparison-table th {
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(255, 255, 255, 0.04);
}

.comparison-table td {
  color: var(--text-secondary);
}

.comparison-table td:first-child {
  color: var(--text-muted);
  white-space: nowrap;
}

.comparison-table tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}

/* ============================================
   FOOTER
   ============================================ */

#footer {
  background: var(--bg-darker);
  border-top: 1px solid var(--border-color);
  padding: 48px 0 32px;
}

.footer-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}

.footer-about h4,
.footer-links h4,
.footer-contacts h4 {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.footer-about p {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.footer-reminder {
  font-size: 1rem;
  color: var(--accent-water);
  padding: 20px;
  background: rgba(74, 158, 186, 0.08);
  border: 1px solid rgba(74, 158, 186, 0.2);
  border-radius: 8px;
  align-self: start;
}

.footer-links ul,
.footer-contacts ul {
  list-style: none;
}

.footer-links li,
.footer-contacts li {
  margin-bottom: 8px;
  font-size: 0.88rem;
}

.footer-links a {
  color: var(--text-secondary);
  transition: color 0.2s;
}

.footer-links a:hover {
  color: var(--accent-water-light);
}

.footer-contacts li {
  color: var(--text-secondary);
}

.footer-contacts a {
  color: var(--accent-water-light);
}

.footer-credit {
  text-align: center;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border-color);
  padding-top: 20px;
}

.footer-disclaimer {
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  max-width: 700px;
  margin: 16px auto 0;
  line-height: 1.5;
}

/* ============================================
   LEAFLET MAP OVERRIDES
   ============================================ */

.leaflet-popup-content-wrapper {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

.leaflet-popup-content {
  font-family: var(--font-heading) !important;
  font-size: 0.85rem !important;
  line-height: 1.5 !important;
  color: var(--text-secondary) !important;
  margin: 12px 16px !important;
}

.leaflet-popup-content strong { color: var(--text-primary); }

.leaflet-popup-content .tier-badge {
  position: static;
  display: inline-block;
  margin-bottom: 6px;
}

.leaflet-popup-content .feature-pill {
  display: inline-block;
  margin: 2px 2px 2px 0;
}

.leaflet-popup-tip {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
}

.leaflet-container a.leaflet-popup-close-button {
  color: var(--text-muted) !important;
}

.leaflet-control-layers {
  background: var(--bg-card) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.leaflet-control-layers label {
  font-family: var(--font-heading) !important;
  font-size: 0.82rem !important;
}

.leaflet-control-zoom a {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

.leaflet-control-zoom a:hover {
  background: var(--bg-card-hover) !important;
}

/* Custom map markers */
.map-marker-tier1 {
  background: var(--accent-green);
  border: 2px solid #fff;
  border-radius: 50%;
  width: 14px;
  height: 14px;
}

.map-marker-tier2 {
  background: var(--accent-gold);
  border: 2px solid #fff;
  border-radius: 50%;
  width: 14px;
  height: 14px;
}

.map-marker-tier3 {
  background: var(--accent-blue);
  border: 2px solid #fff;
  border-radius: 50%;
  width: 14px;
  height: 14px;
}

.map-marker-gauge {
  background: var(--accent-water);
  border: 2px solid #fff;
  border-radius: 50%;
  width: 12px;
  height: 12px;
}

/* ============================================
   LOADING / SKELETON STATES
   ============================================ */

.skeleton {
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-hover) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text {
  height: 14px;
  margin-bottom: 8px;
  width: 80%;
}

.skeleton-text-short {
  width: 40%;
}

.skeleton-image {
  aspect-ratio: 16 / 10;
  width: 100%;
}

.skeleton-card {
  height: 280px;
}

/* Loading spinner */
.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-color);
  border-top-color: var(--accent-water);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ============================================
   TOAST / NOTIFICATION
   ============================================ */

.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px 20px;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  color: var(--text-primary);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  z-index: 5000;
  transform: translateY(100px);
  opacity: 0;
  transition: transform 0.3s, opacity 0.3s;
}

.toast.visible {
  transform: translateY(0);
  opacity: 1;
}

.toast-success {
  border-left: 3px solid var(--accent-green);
}

.toast-warning {
  border-left: 3px solid var(--accent-gold);
}

.toast-error {
  border-left: 3px solid var(--accent-red);
}

.toast-info {
  border-left: 3px solid var(--accent-water);
}

/* ============================================
   BACK TO TOP
   ============================================ */

.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s, background 0.2s;
  z-index: 500;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
  border-color: var(--border-light);
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  #main-nav,
  .hero-scroll-hint,
  .back-to-top,
  .filter-bar,
  .lightbox-overlay,
  .toast {
    display: none !important;
  }

  body {
    background: #fff;
    color: #222;
  }

  .section {
    padding: 24px 0;
    page-break-inside: avoid;
  }

  .hole-card,
  .gauge-widget,
  .safety-block {
    break-inside: avoid;
  }
}

/* ============================================
   RESPONSIVE — 1200px (wide screens)
   ============================================ */

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

  .seasonal-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .gauge-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================
   RESPONSIVE — 900px
   ============================================ */

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

  .history-grid {
    grid-template-columns: 1fr;
  }

  .safety-grid {
    grid-template-columns: 1fr;
  }

  .footer-content {
    grid-template-columns: 1fr;
  }

  .holes-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .seasonal-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .gauge-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .safety-level-grid {
    grid-template-columns: 1fr;
  }

  .gallery-grid-masonry {
    columns: 2;
  }

  .hero-stats {
    gap: 20px;
  }

  .hero-stat-number {
    font-size: 1.6rem;
  }
}

/* ============================================
   RESPONSIVE — 768px
   ============================================ */

@media (max-width: 768px) {
  :root { --nav-height: 52px; }

  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: rgba(20, 22, 15, 0.98);
    flex-direction: column;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    gap: 0;
  }

  .nav-links.open { display: flex; }

  .nav-links a {
    padding: 12px 16px;
    font-size: 0.9rem;
    border-radius: 8px;
  }

  .nav-toggle { display: flex; }

  .section { padding: 56px 0; }

  #swim-map { height: 380px; }

  .holes-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .seasonal-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .gauge-grid {
    grid-template-columns: 1fr;
  }

  .gauge-readings {
    grid-template-columns: repeat(2, 1fr);
  }

  .gauge-widget-title {
    flex-wrap: wrap;
  }

  .gauge-site-name {
    width: 100%;
  }

  .filter-bar {
    padding: 10px 0;
  }

  .filter-bar-inner {
    padding: 0 16px;
  }

  .section-hero-image img { height: 240px; }
  .section-secondary-image img { height: 200px; }
  .history-card-image img { height: 160px; }

  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }

  .gallery-item img { height: 160px; }

  .gallery-grid-masonry {
    columns: 2;
  }

  .lightbox-overlay { padding: 20px; }
  .lightbox-image { max-width: 95vw; max-height: 75vh; }
  .lightbox-nav { width: 40px; height: 40px; font-size: 1.2rem; }
  .lightbox-prev { left: 10px; }
  .lightbox-next { right: 10px; }

  .weather-current-temp {
    font-size: 2.2rem;
  }

  .weather-forecast-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .parking-grid {
    grid-template-columns: 1fr;
  }

  .drive-grid {
    grid-template-columns: 1fr;
  }

  .trail-info {
    grid-template-columns: 1fr;
  }

  .tips-grid {
    grid-template-columns: 1fr;
  }

  .hero-stats {
    gap: 16px;
  }

  .hero-stat-number {
    font-size: 1.4rem;
  }

  .hero-actions {
    flex-direction: column;
    align-items: center;
  }

  .map-controls {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .map-controls::-webkit-scrollbar {
    display: none;
  }

  .map-info-panel {
    position: relative;
    top: auto;
    right: auto;
    max-width: 100%;
    margin-bottom: 16px;
  }

  .gauge-widget {
    max-width: 100%;
    overflow-x: auto;
  }
  .gauge-grid {
    grid-template-columns: 1fr;
  }

  .access-grid { grid-template-columns: 1fr; }
  .etiquette-grid { grid-template-columns: repeat(2, 1fr); }
  .seasonal-table { font-size: 0.78rem; }
}

/* ============================================
   RESPONSIVE — 600px
   ============================================ */

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

  .seasonal-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .month-card {
    padding: 14px 12px;
  }

  .month-temps {
    flex-direction: column;
    gap: 4px;
  }

  .overview-stats,
  .river-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .emergency-grid {
    grid-template-columns: 1fr;
  }

  .location-links {
    flex-direction: column;
  }

  .btn-map {
    justify-content: center;
  }

  /* Mobile overflow fixes */
  #swim-map {
    height: 380px !important;
  }
  .section {
    overflow-x: hidden;
  }
  .seasonal-table {
    display: block;
    overflow-x: auto;
  }
  .gauge-chart {
    max-width: 100%;
  }
  .map-controls {
    flex-wrap: wrap;
  }
  .gallery-tabs {
    flex-wrap: wrap;
  }
}

/* ============================================
   RESPONSIVE — 480px
   ============================================ */

@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .container-wide { padding: 0 16px; }

  .hero-desc { font-size: 0.95rem; }

  .hero-stats {
    flex-direction: column;
    gap: 12px;
  }

  .overview-stats,
  .river-stats {
    grid-template-columns: 1fr;
  }

  .seasonal-grid {
    grid-template-columns: 1fr;
  }

  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .gallery-item img { height: 120px; }

  .gallery-grid-masonry {
    columns: 1;
  }

  .gauge-reading-value {
    font-size: 1.1rem;
  }

  .water-temp-value {
    font-size: 1.3rem;
  }

  .hole-card-body {
    padding: 12px 16px;
  }

  .hole-card-actions {
    padding: 10px 16px;
    flex-direction: column;
  }

  .hole-card-actions .btn-small {
    width: 100%;
  }

  .hole-card-details-inner {
    padding: 12px 16px 16px;
  }

  .filter-bar-label {
    display: none;
  }

  .lightbox-nav {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .section-hero-image img { height: 180px; }

  .back-to-top {
    bottom: 16px;
    right: 16px;
    width: 38px;
    height: 38px;
  }

  .etiquette-grid { grid-template-columns: 1fr; }
}

/* ============================================
   RESPONSIVE — 360px (small phones)
   ============================================ */

@media (max-width: 360px) {
  #hero h1 {
    font-size: 2rem;
  }

  .section-title {
    font-size: 1.5rem;
  }

  .hole-card-features {
    gap: 4px;
  }

  .feature-pill {
    font-size: 0.62rem;
    padding: 2px 8px;
  }

  .hole-card-badges {
    gap: 4px;
  }

  .legal-badge,
  .difficulty-badge,
  .crowd-badge {
    font-size: 0.62rem;
    padding: 2px 8px;
  }

  .stat-number {
    font-size: 1.4rem;
  }

  .filter-pill {
    font-size: 0.72rem;
    padding: 5px 12px;
  }
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.5s ease forwards;
}

.slide-up {
  animation: slideUp 0.5s ease forwards;
}

/* Staggered card entrance */
.hole-card[data-index="0"] { animation-delay: 0s; }
.hole-card[data-index="1"] { animation-delay: 0.05s; }
.hole-card[data-index="2"] { animation-delay: 0.1s; }
.hole-card[data-index="3"] { animation-delay: 0.15s; }
.hole-card[data-index="4"] { animation-delay: 0.2s; }
.hole-card[data-index="5"] { animation-delay: 0.25s; }
.hole-card[data-index="6"] { animation-delay: 0.3s; }
.hole-card[data-index="7"] { animation-delay: 0.35s; }
.hole-card[data-index="8"] { animation-delay: 0.4s; }
.hole-card[data-index="9"] { animation-delay: 0.45s; }
.hole-card[data-index="10"] { animation-delay: 0.5s; }
.hole-card[data-index="11"] { animation-delay: 0.55s; }

/* Water ripple effect on section titles */
.section-title-water::after {
  background: linear-gradient(90deg, var(--accent-water), var(--accent-water-light), var(--accent-water));
  background-size: 200% 100%;
  animation: waterShimmer 3s ease infinite;
}

@keyframes waterShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent-water-light); }
.text-green { color: var(--accent-green-bright); }
.text-gold { color: var(--accent-gold); }
.text-red { color: var(--accent-red); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }

.gap-sm { gap: 8px; }
.gap-md { gap: 16px; }
.gap-lg { gap: 24px; }

.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-center { align-items: center; justify-content: center; }
.flex-between { justify-content: space-between; }
.flex-col { flex-direction: column; }

.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.rounded { border-radius: 8px; }
.rounded-lg { border-radius: 12px; }

.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }

.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* ============================================
   DARK/LIGHT ACCENT OVERRIDE
   Support for per-section accent color override
   ============================================ */

.accent-green {
  --section-accent: var(--accent-green);
  --section-accent-bright: var(--accent-green-bright);
}

.accent-gold {
  --section-accent: var(--accent-gold);
  --section-accent-bright: var(--accent-gold);
}

.accent-water {
  --section-accent: var(--accent-water);
  --section-accent-bright: var(--accent-water-light);
}

.accent-red {
  --section-accent: var(--accent-red);
  --section-accent-bright: var(--accent-red);
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero-scroll-hint {
    animation: none;
  }

  .hole-card:hover .hole-card-image img {
    transform: none;
  }

  .gallery-item:hover img {
    transform: none;
  }

  .skeleton {
    animation: none;
  }
}

/* ============================================
   CARD HIGHLIGHTED STATE
   ============================================ */

.card-highlighted {
  border-color: var(--accent-gold) !important;
  box-shadow: 0 0 20px rgba(201, 168, 76, 0.3);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ============================================
   JOHN'S PICK BADGE
   ============================================ */

.johns-pick-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent-gold);
  color: var(--bg-dark);
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 20px;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.johns-pick-badge[hidden] {
  display: none;
}

/* pick-star in HTML already provides the star */
.pick-star {
  font-size: 0.8rem;
}

/* ============================================
   INSIDER TIP CALLOUT
   ============================================ */

.insider-tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--bg-darker);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent-gold);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 12px 0;
  font-style: italic;
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.5;
}

.insider-tip[hidden] {
  display: none;
}

/* tip-icon in HTML already provides the lightbulb */
.tip-icon {
  font-style: normal;
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ============================================
   CELL SERVICE INDICATOR
   ============================================ */

.cell-service {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
}

.cell-service::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cell-service.cell-good::before {
  background: var(--accent-green-bright);
  box-shadow: 0 0 4px rgba(139, 195, 115, 0.5);
}

.cell-service.cell-good {
  color: var(--accent-green-bright);
}

.cell-service.cell-weak::before {
  background: var(--accent-gold);
  box-shadow: 0 0 4px rgba(201, 168, 76, 0.5);
}

.cell-service.cell-weak {
  color: var(--accent-gold);
}

.cell-service.cell-none::before {
  background: var(--accent-red);
  box-shadow: 0 0 4px rgba(196, 90, 74, 0.5);
}

.cell-service.cell-none {
  color: var(--accent-red);
}

/* ============================================
   DRIVE ROUTE DESCRIPTION
   ============================================ */

.drive-route {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.4;
  margin-top: 4px;
}

.drive-route::before {
  content: "\1F697";
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* ============================================
   JOHN'S PICKS FILTER PILL
   ============================================ */

.johns-picks-pill.active {
  background: rgba(201, 168, 76, 0.2);
  color: var(--accent-gold);
  border-color: var(--accent-gold);
}

.johns-picks-pill:hover {
  background: rgba(201, 168, 76, 0.1);
  color: var(--accent-gold);
  border-color: var(--accent-gold-dim);
}

/* ============================================
   MAP CLUSTER STYLES (Leaflet)
   ============================================ */

.swim-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cluster-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 29, 23, 0.85);
  border: 2px solid var(--accent-water);
  border-radius: 50%;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* ============================================
   HIGH CONTRAST MODE
   ============================================ */

@media (forced-colors: active) {
  .tier-badge,
  .feature-pill,
  .legal-badge,
  .difficulty-badge,
  .crowd-badge,
  .filter-pill,
  .gallery-tab,
  .month-rating {
    forced-color-adjust: none;
  }
}

/* ============================================
   FIX: CLASS NAME ALIASES
   JS generates these class names; original CSS
   used different names from the kayak site.
   ============================================ */

/* Tier badge — JS adds .tier-1, .tier-2, .tier-3 */
.tier-badge.tier-1 {
  background: rgba(107, 158, 90, 0.9);
  color: #fff;
}
.tier-badge.tier-2 {
  background: rgba(201, 168, 76, 0.9);
  color: #1a1d17;
}
.tier-badge.tier-3 {
  background: rgba(90, 143, 181, 0.9);
  color: #fff;
}

/* Legal badge — JS adds .badge-legal, .badge-caution */
.badge-legal {
  background: rgba(107, 158, 90, 0.15);
  color: var(--accent-green-bright);
}
.badge-caution {
  background: rgba(201, 168, 76, 0.12);
  color: var(--accent-gold);
}

/* Difficulty badge — JS adds .badge-easy, .badge-moderate, .badge-hard */
.badge-easy {
  background: rgba(107, 158, 90, 0.15);
  color: var(--accent-green-bright);
}
.badge-moderate {
  background: rgba(201, 168, 76, 0.12);
  color: var(--accent-gold);
}
.badge-hard {
  background: rgba(196, 90, 74, 0.12);
  color: var(--accent-red);
}

/* Crowd badge — JS adds .badge-crowd-low, .badge-crowd-moderate, .badge-crowd-high */
.badge-crowd-low {
  background: rgba(107, 158, 90, 0.12);
  color: var(--accent-green-bright);
}
.badge-crowd-moderate {
  background: rgba(201, 168, 76, 0.1);
  color: var(--accent-gold);
}
.badge-crowd-high {
  background: rgba(196, 90, 74, 0.1);
  color: var(--accent-red);
}

/* Expand button — HTML uses .hole-card-expand, CSS had .hole-card-expand-btn */
.hole-card-expand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: none;
  border-top: 1px solid var(--border-color);
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.hole-card-expand:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--accent-water-light);
}

/* Feature pill default — JS creates pills without data-feature attr */
.feature-pill {
  background: rgba(74, 158, 186, 0.12);
  color: var(--accent-water-light);
}

/* ============================================
   EDITOR'S PICKS SECTION
   ============================================ */

.picks-section {
  margin-top: 48px;
}

.picks-section h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 20px;
}

.picks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.pick-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  transition: border-color 0.2s, transform 0.2s;
}

.pick-card:hover {
  border-color: var(--accent-gold-dim);
  transform: translateY(-2px);
}

.pick-label {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent-gold);
  background: rgba(201, 168, 76, 0.12);
  padding: 3px 10px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.pick-card h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.pick-card p {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ============================================
   CARD LAYOUT TIGHTENING
   ============================================ */

/* Tighter spacing in card body */
.hole-card-distance {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 2px;
}

/* Drive route — less gap */
.drive-route {
  margin-bottom: 8px;
  font-size: 0.8rem;
}

/* Meta row — flex wrap to keep compact */
.hole-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

/* Cell service — compact inline */
.cell-service {
  margin-bottom: 4px;
}

.cell-service[hidden] {
  display: none;
}

/* Details section inside card */
.hole-card-info {
  padding: 12px 0;
}

.hole-card-info > div {
  font-size: 0.85rem;
  color: var(--text-secondary);
  padding: 4px 0;
  border-bottom: 1px solid rgba(58, 61, 51, 0.4);
}

.hole-card-info > div:last-child {
  border-bottom: none;
}

.hole-card-info strong {
  color: var(--text-primary);
  font-size: 0.82rem;
}

/* Action buttons in expanded card */
.hole-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.btn-sm {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  text-align: center;
}

.btn-sm:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  border-color: var(--border-light);
}

.btn-directions {
  background: rgba(74, 158, 186, 0.1);
  border-color: rgba(74, 158, 186, 0.3);
  color: var(--accent-water-light);
}

.btn-directions:hover {
  background: rgba(74, 158, 186, 0.2);
}

.btn-map-focus {
  background: rgba(107, 158, 90, 0.1);
  border-color: rgba(107, 158, 90, 0.3);
  color: var(--accent-green-bright);
}

.btn-map-focus:hover {
  background: rgba(107, 158, 90, 0.2);
}

/* ============================================
   RESPONSIVE: PICKS GRID
   ============================================ */

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

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

/* ============================================
   GAUGE SECTION ALIASES
   ============================================ */

.gauge-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
}
.gauge-name {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}
.gauge-readings {
  display: flex;
  gap: 24px;
  margin-bottom: 12px;
}
.gauge-reading {
  display: flex;
  flex-direction: column;
}
.gauge-value {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
}
.gauge-label {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.verdict-safe {
  color: var(--accent-green-bright);
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
}
.verdict-caution {
  color: var(--accent-gold);
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
}
.verdict-dangerous {
  color: var(--accent-red);
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
}
.verdict-unknown {
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
}
.gauge-chart {
  width: 100%;
  display: block;
}
.gauge-holes {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 8px;
}
.gauge-updated {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ============================================
   SEASONAL SECTION
   ============================================ */

.seasonal-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}
.seasonal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.seasonal-header h3 {
  font-size: 1.1rem;
  font-weight: 600;
}
.seasonal-tag {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.seasonal-prime .seasonal-tag,
.seasonal-peak .seasonal-tag { background: rgba(107, 158, 90, 0.15); color: var(--accent-green-bright); }
.seasonal-early .seasonal-tag,
.seasonal-late .seasonal-tag { background: rgba(201, 168, 76, 0.12); color: var(--accent-gold); }
.seasonal-end .seasonal-tag { background: rgba(196, 90, 74, 0.12); color: var(--accent-red); }
.seasonal-body p,
.seasonal-summary { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 8px; }
.seasonal-stats { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 8px; }
.seasonal-best { font-size: 0.85rem; color: var(--text-secondary); }
.seasonal-best strong { color: var(--accent-water-light); }
.seasonal-current-month { background: rgba(74, 158, 186, 0.08); border-color: var(--accent-water); }
.seasonal-card-current { border-color: var(--accent-water); box-shadow: 0 0 12px rgba(74, 158, 186, 0.15); }
.seasonal-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.seasonal-table th, .seasonal-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border-color); font-size: 0.85rem; }
.seasonal-table th { font-family: var(--font-heading); font-weight: 600; color: var(--text-primary); }
.seasonal-table td { color: var(--text-secondary); }

/* ============================================
   ACCESS SECTION
   ============================================ */

.access-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}
.access-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
}
.access-card h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.access-badge {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.access-free { background: rgba(107, 158, 90, 0.15); color: var(--accent-green-bright); }
.access-fee { background: rgba(201, 168, 76, 0.12); color: var(--accent-gold); }
.access-card p { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 8px; }
.access-card ul { padding-left: 20px; font-size: 0.85rem; color: var(--text-secondary); }
.access-card li { margin-bottom: 4px; }
.etiquette-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}
.etiquette-item {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
}
.etiquette-item strong { display: block; font-family: var(--font-heading); font-size: 0.85rem; color: var(--text-primary); margin-bottom: 4px; }
.etiquette-item p { font-size: 0.82rem; color: var(--text-secondary); }
.access-table-wrap { overflow-x: auto; margin-top: 16px; }
.access-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.access-table th, .access-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border-color); font-size: 0.82rem; }
.access-table th { font-family: var(--font-heading); font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.access-table td { color: var(--text-secondary); }

/* ============================================
   FILTER / SORT ELEMENTS
   ============================================ */

.filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.filter-label {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.filter-results {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  color: var(--text-muted);
}
.filter-reset {
  background: none;
  border: 1px solid var(--accent-red);
  color: var(--accent-red);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.filter-reset:hover {
  background: rgba(196, 90, 74, 0.15);
}
.sort-pill {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
}
.sort-pill:hover {
  border-color: var(--border-light);
  color: var(--text-secondary);
}
.sort-pill.active {
  background: rgba(74, 158, 186, 0.15);
  border-color: var(--accent-water);
  color: var(--accent-water-light);
}
.no-results {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
  font-family: var(--font-heading);
}

/* ============================================
   COMFORT METER
   ============================================ */

.swim-comfort { margin-top: 16px; }
.comfort-meter {
  height: 8px;
  background: var(--bg-darker);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 4px;
}
.comfort-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}
.comfort-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--text-muted);
  font-family: var(--font-heading);
}