/* ================================================================
   NatureWandrr — discover.css
   Page-specific styles for discover.html: intro, controls bar,
   parks grid, park cards, loading skeleton, and state panels.
   Depends on: tokens.css, base.css, layout.css, components.css
   ================================================================ */


/* ----------------------------------------------------------------
   Page intro (mirrors hero rhythm without full hero height)
---------------------------------------------------------------- */

.discover-intro {
  padding-block: clamp(var(--space-16), 10vw, var(--space-24));
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border-muted);
}

.discover-intro-inner {
  max-width: 720px;
}


.discover-heading {
  font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl));
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-6);
}

.discover-heading em {
  font-style: italic;
  color: var(--color-accent-gold);
}

.discover-subhead {
  font-size: clamp(var(--text-base), 2vw, var(--text-md));
  color: var(--color-text-muted);
  line-height: var(--leading-loose);
  max-width: 580px;
  margin-bottom: var(--space-4);
}

.discover-stats {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}


/* ----------------------------------------------------------------
   Controls bar (search + state filter + clear)
---------------------------------------------------------------- */

.discover-controls {
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border-muted);
  padding-block: var(--space-6);
}

.controls-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-end;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.control-group--search {
  flex: 1 1 260px;
}

.control-group--state {
  flex: 0 1 200px;
}

.control-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
}

/* Search input wrapper (positions the icon) */
.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: var(--space-4);
  color: var(--color-text-muted);
  pointer-events: none;
  display: flex;
  align-items: center;
}

.discover-input {
  width: 100%;
  padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + 16px + var(--space-3));
  background-color: var(--color-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-size: var(--text-base);
  /* WCAG 2.5.8: minimum 44px touch target */
  min-height: 44px;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow   var(--duration-fast) var(--ease-out);
  /* Remove native search cancel button on WebKit */
  -webkit-appearance: none;
  appearance: none;
}

.discover-input::placeholder {
  color: var(--color-text-muted);
}

.discover-input:hover {
  border-color: var(--color-accent-green);
}

.discover-input:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-color: var(--color-focus-ring);
  box-shadow: 0 0 0 4px rgba(201, 168, 76, 0.15);
}

/* State dropdown */
.discover-select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-size: var(--text-base);
  min-height: 44px;
  cursor: pointer;
  /* Custom chevron */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a8b5a0' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: calc(var(--space-4) + 20px);
  -webkit-appearance: none;
  appearance: none;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow   var(--duration-fast) var(--ease-out);
}

.discover-select:hover {
  border-color: var(--color-accent-green);
}

.discover-select:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-color: var(--color-focus-ring);
  box-shadow: 0 0 0 4px rgba(201, 168, 76, 0.15);
}

.discover-select option {
  background-color: var(--color-elevated);
  color: var(--color-text-primary);
}

/* Clear button — aligns with input bottom edge */
.discover-clear {
  align-self: flex-end;
  min-height: 44px;
}


/* ----------------------------------------------------------------
   Results section padding override
---------------------------------------------------------------- */

.discover-results {
  /* The .section class adds symmetric block padding;
     override top padding since the controls bar already has bottom spacing. */
  padding-top: var(--space-12);
}


/* ----------------------------------------------------------------
   Parks grid — 1/2/3 column responsive layout
---------------------------------------------------------------- */

.parks-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

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

@media (min-width: 1024px) {
  .parks-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
  }
}


/* ----------------------------------------------------------------
   Park card
---------------------------------------------------------------- */

.park-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform    var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    box-shadow   var(--duration-normal) var(--ease-out);
}

/* Hover: lift + gold border glow. Keyboard focus on the card link
   achieves the same visual treatment via :focus-within. */
.park-card:hover,
.park-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(201, 168, 76, 0.5);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(201, 168, 76, 0.2);
}

/* Respect reduced motion — keep border/shadow, remove translate */
@media (prefers-reduced-motion: reduce) {
  .park-card:hover,
  .park-card:focus-within {
    transform: none;
  }
}

