/**
 * NETZLICHT Votes — Frontend-Styles
 *
 * Border-Radius bewusst 0 (Konvention, außer bei kreisförmigen Elementen).
 * CSS-Variablen werden via wp_head injected (siehe class-settings.php).
 */

.nlvotes {
	--nlvotes-radius: 0;
	--nlvotes-spacing: 1rem;
	color: var(--nlvotes-text, #2b2b2b);
	font-size: 1rem;
	line-height: 1.45;
	display: block;
	margin: 0 0 var(--nlvotes-spacing) 0;
}

.nlvotes *,
.nlvotes *::before,
.nlvotes *::after {
	box-sizing: border-box;
}

/* Kadence (.single-content ul/ol → 0,1,1) und andere Themes drücken
   padding-left: 2em + Disc-Markers in unsere Listen rein. Doppel-Klassen-
   Selektoren erzwingen 0,2,0 / 0,2,1 — das beats die Theme-Regeln sicher,
   ohne !important-Sledgehammer. */
.nlvotes .nlvotes__bars,
.nlvotes ul,
.nlvotes ol {
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.nlvotes .nlvotes__bars > li,
.nlvotes li {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
	background: none;
	text-indent: 0;
}

.nlvotes .nlvotes__bars > li::before,
.nlvotes .nlvotes__bars > li::marker {
	content: none;
	display: none;
}

/* ── Stand ─────────────────────────────────────────────── */

.nlvotes__stand {
	margin-bottom: calc( var(--nlvotes-spacing) * 1.5 );
}

.nlvotes .nlvotes__empty {
	color: var(--nlvotes-empty-text, var(--nlvotes-text));
	margin: 0;
}

/* Question + Stand-Label: Spezifitaet 0,2,0 damit Theme-Heading-Rules
   (z.B. Kadence `.entry-content h2 { font-weight: 700 }`, 0,1,1) unsere
   Typografie-Settings nicht ueberschreiben, wenn der User h1-h6 als Tag waehlt. */
.nlvotes .nlvotes__question {
	color: var(--nlvotes-text);
	font-size: var(--nlvotes-question-size, inherit);
	font-weight: var(--nlvotes-question-weight, 600);
	line-height: 1.3;
	margin: var(--nlvotes-question-margin, 0 0 0.75rem);
	padding: var(--nlvotes-question-padding, 0);
}

.nlvotes .nlvotes__stand-label {
	color: var(--nlvotes-text);
	font-size: var(--nlvotes-stand-size, inherit);
	font-weight: var(--nlvotes-stand-weight, 600);
	line-height: 1.3;
	margin: var(--nlvotes-stand-margin, 0 0 0.5rem);
	padding: var(--nlvotes-stand-padding, 0);
}

.nlvotes__total {
	margin: 0 0 0.5rem;
	color: var(--nlvotes-text);
	opacity: 0.85;
	font-size: 0.95em;
}

.nlvotes__bars {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.nlvotes__bar-row {
	display: grid;
	grid-template-columns: minmax(9rem, 1.2fr) 2fr auto;
	gap: 0.85rem 1rem;
	align-items: center;
}

/* 0%-Zeilen: kein opacity-Hack, Textfarbe explizit ueber empty_text-Slot
   damit der User sie unabhaengig vom regulaeren Text-Slot konfigurieren kann.
   Plus erhoehte Specificity damit Theme-Regeln nicht stoeren. */
.nlvotes .nlvotes__bar-row.is-empty .nlvotes__bar-label,
.nlvotes .nlvotes__bar-row.is-empty .nlvotes__bar-percent {
	color: var(--nlvotes-empty-text, var(--nlvotes-text));
}

.nlvotes__bar-label {
	color: var(--nlvotes-text);
	font-weight: 500;
}

.nlvotes__bar-track {
	display: block;
	position: relative;
	width: 100%;
	height: 0.85rem;
	background: var(--nlvotes-bar-bg, #f5f5f5);
	border: 0;
	border-radius: var(--nlvotes-radius);
	overflow: hidden;
}

.nlvotes__bar-fill {
	display: block;
	height: 100%;
	width: 0;
	background: var(--nlvotes-bar-fill-start, var(--nlvotes-accent, #4a8a3a));
	background-image: linear-gradient(90deg,
		var(--nlvotes-bar-fill-start, var(--nlvotes-accent, #4a8a3a)) 0%,
		var(--nlvotes-bar-fill-end, var(--nlvotes-accent-hover, #3a6a2a)) 100%);
	transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: width;
}

.nlvotes__bar-row.is-empty .nlvotes__bar-track {
	background: var(--nlvotes-bar-empty, var(--nlvotes-bar-bg, #f5f5f5));
	box-shadow: none;
}

.nlvotes__bar-percent {
	font-variant-numeric: tabular-nums;
	color: var(--nlvotes-text);
	min-width: 4rem;
	text-align: right;
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	.nlvotes__bar-fill { transition: none; }
}

/* ── Form ──────────────────────────────────────────────── */

.nlvotes__form {
	display: flex;
	flex-direction: column;
	gap: var(--nlvotes-spacing);
	margin: 0;
}

.nlvotes__field {
	border: 0;
	margin: 0;
	padding: 0;
}

.nlvotes__field legend {
	font-weight: 600;
	margin-bottom: 0.5rem;
	padding: 0;
}

.nlvotes__radios,
.nlvotes__checks {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
}

.nlvotes__radio,
.nlvotes__check {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.25rem 0.5rem;
	border: 1px solid var(--nlvotes-border, #e0e0e0);
	border-radius: var(--nlvotes-radius);
	transition: border-color 0.15s, background 0.15s;
}

.nlvotes__check {
	cursor: pointer;
}

.nlvotes__radio-label {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	cursor: pointer;
	margin: 0;
}

.nlvotes__radio:hover,
.nlvotes__check:hover {
	border-color: var(--nlvotes-accent);
}

.nlvotes__radio:focus-within {
	border-color: var(--nlvotes-accent);
	outline: 2px solid var(--nlvotes-accent);
	outline-offset: 2px;
}

.nlvotes__radio input,
.nlvotes__check input {
	accent-color: var(--nlvotes-accent);
}

/* ── Card-Grid-Variante: pro Choice ein Bild ─────────────────────────
   Aktiv sobald mindestens eine Choice ein Bild hat. Bild ist klickbarer
   <a href="full-url"> — Kadence-Theme picks die Lightbox per Vanilla-JS
   (SimpleLightbox) auf, sobald der Customizer-Switch (General →
   Performance → "Enable Lightbox") aktiv ist. Auf Anchor liegt die
   Klasse kt-no-lightbox, damit Kadence kein Single-Lightbox pro Bild
   erstellt — voting.js initialisiert manuell als Galerie-Gruppe. */
.nlvotes__radios--cards {
	--nlv-cards-gap: 1rem;
	--nlv-cards-min: 200px;
	--nlv-cards-max: 6;
	display: grid;
	/* Max 6 Cards pro Reihe: Spalten-Min ist groesser von --nlv-cards-min
	   (200px) und (Container-Breite - Gaps) / 6. Bei breitem Viewport
	   greift der calc-Wert und bremst die Spalten-Anzahl auf 6, bei
	   schmalem greift das 200px-Minimum und Cards brechen frueher um. */
	grid-template-columns: repeat(
		auto-fit,
		minmax(
			max(
				var(--nlv-cards-min),
				calc((100% - (var(--nlv-cards-max) - 1) * var(--nlv-cards-gap)) / var(--nlv-cards-max))
			),
			1fr
		)
	);
	gap: var(--nlv-cards-gap);
	flex-wrap: unset;
}

.nlvotes__radios--cards .nlvotes__radio {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 0;
	overflow: hidden;
}

/* Mobile: Bild garantiert ueber dem Text. Auf schmalen Viewports rueckt
   das Grid auf eine Spalte (auto-fit minmax greift), Card bleibt
   Spalten-Stack. Theme-Resets die !important auf flex-direction setzen
   wuerden, koennten das Pattern zerschiessen — pinnen wir explizit. */
@media (max-width: 480px) {
	.nlvotes__radios--cards {
		grid-template-columns: 1fr;
	}
	.nlvotes__radios--cards .nlvotes__radio {
		flex-direction: column;
	}
	.nlvotes__radios--cards .nlvotes__radio-image {
		width: 100%;
		aspect-ratio: 16 / 10;
	}
}

.nlvotes__radio-image {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--nlvotes-bar-empty, #f5f5f5);
	cursor: zoom-in;
}

.nlvotes__radio-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
	.nlvotes__radio-image:hover img {
		transform: scale(1.04);
	}
}

.nlvotes__radio-image:focus-visible {
	outline: 3px solid var(--nlvotes-accent);
	outline-offset: -3px;
}

.nlvotes__radios--cards .nlvotes__radio-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.65rem 0.85rem;
	min-height: 3rem;
}

.nlvotes__radio-text {
	font-weight: 500;
	line-height: 1.3;
}

@media (prefers-reduced-motion: reduce) {
	.nlvotes__radio-image img {
		transition: none;
	}
	.nlvotes__radio-image:hover img {
		transform: none;
	}
}

.nlvotes__check--other {
	flex: 1 1 100%;
}

.nlvotes__other,
.nlvotes__text {
	width: 100%;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--nlvotes-border, #e0e0e0);
	border-radius: var(--nlvotes-radius);
	background: var(--nlvotes-bar-bg, #f5f5f5);
	color: var(--nlvotes-text);
	font: inherit;
}

.nlvotes__other:focus-visible,
.nlvotes__text:focus-visible {
	outline: 2px solid var(--nlvotes-accent);
	outline-offset: 1px;
}

.nlvotes__check--other input {
	width: auto;
	min-width: 12rem;
}

.nlvotes__submit {
	align-self: flex-start;
	background: var(--nlvotes-accent, #4a8a3a);
	color: var(--nlvotes-submit-text, #ffffff);
	border: 0;
	padding: 0.65rem 1.4rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	border-radius: var(--nlvotes-radius);
	transition: background 0.15s, color 0.15s;
}

.nlvotes__submit:hover {
	background: var(--nlvotes-accent-hover, #3a6a2a);
	color: var(--nlvotes-submit-text-hover, var(--nlvotes-submit-text, #ffffff));
}

/* Fokus braucht einen eigenen, messbaren Indikator. Vorher teilte sich der
   Button den Hover-Zweig und setzte dabei outline:none — sichtbar blieb nur
   der Wechsel Accent -> Accent-Hover, per Default 1.36:1 und damit unter den
   3:1 aus WCAG 1.4.11. Eigener Ring in der Textfarbe des Buttons plus Offset
   in der Buttonfarbe, damit er auf hellem wie dunklem Grund trägt. */
.nlvotes__submit:focus-visible {
	background: var(--nlvotes-accent-hover, #3a6a2a);
	color: var(--nlvotes-submit-text-hover, var(--nlvotes-submit-text, #ffffff));
	outline: 2px solid var(--nlvotes-accent, #2f5e1f);
	outline-offset: 2px;
}

.nlvotes__submit[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.nlvotes__error {
	color: #b3261e;
	margin: 0;
	min-height: 1.2em;
}

.nlvotes__error:empty {
	display: none;
}

.nlvotes__thanks {
	padding: 1rem 1.25rem;
	background: var(--nlvotes-thanks-bg, var(--nlvotes-accent, #4a8a3a));
	color: var(--nlvotes-thanks-text, #ffffff);
	border-left: 4px solid var(--nlvotes-thanks-border, var(--nlvotes-accent-hover, var(--nlvotes-accent)));
	font-weight: 500;
	/* Wenn die Site einen sticky Header hat, sorgt scroll-margin-top dafuer,
	   dass das Banner nach scrollIntoView() nicht hinter dem Header sitzt.
	   Per Custom-Property pro Site ueberschreibbar wenn der Header hoeher ist. */
	scroll-margin-top: var(--nlvotes-scroll-margin-top, 5rem);
}

.nlvotes__thanks p {
	margin: 0;
	color: inherit;
}

/* Honeypot. */
.nlvotes__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}