/* =========================================================
   Ausgabe der Kategoriefelder

   Wird nur auf Produktkategorie-Archiven geladen. Das Layout
   selbst baust du in Avada; hier steht nur, was die Shortcodes
   zum Funktionieren brauchen: Listenausrichtung, Spaltenraster
   und die aufklappbaren Fragen.

   Alle Farben kommen aus den Avada-Design-Tokens, damit sie
   einer Palettenaenderung folgen.
   ========================================================= */


/* ---------------------------------------------------------
   Auszeichnungszeile ueber der Ueberschrift

   [hof_cat field="hero_kicker" class="hof-cat-kicker"]

   Ohne Klasse landet der Text in einem Absatz ohne jede
   Auszeichnung: Er erbt dann die Fliesstextfarbe #51453e und
   haelt 43px Abstand zur Ueberschrift - 20px vom Absatz plus
   den Kopfabstand der h1.

   Die Klasse setzt die Zeile auf das Olivgruen der Palette,
   sperrt sie leicht und rueckt sie dicht an die Ueberschrift.

   Grossschreibung kommt aus dem CSS. Im Pflegefeld darf der
   Text also normal geschrieben stehen.
   --------------------------------------------------------- */

.hof-cat-kicker {
	display: block;
	margin: 0;
	color: var(--awb-color5, #74763b);
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Der Absatz, in dem die Zeile steht, und die folgende
   Ueberschrift ruecken zusammen.

   :has() nimmt die Spezifitaet seines staerksten Arguments,
   hier also eine Klasse. Damit schlaegt die zweite Regel
   Avadas .post-content h1 (0,1,1) mit (0,1,2).

   Kennt ein Browser :has() nicht, werden beide Regeln
   uebersprungen und es bleibt beim bisherigen Abstand - kein
   kaputtes Layout. */
p:has( > .hof-cat-kicker ) {
	margin-bottom: 0;
}

p:has( > .hof-cat-kicker ) + h1,
p:has( > .hof-cat-kicker ) + h2,
p:has( > .hof-cat-kicker ) + h3 {
	margin-top: 8px;
}

/* Abstand von der Ueberschrift zum Einleitungstext.

   Avada gibt der h1 unten 42,88px mit, das reisst den Block
   auseinander. Anker ist wieder die Auszeichnungszeile, damit
   nur genau diese eine Ueberschrift getroffen wird und nicht
   jede h1 auf Kategorieseiten. */
p:has( > .hof-cat-kicker ) + h1 {
	margin-bottom: 16px;
}

/* Einleitungstext zwei Pixel groesser als der Fliesstext.

   Greift auf den Absatz direkt unter der Ueberschrift. Wer es
   ausdruecklich setzen moechte, vergibt stattdessen die Klasse:
   [hof_cat field="hero_text" class="hof-cat-intro"] */
p:has( > .hof-cat-kicker ) + h1 + p,
.hof-cat-intro,
.hof-cat-intro p {
	font-size: 18px;
	line-height: 1.7;
}


/* ---------------------------------------------------------
   Liste mit Icons  [hof_cat_list]
   --------------------------------------------------------- */

.hof-cat-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
}

/* Untereinander statt nebeneinander:
   [hof_cat_list class="hof-cat-list--stacked"] */
.hof-cat-list--stacked {
	flex-direction: column;
	gap: 12px;
}

.hof-cat-list__item {
	display: flex;
	align-items: center;
	gap: 10px;
}

.hof-cat-list__icon {
	flex: 0 0 auto;
	color: var(--awb-color5, #74763b);
}

/* Icon im gruenen Kreis, wie im Kopfbereich des Entwurfs:
   [hof_cat_list class="hof-cat-list--circle"] */
.hof-cat-list--circle .hof-cat-list__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--awb-color5, #74763b);
	color: #fff;
	font-size: 13px;
}

.hof-cat-list--circle .hof-cat-icon-svg {
	width: 15px;
	height: 15px;
}


/* Linien-Icons aus dem Theme. Sie erben die Textfarbe und
   wachsen mit der Schriftgroesse mit. */
.hof-cat-icon-svg {
	display: block;
	width: 1.25em;
	height: 1.25em;
}

.hof-cat-list__icon--line {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}


/* Merkmalleiste: gleichmaessig ueber die Breite verteilt, mit
   feinen Trennlinien dazwischen und groesseren Icons - so wie
   im Entwurf.
   [hof_cat_list field="features" class="hof-cat-list--bar"] */
.hof-cat-list--bar {
	gap: 0;
	align-items: stretch;
	flex-wrap: nowrap;
}

.hof-cat-list--bar .hof-cat-list__item {
	flex: 1 1 0;
	justify-content: center;
	gap: 14px;
	padding: 6px 20px;
	border-left: 1px solid var(--awb-color8, #e2c39a);
}

.hof-cat-list--bar .hof-cat-list__item:first-child {
	border-left: 0;
}

/* Icons im gefuellten Olivkreis, passend zu den Haekchen im
   Kopfbereich. Weisses Symbol, egal ob Linien-Icon oder
   gefuelltes Font-Awesome-Icon. */
.hof-cat-list--bar .hof-cat-list__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--awb-color5, #74763b);
	color: #fff;
	font-size: 20px;
}

.hof-cat-list--bar .hof-cat-icon-svg {
	width: 22px;
	height: 22px;
	/* Duenne Linien wirken weiss auf dunklem Grund schwach,
	   CSS schlaegt das stroke-width-Attribut im SVG. */
	stroke-width: 1.8;
}

/* Auf schmalen Geraeten untereinander, ohne senkrechte
   Trennlinien. */
@media only screen and (max-width: 800px) {

	.hof-cat-list--bar {
		flex-wrap: wrap;
		flex-direction: column;
		align-items: flex-start;
	}

	.hof-cat-list--bar .hof-cat-list__item {
		flex: 0 0 auto;
		justify-content: flex-start;
		gap: 14px;
		padding: 5px 0;
		border-left: 0;
	}

	/* Etwas kleinerer Kreis. Der Kreis hat eine feste Breite,
	   damit beginnen alle Texte buendig, obwohl Blatt, Tropfen
	   und Pin unterschiedlich breit sind. */
	.hof-cat-list--bar .hof-cat-list__icon {
		width: 40px;
		height: 40px;
		font-size: 18px;
	}

	.hof-cat-list--bar .hof-cat-icon-svg {
		width: 20px;
		height: 20px;
	}
}


/* ---------------------------------------------------------
   Textspalten  [hof_cat_columns]
   --------------------------------------------------------- */

.hof-cat-columns {
	display: grid;
	gap: 30px 40px;
	grid-template-columns: 1fr;
}

/* Eine gepflegte Spalte bleibt einspaltig, zwei stehen ab
   Tabletbreite nebeneinander. */
@media only screen and (min-width: 801px) {

	.hof-cat-columns--2 {
		grid-template-columns: repeat(2, 1fr);
	}
}

.hof-cat-columns__title {
	margin: 0 0 10px;
}

/* Gleiche Starthoehe der Texte, auch wenn eine Ueberschrift
   zweizeilig umbricht und die andere nicht.

   Jede Spalte belegt zwei Zeilen des aeusseren Rasters und
   uebernimmt sie per subgrid: Zeile 1 Ueberschrift, Zeile 2
   Text. Die Ueberschriftenzeile ist dadurch in allen Spalten so
   hoch wie die laengste Ueberschrift, die Texte beginnen auf
   einer Linie.

   row-gap 0 innerhalb der Spalte, damit zwischen Ueberschrift
   und Text nur der eigene Abstand der Ueberschrift steht und
   nicht zusaetzlich der Zeilenabstand des Rasters.

   Die feste Zeilenzuordnung sorgt dafuer, dass ein Text ohne
   Ueberschrift trotzdem in Zeile 2 steht.

   Browser ohne subgrid ueberspringen den Block und zeigen das
   bisherige Raster. */
@supports ( grid-template-rows: subgrid ) {

	.hof-cat-columns__item {
		display: grid;
		grid-row: span 2;
		grid-template-rows: subgrid;
		row-gap: 0;
		align-content: start;
	}

	.hof-cat-columns__title {
		grid-row: 1;
		align-self: start;
	}

	.hof-cat-columns__text {
		grid-row: 2;
	}
}

.hof-cat-columns__text > p:last-child {
	margin-bottom: 0;
}