/*
 * theme-lachurches-map.css
 *
 * Cream + gold-dot paint for the Leaflet finder pages (/map, /mass,
 * /confession, /adoration, /basilicas, /cathedrals, /basilicas_cathedrals).
 *
 * THIS FILE LAYERS OVER map-core.css. Do not duplicate structural CSS here;
 * sizes, layout, sidebar geometry, and mobile sheet mechanics live in
 * map-core.css and stay there. This file only paints — color, type, focus,
 * and the new gold-dot/cream-cluster/cream-popup chrome that vp-engineering's
 * marker-icons.js applies via the lac- class names.
 *
 * All selectors are scoped under html.theme-lachurches so the multi-diocese
 * ubimissa shell is unaffected.
 *
 * Token consumption: --lac-bg, --lac-bg-warm, --lac-ink, --lac-ink-2,
 *   --lac-rule, --lac-red, --lac-gold, --lac-gold-deep, --lac-stone,
 *   --lac-sunset, --lac-serif, --lac-display, --lac-text-xs, --lac-text-sm,
 *   --lac-text-md, --lac-text-lg, --lac-space-2/3/4/5, --lac-radius-sm,
 *   --lac-focus.
 *
 * Class names applied by marker-icons.js (parallel JS rebuild):
 *   .lac-pin .lac-pin-default .lac-pin-selected .lac-pin-user
 *   .lac-cluster .lac-cluster-small .lac-cluster-medium .lac-cluster-large
 *   .lac-cluster-bubble .lac-cluster-count
 *   .leaflet-popup-content-wrapper.lac-popup-wrap
 *   .lac-popup-name .lac-popup-meta
 *   .lac-neighborhood-overlay  (defensive; polygons land in a future PR)
 *
 * Cites: docs/DESIGN_SPEC.md §3 (Search/map), §5 (Color/material),
 *        §6 (Mobile), §7 (a11y).
 *        docs/MAP_STACK_REBUILD.md §5 (marker design), §6 (mobile).
 */

/* ── 1. Tile filter ─────────────────────────────────────────────
   DESIGN_SPEC §3 / §5: cream-biased land. Stadia Stamen Terrain is already
   warm; saturate(0.85) sepia(0.06) nudges it into the --lac-bg paper range.
   Restraint applied at the tile layer, not via per-element overlay. */
html.theme-lachurches .leaflet-tile {
  filter: saturate(0.85) sepia(0.06);
}

/* DESIGN_SPEC §3: "no labels outside the active viewport".
   Stadia Terrain already restrains label density; we further dim labels
   that drift to the canvas edges via the standard pane CSS variable. */
html.theme-lachurches .leaflet-tile-pane { opacity: 0.97; }

/* Map background (cream paper, not navy). map-core.css set #map navy;
   override here so the cream shows during tile fetch + on map pan beyond
   bounds. */
html.theme-lachurches #map {
  background: var(--lac-bg);
}

/* ── 2. Default gold-dot pin ─────────────────────────────────────
   SVG comes from marker-icons.js. Container handles centering, hover, and
   focus-visible. DESIGN_SPEC §3: "gold dots with a 1px ink rule, not balloons".
   §5: "depth comes from one-pixel gold rules, never from material depth"
   — therefore no drop-shadow on the pin. Hover is a transform, not a glow. */
html.theme-lachurches .lac-pin {
  display: block;
  background: transparent;
  border: 0;
  cursor: pointer;
  /* iconAnchor is set on the divIcon; this keeps the SVG centered. */
}
html.theme-lachurches .lac-pin svg {
  display: block;
  transition: transform 120ms ease;
  transform-origin: center;
}
html.theme-lachurches .lac-pin:hover svg { transform: scale(1.18); }
html.theme-lachurches .lac-pin:hover svg circle { fill: var(--lac-gold-deep); }
html.theme-lachurches .lac-pin-selected svg { transform: scale(1.05); }
html.theme-lachurches .lac-pin-selected svg circle { fill: var(--lac-red); }
/* User location pin — sunset orange, the "once per screen" accent (§5). */
html.theme-lachurches .lac-pin-user svg circle { fill: var(--lac-sunset); }

