/* Geteilte Karten-Bausteine — Gold-Pin, Cluster-Bubble, Popup, Schildchen.
   Liegt getrennt von church-map.css, weil dieselben Marker auf drei Seiten
   stehen: /churches/map, /churches/:id und /locations/:id. church-map.css
   enthaelt daneben das Vollbild-Layout jener einen Seite (Kopfleiste,
   Filterspalte, Hero) — das darf auf den Detailseiten nicht mitkommen.

   Wird VOR church-map.css geladen; die Tokens hier sind die Grundlage, jene
   Datei ergaenzt nur ihre eigenen. */

/* Die Karten-Bausteine hatten bis v0.76.1 eigene feste Farben und standen
   damit in jedem Farb-Template gleich. Jetzt kommen sie aus den Tokens der
   App. Zwei Rollen sind dabei auseinandergezogen, weil sie sich im
   Dunkelmodus gegenlaeufig verhalten:

     --cm-gold-deep  betont den Pin. Er liegt auf den HELLEN Kartenkacheln,
                     nicht auf der Seite — er muss darum in beiden Modi
                     dunkler als --cm-gold sein.
     --cm-gold-ink   ist goldene SCHRIFT auf einer Flaeche der Seite und
                     folgt deshalb dem Modus (hell: dunkles Gold, dunkel:
                     helles Gold).

   --cm-on-gold ist die Schrift auf dem gefuellten Pin bzw. der Bubble. */
:root {
  --cm-gold:       var(--accent);
  --cm-gold-deep:  color-mix(in srgb, var(--accent) 78%, #000);
  --cm-gold-ink:   var(--accent-text);
  --cm-gold-soft:  color-mix(in srgb, var(--accent) 14%, var(--bg-card));
  --cm-gold-line:  color-mix(in srgb, var(--accent) 38%, transparent);
  --cm-on-gold:    var(--on-brand);
  --cm-blue:       var(--primary);
  --cm-surface:    var(--bg-card);
  --cm-ink:        var(--text);
  --cm-muted:      var(--text-light);
  /* Der warme Schlagschatten unter Pin und Bubble — dunkle Tonstufe des
     Akzents, damit er in jedem Template zur Pin-Farbe passt. */
  --cm-shade:      color-mix(in srgb, var(--accent) 42%, #000);
}

/* ── Leaflet-Marker (gold Kirchen-Pin) ── */
.cm-church-marker { background: transparent; border: 0; }
.cm-church-marker svg {
  filter: drop-shadow(0 3px 5px color-mix(in srgb, var(--cm-shade) 45%, transparent));
  display: block;
  transition: transform 0.15s ease;
  transform-origin: bottom center;
}
.cm-church-marker .pin { fill: var(--cm-gold); stroke: var(--cm-on-gold); stroke-width: 2; }
.cm-church-marker .glyph { fill: var(--cm-on-gold); }
.cm-church-marker.is-active { z-index: 1000 !important; }
.cm-church-marker.is-active svg { transform: scale(1.18); }
.cm-church-marker.is-active .pin {
  fill: var(--cm-gold-deep);
  animation: cm-pulse 1.4s ease-out infinite;
}
@keyframes cm-pulse {
  0%   { filter: drop-shadow(0 0 0 color-mix(in srgb, var(--cm-gold) 55%, transparent)) drop-shadow(0 3px 5px color-mix(in srgb, var(--cm-shade) 45%, transparent)); }
  70%  { filter: drop-shadow(0 0 7px transparent) drop-shadow(0 3px 5px color-mix(in srgb, var(--cm-shade) 45%, transparent)); }
  100% { filter: drop-shadow(0 0 0 transparent) drop-shadow(0 3px 5px color-mix(in srgb, var(--cm-shade) 45%, transparent)); }
}

/* ── Cluster-Bubble (gold) ── */
.cm-cluster-wrap { background: transparent; border: 0; }
.cm-cluster {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, color-mix(in srgb, var(--cm-gold) 82%, var(--text-inverse)), var(--cm-gold) 70%);
  color: var(--cm-on-gold);
  font-weight: 800;
  border: 2px solid var(--cm-on-gold);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cm-gold) 26%, transparent), 0 3px 8px color-mix(in srgb, var(--cm-shade) 35%, transparent);
}
.cm-cluster span { line-height: 1; }
.cm-cluster-sm { width: 34px; height: 34px; font-size: 12px; margin: 5px; }
.cm-cluster-md { width: 40px; height: 40px; font-size: 13px; margin: 2px; }
.cm-cluster-lg { width: 46px; height: 46px; font-size: 14px; }