/* Clickable image link — display:block preserves layout; no focus ring
   (tabindex="-1" removes it from tab order). */
.park-card-img-link {
  display: block;
  flex-shrink: 0;
  outline: none;
}

/* Card image */
.park-card-img-wrapper {
  width: 100%;
  /* 16:9 aspect ratio scaffold prevents CLS before image loads */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--color-elevated);
  flex-shrink: 0;
}

.park-card-img-wrapper--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: var(--text-2xl);
}

.park-card-img-wrapper--placeholder::after {
  content: '\26F0'; /* mountain symbol */
  font-size: var(--text-4xl);
  opacity: 0.3;
}

/* Shimmer overlay while the park photo is in flight */
.park-card-img-wrapper--loading {
  position: relative;
}

.park-card-img-wrapper--loading::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent         0%,
    rgba(255,255,255,0.07) 50%,
    transparent         100%
  );
  background-size: 200% 100%;
  animation: park-img-shimmer 1.4s linear infinite;
  z-index: 1;
  pointer-events: none;
}

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

@media (prefers-reduced-motion: reduce) {
  .park-card-img-wrapper--loading::before {
    animation: none;
    background: rgba(255, 255, 255, 0.04);
  }
}

.park-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-normal) var(--ease-out);
}

@media (prefers-reduced-motion: no-preference) {
  .park-card:hover .park-card-img {
    transform: scale(1.04);
  }
}

/* Card body */
.park-card-body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

/* Designation tag */
.park-card-tag {
  display: inline-block;
  align-self: flex-start;
  padding: var(--space-1) var(--space-3);
  background-color: rgba(201, 168, 76, 0.12);
  color: var(--color-accent-gold);
  border: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Park name */
.park-card-name {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
  /* Clamp to 2 lines to keep grid rows consistent */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* States line */
.park-card-states {
  font-size: var(--text-sm);
  color: var(--color-accent-gold);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Description */
.park-card-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-loose);
  flex: 1;
}

/* Activity pills list */
.park-card-activities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
}

.park-activity-pill {
  padding: var(--space-1) var(--space-3);
  background-color: rgba(45, 106, 58, 0.25);
  color: var(--color-text-muted);
  border: 1px solid rgba(45, 106, 58, 0.4);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 500;
  white-space: nowrap;
}

/* Card links row — Learn more and optional Permits link sit side by side */
.park-card-link {
  align-self: flex-start;
  margin-top: auto;
  /* Override global main a:not(.btn) underline for this button-styled link */
  text-decoration: none !important;
  color: var(--color-text-primary) !important;
}

.park-card-link + .park-card-link {
  margin-top: 0;
}

.park-card-link:hover {
  color: var(--color-text-primary) !important;
}

/* Permit portal link — gold accent to distinguish from Learn more */
.park-card-permit-link {
  color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
}

.park-card-permit-link:hover {
  background: color-mix(in oklch, var(--color-accent) 12%, transparent) !important;
  color: var(--color-accent) !important;
}

/* Data source limitations disclosure */
.park-card-data-limitations {
  margin-top: var(--space-3);
  border-top: 1px solid var(--color-border-muted);
  padding-top: var(--space-3);
}

.park-card-data-limitations-summary {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  cursor: pointer;
  user-select: none;
}

/* Suppress native disclosure triangles across all engines */
.park-card-data-limitations-summary::-webkit-details-marker { display: none; }
.park-card-data-limitations-summary::marker               { display: none; }

.park-card-data-limitations-summary:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.park-card-data-limitations-summary::before {
  content: '▶ ';
  display: inline-block;
  font-size: 0.6em;
  vertical-align: middle;
  transition: transform var(--duration-fast) ease;
}

.park-card-data-limitations[open] .park-card-data-limitations-summary::before {
  transform: rotate(90deg);
}

.park-card-data-limitations-summary:hover {
  color: var(--color-text-secondary);
}

.park-card-data-limitations-list {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-4);
  list-style: disc;
}

.park-card-data-limitations-list li {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-1);
}