/* DESIGN_SPEC §7: focus ring on every interactive element. Leaflet markers
   are <div role="button">; gold ring keeps a11y without breaking aesthetic. */
html.theme-lachurches .lac-pin:focus-visible {
  outline: var(--lac-focus);
  outline-offset: 2px;
  border-radius: 50%;
}

/* ── 3. Cluster bubble ──────────────────────────────────────────
   DESIGN_SPEC §3 implies and §5 mandates: cream surface, gold rule, ink
   text. EB Garamond tabular per §4.2. Three discrete sizes; no continuous
   scaling, so the rule weight reads consistently across zoom levels. */
html.theme-lachurches .lac-cluster {
  background: transparent;
  border: 0;
}
html.theme-lachurches .lac-cluster-bubble {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--lac-bg-warm);
  border: 1px solid var(--lac-gold);
  border-radius: 50%;
  font-family: var(--lac-serif);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--lac-ink);
  transition: background 120ms ease, transform 120ms ease;
}
html.theme-lachurches .lac-cluster:hover .lac-cluster-bubble {
  background: var(--lac-bg);
  transform: scale(1.04);
}
html.theme-lachurches .lac-cluster-count {
  font-family: var(--lac-serif);
  font-variant-numeric: tabular-nums;
}

/* Three sizes per task: small 10–99, medium 100–999, large 1000+.
   Sized on the OUTER .lac-cluster so Leaflet's iconSize math agrees. */
html.theme-lachurches .lac-cluster-small  { width: 36px; height: 36px; }
html.theme-lachurches .lac-cluster-medium { width: 44px; height: 44px; }
html.theme-lachurches .lac-cluster-large  { width: 52px; height: 52px; }

html.theme-lachurches .lac-cluster-small  .lac-cluster-count { font-size: 13px; }
html.theme-lachurches .lac-cluster-medium .lac-cluster-count { font-size: 15px; }
html.theme-lachurches .lac-cluster-large  .lac-cluster-count { font-size: 17px; }

html.theme-lachurches .lac-cluster:focus-visible {
  outline: var(--lac-focus);
  outline-offset: 3px;
  border-radius: 50%;
}

/* ── 4. Popup chrome ────────────────────────────────────────────
   Both .leaflet-popup-content-wrapper and the lac-popup-wrap modifier so
   specificity beats map-core.css L2201 (.leaflet-popup-content-wrapper)
   and L2376 (.custom-popup ...). DESIGN_SPEC §5: hairline borders, no
   shadow. §4: Caslon body. */
html.theme-lachurches .leaflet-popup-content-wrapper.lac-popup-wrap {
  background: var(--lac-bg);
  color: var(--lac-ink);
  border: 1px solid var(--lac-rule);
  border-radius: var(--lac-radius-sm);
  box-shadow: none;
  padding: var(--lac-space-3) var(--lac-space-4);
  font-family: var(--lac-serif);
}
html.theme-lachurches .leaflet-popup-content-wrapper.lac-popup-wrap .leaflet-popup-content {
  margin: 0;
  font-family: var(--lac-serif);
  color: var(--lac-ink);
  line-height: var(--lac-leading-normal);
}

/* DESIGN_SPEC §3: pins are gold dots, not balloons — the leaflet tip
   reads as a balloon stem. Suppress on lac- popups. */
html.theme-lachurches .leaflet-popup.lac-popup .leaflet-popup-tip-container,
html.theme-lachurches .leaflet-popup.lac-popup .leaflet-popup-tip {
  display: none;
}

html.theme-lachurches .leaflet-popup.lac-popup .leaflet-popup-close-button {
  color: var(--lac-ink-2);
  font-family: var(--lac-display);
  font-size: 16px;
  padding: 6px 8px;
}
html.theme-lachurches .leaflet-popup.lac-popup .leaflet-popup-close-button:hover {
  color: var(--lac-gold-deep);
  background: transparent;
}

