/* Kitchencouple Theme — Custom-Pattern-Styles (Koch-Choreographie, Zutaten-Checkliste) */
/* Uebersetzt aus design-system/components/koch-choreographie.html und ingredients-checklist.html */

/* Geerbte Twenty-Twenty-Five-Regeln greifen auf Farb-Slugs zu, die unsere eigene Palette
   nicht kennt (base, accent-4, accent-6) — unsere theme.json ERSETZT die Eltern-Palette,
   die Eltern-STYLES bleiben aber gemergt. Die Verweise liefen dadurch ins Leere; sichtbarste
   Folge: der Fokus-Rahmen auf Buttons (outline-color: accent-4) fiel auf currentColor
   zurueck und war auf hellem Grund praktisch unsichtbar (WCAG 2.4.7). Auf eigene Tokens
   mappen statt die Slugs in die Palette aufzunehmen (die soll im Editor sauber bleiben).
   Gefunden bei den Kontrast-Fixes 26.07.2026 (Backlog R10). */
:root {
	--wp--preset--color--base: var(--wp--preset--color--surface);
	--wp--preset--color--accent-4: var(--wp--preset--color--text-muted);
	--wp--preset--color--accent-6: var(--wp--preset--color--text-muted);
}

/* Logo-Wortmarke (aus design-system/components/header-nav.html uebernommen) */
.kc-logo-wordmark {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--xl);
	color: var(--wp--preset--color--text);
	text-decoration: none;
}
.kc-logo-accent { color: var(--wp--preset--color--primary-dark); }

/* Footer: helle Chip-Flaeche fuer das Logo (nicht fuer dunklen Hintergrund gestaltet) */
.kc-footer-logo { display: inline-block; background: var(--wp--preset--color--surface); padding: 8px 14px; border-radius: var(--wp--custom--radius--sm); margin-bottom: 12px; }
.kc-footer-logo img { display: block; height: 40px; width: auto; }

/* Footer: Ueberschriften/Links explizit erzwingen, da vererbte Theme-Farben (Twenty Twenty-Five)
   sonst mit hoeherer Spezifitaet gewinnen und Text auf dunklem Grund unlesbar machen. */
