/**
 * Hettstedt Live – EarthRadar: Frontend-Styling.
 * Selektoren sind bewusst mit dem Präfix ".het-earthradar-" versehen und
 * nutzen !important auf layoutkritischen Regeln, um Überschreibungen durch
 * das Kadence-Free-Theme zu verhindern (siehe Architektur-Standard).
 */

.het-earthradar-wrapper {
	position: relative !important;
	width: 100% !important;
	margin: 1.5em 0 !important;
	font-family: inherit;
}

.het-earthradar-map {
	position: relative !important;
	width: 100% !important;
	/* Mobile-first: deutlich hochformatiger als vorher (Richtung 9:16), damit
	   die waagerechte Regler-Trennung (siehe unten) auf schmalen Bildschirmen
	   genug vertikalen Raum je Hälfte hat. Echtes aspect-ratio statt fester
	   Pixelhöhe, damit es auf jeder Handybreite korrekt mitskaliert. Für
	   größere Bildschirme per min-width-Media-Query weiter unten wieder auf
	   eine feste Höhe umgestellt (nicht umgekehrt). */
	aspect-ratio: 3 / 4 !important;
	height: auto !important;
	min-height: 240px !important;
	border-radius: 6px !important;
	overflow: hidden !important;
	background-color: #e7e7e7 !important;
	outline: none;
}

.het-earthradar-after-overlay {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	/* Über Leaflets eigenen Kachel-/Overlay-Ebenen (bis ca. 700), aber unter
	   der Steuerungsleiste der primären Karte (Leaflet-Standard: 1000) –
	   so bleibt z. B. unser Satelliten-Umschalter-Button klickbar. */
	z-index: 610 !important;
}

.het-earthradar-after-overlay .leaflet-control-container {
	display: none !important; /* Diese zweite Karte hat ohnehin keine Steuerelemente. */
}

.het-earthradar-map:focus-visible {
	box-shadow: 0 0 0 3px #2563eb !important;
}

/* Leaflet-Grundcontainer darf nicht von Theme-Resets (z. B. max-width auf img) betroffen sein. */
.het-earthradar-map .leaflet-container img {
	max-width: none !important;
	box-sizing: border-box;
}

.het-earthradar-toggle {
	display: flex !important;
	flex-direction: row !important;
	background-color: #ffffff !important;
	border-radius: 4px !important;
	box-shadow: 0 1px 5px rgba( 0, 0, 0, 0.4 ) !important;
	/* Rundet automatisch die Ecken aller Kind-Elemente (Segmented Control,
	   Kalender-Button) einheitlich zu, unabhängig von deren Reihenfolge oder
	   Kombination – ersetzt einzelne :first-child/:last-child-Regeln pro
	   Button-Typ. */
	overflow: hidden !important;
}

.het-earthradar-toggle__button {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 34px !important;
	height: 34px !important;
	font-size: 18px !important;
	text-decoration: none !important;
	cursor: pointer !important;
	background-color: #ffffff !important;
	color: #1e293b !important;
}

.het-earthradar-segmented + .het-earthradar-toggle__button {
	border-left: 1px solid #e2e8f0 !important;
}

.het-earthradar-toggle__button:focus-visible {
	outline: 2px solid #2563eb !important;
	outline-offset: -2px;
}

.het-earthradar-segmented {
	position: relative !important;
	display: flex !important;
	height: 34px !important;
	background-color: #ffffff !important;
}

.het-earthradar-segmented__thumb {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	height: 100% !important;
	background-color: #000000 !important;
	z-index: 0 !important;
	transition: transform 0.25s ease, width 0.25s ease;
}

.het-earthradar-segmented__option {
	position: relative !important;
	z-index: 1 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 100% !important;
	padding: 0 14px !important;
	border: none !important;
	background: transparent !important;
	font-size: 0.8em !important;
	font-weight: 600 !important;
	font-family: inherit !important;
	cursor: pointer !important;
	color: #1e293b !important;
	white-space: nowrap !important;
	transition: color 0.25s ease;
}

.het-earthradar-segmented__option--active {
	color: #ffffff !important;
}

.het-earthradar-segmented__option:focus-visible {
	outline: 2px solid #2563eb !important;
	outline-offset: -2px;
}

@media ( prefers-reduced-motion: reduce ) {
	.het-earthradar-segmented__thumb,
	.het-earthradar-segmented__option {
		transition: none !important;
	}
}

