/*
 * Compendion „Danke"-Sektion (Block compendion/thanks-section) auf der
 * Dachmarken-Startseite. Zentriert, warm, Abschluss der Seite.
 *
 * Farben ausschliesslich ueber Tokens (--wp--preset--color--* fuer Flaechen,
 * --compendion-color-on-* fuer Text darauf). Buttons als Pillen (999px).
 */

.compendion-thanks__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1.1rem;
	max-width: 46rem;
	margin-inline: auto;
	/* Horizontaler Abstand zum Viewport-Rand auf Mobil – die alignfull-Sektion
	 * hat selbst keine global-padding-Klasse, sonst klebt die Reveal-Box am
	 * Rand. Wert = WP-Root-Padding (konsistent mit den übrigen Sektionen),
	 * etwas großzügiger Fallback. */
	padding-inline: var(--wp--style--root--padding-right, 1rem);
}

.compendion-thanks .compendion-kicker {
	margin-bottom: 0;
}

.compendion-thanks h2 {
	margin: 0;
}

.compendion-thanks__intro {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--compendion-color-on-base, var(--wp--preset--color--contrast));
}

.compendion-thanks__intro p {
	margin: 0;
}

/* „Danke, Arne" – gefuellte Primary-Pille. */
.compendion-thanks__btn {
	appearance: none;
	border: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.25rem;
	padding-inline: 2rem;
	margin-top: 0.4rem;
	border-radius: 999px;
	/* CTA-Token statt rohem primary: auf der Dachmarke ist primary == base
	 * (gelb auf gelb → unsichtbar). cta-on-base ist WCAG-sichtbar gegen base. */
	background: var(--compendion-cta-on-base, var(--wp--preset--color--primary));
	color: var(--compendion-cta-on-base-text, var(--wp--preset--color--base));
	font-family: inherit;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.2;
	transition: transform 0.12s ease, filter 0.12s ease, opacity 0.12s ease;
}

.compendion-thanks__btn:hover:not(:disabled),
.compendion-thanks__btn:focus-visible:not(:disabled) {
	transform: translateY(-1px);
	filter: brightness(1.06);
}

.compendion-thanks__btn:disabled {
	cursor: default;
	opacity: 0.75;
}

/* Dark Mode: CTA-Dark-Tokens (System-Pref + manueller Toggle), analog zum
 * Abonnieren-Button. */
@media (prefers-color-scheme: dark) {
	html:not([data-color-scheme="light"]) .compendion-thanks__btn {
		background: var(--compendion-cta-on-base-dark, var(--wp--preset--color--primary));
		color: var(--compendion-cta-on-base-dark-text, var(--wp--preset--color--base));
	}
}

html[data-color-scheme="dark"] .compendion-thanks__btn {
	background: var(--compendion-cta-on-base-dark, var(--wp--preset--color--primary));
	color: var(--compendion-cta-on-base-dark-text, var(--wp--preset--color--base));
}

/* Reveal-Bereich – aufklappende „Karte" als Antwort. */
.compendion-thanks__reveal {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	width: 100%;
	margin-top: 0.6rem;
	padding: clamp(1.5rem, 4vw, 2.25rem);
	border-radius: 1.5rem;
	background: var(--wp--preset--color--surface);
	color: var(--compendion-color-on-surface, var(--wp--preset--color--contrast));
	border: 1px solid var(--wp--preset--color--line);
}

.compendion-thanks__reveal[hidden] {
	display: none;
}

/* Sanftes Aufklappen, sobald der Bereich sichtbar wird (kein JS-Klassen-Toggle
 * noetig – greift, weil :not([hidden]) erst beim Einblenden matcht). */
.compendion-thanks__reveal:not([hidden]) {
	animation: compendion-thanks-reveal 0.38s ease both;
}

@keyframes compendion-thanks-reveal {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.compendion-thanks__reveal:not([hidden]) {
		animation: none;
	}
}

/* Zaehler-Zeile – kraeftiger Anreiz ÜBER dem Button, auf dem Sektions-
 * Hintergrund (base). Farbe `on-base` garantiert Kontrast (nicht mehr im
 * dunklen Reveal). */
.compendion-thanks__count {
	margin: 0;
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: clamp(1.5rem, 4.5vw, 2.1rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--compendion-color-on-base, var(--wp--preset--color--contrast));
}

.compendion-thanks__more {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	max-width: 40rem;
	font-size: 1.02rem;
	line-height: 1.6;
	color: inherit;
}

.compendion-thanks__more p {
	margin: 0;
}

.compendion-thanks__question {
	font-weight: 700;
}

/* „will helfen!" – gefuellte Primary-Pille, gleicher Bautyp wie der Danke-Knopf. */
.compendion-thanks__help {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding-inline: 1.85rem;
	margin-top: 0.25rem;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: var(--compendion-color-on-primary, var(--wp--preset--color--base));
	font-family: inherit;
	font-size: 1.05rem; /* gleich groß wie der Danke-Button + restliche CTAs */
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: transform 0.12s ease, filter 0.12s ease;
}

.compendion-thanks__help:hover,
.compendion-thanks__help:focus-visible {
	transform: translateY(-1px);
	filter: brightness(1.06);
	color: var(--compendion-color-on-primary, var(--wp--preset--color--base));
}