/**
 * MaNa Chai – Frontend-Styles.
 *
 * Bewusst schlank: Farben, Typo, Abstände kommen aus theme.json.
 * Hier nur, was sich dort nicht ausdrücken lässt.
 */

/* Sanfter Fokus-Ring für Tastaturnutzer (Barrierefreiheit). */
:where(a, button, input, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* =========================================================================
 * MaNa Chai – Startseiten-Redesign (Hero, Header, Raster, Karten)
 * Farben/Typo kommen aus theme.json; hier nur, was sich dort nicht ausdrücken
 * lässt (fixierter Header, Overlay-Verhalten, Raster-Details).
 * ========================================================================= */

:root {
	--manachai-hdr-h: 84px;
	--manachai-olive-deep: #5c6330;
	--manachai-on-dark-dim: rgba(242, 236, 227, 0.72);
}

/* Footer immer am unteren Rand, auch wenn der Inhalt kürzer ist als der Viewport.
 * Der Header liegt fixiert außerhalb des Flusses – Flex-Spalte betrifft main + footer. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	/* Verhindert horizontales Scrollen durch 100vw-Vollbild-Elemente (Marquee). */
	overflow-x: clip;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

.wp-site-blocks > footer {
	flex-shrink: 0;
}

/* Anker-Sprünge nicht unter den fixierten Header schieben. */
[id] {
	scroll-margin-top: calc(var(--manachai-hdr-h) + 12px);
}

/* ---- Eyebrow (kleine Label-Zeile über Überschriften) ---- */
.manachai-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin: 0 0 0.6rem;
	color: #f2d9b6; /* warmes Gold – Standard für dunkle Flächen/Hero */
}

.manachai-eyebrow--dark {
	color: var(--manachai-olive-deep);
}

.manachai-eyebrow--amber {
	color: var(--wp--preset--color--primary);
}

/* ---- Header: fixiert, über dem Hero transparent, sonst dunkel ---- */
header.manachai-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	align-items: center;
	box-shadow: 0 10px 30px -24px rgba(0, 0, 0, 0.9);
	transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.25s ease;
}

.manachai-header__right {
	gap: clamp(14px, 2vw, 28px);
	align-items: center;
}

.manachai-header .wp-block-navigation {
	font-weight: 600;
	font-size: 0.95rem;
}

.manachai-header__icons {
	gap: 16px;
	align-items: center;
}

/* Nur auf der Startseite: über dem Hero transparent, bis gescrollt wird. */
body.home header.manachai-header.has-background:not(.is-scrolled) {
	background-color: transparent !important;
	box-shadow: none;
}

/* Inhalt der Unterseiten nicht unter den fixierten Header rutschen lassen. */
body:not(.home) .wp-site-blocks > main {
	padding-top: var(--manachai-hdr-h);
}

/* Startseite: Hero bündig oben – der Block-Gap-Abstand über <main> (der Header
 * liegt fixiert außerhalb des Flusses) würde sonst einen Streifen freilassen. */
body.home .wp-site-blocks > main {
	margin-top: 0;
}

/* Startseite: Vollbild-Sektionen bündig stapeln. Sonst legt das constrained-
 * Layout zwischen jeden Abschnitt einen Block-Gap (24px) und die cremefarbene
 * Grundfläche scheint als Streifen durch – am deutlichsten direkt unter dem Hero. */
body.home .entry-content > * {
	margin-block-start: 0;
}

/* ---- Hero ---- */
.manachai-hero h1 {
	text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}

.manachai-hero .wp-block-cover__inner-container {
	width: 100%;
	max-width: 1400px;
	margin-inline: auto;
	padding-inline: clamp(1.5rem, 5vw, 4rem);
	padding-bottom: clamp(2rem, 6vh, 5rem);
}

.manachai-hero .wp-block-cover__inner-container > .wp-block-group {
	max-width: 700px;
	margin-inline: 0;
	text-align: left;
}

/* Ghost-Button (heller Umriss auf dem Hero). */
.manachai-btn-ghost .wp-block-button__link {
	background-color: transparent;
	border: 1.5px solid rgba(255, 255, 255, 0.85);
	color: #fff;
}

.manachai-btn-ghost .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, 0.14);
}