/* ── Leaflet popup styling ── */
.leaflet-popup-content-wrapper { border-radius: 12px; padding: 2px; }
.leaflet-popup-content { margin: 11px 15px; font-family: inherit; }
.cm-popup { min-width: 200px; max-width: 260px; }
.cm-popup h3 {
  font-size: 15px;
  margin: 0 0 4px;
  color: var(--cm-ink);
  font-weight: 800;
}
.cm-popup .cm-popup-addr {
  font-size: 12px;
  color: var(--cm-muted);
  margin: 0 0 8px;
  line-height: 1.4;
}
/* Folgt die Aktionszeile unmittelbar auf den Titel, fehlt der Abstand, den
   sonst die Adresszeile darunter mitbrachte (8 px) — auf der Kirchenseite steht
   in der Sprechblase seit v0.104.4 nur noch der Name. Bewusst als Nachbar-Regel
   und nicht als `margin-top` an `.cm-popup-acts`: auf der Karte aller Kirchen
   liegt dazwischen die Adresse, und dort waere der Abstand dann doppelt. */
.cm-popup h3 + .cm-popup-acts { margin-top: 8px; }
.cm-popup .cm-popup-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}
.cm-popup-tag {
  display: inline-block;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--cm-blue) 10%, var(--bg-card));
  border-radius: 10px;
  font-size: 11px;
  color: var(--cm-blue);
  font-weight: 500;
}
.cm-popup-tag.denom { background: var(--cm-gold-soft); color: var(--cm-gold-ink); }
/* Strasse hervorgehoben, Ort/Land darunter — siehe addressLines() */
.cm-popup .cm-popup-street {
  display: block;
  color: var(--cm-ink);
  font-weight: 600;
}