.park-card-data-limitations-status {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-style: italic;
}


/* ----------------------------------------------------------------
   Loading skeleton
---------------------------------------------------------------- */

.park-card-skeleton {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* Fixed height so the skeleton occupies roughly the same space as a card */
  min-height: 360px;
  position: relative;
}

/* Shimmer animation */
.park-card-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

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

/* Reduced motion: replace shimmer with static pulse */
@media (prefers-reduced-motion: reduce) {
  .park-card-skeleton::after {
    animation: none;
    background: rgba(255, 255, 255, 0.03);
  }
}


/* ----------------------------------------------------------------
   State panels (empty + error)
---------------------------------------------------------------- */

.parks-state-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  padding: var(--space-20) var(--space-6);
  max-width: 480px;
  margin-inline: auto;
}

.state-panel-icon {
  font-size: 3rem;
  line-height: 1;
  color: var(--color-text-muted);
}

.parks-state-panel--error .state-panel-icon {
  color: #c97a4c; /* warm amber-red — distinct from gold but not harsh red */
}

.state-panel-heading {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text-primary);
}

.state-panel-body {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-loose);
}


/* ----------------------------------------------------------------
   Map section (OpenLayers + OpenStreetMap tiles)
---------------------------------------------------------------- */

.discover-map-section {
  background: var(--color-surface, #14301a);
  border-bottom: 1px solid var(--color-border-muted);
}

.discover-map-container {
  position: relative;
  max-width: var(--container-max, 1200px);
  margin-inline: auto;
  padding: var(--space-6) var(--container-px) 0;
}

.park-map {
  position: relative;
  width: 100%;
  height: 420px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background-color: var(--color-elevated);
}

@media (max-width: 768px) {
  .park-map {
    height: 260px;
  }
}

/* ----------------------------------------------------------------
   Fullscreen toggle button
---------------------------------------------------------------- */

.map-fullscreen-btn {
  position: absolute;
  top: var(--space-2, 8px);
  right: var(--space-2, 8px);
  z-index: 10;
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 26, 13, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-primary, #f5f0e8);
  cursor: pointer;
  transition: background var(--duration-fast, 150ms) var(--ease-out, ease);
}

/* Extend touch target to 44×44 without changing visual size */
.map-fullscreen-btn::before {
  content: '';
  position: absolute;
  inset: -8px;
}

.map-fullscreen-btn:hover {
  background: rgba(10, 26, 13, 0.92);
}

.map-fullscreen-btn:focus-visible {
  outline: 2px solid var(--color-focus-ring, #c9a84c);
  outline-offset: 2px;
}

/* compress icon hidden until fullscreen is active */
.map-fs-icon--compress {
  display: none;
}

/* ----------------------------------------------------------------
   Fullscreen mode — container reflowed as full-viewport flex column
   so the controls bar remains visible below the expanded map canvas.

   IMPORTANT: :fullscreen and :-webkit-full-screen MUST be separate
   rule blocks. CSS drops any rule list containing an unrecognised
   selector, so mixing the two in one block causes both to be ignored
   in browsers that don't recognise the webkit variant (Chrome, FF).
---------------------------------------------------------------- */

#map-container:fullscreen {
  max-width: 100%;
  padding: 0;
  height: 100vh;     /* fallback for browsers without dvh */
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-surface, #14301a);
  overflow: hidden;
}

#map-container:-webkit-full-screen {
  max-width: 100%;
  padding: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-surface, #14301a);
  overflow: hidden;
}

:fullscreen .park-map {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  border-radius: 0;
  border: none;
}

:-webkit-full-screen .park-map {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  border-radius: 0;
  border: none;
}

