/**
 * FW Multi Map — cluster theming + XL pulse + reduced-motion safe.
 * Scope: .fw-multi-map-component
 *
 * This is the theming that used to be injected inline from PHP.
 * Your main component layout CSS (the .fw-mm / .fw-mm__canvas / .fw-mm__controls
 * rules) stays wherever it currently lives (e.g. your Etch component styles).
 */
.fw-multi-map-component {
  /* Cluster tokens (swap to your ACSS tokens) */
  --fw-cluster-s-bg: var(--primary, #0b5fff);
  --fw-cluster-m-bg: var(--accent, #7c3aed);
  --fw-cluster-l-bg: var(--warning, #b45309);
  --fw-cluster-xl-bg: var(--danger, #b91c1c);
  --fw-cluster-ring: color-mix(in oklab, CanvasText 25%, Canvas 75%);
  /* Let our custom cluster inner circle own the visuals */
  & .fw-mm__cluster {
    background: transparent !important;
  }
  & .fw-mm__cluster > div {
    display: grid;
    place-items: center;
    inline-size: 40px;
    block-size: 40px;
    border-radius: 999px;
    /* Fallback; JS will auto-choose black/white for contrast */
    color: var(--white, #fff);
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--fw-cluster-ring);
  }
  & .fw-mm__cluster--s  > div { background: var(--fw-cluster-s-bg) !important; }
  & .fw-mm__cluster--m  > div { background: var(--fw-cluster-m-bg) !important; }
  & .fw-mm__cluster--l  > div { background: var(--fw-cluster-l-bg) !important; }
  & .fw-mm__cluster--xl > div { background: var(--fw-cluster-xl-bg) !important; }
  /* Subtle pulse for XL */
  & .fw-mm__cluster--xl > div {
    animation: fw-mm-pulse 1.8s ease-in-out infinite;
  }
  @keyframes fw-mm-pulse {
    0%, 100% {
      transform: scale(1);
      box-shadow:
        0 0 0 2px var(--fw-cluster-ring),
        0 0 0 0 color-mix(in oklab, currentColor 0%, transparent);
    }
    50% {
      transform: scale(1.04);
      box-shadow:
        0 0 0 2px var(--fw-cluster-ring),
        0 0 0 10px color-mix(in oklab, currentColor 10%, transparent);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    & .fw-mm__cluster--xl > div { animation: none; }
  }
  /* Focus */
  & .marker-cluster:focus-visible,
  & a.leaflet-interactive:focus-visible {
    outline: 3px solid var(--fw-cluster-ring);
    outline-offset: 2px;
  }
}