.cm-popup-acts {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.cm-popup a.cm-popup-link {
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 6px;
  padding: 5px 10px;
  white-space: nowrap;
  color: var(--cm-gold-ink);
  background: var(--cm-surface);
  border: 1px solid var(--cm-gold-line);
}
.cm-popup a.cm-popup-link:hover { background: var(--cm-gold-soft); }

/* ── Anschrift am Pin ──
   Steckt fest im divIcon (makeChurchIcon) und wird nur hier ein- und
   ausgeblendet: die Klasse am Kartencontainer setzt syncPinLabels() ab
   Zoom 14, dort hört auch das Clustering auf. Das Schildchen darf aus dem
   30x40-Icon herausragen — Leaflet schneidet Marker nicht ab. */
/* Kein eigenes position hier: Leaflet setzt .leaflet-marker-icon auf
   position:absolute, und genau das ist der Bezugsrahmen fuer das
   Schildchen. Ein position:relative an dieser Stelle wuerde Leaflets
   Regel ueberschreiben und die Marker aus ihrem Pane werfen. */
.cm-pin-label {
  display: none;
  position: absolute;
  left: 34px;
  top: 0;
  max-width: 190px;
  padding: 3px 7px;
  background: var(--cm-surface);
  border: 1px solid var(--cm-gold-line);
  border-left: 3px solid var(--cm-gold);
  border-radius: 5px;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--cm-shade) 22%, transparent);
  font-size: 11px;
  line-height: 1.3;
  color: var(--cm-muted);
  pointer-events: none;   /* nie den Klick auf den Pin abfangen */
}
.cm-pin-label strong {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--cm-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cm-pin-label span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cm-show-pin-labels .cm-pin-label { display: block; }
/* Ab NAME_MIN_ZOOM (church-map.js) steht der Kirchenname statt der
   Anschrift im Schild. Ein Schild ohne Anschrift bleibt bis dahin zu. */
.cm-pin-label .cm-pin-name {
  display: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--cm-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cm-show-pin-labels .cm-pin-label:not(:has(strong, span)) { display: none; }
.cm-show-pin-names .cm-pin-label:not(:has(strong, span)) { display: block; }
.cm-show-pin-names .cm-pin-label .cm-pin-name { display: block; }
.cm-show-pin-names .cm-pin-label strong,
.cm-show-pin-names .cm-pin-label > span { display: none; }
/* Skaliert wird nur das SVG, das Schildchen bleibt stehen — es bekommt
   beim aktiven Pin nur die kräftigere Kante. */
.cm-church-marker.is-active .cm-pin-label {
  border-color: var(--cm-gold);
  border-left-color: var(--cm-gold-deep);
}

/* ── Grundkarte im Farb-Template ──
   Die Werte stehen je Template und Modus in palettes.css (--map-*). Der
   Filter sitzt an den Kacheln, nicht am Container — sonst träfe er Pins,
   Bubbles und Sprechblasen mit. Die Einfärbung ist ein eigener Pane
   (hnTint, von basemap.js angelegt) knapp über den Kacheln: `color` nimmt
   Farbton und Sättigung vom Template, die Helligkeit von der Kachel. Die
   Rückfallwerte gelten nur, wo palettes.css fehlt. */
.hn-basemap img.leaflet-tile {
  filter: brightness(var(--map-brightness, 1)) contrast(var(--map-contrast, 1));
}
.leaflet-hnTint-pane {
  mix-blend-mode: color;
  opacity: var(--map-tint-strength, 0);
  pointer-events: none;
}
.leaflet-hnTint-pane path { fill: var(--map-tint, transparent); fill-opacity: 1; stroke: none; }

/* ── Der Grund unter den Kacheln ──
   Wo eine Kachel noch nicht geladen ist, steht der Hintergrund der Seite
   (--bg): die Karte ist bis dahin einfach ein Stück Seite. Vorher lag dort
   Leaflets #ddd und blitzte im Dunkelmodus hell auf.

   Dieselbe Farbe steht zweimal — am Container und am Rechteck des Panes
   hnGround (basemap.js). Der Container allein reicht nicht: über ihm läge
   die Einfärbung als Schleier in der Template-Farbe. Das Rechteck liegt im
   selben Stapel wie die Kacheln, die Einfärbung trifft es darum wie eine
   Kachel und lässt seine Helligkeit stehen. Am Container gilt die Farbe für
   den Rand, den das Rechteck nicht deckt (jenseits der Pole, beim weiten
   Ziehen bis zum Loslassen).

   Zwei Klassen im Selektor, weil leaflet.css je nach Seite vor oder nach
   dieser Datei geladen wird und sein `.leaflet-container` sonst gewinnt. */
.leaflet-container.hn-map { background: var(--bg); }
.leaflet-hnGround-pane { pointer-events: none; }
.leaflet-hnGround-pane path { fill: var(--bg); fill-opacity: 1; stroke: none; }

@media (prefers-reduced-motion: reduce) {
  .cm-church-marker.is-active .pin { animation: none; }
  .cm-church-marker svg { transition: none; }
}

/* Farbe je Richtung — Pin auf der Karte und Punkt im Chip. Steht hier, weil
   /churches/map und die Kartenansicht von /churches dieselben Pins zeigen. Die Pins liegen
   auf den Kartenkacheln, nicht auf der Seite; die Werte gelten darum in
   beiden Modi. Schlüssel wie backend/config/churchFamilies.js. */
.cm-fam-katholisch    { --cm-fam: #b3403d; }
.cm-fam-orthodox      { --cm-fam: #7b4fa3; }
.cm-fam-reformiert    { --cm-fam: #2f6fa1; }
.cm-fam-taeuferisch   { --cm-fam: #3a8a5c; }
.cm-fam-freikirchlich { --cm-fam: #c77d12; }
.cm-fam-pfingstlich   { --cm-fam: #d5532a; }
.cm-fam-andere        { --cm-fam: #7d7a73; }
.cm-church-marker[class*="cm-fam-"] .pin { fill: var(--cm-fam); stroke: #fff; }
.cm-church-marker[class*="cm-fam-"] .glyph { fill: #fff; }
.cm-church-marker[class*="cm-fam-"].is-active .pin {
  fill: color-mix(in srgb, var(--cm-fam) 78%, #000);
}