:fullscreen .map-controls-bar {
  flex: 0 0 auto;
  padding-inline: var(--space-4, 16px);
  /* account for iOS home-indicator safe area */
  padding-block-end: env(safe-area-inset-bottom, var(--space-3, 12px));
  background: var(--color-surface, #14301a);
  border-top: 1px solid var(--color-border-muted, rgba(255, 255, 255, 0.08));
}

:-webkit-full-screen .map-controls-bar {
  flex: 0 0 auto;
  padding-inline: var(--space-4, 16px);
  padding-block-end: env(safe-area-inset-bottom, var(--space-3, 12px));
  background: var(--color-surface, #14301a);
  border-top: 1px solid var(--color-border-muted, rgba(255, 255, 255, 0.08));
}

/* Swap expand → compress icon when fullscreen is active */
#map-container:fullscreen .map-fs-icon--expand {
  display: none;
}

#map-container:-webkit-full-screen .map-fs-icon--expand {
  display: none;
}

#map-container:fullscreen .map-fs-icon--compress {
  display: block;
}

#map-container:-webkit-full-screen .map-fs-icon--compress {
  display: block;
}

/* Backdrop behind the fullscreen element */
#map-container::backdrop {
  background: #0a1a0d;
}

@media (prefers-reduced-motion: reduce) {
  .map-fullscreen-btn {
    transition: none;
  }
}

/* Controls bar: legend (left) + layer toggles (right) */
.map-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) 0 var(--space-4);
}

.map-legend {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  flex-wrap: wrap;
}

.map-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--color-bg);
  flex-shrink: 0;
}

.map-legend-dot--park {
  background: var(--color-accent-gold);
}

.map-legend-dot--boundary {
  background: rgba(45, 106, 58, 0.5);
  border-color: rgba(45, 106, 58, 0.8);
  width: 12px;
  height: 12px;
  border-radius: 2px; /* square to signal polygon, not a point */
}

.map-legend-dot--forest {
  background: rgba(139, 90, 43, 0.5);
  border-color: rgba(139, 90, 43, 0.8);
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.map-popup {
  background: var(--color-surface, #14301a);
  border: 1px solid var(--color-border, #2d6a3a);
  border-radius: var(--radius-md, 6px);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-primary, #f5f0e8);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transform: translate(-50%, -110%);
  max-width: 220px;
  white-space: normal;
  line-height: var(--leading-snug);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.map-popup-link {
  font-size: var(--text-xs);
  color: var(--color-accent-gold, #c9a84c);
  text-decoration: none;
  font-weight: 600;
  margin-top: var(--space-1);
  align-self: flex-start;
}

.map-popup-link:hover {
  text-decoration: underline;
}

.map-popup-link:focus-visible {
  text-decoration: underline;
  outline: 2px solid var(--color-focus-ring, #c9a84c);
  outline-offset: 2px;
}

.map-popup-sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* OpenLayers attribution control — match the dark theme */
.park-map .ol-attribution {
  background: rgba(10, 26, 13, 0.72);
  color: var(--color-text-muted);
  border-radius: var(--radius-sm) 0 0 0;
  font-size: var(--text-xs);
}

.park-map .ol-attribution a {
  color: var(--color-accent-gold);
}

.park-map .ol-control button {
  background-color: rgba(20, 48, 26, 0.9);
  color: var(--color-text-primary);
}

.park-map .ol-control button:hover,
.park-map .ol-control button:focus {
  background-color: var(--color-accent-green);
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}


/* ----------------------------------------------------------------
   Layer toggle switches
---------------------------------------------------------------- */

.map-toggles {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.map-toggle-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  user-select: none;
}

/* Hide native checkbox — replaced by visual track */
.map-toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Toggle track (pill) */
.map-toggle-track {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
  border-radius: var(--radius-pill);
  background-color: var(--color-border);
  transition: background-color var(--duration-fast) var(--ease-out);
  flex-shrink: 0;
}

/* Thumb */
.map-toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--color-text-muted);
  transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}

/* Checked state */
.map-toggle-input:checked + .map-toggle-track {
  background-color: var(--color-accent-green);
}

.map-toggle-input:checked + .map-toggle-track::after {
  transform: translateX(14px);
  background-color: #fff;
}

/* Focus ring for keyboard users */
.map-toggle-input:focus-visible + .map-toggle-track {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .map-toggle-track,
  .map-toggle-track::after {
    transition: none;
  }
}