/* DFC-Map: Container-Styling für die Leaflet-Karte in Sidebar/Detailseite. */

.dfc-map {
	width: 100%;
	height: 240px;
	background: var(--wp--preset--color--bg-alt);
	border: 1px solid var(--wp--preset--color--rule);
	position: relative;
}

.dfc-map.is-large { height: 360px; }

/* Editor-Placeholder, wenn lat/lon fehlen */
.dfc-map[data-lat=""],
.dfc-map:not([data-lat]) {
	display: grid;
	place-items: center;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-mute);
}
.dfc-map[data-lat=""]::before,
.dfc-map:not([data-lat])::before {
	content: "Karte: keine Koordinaten";
}

/* Editor-Preview: ServerSideRender liefert den frontend-Markup zurück;
   Leaflet ist im Editor nicht geladen, deshalb zeigen wir einen
   ruhigen Placeholder. */
.wp-admin .dfc-map {
	display: grid;
	place-items: center;
	font-family: monospace;
	font-size: 12px;
	color: #666;
	background: repeating-linear-gradient( 45deg, #f5f5f5, #f5f5f5 10px, #ebebeb 10px, #ebebeb 20px );
	pointer-events: none;
}
.wp-admin .dfc-map::before {
	content: "📍 Leaflet-Karte (Vorschau im Frontend)";
	background: white;
	padding: 6px 12px;
	border: 1px solid #ddd;
	font-family: var(--wp--preset--font-family--mono, monospace);
	letter-spacing: 0.06em;
}

/* Footer-Strip mit Maps-Link unter der Karte */
.dfc-map-card {
	border: 1px solid var(--wp--preset--color--rule);
}
.dfc-map-card .dfc-map { border: none; border-bottom: 1px solid var(--wp--preset--color--rule); }
.dfc-map-card__footer {
	padding: 10px 14px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--ink-mute);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}
.dfc-map-card__footer a {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

/* Leaflet-Default-Popup soll zur Site-Typografie passen */
.leaflet-popup-content {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px;
	line-height: 1.4;
	margin: 10px 14px;
}
.leaflet-popup-content a {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--accent);
}
.leaflet-container {
	font-family: var(--wp--preset--font-family--sans);
}