.kc-footer h4 { color: #FFFFFF !important; }
.kc-footer a { color: var(--wp--preset--color--ink-muted) !important; text-decoration: none; }
.kc-footer a:hover { color: #FFFFFF !important; }
.kc-footer-sep { border: none !important; border-top: 1px solid rgba(255,255,255,0.12) !important; height: 0 !important; }

/* Footer: unterste Zeile (Copyright/Sitemap-Links) — WordPress generiert die passende
   "justify-content: space-between"-Regel fuer den Flex-Layout-Block normalerweise
   automatisch pro Seite (an eine Container-Hash-Klasse gebunden). Auf Seiten mit
   klassischem PHP-Template (page-rezepte.php) wird dieser Mechanismus nicht zuverlaessig
   ausgeloest, siehe Kommentar bei .kc-header nav weiter unten — hart kodierte Sicherung. */
.kc-footer-bottom { justify-content: space-between; }

/* Header: Navigation rechtsbuendig + Sticky (Sebastian, 26.07.2026 — gilt site-weit,
   da .kc-header das gemeinsame Template-Teil ist). Die rechtsbuendige Ausrichtung kommt
   normalerweise aus einer von WordPress dynamisch pro Seite generierten Container-Klasse
   (".wp-container-core-navigation-is-layout-*"), die an die Block-Template-Rendering-Pipeline
   gebunden ist. Auf Seiten mit klassischem PHP-Template (z. B. page-rezepte.php, das
   block_template_part() statt der vollen Block-Template-Canvas nutzt) wird diese Regel
   nicht zuverlaessig erzeugt — hart kodierte Sicherung, die auf allen Seiten identisch wirkt
   und daher risikofrei auch auf normal gerenderten Seiten mitlaeuft.
   ⚠️ Nachtrag (26.07.2026): Die erste Version dieser Regel behob nur die Ausrichtung
   INNERHALB der Navigation — das eigentliche Problem war, dass .kc-header selbst (der
   AEUSSERE Flex-Container mit Logo + Navigation als Kindern) seine eigene dynamische
   "justify-content: space-between"-Regel (gebunden an eine eigene Container-Hash-Klasse,
   z. B. .wp-container-core-group-is-layout-f237a636) ebenso verlor. Ohne die faellt die
   Navigation direkt neben das Logo statt an den rechten Rand, unabhaengig davon, wie ihre
   eigenen Links intern ausgerichtet sind. Beide Ebenen jetzt hart kodiert absichern. */
.kc-header { justify-content: space-between; position: sticky; top: 0; z-index: 20; }
.kc-header .wp-block-navigation { justify-content: flex-end; }

/* Home-Icon + Such-Icon in der Navigation (Sebastian, 26.07.2026).
   Beide nutzen das echte Custom Icon Set (kc_custom_icon_set, Avada-Erbe, liegt
   theme-unabhaengig in wp-content/uploads — noch nicht ins neue Theme eingebunden
   gewesen, siehe Backlog). Nur die 2 benoetigten Glyphen referenziert, nicht das
   ganze 23-KB-Sheet mit hunderten ungenutzten Icons geladen. */
.kc-header-right { align-items: center; gap: 10px; line-height: 1; }
.kc-header-right .wp-block-navigation { line-height: 1; }
.kc-header-right .wp-block-navigation .wp-block-navigation-item { display: flex; align-items: center; }

@font-face {
	font-family: 'kc-custom-icons';
	src: url('/wp-content/uploads/fusion-icons/kc_custom_icon_set/fonts%5Cicomoon_custom_set.woff') format('woff');
	font-weight: normal; font-style: normal; font-display: block;
}
.kc-home-link .wp-block-home-link__content::before,
.kc-header-search .wp-block-search__button::before {
	font-family: 'kc-custom-icons' !important;
	font-style: normal; font-weight: normal; line-height: 1; speak: never;
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* Home-Link: WordPress' core/home-link zeigt normalerweise Text — hier durch das
   Haus-Icon ersetzt. Text bleibt fuer Screenreader erhalten (text-indent statt
   font-size:0 zum Verstecken — font-size wurde von der weiter unten stehenden
   ".kc-header .wp-block-navigation a { font-size: ... !important }"-Regel
   ueberschrieben, wodurch der Text sichtbar blieb und in "Rezepte" hineinlief;
   text-indent ist von dieser Regel nicht betroffen). */
.kc-home-link .wp-block-home-link__content {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px;
	text-indent: -9999px; overflow: hidden; white-space: nowrap;
}
.kc-home-link .wp-block-home-link__content::before {
	content: "\e9fd"; /* custom_Set-home-solid */
	position: absolute; left: 0; top: 50%; transform: translateY(-50%);
	text-indent: 0; font-size: 17px; color: inherit;
}

/* Such-Icon: WordPress-Standardsuche (?s=...), Core-Search-Block im "nur Button"-Modus —
   Klick klappt das Eingabefeld auf (Core-eigenes Verhalten, kein eigenes JS noetig).
   Core-eigenes SVG-Icon ausgeblendet, Custom-Icon-Set-Glyphe an gleicher Bildschirmgroesse
   wie die Navigations-Schrift (700 Gewicht) statt der duennen Standard-Strichstaerke. */
.kc-header-search { display: flex; align-items: center; }
.kc-header-search .wp-block-search__button {
	background: transparent; border: none; color: var(--wp--preset--color--text);
	width: 38px; height: 38px; border-radius: 50%; margin-left: 0 !important;
	display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.kc-header-search .wp-block-search__button:hover { background: var(--wp--preset--color--bg); }
.kc-header-search .wp-block-search__button svg { display: none; }
.kc-header-search .wp-block-search__button::before {
	content: "\ea5d"; /* custom_Set-search-solid */
	font-size: 17px; color: inherit; line-height: 1;
}
/* WP-Core-eigener Rahmen/Hintergrund um das aufgeklappte Eingabefeld zuruecksetzen —
   sorgte fuer eine unerwartete ovale Flaeche hinter dem Icon (Sebastian, 26.07.2026). */
.kc-header-search.wp-block-search__button-only .wp-block-search__inside-wrapper {
	border: none; background: none; box-shadow: none;
}
.kc-header-search .wp-block-search__input {
	border-radius: var(--wp--custom--radius--sm); border-color: var(--wp--preset--color--border);
}

/* Mobiles Menue-Icon: WordPress-Core liefert standardmaessig ein 2-Balken-Symbol —
   auf das klassische 3-Balken-Symbol umgestellt (Sebastian, 26.07.2026), ebenfalls
   aus dem Custom Icon Set fuer einheitliche Optik. Button-Rahmen fehlte komplett
   (nur das nackte 17x20px-Glyph, kein Kreis-Button wie im Design System) — wirkte
   neben dem Such-Icon gedraengt/kaputt (Sebastian, 26.07.2026, "Mobile Header
   Dropdown ist kaputt"). Jetzt analog header-nav.html als runder Button (38px,
   Rahmen, Flaeche). NICHT die Breite der Suchform (.kc-header-search) anfassen —
   das blockiert das Aufklappen des Eingabefelds beim Klick (Regression, sofort
   zurueckgenommen, 26.07.2026). */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	width: 38px; height: 38px; border-radius: 50%;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface);
	display: flex; align-items: center; justify-content: center;
	padding: 0; flex-shrink: 0;
}
.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-close:hover { background: var(--wp--preset--color--bg); }
.wp-block-navigation__responsive-container-open svg { display: none; }
.wp-block-navigation__responsive-container-open::before {
	content: "\ea66"; /* custom_Set-bars-solid */
	font-family: 'kc-custom-icons' !important;
	font-style: normal; font-weight: normal; line-height: 1; speak: never;
	font-size: 20px; color: inherit;
}
.wp-block-navigation__responsive-container-close svg { width: 18px; height: 18px; }

/* Header: Navigation-Schrift explizit erzwingen, da Twenty-Twenty-Five-Wurzelwerte
   (Gewicht 300, 20px, negativer Buchstabenabstand) sonst durchschlagen. */
.kc-header .wp-block-navigation a {
	font-family: var(--wp--preset--font-family--body) !important;
	font-weight: 700 !important;
	font-size: var(--wp--preset--font-size--sm) !important;
	letter-spacing: normal !important;
}

/* Kleine, sichtbare Abschnitts-Label ("Zutaten", "Zubereitung") — deutlicher als Fliesstext,
   aber bewusst kleiner als die grosse Rezept-Ueberschrift darueber. */
.kc-section-label {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--text);
	margin: 0 0 14px;
}

/* Koch1/Koch2-Choreographie — finale Version (25.07.2026): gleichzeitige Schritte
   in einer gemeinsamen Karte statt zwei nebeneinanderstehender Spalten (die urspruengliche
   Spalten-Variante brach auf Mobil um, weil eine horizontale Verbindungslinie beim
   Umbruch auf eine Spalte keinen Sinn mehr ergibt). Funktioniert bei jeder Breite,
   kein Media-Query noetig. */
.kc-two-cooks-note { display: flex; align-items: center; gap: 8px; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--text-muted); font-style: italic; margin: 4px 0 20px; }
.kc-two-cooks-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.kc-two-cooks-dot.c1 { background: var(--wp--preset--color--terracotta); }
.kc-two-cooks-dot.c2 { background: var(--wp--preset--color--sage); margin-left: -4px; }