/* ---- Feature-Raster (4 Spalten, mittig – kein leerer 5. Platz) ---- */
.wp-block-group.manachai-feature-grid {
	margin-top: 0.5rem;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 900px) {
	.wp-block-group.manachai-feature-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.wp-block-group.manachai-feature-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.manachai-feature img {
	margin-inline: auto;
}

/* ---- Werte-Band (Marquee: endlos laufende, helle Karten auf dunkler Fläche) ---- */
.manachai-marquee {
	position: relative;
	margin-top: clamp(2rem, 4vw, 3rem);
	/* Über die volle Breite ausbrechen (liegt sonst im contentSize-Container). */
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
	overflow: hidden;
	/* Weiche Kanten links/rechts, damit die Karten ein-/ausblenden. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.manachai-marquee__track {
	display: flex;
	width: max-content;
	animation: manachai-marquee-scroll 90s linear infinite;
}

/* Beim Überfahren/Fokussieren anhalten – zum Lesen. */
.manachai-marquee:hover .manachai-marquee__track,
.manachai-marquee:focus-within .manachai-marquee__track {
	animation-play-state: paused;
}

@keyframes manachai-marquee-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

.manachai-marquee .manachai-value {
	flex: 0 0 clamp(260px, 26vw, 320px);
	width: clamp(260px, 26vw, 320px);
	margin-right: 1.5rem;
	padding: clamp(1.75rem, 2.4vw, 2.5rem) 1.75rem;
	background: var(--wp--preset--color--paper);
	border-radius: 6px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}

.manachai-value__icon {
	width: 88px;
	height: 88px;
	object-fit: contain;
	margin-bottom: 0.25rem;
}

.manachai-value__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1.1;
	color: var(--wp--preset--color--secondary);
}

.manachai-value__text {
	margin: 0;
	font-size: 0.9rem;
	color: var(--wp--preset--color--contrast);
}

/* Ohne Bewegung: statisches, horizontal scrollbares Band ohne Duplikat. */
@media (prefers-reduced-motion: reduce) {
	.manachai-marquee {
		overflow-x: auto;
	}

	.manachai-marquee__track {
		animation: none;
	}

	.manachai-marquee .manachai-value[aria-hidden="true"] {
		display: none;
	}
}

/* ---- Split-Sektionen (Produkt / Über uns) ---- */
.manachai-split {
	align-items: center;
}

.manachai-split__media img {
	width: 100%;
	max-height: 600px;
	object-fit: cover;
}

.manachai-split__media--product img {
	max-height: 750px;
	object-position: top;
}

.manachai-ticklist {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.manachai-ticklist li {
	position: relative;
	padding-left: 1.9rem;
}

.manachai-ticklist li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
	color: var(--wp--preset--color--accent);
}

.manachai-price {
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--wp--preset--color--secondary);
	margin: 0;
}

.manachai-price span {
	font-weight: 500;
	font-size: 0.85rem;
	color: var(--wp--preset--color--contrast);
	opacity: 0.75;
}

.manachai-signature {
	font-family: var(--wp--preset--font-family--display);
	font-size: 2rem;
	line-height: 1;
	color: var(--manachai-olive-deep);
	margin: 0;
}

/* ---- Tea-Feature: Bild-Mosaik (2×2, gleichmäßig zugeschnitten) ---- */
.manachai-tea-gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
}

.manachai-tea-gallery__item {
	margin: 0;
	overflow: hidden;
	border-radius: 4px;
}

.manachai-tea-gallery__item img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.manachai-tea-gallery__item:hover img {
	transform: scale(1.04);
}

/* ---- Review-Karten ---- */
.manachai-review-grid {
	margin-top: 1rem;
	gap: clamp(1rem, 2vw, 1.75rem);
	align-items: stretch;
}

.manachai-review {
	background: #fff;
	border: 1px solid rgba(33, 39, 27, 0.12);
	border-radius: 4px;
	padding: clamp(1.5rem, 2.4vw, 2.2rem);
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	text-align: left;
}

.manachai-review__stars {
	color: var(--wp--preset--color--primary);
	letter-spacing: 0.12em;
	margin: 0;
}

.manachai-review__quote {
	margin: 0;
}

.manachai-review__by {
	font-weight: 700;
	color: var(--wp--preset--color--secondary);
	margin: auto 0 0;
}

.manachai-review__badge {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 -0.4rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: rgba(33, 39, 27, 0.55);
}

.manachai-review__badge-icon {
	flex: none;
}

.manachai-review__link {
	margin: -0.4rem 0 0;
}