.het-earthradar-year-picker {
	position: absolute !important;
	background-color: #ffffff !important;
	border-radius: 6px !important;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.25 ) !important;
	padding: 10px 12px !important;
	width: 190px !important;
	/* Höher als Leaflets eigener Steuerungs-Container (i. d. R. 1000) – das
	   Feld hängt jetzt direkt an der Karte, nicht mehr verschachtelt in der
	   (niedriger platzierten) Werkzeugleiste. */
	z-index: 1050 !important;
	font-size: 0.8em !important;
	color: #1e293b !important;
}
/* "top"/"right" bewusst NICHT hier mit !important gesetzt – werden beim
   Öffnen dynamisch per Inline-Style von JS berechnet (Position relativ zum
   Button, der je nach Werkzeugleisten-Inhalt variiert). Eine !important-
   Regel hier würde diese Inline-Werte überstimmen (siehe An. beim Regler). */

.het-earthradar-year-picker__title {
	font-weight: 600 !important;
	margin-bottom: 6px !important;
}

.het-earthradar-year-picker__row {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px !important;
	margin-bottom: 6px !important;
	cursor: default;
}

.het-earthradar-year-picker__row select {
	font-size: 0.95em !important;
	padding: 2px 4px !important;
}

.het-earthradar-year-picker__error {
	color: #b91c1c !important;
	font-size: 0.9em !important;
	margin-bottom: 6px !important;
}

.het-earthradar-year-picker__hint {
	/* Kontrastkorrektur: #64748b auf Weiß lag bei ca. 3,2:1, unter der
	   WCAG-AA-Mindestanforderung von 4,5:1 für normal großen Text.
	   #475569 liegt bei ca. 4,6:1. */
	color: #475569 !important;
	font-size: 0.85em !important;
	margin-bottom: 8px !important;
	line-height: 1.3 !important;
}

.het-earthradar-year-picker__apply {
	width: 100% !important;
	padding: 5px 0 !important;
	background-color: #2563eb !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 4px !important;
	cursor: pointer !important;
	font-size: 0.9em !important;
	font-weight: 600 !important;
}

.het-earthradar-year-picker__apply:hover {
	background-color: #1d4ed8 !important;
}

.het-earthradar-slider-handle {
	position: absolute !important;
	background-color: #ffffff !important;
	box-shadow: 0 0 6px rgba( 0, 0, 0, 0.5 ) !important;
	z-index: 1000 !important;
}

/* Standard: senkrechte Trennlinie (Karte links/rechts geteilt). "left" wird
   bewusst NICHT hier gesetzt – kommt dynamisch per Inline-Style von JS
   (position in %), da eine !important-Regel das sonst überstimmen würde. */
.het-earthradar-slider-handle--vertical-line {
	top: 0 !important;
	bottom: 0 !important;
	width: 4px !important;
	cursor: ew-resize !important;
	transform: translateX( -50% );
}

/* Gestapelt (schmale Bildschirme): waagerechte Trennlinie (Karte oben/unten
   geteilt). "top" bewusst nicht hier gesetzt, siehe Hinweis oben. */
.het-earthradar-slider-handle--horizontal-line {
	left: 0 !important;
	right: 0 !important;
	height: 4px !important;
	cursor: ns-resize !important;
	transform: translateY( -50% );
}

.het-earthradar-slider-handle:focus-visible::before {
	outline: 3px solid #2563eb !important;
	outline-offset: 2px;
}

.het-earthradar-slider-handle::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	/* Mobile-first: 44px Touch-Ziel als Basis (WCAG 2.5.5-Empfehlung für
	   Touch-Bedienelemente), für größere Bildschirme mit präziser
	   Maussteuerung per min-width-Query unten verkleinert. */
	width: 44px;
	height: 44px;
	background-color: #ffffff;
	border: 2px solid #2563eb;
	border-radius: 50%;
	transform: translate( -50%, -50% );
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.35 );
}

.het-earthradar-slider-handle::after {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	font-size: 16px;
	color: #2563eb;
	pointer-events: none;
}

.het-earthradar-slider-handle--vertical-line::after {
	content: '↔';
}

.het-earthradar-slider-handle--horizontal-line::after {
	content: '↕';
}