.kc-pair-card { border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--md); overflow: hidden; margin-bottom: 4px; }
.kc-pair-half { padding: 12px 16px; font-size: var(--wp--preset--font-size--sm); line-height: 1.5; border-left: 4px solid transparent; margin: 0; }
.kc-pair-half-c1 { background: var(--wp--preset--color--terracotta-light); border-left-color: var(--wp--preset--color--terracotta); }
.kc-pair-half-c2 { background: var(--wp--preset--color--sage-light); border-left-color: var(--wp--preset--color--sage); }
.kc-pair-half-label { display: block; font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
/* Label-TEXT nutzt die dunklen Varianten (WCAG AA bei 10px, Backlog R10) — die
   farbigen Rahmenlinien darueber bleiben bewusst in der Originalfarbe (Grafik, 3:1 erfuellt). */
.kc-pair-half-c1 .kc-pair-half-label { color: var(--wp--preset--color--terracotta-dark); }
.kc-pair-half-c2 .kc-pair-half-label { color: var(--wp--preset--color--sage-dark); }
.kc-pair-sync { display: flex; align-items: center; gap: 8px; padding: 4px 16px; font-size: 10px; font-weight: 700; color: var(--wp--preset--color--text-muted); background: var(--wp--preset--color--bg); margin: 0; text-transform: uppercase; letter-spacing: .04em; }

.kc-solo-card { border-radius: var(--wp--custom--radius--md); padding: 12px 16px; font-size: var(--wp--preset--font-size--sm); border-left: 4px solid var(--wp--preset--color--terracotta); background: var(--wp--preset--color--terracotta-light); margin: 0 0 4px; }
.kc-solo-card .kc-pair-half-label { color: var(--wp--preset--color--terracotta-dark); }

/* Wort "Übergabe" in der dunklen Variante (AA), die Linien links/rechts bleiben golden. */
.kc-handoff-divider { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-size: 11px; font-weight: 700; color: var(--wp--preset--color--handoff-dark); text-align: center; text-transform: uppercase; letter-spacing: .04em; }
.kc-handoff-divider::before, .kc-handoff-divider::after { content: ""; flex: 1; height: 1px; background: var(--wp--preset--color--handoff); opacity: .35; }

.kc-panel { }
.kc-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.kc-checklist li {
	position: relative;
	padding: 9px 4px 9px 32px;
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--text);
}
.kc-checklist li::before {
	content: "";
	position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
	width: 20px; height: 20px;
	border-radius: 6px;
	border: 2px solid var(--wp--preset--color--primary-dark);
}

