/**
 * SDH Aufklapper — Stylesheet fuer beide Bauformen.
 *
 * Es gibt zwei Wege zum selben Ergebnis, und beide erzeugen dieselben Klassen:
 *
 *   1. **Widget „SDH Aufklapper"** (`SDH_Accordion_Widget`) — Kopf aus Feldern,
 *      Inhalt ist ein echter Elementor-Container (Nested Elements).
 *   2. **Rolle am Container** (`SDH_Accordion_Containers`) — Kopf UND Inhalt
 *      sind frei gebaute Container, markiert ueber `sdh-acc-head` / `sdh-acc-body`.
 *
 * Deshalb steht das Aufklapp-Verhalten weiter unten nur einmal da. Der obere
 * Teil (Bild, Titel, Symbol) betrifft ausschliesslich das Widget — bei der
 * Container-Variante baut man diese Teile selbst.
 *
 * Alle Eckenradien stehen auf 0: Der Handwerkerclub hat keine abgerundeten
 * Elemente. Ausnahme ist die Symbolflaeche — im Entwurf des Kunden bewusst rund,
 * mit eigenem Regler.
 *
 * @package SDH_Core
 */

/* ==========================================================================
   Nur Widget: Eintraege untereinander
   ========================================================================== */

.sdh-acc-item + .sdh-acc-item {
	margin-top: var(--sdh-acc-item-gap, 12px);
}

/* ==========================================================================
   Kopf — beide Bauformen
   ========================================================================== */

.sdh-acc-head {
	cursor: pointer;
	/* Verhindert, dass beim schnellen Doppelklick der Text markiert wird —
	   bei einem Bedienelement ist das nie gewollt. */
	-webkit-user-select: none;
	user-select: none;
	transition: background-color var(--sdh-acc-anim, 250ms) ease;
}

.sdh-acc-head:focus-visible {
	outline: 2px solid var(--sdh-acc-focus, currentColor);
	outline-offset: -2px;
}

/* Nur Widget: Das Widget baut den Kopf selbst und braucht deshalb Anordnung,
   Innenabstand und Hintergrund. Bei der Container-Variante macht das der
   Container — dort wuerden diese Regeln nur stoeren, deshalb der Nachfahre. */
.sdh-acc-item > .sdh-acc-head {
	display: flex;
	align-items: center;
	gap: var(--sdh-acc-head-gap, 20px);
	padding: var(--sdh-acc-head-padding, 20px 24px);
	background: var(--sdh-acc-head-bg, transparent);
}

.sdh-acc-item > .sdh-acc-head:hover {
	background: var(--sdh-acc-head-bg-hover, var(--sdh-acc-head-bg, transparent));
}

.sdh-acc-item > .sdh-acc-head[aria-expanded="true"] {
	background: var(--sdh-acc-head-bg-open, var(--sdh-acc-head-bg, transparent));
}

/* ==========================================================================
   Nur Widget: Bild
   ========================================================================== */

.sdh-acc-image {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--sdh-acc-image-width, 80px);
	height: var(--sdh-acc-image-height, 80px);
	padding: var(--sdh-acc-image-padding, 8px);
	border: 1px solid var(--sdh-acc-image-border, transparent);
	border-radius: var(--sdh-acc-image-radius, 0);
	box-sizing: border-box;
}

.sdh-acc-image img {
	width: 100%;
	height: 100%;
	object-fit: var(--sdh-acc-image-fit, contain);
	display: block;
}

/* ==========================================================================
   Nur Widget: Text

   `min-width: 0` ist Pflicht: Ohne sie schrumpft der Textblock nie unter seinen
   Inhalt, und ein langer Titel schiebt das Symbol aus der Karte.
   ========================================================================== */

.sdh-acc-text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sdh-acc-title-gap, 4px);
}

.sdh-acc-title {
	color: var(--sdh-acc-title-color, inherit);
	overflow-wrap: anywhere;
	transition: color var(--sdh-acc-anim, 250ms) ease;
}

.sdh-acc-head[aria-expanded="true"] .sdh-acc-title {
	color: var(--sdh-acc-title-color-open, var(--sdh-acc-title-color, inherit));
}

.sdh-acc-subtitle {
	color: var(--sdh-acc-subtitle-color, inherit);
	overflow-wrap: anywhere;
}

/* ==========================================================================
   Symbol

   Beide Zustaende liegen im Markup; sichtbar ist immer nur einer. Wer bei der
   Container-Variante nur EIN Symbol setzt und ihm `.sdh-acc-icon` gibt,
   bekommt stattdessen die Drehung.
   ========================================================================== */

