/*
Theme Name: Feierfloh
Description: Block-Theme für feierfloh.de. Hell, warm, werkzeugorientiert: Planer, Spiele-Generator, Mitgebsel-Rechner, Mottos, Vergleiche. Kein Blog-Layout.
Author: Bianca
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.2
Text Domain: feierfloh
*/

/*
 * Farben stehen in theme.json (Palette). Hier nur Layout von Kopf, Navigation
 * und Fuß. Diese Regeln lagen im Ursprungsprojekt in den Global Styles der
 * Datenbank — hier stehen sie in der Datei, damit das Theme ohne Nacharbeit
 * im Site-Editor vollständig aussieht.
 */

body { -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
.wp-block-post-content table { width: 100%; }

/* Seitenrand: ohne ihn klebt auf dem Handy alles am Displayrand. */
.wp-site-blocks { padding-inline: 16px; }
@media (min-width: 1000px) { .wp-site-blocks { padding-inline: 24px; } }

/* ---- Kopf ------------------------------------------------------------- */

.ff-header {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-block: .6rem;
}

.ff-bar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; position: relative; }

/* Textmarke, solange es kein Logo gibt. */
.ff-brand {
	margin-right: auto;
	font-weight: 600;
	font-size: 1.15rem;
	letter-spacing: .01em;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}
.ff-brand:hover { color: var(--wp--preset--color--accent-strong); }

/* Wortmarke mit Kerzen-Symbol (drei Kerzen auf dem Kuchen) (Inline-SVG, erbt die Textfarbe). Für ein späteres Bildlogo: <img class="ff-logo"> in .ff-brand setzen. */
.ff-brand { display: inline-flex; align-items: center; gap: .45rem; }
.ff-brand__mark { color: var(--wp--preset--color--accent); flex: 0 0 auto; }
.ff-logo { display: block; width: 140px; height: auto; }
@media (min-width: 900px) { .ff-logo { width: 180px; } }

/* ---- Navigation (Burger ohne JavaScript, per Checkbox) ----------------- */

.ff-nav__toggle { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }

.ff-nav__burger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 10px;
	cursor: pointer;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	box-sizing: border-box;
}
.ff-nav__burger span { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s, opacity .2s; }
.ff-nav__toggle:focus-visible + .ff-nav__burger { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }
.ff-nav__toggle:checked + .ff-nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ff-nav__toggle:checked + .ff-nav__burger span:nth-child(2) { opacity: 0; }
.ff-nav__toggle:checked + .ff-nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.ff-nav { flex-basis: 100%; display: none; }
.ff-nav__toggle:checked ~ .ff-nav { display: block; }

.ff-nav__list, .ff-nav__sub { list-style: none; margin: 0; padding: 0; }
.ff-nav__list > li { border-top: 1px solid var(--wp--preset--color--line); }
.ff-nav__list a, .ff-nav__parent { display: block; padding: .7rem .2rem; text-decoration: none; color: inherit; font-weight: 600; }
.ff-nav__list a:hover { color: var(--wp--preset--color--accent-strong); }
.ff-nav__parent { color: var(--wp--preset--color--muted); cursor: default; }
.ff-nav__sub a { padding-left: 1rem; font-weight: 400; }
.ff-nav__subtoggle { position: absolute; opacity: 0; pointer-events: none; }
.ff-nav__parent { cursor: pointer; }

@media (min-width: 1100px) {
	.ff-nav__burger { display: none; }
	.ff-nav { display: block; flex-basis: auto; }
	.ff-nav__list { display: flex; gap: 1.1rem; align-items: center; }
	.ff-nav__list > li { border-top: 0; position: relative; }
	.ff-nav__list a, .ff-nav__parent { padding: .4rem 0; }
	.ff-nav__parent::after { content: " \25BE"; font-size: .8em; }
	.ff-nav__sub {
		position: absolute;
		left: -.8rem;
		top: 100%;
		min-width: 230px;
		background: var(--wp--preset--color--surface);
		border: 1px solid var(--wp--preset--color--line);
		border-radius: 8px;
		padding: .3rem 0;
		box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
		z-index: 100; /* sonst liegt das Untermenü unter dem Inhalt (Feierteufel-Fehler) */
		opacity: 0;
		visibility: hidden;
		transition: opacity .15s;
	}
	.ff-nav__has-sub:hover .ff-nav__sub,
	.ff-nav__has-sub:focus-within .ff-nav__sub,
	.ff-nav__subtoggle:checked ~ .ff-nav__sub { opacity: 1; visibility: visible; }
	.ff-nav__sub a { padding: .5rem .9rem; }
	.ff-nav__sub a:hover { background: var(--wp--preset--color--soft); }
}

/* ---- Fuß -------------------------------------------------------------- */

.ff-footer {
	border-top: 1px solid var(--wp--preset--color--line);
	margin-top: 3rem;
	padding: 1.6rem 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}
.ff-footer-nav { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .85rem; }
.ff-footer-nav a { color: inherit; }

.ff-meta {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-bottom: 0.7rem;
}

/* Tabellen: Modellname ist der Hauptlink, „Preis prüfen" deutlich als Knopf (Farbe Himbeere). */
.ff-table .ff-table__name { display: block; font-weight: 600; color: var(--ff-accent-text, #96163b); text-decoration: underline; text-underline-offset: 2px; }
.ff-table .ff-table__name:hover, .ff-table .ff-table__name:focus { text-decoration-thickness: 2px; }
.ff-table .ff-table__go { display: inline-block; margin-top: 0.35rem; padding: 0.25rem 0.55rem; border-radius: 4px; background: var(--ff-accent-text, #96163b); color: #fff; font-size: 0.8rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ff-table .ff-table__go:hover, .ff-table .ff-table__go:focus { background: var(--ff-ink, #2b1f33); color: #fff; }
.ff-box__title a { color: inherit; text-decoration: none; }
.ff-box__title a:hover, .ff-box__title a:focus { text-decoration: underline; }

/* ---- Feierfloh-Eigenheiten ------------------------------------------- */

/* Überschriften und Wortmarke in einer runden Systemschrift: freundlich, ohne Webfont-Download. */
.ff-brand span { font-family: var(--wp--preset--font-family--rund); font-size: 1.3rem; font-weight: 700; letter-spacing: -.005em; }
.ff-brand span b { color: var(--wp--preset--color--accent); font-weight: 700; }
h1, h2, h3, .wp-block-post-title { font-family: var(--wp--preset--font-family--rund); letter-spacing: -.005em; }

/* Kerzenreihe unter der H1 — dasselbe Motiv wie im Logo: Kerzen in Akzent, Flamme, Aubergine. */
.wp-block-post-title { position: relative; padding-bottom: .9rem; }
.wp-block-post-title::after {
	content: "";
	position: absolute; left: 0; bottom: 0;
	width: 6.6rem; height: 10px;
	background:
		linear-gradient(90deg, var(--wp--preset--color--accent) 0 4px, transparent 4px 14px, var(--wp--preset--color--flamme) 14px 18px, transparent 18px 28px, var(--wp--preset--color--ink) 28px 32px, transparent 32px) 0 0 / 42px 10px repeat-x;
	border-radius: 2px;
}

/* Einstieg auf der Startseite: etwas größer, mit Flammenstrich links. */
.ff-hero { font-size: 1.12rem; line-height: 1.6; border-left: 4px solid var(--wp--preset--color--flamme); padding-left: 1rem; }