html.theme-lachurches .lac-popup-name {
  font-family: var(--lac-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--lac-ink);
  margin: 0 0 4px;
  line-height: 1.2;
}
html.theme-lachurches .lac-popup-meta {
  font-family: var(--lac-serif);
  font-size: 14px;
  font-style: italic;
  color: var(--lac-ink-2);
  margin: 0;
  line-height: 1.4;
}

/* ── 5. Sidebar recolor ────────────────────────────────────────
   Layout owned by map-core.css; this only swaps navy chrome for cream.
   #sidebar at L200 is `background: var(--color-bg-primary)` — that token
   resolves to navy under the ubimissa theme; we re-bind it locally so any
   internal reference picks up cream without rewriting selectors. */
html.theme-lachurches #sidebar,
html.theme-lachurches .filter-sheet,
html.theme-lachurches .detail-sheet,
html.theme-lachurches .detail-sheet-header,
html.theme-lachurches .filter-panel,
html.theme-lachurches .filter-panel-header {
  background: var(--lac-bg);
  color: var(--lac-ink);
  border-color: var(--lac-rule);
  box-shadow: none;
}
html.theme-lachurches #sidebar {
  border-left: 1px solid var(--lac-rule);
}
html.theme-lachurches .sidebar-content-wrapper,
html.theme-lachurches .sidebar-content-wrapper * {
  border-color: var(--lac-rule);
}

/* Replace the gold-gradient flourishes with 1px gold rules per §5. */
html.theme-lachurches .filter-panel-header,
html.theme-lachurches .detail-sheet-header,
html.theme-lachurches .sidebar-pagination-header {
  background: var(--lac-bg);
  border-bottom: 1px solid var(--lac-gold);
}

html.theme-lachurches .sidebar-toggle-floating {
  background: var(--lac-bg);
  color: var(--lac-ink);
  border: 1px solid var(--lac-rule);
  box-shadow: none;
}
html.theme-lachurches .sidebar-toggle-floating:hover {
  background: var(--lac-bg-warm);
  border-color: var(--lac-gold);
  color: var(--lac-gold-deep);
}

/* ── 6. Filter chips and day buttons ───────────────────────────
   DESIGN_SPEC §3: "Filter chips ... composable, all keyboard navigable".
   §2.1 / §10 pattern: typographic, no fill. Day buttons get the same
   treatment — selected state is a 1px gold rule + ink text, never a fill. */
html.theme-lachurches .day-filter-btn,
html.theme-lachurches .filter-checkbox,
html.theme-lachurches .counter-badge {
  background: transparent;
  color: var(--lac-ink);
  border: 1px solid var(--lac-rule);
  border-radius: var(--lac-radius-sm);
  font-family: var(--lac-display);
  font-size: var(--lac-text-xs);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 700;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
html.theme-lachurches .day-filter-btn:hover,
html.theme-lachurches .filter-checkbox:hover,
html.theme-lachurches .counter-badge:hover {
  background: var(--lac-bg-warm);
  border-color: var(--lac-gold);
  color: var(--lac-gold-deep);
}
html.theme-lachurches .day-filter-btn.active,
html.theme-lachurches .filter-checkbox.active,
html.theme-lachurches .counter-badge.active {
  background: transparent;
  border-color: var(--lac-gold);
  color: var(--lac-ink);
  font-weight: 700;
}
html.theme-lachurches .day-filter-btn.active::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--lac-gold);
  margin-top: 2px;
}

/* ── 7. Focus rings (§7 a11y) ──────────────────────────────────
   Single rule for every map-surface interactive element so the gold ring is
   uniform. 2px gold, 2px offset, matches --lac-focus from tokens.css. */
