/* ============================================================
   MGC Interactive Map Hover Styles
   /wp-content/themes/mygc/assets/css/mygc-map-hover.css

   Scope: State- und District-Seiten mit externer SVG-Karte
   via <object class="mygc-map-object" data="...svg">.

   WICHTIG: Die SVG-inneren Regeln (.mygc-place Fuellung, Hover-
   Farben, Cursor) liegen NICHT mehr hier — sie sind in jeder
   SVG-Datei selbst eingebettet, da Seiten-CSS die <object>-
   Grenze nicht ueberschreitet. Diese Datei stylt nur noch das
   Hauptdokument: Container und Listen-Highlight.
   ============================================================ */


/* ----------------------------------------------------------
   Karten-Container (<object>)
   Responsiv: skaliert mit Containerbreite, Seitenverhaeltnis
   bleibt ueber die width/height-Attribute des Objekts erhalten.

   Breite ist die fuehrende, VOM aspect-ratio ABGELEITETE Groesse
   (width:100%, height:auto) — max-height ist eine echte Deckelung,
   keine feste Vorgabe. Wichtig: NICHT wie zuvor height fest auf
   70vh setzen — ein fest vorgegebener (nicht abgeleiteter) Wert
   "weiss nichts" davon, wenn max-width die Breite kappt, und
   bleibt unveraendert stehen. Ergebnis waeren sichtbare Luecken
   ueber/unter der Karte bei breiten Karten in hohen Fenstern, da
   das SVG innerhalb der dann zu hohen Box sein eigenes
   Seitenverhaeltnis beibehaelt und sich darin zentriert.
   Mit width:auto/height:auto + max-width/max-height wird stattdessen
   IMMER die zuerst greifende Grenze (Breite ODER Hoehe) fuer BEIDE
   Dimensionen konsistent aufgeloest (aspect-ratio "transferred size"). Fund: [2026-07-13]
   ---------------------------------------------------------- */
.mygc-map-area {
    margin-block: 1.5rem;
}

.mygc-map-area object.mygc-map-object {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 70vh;   /* Deckel gegen zu hohe Boxen bei sehr hohen Fenstern */
}

/* Hinweis: <object> uebernimmt das Seitenverhaeltnis NICHT automatisch
   aus dem viewBox der SVG (anders als inline-SVG). Daher traegt jedes
   <object> im Post sein Verhaeltnis als Inline-Style, z. B.:
     style="aspect-ratio:374.5/530.2"
   Der Wert ist pro Karte individuell (viewBox-Breite/Hoehe) — ein
   echter Einzelwert, daher bewusst inline statt hier zentral. */

/* Das verschachtelte <img> (Fallback + Bildersuche-Signal) traegt
   width/height als reale 2x-PNG-Pixelmasse (z. B. 1520x2153) fuer
   korrekte Bildersuche-Metadaten — nicht die kleinere Anzeigegroesse.
   Ohne diese Regel wuerde es im (seltenen) Fall, dass <object> nicht
   rendert, in voller Pixelbreite und damit viel zu gross erscheinen. */
.mygc-map-area object.mygc-map-object img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}


/* ----------------------------------------------------------
   Listen-Highlight in der bestehenden #links/.list3-Struktur.
   Greift auf <a> (State-Muster) wie auf <li> (District-Muster),
   da .mygc-hl je nach Muster auf unterschiedlichen Elementen
   getoggelt wird.
   ---------------------------------------------------------- */
#links .mygc-hl {
    background: rgba(82, 183, 136, 0.15);
    outline: 2px solid rgba(82, 183, 136, 0.5);
    outline-offset: 2px;
    border-radius: 2px;
    text-decoration: none;
}