.sdh-acc-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color var(--sdh-acc-anim, 250ms) ease,
		color var(--sdh-acc-anim, 250ms) ease,
		transform var(--sdh-acc-anim, 250ms) ease;
}

/* Nur Widget: Flaeche und Groesse. Bei der Container-Variante gestaltet man das
   Symbol-Widget selbst — dort soll nur die Drehung dazukommen. */
.sdh-acc-item .sdh-acc-icon {
	width: var(--sdh-acc-icon-box, 36px);
	height: var(--sdh-acc-icon-box, 36px);
	border-radius: var(--sdh-acc-icon-radius, 50%);
	background: var(--sdh-acc-icon-bg, transparent);
	color: var(--sdh-acc-icon-color, inherit);
	font-size: var(--sdh-acc-icon-size, 14px);
}

.sdh-acc-item .sdh-acc-head[aria-expanded="true"] .sdh-acc-icon {
	background: var(--sdh-acc-icon-bg-open, var(--sdh-acc-icon-bg, transparent));
	color: var(--sdh-acc-icon-color-open, var(--sdh-acc-icon-color, inherit));
}

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

.sdh-acc-icon-open {
	display: none;
}

.sdh-acc-head[aria-expanded="true"] .sdh-acc-icon-open {
	display: revert;
}

.sdh-acc-head[aria-expanded="true"] .sdh-acc-icon-closed {
	display: none;
}

/* Container-Variante: ein einzelnes Symbol dreht sich. Greift nicht im Widget,
   weil dort zwei Symbole vorliegen und getauscht statt gedreht werden. */
.sdh-acc-head[aria-expanded="true"] > .sdh-acc-icon:only-child,
.sdh-acc-head[aria-expanded="true"] .elementor-widget .sdh-acc-icon {
	transform: rotate(180deg);
}

/* ==========================================================================
   Inhalt — beide Bauformen

   ## Warum Hoehe UND Abstaende animiert werden
   Ist die Hoehe eines Kastens kleiner als seine Innenabstaende, benutzt der
   Browser die Abstaende als Mindesthoehe. `height: 0` allein liesse also bei
   24px Abstand oben und unten einen leeren Streifen stehen.

   ## Warum `!important`
   Ausnahmsweise und mit Grund: Elementor schreibt Innenabstaende des Containers
   mit hoher Spezifitaet. Ohne `!important` gewaenne seine Regel und der Inhalt
   liesse sich nicht schliessen.
   ========================================================================== */

/* Kein Hintergrund, kein Innenabstand hier: Der Inhalt IST bei beiden
   Bauformen ein Elementor-Container und bringt seine Gestaltung selbst mit.
   Was dieses Stylesheet setzen darf, ist nur das Abschneiden beim Zuklappen. */
.sdh-acc-body {
	overflow: hidden;
}

/* Das Skript setzt dieses Merkmal. Vor seinem Eingreifen ist der Inhalt
   sichtbar — faellt das Skript aus, steht alles offen da statt unerreichbar zu
   sein. Das ist die bessere der beiden Fehlerarten. */
.sdh-acc-body[data-sdh-acc-collapsed] {
	height: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	border-top-width: 0 !important;
	border-bottom-width: 0 !important;
}

.sdh-acc-body[data-sdh-acc-animating] {
	transition:
		height var(--sdh-acc-anim, 250ms) ease,
		padding-top var(--sdh-acc-anim, 250ms) ease,
		padding-bottom var(--sdh-acc-anim, 250ms) ease;
}

/* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt sie nicht. */
@media (prefers-reduced-motion: reduce) {
	.sdh-acc-head,
	.sdh-acc-icon,
	.sdh-acc-title,
	.sdh-acc-body[data-sdh-acc-animating] {
		transition: none;
	}
}

/* ==========================================================================
   Editor

   Im Elementor-Editor muss der Inhalt bearbeitbar bleiben — sonst laesst sich
   nichts in den Kind-Container ziehen. Das Skript haelt sich dort heraus; diese
   Regel ist die Rueckversicherung.
   ========================================================================== */

.elementor-editor-active .sdh-acc-body[data-sdh-acc-collapsed],
.elementor-editor-preview .sdh-acc-body[data-sdh-acc-collapsed] {
	height: auto !important;
	padding-top: revert !important;
	padding-bottom: revert !important;
}