/*
 * Macarons und Co. – Magazin
 * Rezeptfilter, Unterkategorie-Navigation, Badges und Kacheln.
 *
 * Farben ausschließlich aus den globalen Elementor-Farben (Kit 37):
 *   03fc981 Blog Sekundär · 3889f7c Blog Tertiär · 47a7e76 Blog
 *   550b681 Global BG · f2ba8d3 Weiß · primary/text · secondary · accent
 * Abstufungen per color-mix().
 * Eingebunden über functions.php („Magazin-Styling laden“).
 */


/* Unterkategorie-Navigation: aktiver Button
***********************************************************/
/* Jeder Button trägt die Klasse mc-subnav-<slug>. WordPress setzt auf
   Kategorieseiten die Body-Klasse term-<slug> (Rezepte) bzw.
   category-<slug> (Wissen & Tipps). Passt beides zusammen, ist der Button
   aktiv. Neue Unterkategorien brauchen hier eine zusätzliche Zeile. */
body.term-desserts-suesses .mc-subnav-desserts-suesses .elementor-button,
body.term-macarons .mc-subnav-macarons .elementor-button,
body.term-patisserie .mc-subnav-patisserie .elementor-button,
body.term-boulangerie .mc-subnav-boulangerie .elementor-button,
body.term-chocolaterie .mc-subnav-chocolaterie .elementor-button,
body.term-cremes-mousses .mc-subnav-cremes-mousses .elementor-button,
body.term-franzoesische-kueche .mc-subnav-franzoesische-kueche .elementor-button,
body.term-aperitif-haeppchen .mc-subnav-aperitif-haeppchen .elementor-button,
body.term-vorspeisen .mc-subnav-vorspeisen .elementor-button,
body.term-hauptgerichte .mc-subnav-hauptgerichte .elementor-button,
body.term-asiatische-kueche .mc-subnav-asiatische-kueche .elementor-button,
body.term-vietnam .mc-subnav-vietnam .elementor-button,
body.term-japan-china .mc-subnav-japan-china .elementor-button,
body.category-wissen-und-tipps .mc-subnav-wissen-und-tipps .elementor-button,
body.category-wissen-rund-um-zutaten .mc-subnav-wissen-rund-um-zutaten .elementor-button,
body.category-meine-lieblingskuechenhelfer .mc-subnav-meine-lieblingskuechenhelfer .elementor-button,
body.category-organisation-in-der-kueche .mc-subnav-organisation-in-der-kueche .elementor-button {
	/* !important: die Element-CSS des Buttons (Hintergrund Global BG) ist spezifischer. */
	background-color: var(--e-global-color-03fc981) !important;
	border-color: var(--e-global-color-03fc981) !important;
	color: var(--e-global-color-f2ba8d3) !important;
}


/* „Mehr Rezepte laden“ in den Rezept- und Magazin-Loops
***********************************************************/
/* Ohne eigene Farben zeigt das Loop Grid den Button im Elementor-Akzent
   (fast schwarz). 18936 = Loop-Item „Rezept Element“, 276 = „Magazin Element“. */
.elementor-widget-loop-grid:has(.elementor-18936, .elementor-276) .e-loop__load-more .elementor-button {
	background-color: var(--e-global-color-03fc981);
	color: var(--e-global-color-f2ba8d3);
	border-radius: 1rem;
	padding: 8px 16px;
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: var(--e-global-typography-text-font-size);
}

.elementor-widget-loop-grid:has(.elementor-18936, .elementor-276) .e-loop__load-more .elementor-button:hover,
.elementor-widget-loop-grid:has(.elementor-18936, .elementor-276) .e-loop__load-more .elementor-button:focus {
	background-color: var(--e-global-color-3889f7c);
	color: var(--e-global-color-f2ba8d3);
}


/* Rezeptkarte: Der Rezeptname ist ein <p> statt einer zweiten Überschrift
   (inc/seo.php), Größe wie vorher als H2. */
.wprm-recipe-template-chic p.wprm-recipe-name {
	font-size: 1.6em;
	line-height: 1.3;
	margin: 0 0 0.5em;
}


/* Magazin-Seite: Sprungmarke „Rezept finden“ nicht unter dem festen Header */
#rezepte-entdecken {
	scroll-margin-top: 140px;
}


/* Rezeptfilter: Nested Accordion als Dropdown
***********************************************************/
/* Die Filterzeile besteht aus einem Nested Accordion je Filter (Saison,
   Anlass …) mit einem Taxonomy-Filter als Inhalt. Der Inhalt öffnet sich
   als schwebendes Feld unter dem Titel, damit sich die Seite beim
   Aufklappen nicht verschiebt. */
.mc-filter {
	position: relative;
	z-index: 5;
}

/* Pillen so breit wie ihr Inhalt, Titel immer einzeilig.
   width: auto, weil Elementor 4 Widgets in Containern auf 100 % Breite setzt. */
.mc-filter > .elementor-widget-n-accordion,
.e-con.mc-filter > .elementor-widget-n-accordion {
	flex: 0 1 auto;
	width: auto;
	max-width: 100%;
}

