/**
 * SDH Leistungspaket — nur der Inhaltsteil.
 *
 * Kopf, Logo, Titel und Symbol kommen aus `sdh-accordion.css` — dasselbe
 * Markup, dieselben `--sdh-acc-*`-Properties. Hier steht ausschliesslich, was
 * im aufgeklappten Bereich passiert.
 *
 * Alles arbeitet mit `--sdh-lp-*`-Properties, die das Widget schreibt; der
 * Rueckfallwert im `var()` ist zugleich die Vorgabe.
 *
 * @package SDH_Core
 */

/* ==========================================================================
   Inhaltsbereich

   Der Innenabstand liegt auf `.sdh-lp-inner`, NICHT auf `.sdh-acc-body`. Beim
   Zuklappen wird dessen Hoehe auf 0 gesetzt — ein Abstand am selben Element
   bliebe als leerer Streifen stehen, weil der Browser Innenabstaende als
   Mindesthoehe benutzt.
   ========================================================================== */

.sdh-lp .sdh-acc-body {
	background: var(--sdh-lp-bg, transparent);
	border-top: 1px solid var(--sdh-lp-divider, transparent);
}

.sdh-lp-inner {
	padding: var(--sdh-lp-padding, 8px 24px 24px);
	color: var(--sdh-lp-color, inherit);
}

/* ==========================================================================
   Beschreibung
   ========================================================================== */

.sdh-lp-text > :first-child {
	margin-top: 0;
}

.sdh-lp-text > :last-child {
	margin-bottom: 0;
}

.sdh-lp-text strong {
	color: var(--sdh-lp-strong, inherit);
}

/* ==========================================================================
   Aufzaehlung

   Kommt aus dem Voxel-Repeater am Beitrag: je Zeile ein Titel und ein Text.
   Symbol und Text stehen nebeneinander, der Text bricht unter dem Text weiter
   um — nicht unter dem Symbol. Deshalb Flex statt einer Listenmarkierung.
   ========================================================================== */

.sdh-lp-list {
	margin: var(--sdh-lp-list-margin, 20px 0 0);
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--sdh-lp-list-gap, 12px);
}

.sdh-lp-list li {
	display: flex;
	align-items: flex-start;
	gap: var(--sdh-lp-list-icon-gap, 12px);
	margin: 0;
}

.sdh-lp-list-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Am Zeilenanfang ausgerichtet, nicht mittig zur ganzen Zeile: Bei zwei
	   Zeilen Text saehe ein mittiges Symbol verrutscht aus. */
	margin-top: .15em;
	font-size: var(--sdh-lp-list-icon-size, 18px);
	color: var(--sdh-lp-list-icon-color, currentColor);
	line-height: 1;
}

.sdh-lp-list-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.sdh-lp-list-body {
	min-width: 0;
}

.sdh-lp-list-title {
	color: var(--sdh-lp-list-title, inherit);
}

.sdh-lp-list-sep,
.sdh-lp-list-text {
	color: var(--sdh-lp-list-text, inherit);
}

/* ==========================================================================
   Fussnote
   ========================================================================== */

.sdh-lp-footnote {
	margin: var(--sdh-lp-footnote-gap, 20px) 0 0;
	color: var(--sdh-lp-footnote-color, inherit);
	font-style: italic;
}

/* ==========================================================================
   Link
   ========================================================================== */

.sdh-lp-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: var(--sdh-lp-link-gap, 24px);
	color: var(--sdh-lp-link-color, inherit);
	text-decoration: none;
	transition: color .15s ease;
}

.sdh-lp-link:hover,
.sdh-lp-link:focus-visible {
	color: var(--sdh-lp-link-color-hover, var(--sdh-lp-link-color, inherit));
}

.sdh-lp-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Der Pfeil rueckt beim Berühren ein Stueck nach — eine kleine Zusage, dass es
   weitergeht. */
.sdh-lp-link-arrow {
	transition: transform .15s ease;
}

.sdh-lp-link:hover .sdh-lp-link-arrow {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.sdh-lp-link,
	.sdh-lp-link-arrow {
		transition: none;
	}
}