/*
  Theme map-skin entrypoint.
  Map palette, label styling, region fills, outlines, and producer availability
  visual accents belong here after theme extraction.
*/

/* Flat sea background for the vector-first upper tiers. Countries with a
   bundled raster basemap (France) paint tiles over this; countries that use
   the vector context layer (Argentina) show the sea + muted land silhouettes. */
:root {
  --map-sea: #d7e3ea;
}
#map {
  background: var(--map-sea);
}

/* Dense countries (50+ regions) would otherwise run the legend the full height
   of the screen — cap it and let it scroll. */
.legend-list {
  max-height: 48vh;
  overflow-y: auto;
}

/* Country picker — the Nolea "world of wine" wordmark opens it (Phase 2).
   The wordmark is pointer-events:none by default; make it interactive so it
   can receive the picker click (it sits at z-index 410, above the map). */
.nolea-mark {
  pointer-events: auto;
}
.nolea-mark:focus-visible {
  outline: 2px solid var(--accent, #8b6e50);
  outline-offset: 4px;
  border-radius: 4px;
}
.country-picker {
  list-style: none;
  margin: 0;
  padding: 6px;
  min-width: 168px;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  background: #fffdf9;
  border: 1px solid rgba(58, 36, 24, 0.14);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(40, 24, 12, 0.22);
  z-index: 5000;
}
.country-picker-item {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  background: none;
  border: 0;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  color: #2a1a10;
}
.country-picker-item:hover,
.country-picker-item:focus-visible {
  background: rgba(139, 110, 80, 0.14);
  outline: none;
}
.country-picker-item.is-active {
  font-weight: 600;
}
.country-picker-item.is-world {
  font-weight: 600;
  border-bottom: 1px solid rgba(58, 36, 24, 0.12);
  margin-bottom: 4px;
  padding-bottom: 10px;
}

/* ── World view: continent chip bar + country markers ───────── */
.world-continent-bar {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 6px 8px;
  background: rgba(255, 253, 249, 0.94);
  border: 1px solid rgba(58, 36, 24, 0.14);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(40, 24, 12, 0.18);
  z-index: 4000;
  max-width: calc(100vw - 24px);
}
.world-continent-chip {
  font: inherit;
  font-size: 13px;
  line-height: 1;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #4a3322;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease;
}
.world-continent-chip:hover,
.world-continent-chip:focus-visible {
  background: rgba(139, 110, 80, 0.14);
  outline: none;
}
.world-continent-chip.is-active {
  background: var(--chip-accent, #8b1a1a);
  color: #fff;
  border-color: var(--chip-accent, #8b1a1a);
}
.world-country-dot {
  cursor: pointer;
  transition: opacity 160ms ease;
}
.leaflet-tooltip.world-country-tip {
  background: #2a1a10;
  color: #fff7ec;
  border: 0;
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(20, 10, 4, 0.3);
}
.leaflet-tooltip.world-country-tip::before { display: none; }
.leaflet-tooltip.world-country-tip.is-label {
  background: rgba(42, 26, 16, 0.86);
  font-weight: 500;
}

@media (max-width: 480px) {
  .world-continent-bar { gap: 4px; padding: 5px 6px; top: 10px; }
  .world-continent-chip { font-size: 12px; padding: 7px 10px; }
}

/* World view hides country-scoped chrome — the France finder, the region
   overview CTA, and the title-block panel trigger have nothing to act on. */
.is-world-view .finder,
.is-world-view .overview-cta { display: none; }
/* World tier reads as a vintage atlas: a deeper, cooler ocean so the warm
   landmasses lift off it, and a soft drop shadow under the coastlines. */
.is-world-view #map {
  background:
    radial-gradient(120% 120% at 50% 18%, #d9dccf 0%, #c7cdc0 45%, #b6bfb2 100%);
}
.world-land { filter: url(#soft-glow); }
/* Feather region fills into soft watercolour zones (Wine Folly cartography feel),
   chained with the subtle edge shadow. Higher specificity than the base polygon
   drop-shadow rule so it wins. Labels are separate DOM (markerPane) → stay crisp. */
.leaflet-overlay-pane svg path.wow-region-fill.leaflet-interactive {
  filter: url(#region-feather) drop-shadow(0 0 0.8px rgba(58, 36, 24, 0.30));
}

/* ── Cohesive region territories (Wine Folly zones) ──
   Dissolved per-region territory fills, feathered. Visible only at country-overview
   zoom; deeper in, the precise vineyard footprints take over. Non-interactive so
   clicks reach the fragments above. */
.wow-region-territory { filter: url(#region-feather); pointer-events: none; }
html:not(.is-overview-zoom) .wow-region-territory { display: none; }
/* At overview zoom the precise footprints fade so the cohesive territory colour reads;
   the fragments stay clickable (Leaflet paths catch clicks regardless of opacity). */
html.is-overview-zoom .leaflet-overlay-pane svg path.wow-region-fill.leaflet-interactive {
  fill-opacity: 0.05;
  stroke-opacity: 0.16;
}
/* Legend keys a country's coloured regions; the world view has none to key, and
   the mobile legend rule forces display:block !important, so override in kind. */
.is-world-view .legend { display: none !important; }
.is-world-view .map-title-trigger { pointer-events: none; cursor: default; }