html.theme-lachurches .leaflet-popup.lac-popup :focus-visible,
html.theme-lachurches .day-filter-btn:focus-visible,
html.theme-lachurches .filter-checkbox:focus-visible,
html.theme-lachurches .counter-badge:focus-visible,
html.theme-lachurches .filter-panel-toggle:focus-visible,
html.theme-lachurches .sidebar-toggle-floating:focus-visible {
  outline: var(--lac-focus);
  outline-offset: 2px;
  border-radius: var(--lac-radius-sm);
}

/* Skip-link (§7 + MAP_STACK_REBUILD §6) — first focusable element on map
   pages, hidden offscreen until focus, then lands cream-on-cream with a
   gold rule at top-left. */
html.theme-lachurches .lac-skip-map {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 10000;
}
html.theme-lachurches .lac-skip-map:focus {
  left: var(--lac-space-4);
  top: var(--lac-space-4);
  width: auto;
  height: auto;
  padding: var(--lac-space-3) var(--lac-space-4);
  background: var(--lac-bg);
  color: var(--lac-ink);
  border: 1px solid var(--lac-gold);
  border-radius: var(--lac-radius-sm);
  font-family: var(--lac-display);
  font-size: var(--lac-text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}

/* ── 8. Mobile sheet (§6) ──────────────────────────────────────
   When the user taps Map on mobile (vp-engineering's gateLeafletInit adds
   body.map-mode), the sheet slides up from below with cream surface, 44px
   tap targets, and safe-area insets respected. Layout is owned by
   map-core.css; this layer only paints. */
@media (max-width: 640px) {
  html.theme-lachurches.map-mode #sidebar,
  html.theme-lachurches body.map-mode #sidebar {
    background: var(--lac-bg);
    border-top: 1px solid var(--lac-gold);
    border-left: 0;
    box-shadow: none;
    padding-bottom: env(safe-area-inset-bottom);
  }
  html.theme-lachurches .day-filter-btn,
  html.theme-lachurches .filter-checkbox,
  html.theme-lachurches .counter-badge,
  html.theme-lachurches .sidebar-toggle-floating,
  html.theme-lachurches .filter-panel-toggle {
    min-height: 44px;
  }
  html.theme-lachurches #mobileMapToggle {
    min-height: 44px;
    background: var(--lac-bg);
    color: var(--lac-ink);
    border: 1px solid var(--lac-gold);
    border-radius: var(--lac-radius-sm);
    font-family: var(--lac-display);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
}

/* ── 9. Reduce motion (§7) ─────────────────────────────────────
   Pin scale, cluster scale, and any transition declared above all collapse
   to instant when prefers-reduced-motion is set. */
@media (prefers-reduced-motion: reduce) {
  html.theme-lachurches .lac-pin svg,
  html.theme-lachurches .lac-cluster-bubble,
  html.theme-lachurches .day-filter-btn,
  html.theme-lachurches .filter-checkbox,
  html.theme-lachurches .counter-badge,
  html.theme-lachurches .leaflet-popup-content-wrapper.lac-popup-wrap,
  html.theme-lachurches .sidebar-toggle-floating {
    transition: none !important;
    animation: none !important;
  }
  html.theme-lachurches .lac-pin:hover svg,
  html.theme-lachurches .lac-cluster:hover .lac-cluster-bubble,
  html.theme-lachurches .lac-pin-selected svg {
    transform: none !important;
  }
}

/* ── 10. Neighborhood overlays (§3, defensive) ─────────────────
   "Overlay neighborhood boundaries in 0.5px gold at opacity 0.3."
   Polygons import in a later PR; the rule lands now so when paths arrive
   they paint correctly without a follow-up CSS change. Targets both Leaflet
   <path> and standalone SVG variants. */
html.theme-lachurches .lac-neighborhood-overlay,
html.theme-lachurches path.lac-neighborhood-overlay,
html.theme-lachurches .leaflet-overlay-pane path.lac-neighborhood-overlay {
  fill: none;
  stroke: var(--lac-gold);
  stroke-width: 0.5;
  stroke-opacity: 0.3;
  pointer-events: none;
}