.mc-filter .e-n-accordion-item-title {
	gap: 8px;
}

.mc-filter .e-n-accordion-item-title-header {
	min-width: 0;
}

/* Titel etwas größer als der Fließtext (Géraldine, 29.10.: „ein bisschen größer“, mit Emojis). */
.mc-filter .e-n-accordion-item-title-text {
	max-width: 18rem;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 1.125rem;
}

@media (max-width: 767px) {
	.mc-filter > .elementor-widget-n-accordion {
		flex: 1 1 calc(50% - 5px);
	}

	.mc-filter .e-n-accordion-item-title-text {
		max-width: none;
	}
}

/* Elementor animiert beim Öffnen die Höhe des Eintrags (Inline-Style
   height + overflow:hidden). Weil der Inhalt hier schwebt, würde die
   ganze Filterzeile kurz nach unten wachsen und das Dropdown abschneiden.
   !important schlägt Inline-Styles und die Animation. */
.mc-filter .e-n-accordion-item {
	position: relative;
	height: auto !important;
	overflow: visible !important;
}

.mc-filter .e-n-accordion-item-title {
	border: 1px solid var(--e-global-color-secondary);
	border-radius: 100vw;
}

.mc-filter .e-n-accordion-item[open] > .e-n-accordion-item-title {
	border-color: var(--e-global-color-03fc981);
}

/* Aktiver Filter: magazin-filter.js setzt die Klasse und schreibt die
   gewählten Werte in den Titel („Saison: Sommer, Herbst“). */
.mc-filter .e-n-accordion-item.mc-filter-aktiv > .e-n-accordion-item-title {
	background-color: color-mix(in srgb, var(--e-global-color-03fc981) 10%, var(--e-global-color-f2ba8d3)) !important;
	border-color: var(--e-global-color-03fc981);
}

.mc-filter .e-n-accordion-item.mc-filter-aktiv > .e-n-accordion-item-title .e-n-accordion-item-title-text {
	color: var(--e-global-color-03fc981) !important;
}

.mc-filter .e-n-accordion-item.mc-filter-aktiv > .e-n-accordion-item-title svg {
	fill: var(--e-global-color-03fc981) !important;
}

.mc-filter .e-n-accordion-item > [role="region"] {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 30;
	width: max-content;
	min-width: 100%;
	max-width: min(90vw, 360px);
	padding: 1rem;
	background-color: var(--e-global-color-f2ba8d3);
	border-radius: 1rem;
	box-shadow: 0 6px 20px color-mix(in srgb, var(--e-global-color-accent) 18%, transparent);
}

/* Auf dem Handy klappt der Inhalt normal auf (kein Overlay am Rand). */
@media (max-width: 767px) {
	.mc-filter .e-n-accordion-item > [role="region"] {
		position: static;
		width: auto;
		max-width: none;
		margin-top: 6px;
		box-shadow: none;
		border: 1px solid var(--e-global-color-secondary);
	}
}

/* Filter-Chips. Die Chips sind <button>-Elemente, deshalb die höhere
   Spezifität gegen die Button-Regeln des Kits (.elementor-kit-37 button). */
.mc-filter .e-filter {
	flex-wrap: wrap;
	gap: 8px;
}

.elementor-kit-37 .mc-filter .e-filter-item,
.elementor-kit-37 .mc-filter .e-filter-item:hover,
.elementor-kit-37 .mc-filter .e-filter-item:focus {
	padding: 4px 12px;
	border: 1px solid var(--e-global-color-secondary);
	border-radius: 100vw;
	background-color: var(--e-global-color-550b681);
	color: var(--e-global-color-primary);
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: 1rem;
	line-height: 1.4;
}

.elementor-kit-37 .mc-filter .e-filter-item:hover {
	border-color: var(--e-global-color-03fc981);
}

.elementor-kit-37 .mc-filter .e-filter-item[aria-pressed="true"] {
	/* !important: die Element-CSS des Buttons (Hintergrund Global BG) ist spezifischer. */
	background-color: var(--e-global-color-03fc981) !important;
	border-color: var(--e-global-color-03fc981) !important;
	color: var(--e-global-color-f2ba8d3) !important;
}


/* Badges: Filter-Werte in Rezeptkarten und auf der Rezeptseite
***********************************************************/
/* Beitrags-Info-Widget mit der Klasse mc-badges. Jeder Eintrag wird zur
   Pille (Stil wie .highlight-container im Shop). Leere Filter blendet das
   Widget selbst aus. */
.mc-badges .elementor-post-info {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.mc-badges .elementor-post-info .elementor-inline-item {
	margin: 0 !important;
	padding: 2px 12px;
	border-radius: 100vw;
	background-color: color-mix(in srgb, var(--e-global-color-47a7e76) 30%, var(--e-global-color-f2ba8d3));
	color: var(--e-global-color-primary);
}

.mc-badges .elementor-post-info .elementor-inline-item::after {
	display: none;
}


/* Kacheln (Magazin-Startseite, Alle Rezepte)
***********************************************************/
.mc-kachel {
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mc-kachel:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 20px color-mix(in srgb, var(--e-global-color-accent) 18%, transparent);
}