/* Zwei-Koeche-Hinweis-Pill (Rezept-Karten, Meta-Zeile) */
.kc-two-cooks-pill {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	color: var(--wp--preset--color--text-muted);
}

/* "Aehnliche Rezepte" am Ende eines Rezept-Posts — echte Bild+Titel-Karten statt
   nackter Links (Sebastian, 26.07.2026: "die aehnlichen Rezepte sind kaputt"). */
.kc-related-grid { display: grid; gap: 20px; }
.kc-related-card {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
	height: 100%; display: flex; flex-direction: column;
	transition: transform .15s ease, box-shadow .15s ease;
}
.kc-related-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(43,40,37,.08); }
.kc-related-card .wp-block-post-featured-image { margin: 0; }
.kc-related-card .wp-block-post-featured-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kc-related-card .wp-block-post-title { padding: 0 12px 12px; margin-top: 10px !important; flex: 1; display: flex; align-items: center; }
.kc-related-card .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--text); }

/* Suchergebnisse: Titel + Auszug statt Volltext (Sebastian, 26.07.2026) — eigenes
   search.html im Child Theme, TT25 lieferte sonst sein eigenes Volltext-Pattern. */
.kc-search-result { padding: 18px 0; border-bottom: 1px solid var(--wp--preset--color--border); gap: 16px; align-items: flex-start; }
.kc-search-result .wp-block-post-featured-image { flex-shrink: 0; margin: 0; width: 120px; height: 90px; }
.kc-search-result .wp-block-post-featured-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kc-search-result .wp-block-post-excerpt { color: var(--wp--preset--color--text-muted); margin-top: 6px; }

/* "Zum Weiterlesen": Fliesstext war kaum lesbar (vermutlich Fusion-Builder-Plugin-CSS,
   das weiterhin site-weit laedt, setzt eine gedaempfte Listentext-Farbe) — hart erzwungen
   auf die normale Textfarbe (Sebastian, 26.07.2026). Nur die Links selbst behalten die
   Link-Farbe. */
.kc-further-reading li { color: var(--wp--preset--color--text); }

/* "Zum Rezept springen" (Design-Entscheidung Variante 3, 26.07.2026): Info-Leiste direkt
   nach dem ersten Absatz, verbindet Sprung-Link mit den ohnehin vorhandenen Meta-Infos
   (z. B. "Fuer X Personen"), statt ein isoliertes CTA-Element einzufuehren. Wird manuell
   pro Post waehrend der Migration eingefuegt (patterns/zum-rezept-springen.php), nicht
   site-weit im Template — nur bei Posts mit echter Rezept-Sektion. */
.kc-jump-bar { margin-bottom: 8px; }
.kc-jump-bar-meta { margin: 0 !important; }
.kc-jump-bar-link { margin: 0 !important; }
.kc-jump-bar-link a { font-weight: 700; color: var(--wp--preset--color--primary-deep); text-decoration: none; }
.kc-jump-bar-link a:hover { text-decoration: underline; }
html { scroll-behavior: smooth; }

/* ⚠️ Sticky-Header-Fix (26.07.2026): Fusion-Builder (Avada-Plugin, bleibt bis Migrations-
   ende aktiv) injiziert eigenes "Critical CSS" mit body{overflow-x:hidden;overflow-y:scroll}.
   Das macht <body> selbst zum Scroll-Container statt <html>/Viewport — dadurch klebt
   position:sticky auf .kc-header nicht mehr sichtbar, sondern scrollt normal mit hoch
   (Sebastian, 26.07.2026: "Header verschwindet, scrollt einfach mit raus, bleibt weg").
   Klassischer Sticky-Killer, hier durch Fremd-CSS ausgeloest, nicht durch eigenes Theme.
   Fix: Horizontal-Scroll-Sperre auf html verlagern (gleiche Schutzwirkung), body auf
   normales Fliessverhalten zuruecksetzen.
   Avadas Critical CSS wird pro Template-Typ NEU generiert (Homepage/Single/Page je
   eigenes Bundle) — auf /rezepte (klassisches PHP-Template) reichte body{...} mit
   !important, auf Homepage/Rezeptseiten (Block-Templates) nicht: Avadas eigene Regel
   traegt dort offenbar ebenfalls !important, und bei zwei !important-Regeln entscheidet
   nach Spezifitaet, nicht nach Ladereihenfolge. Deshalb hier bewusst per Klasse auf
   HOEHERE Spezifitaet als Avadas blankes "body{...}" gebracht (0,0,1,1 statt 0,0,0,1) —
   gewinnt garantiert, unabhaengig von Reihenfolge oder ob Avada !important nutzt. */
body.wp-child-theme-kitchencouple { overflow-x: visible !important; overflow-y: visible !important; }
html { overflow-x: hidden; }