/* ==========================================================================
   BROWSE BY STATE (interaktive Karte)
   Vormals inline <style> innerhalb des wp:html-Blocks in
   browse-by-state-map.php — jetzt hier, conditional mit front-page.css.
   ========================================================================== */
.mygc-states {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin-block-start: var(--wp--preset--spacing--5); /* Fund: vormals per Shorthand genullt */
	margin-block-end: 1.75rem;
	margin-inline: 0;
	padding: 0;
}
.mygc-states li { margin: 0; }

.mygc-state-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.85rem;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: 4px;
	border: 1px solid var(--wp--preset--color--politics-gray);
	color: var(--wp--preset--color--politics-gray);
	background: var(--wp--preset--color--white);
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
/* Fund (Juli 2026): a:visited (style.css, Spezifität 0,1,1) schlägt eine
   einzelne Klasse wie .mygc-state-pill (0,1,0) — Link erschien nach Besuch
   blau statt politics-gray. Fix mit :visited kombiniert (0,2,0), VOR
   .is-active platziert: bei gleicher Spezifität gewinnt die Regel, die
   später im Quelltext steht — .is-active soll immer Vorrang behalten,
   auch bei bereits besuchten Links. */
.mygc-state-pill:visited {
	color: var(--wp--preset--color--politics-gray);
}

.mygc-state-pill.is-active {
	background: var(--wp--preset--color--country-teal);
	border-color: var(--wp--preset--color--country-teal);
	color: var(--wp--preset--color--white);
}

.mygc-map-wrap { position: relative; max-width: 640px; margin: 0 auto; aspect-ratio: 300 / 402; }
.mygc-map-wrap svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Leitlinien/Punkte sind rein dekorativ — dürfen die Karte darunter nie blockieren */
.mygc-map-overlay { pointer-events: none; }

.mygc-de-state { fill: var(--wp--preset--color--taoi-box); stroke: var(--wp--preset--color--white); stroke-width: 1; stroke-linejoin: round; transition: fill .15s ease; cursor: pointer; }
.mygc-de-state.is-active { fill: var(--wp--preset--color--country-teal); }

.mygc-map-leader { stroke: #c7cacd; stroke-width: 1; }
.mygc-map-dot { fill: #9a9d9f; }
.mygc-map-labels { position: absolute; inset: 0; pointer-events: none; }
.mygc-map-label { pointer-events: auto; }

.mygc-map-label {
	position: absolute;
	transform: translate(-50%, -50%);
	display: inline-flex;
	padding: 1px 5px;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
	text-decoration: none;
	border-radius: 4px;
	border: 1px solid var(--wp--preset--color--politics-gray);
	color: var(--wp--preset--color--politics-gray);
	background: var(--wp--preset--color--white);
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
/* Fund (Juli 2026): identisches a:visited-Problem wie bei .mygc-state-pill
   oben — gleiche Lösung, gleiche Platzierung vor .is-active. */
.mygc-map-label:visited {
	color: var(--wp--preset--color--politics-gray);
}

.mygc-map-label.is-active {
	background: var(--wp--preset--color--country-teal);
	border-color: var(--wp--preset--color--country-teal);
	color: var(--wp--preset--color--white);
}
.mygc-map-label .mygc-abbr { display: none; }

@media (max-width: 600px) {
	.mygc-map-label { padding: 1px 4px; }
	.mygc-map-label .mygc-full { display: none; }
	.mygc-map-label .mygc-abbr { display: inline; }
}