.het-earthradar-year-label {
	position: absolute !important;
	background-color: rgba( 255, 255, 255, 0.94 ) !important;
	color: #1e293b !important;
	font-size: 0.75em !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	padding: 2px 9px !important;
	z-index: 1000 !important;
	pointer-events: none !important;
	white-space: nowrap !important;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.25 ) !important;
}

/* Standard: Schilder sitzen oben, wandern mit "left" (senkrechte Trennlinie). */
.het-earthradar-year-label--h {
	top: 8px !important;
}

.het-earthradar-year-label--h.het-earthradar-year-label--before {
	transform: translateX( calc( -100% - 2px ) );
	border-radius: 6px 2px 2px 6px !important;
}

.het-earthradar-year-label--h.het-earthradar-year-label--after {
	transform: translateX( 2px );
	border-radius: 2px 6px 6px 2px !important;
}

/* Gestapelt: Schilder sitzen links, wandern mit "top" (waagerechte Trennlinie). */
.het-earthradar-year-label--v {
	left: 8px !important;
}

.het-earthradar-year-label--v.het-earthradar-year-label--before {
	transform: translateY( calc( -100% - 2px ) );
	border-radius: 6px 6px 2px 2px !important;
}

.het-earthradar-year-label--v.het-earthradar-year-label--after {
	transform: translateY( 2px );
	border-radius: 2px 2px 6px 6px !important;
}

.het-earthradar-year-label--single {
	top: 8px !important;
	left: 8px !important;
	border-radius: 6px !important;
}

.het-earthradar-attribution {
	font-size: 0.75em !important;
	color: #64748b !important;
	margin-top: 0.4em !important;
}

.het-earthradar-info {
	margin-top: 0.6em !important;
	padding: 0.6em 0.9em !important;
	background-color: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 6px !important;
	font-size: 0.9em !important;
	color: #334155 !important;
}

.het-earthradar-info summary {
	cursor: pointer !important;
	font-weight: 600 !important;
	color: #1e293b !important;
	list-style: revert;
}

.het-earthradar-info summary:focus-visible {
	outline: 2px solid #2563eb !important;
	outline-offset: 2px;
}

.het-earthradar-info p {
	margin: 0.6em 0 0 !important;
	line-height: 1.5 !important;
}

.het-earthradar-info p:first-of-type {
	margin-top: 0.6em !important;
}

.het-earthradar-notice {
	padding: 0.75em 1em !important;
	margin-bottom: 0.75em !important;
	border-left: 4px solid #f59e0b !important;
	background-color: #fffbeb !important;
	color: #78350f !important;
	border-radius: 4px !important;
}

/* ---------------------------------------------------------------------- */
/* Admin-Bereich (Einstellungen > Hettstedt EarthRadar)                    */
/* ---------------------------------------------------------------------- */

.het-earthradar-admin .het-earthradar-badge {
	display: inline-block;
	padding: 0.2em 0.75em;
	border-radius: 999px;
	font-size: 0.85em;
	font-weight: 600;
}

.het-earthradar-admin .het-earthradar-badge--ok {
	background-color: #dcfce7;
	color: #166534;
}

.het-earthradar-admin .het-earthradar-badge--warn {
	background-color: #fef3c7;
	color: #92400e;
}

.het-earthradar-admin .het-earthradar-notice--error {
	padding: 0.9em 1.2em;
	margin: 1em 0;
	border-left: 4px solid #dc2626;
	background-color: #fef2f2;
	color: #7f1d1d;
	border-radius: 4px;
	max-width: 800px;
}

.het-earthradar-admin .het-earthradar-notice--error code {
	background-color: rgba(0, 0, 0, 0.06);
}

.het-earthradar-admin .het-earthradar-docs h2 {
	margin-top: 1.6em;
}

.het-earthradar-admin .het-earthradar-docs table.widefat {
	margin: 0.75em 0 1.25em;
}

/* Mobile-First: Basis-Stile oben sind bereits für schmale Bildschirme
   ausgelegt; hier per min-width für größere Bildschirme vergrößert (nicht
   umgekehrt per max-width verkleinert). */
@media ( min-width: 481px ) {
	.het-earthradar-map {
		aspect-ratio: auto !important;
		height: 420px !important;
		min-height: 320px !important;
	}

	.het-earthradar-slider-handle::before {
		width: 34px;
		height: 34px;
	}
}