.manachai-review__link a {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.manachai-review__link a:hover {
	color: var(--wp--preset--color--secondary);
}

/* Bewertungstext: JavaScript kürzt lange Texte so, dass sie inkl. „ … Mehr“
 * exakt in 5 Zeilen passen (siehe Inline-Skript in functions.php).
 * -webkit-line-clamp hier dient nur als CSS-Fallback, falls JavaScript
 * nicht verfügbar ist. */
.manachai-review__quote {
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.manachai-review.is-expanded .manachai-review__quote {
	display: block;
	overflow: visible;
}

/* "Mehr"/"Weniger" sitzt jetzt inline am Ende des (gekürzten) Bewertungs-
 * texts, nicht mehr als eigene Zeile darunter. Gleiche Schriftfarbe wie der
 * Text – die Unterstreichung allein zeigt, dass es klickbar ist. */
.manachai-review__toggle {
	background: none;
	border: none;
	padding: 0;
	margin-left: 0.25em;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
	cursor: pointer;
	font: inherit;
	white-space: nowrap;
}

.manachai-review__toggle:hover {
	opacity: 0.7;
}

/* Alle Kundenstimmen-Kacheln bekommen dieselbe Mindesthöhe wie Astrids
 * Bewertung (353px) – seit "Mehr"/"Weniger" inline im Text sitzt statt in
 * einer eigenen Zeile, braucht auch eine gekürzte Kachel nicht mehr Platz.
 * Anders als eine feste Höhe mit "overflow: hidden" schneidet eine
 * Mindesthöhe nie Inhalte ab: braucht eine Kachel dennoch mehr Platz (z. B.
 * bei schmaleren Bildschirmbreiten oder aufgeklapptem Text), wächst sie
 * einfach darüber hinaus, statt Inhalte wie den "Auf Google
 * ansehen"-Link zu verstecken. */
.manachai-review {
	min-height: 353px;
}

/* ---- Footer (dunkel) ---- */
.manachai-footer a:hover {
	color: var(--wp--preset--color--primary);
}

/* Bilder standardmäßig responsiv. */
img {
	max-width: 100%;
	height: auto;
}

/* Info-Zeilen (Produktbeschreibung): Summary schlägt statt Standard-Dreieck ein (i)-Icon vor. */
.manachai-info-rows details.wp-block-details {
	border-top: 1px solid var(--wp--preset--color--accent);
	padding: 0.75rem 0;
}

.manachai-info-rows details.wp-block-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.manachai-info-rows details.wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.manachai-info-rows details.wp-block-details > summary::after {
	content: "i";
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid currentColor;
	border-radius: 9999px;
	font-size: 0.75rem;
	font-style: italic;
}

/* Warenkorb-Formular: Mengenfeld und Button nebeneinander statt gestapelt. */
.wp-block-add-to-cart-form form.cart {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

/*
 * Header-Konto-Icon: Der Block gibt dem SVG standardmäßig nur die Klasse
 * "icon" statt "wc-block-customer-account__account-icon", auf die
 * WooCommerce selbst seine Größen-Regel schreibt – ohne eigene Größe bleibt
 * das SVG dadurch faktisch unsichtbar (kein width/height, kein CSS-Treffer).
 */
.wc-block-customer-account__link svg.icon {
	width: 1.5em;
	height: 1.5em;
	flex-shrink: 0;
}

/*
 * Das Konto-Icon steckt in einem <a>, daher greift theme.json's globale
 * Link-Farbe (Primary/Orange) und schlägt WooCommerce's eigenes
 * "color: inherit" (per :where() ohne Spezifität geschrieben). Diese Regel
 * hat normale Spezifität und gewinnt zuverlässig unabhängig von der
 * Reihenfolge im Stylesheet.
 */
.wp-block-woocommerce-customer-account .wc-block-customer-account__link {
	color: var(--wp--preset--color--base);
}

/* Shop-Raster: mehr Luft zwischen den Produkten, Bilder etwas kleiner/schlanker. */
.wc-block-product-template.is-flex-container {
	gap: 3rem 2rem;
}

.wc-block-product-template .wc-block-components-product-image {
	max-width: 380px;
	margin-inline: auto;
}

/* Footer: Social-Icons neben dem "Folge uns"-Text. */
.manachai-social-links {
	gap: 0.5rem;
}

.manachai-social-links__link {
	display: inline-flex;
	color: inherit;
}

/* "Ähnliche Produkte" auf der Produktseite: mittig statt linksbündig. */
[data-collection="woocommerce/product-collection/related"] {
	text-align: center;
}

[data-collection="woocommerce/product-collection/related"] .wc-block-product-template.is-flex-container {
	justify-content: center;
	gap: 3rem 4rem;
}

.manachai-social-links__link:hover {
	color: var(--wp--preset--color--primary);
}

/* B2B-Antragsformular (functions.php, Shortcode manachai_b2b_antrag).
   Nur was theme.json nicht ausdrücken kann: Feld-Optik und Fehlerhinweise. */
.manachai-b2b-antrag {
	max-width: 34rem;
}

.manachai-b2b-antrag__form p {
	margin-block: var(--wp--preset--spacing--30);
}

.manachai-b2b-antrag__form label {
	display: block;
	margin-block-end: 0.35rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.manachai-b2b-antrag__form input,
.manachai-b2b-antrag__form textarea {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 25%, transparent);
	border-radius: 3px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
}

.manachai-b2b-antrag__form textarea {
	resize: vertical;
}

.manachai-b2b-antrag__fehler,
.manachai-b2b-antrag__hinweis {
	padding: 0.75rem 1rem;
	border-inline-start: 3px solid var(--wp--preset--color--primary);
	background: var(--wp--preset--color--surface);
}