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

/*
 * 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 ------------------------------------------------------------- */

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

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

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

/* Wortmarke mit Boxhandschuh (Inline-SVG, Farben aus der Palette). Der Kommentar nannte bis zum 05.11.2026 noch das Kerzen-Symbol des Ursprungsprojekts; das Zeichen selbst war schon ersetzt. Für ein späteres Bildlogo: <img class="hb-logo"> in .hb-brand setzen. */
.hb-brand { display: inline-flex; align-items: center; gap: .45rem; }
.hb-brand__mark { color: var(--wp--preset--color--accent); flex: 0 0 auto; }
.hb-logo { display: block; width: 140px; height: auto; }
@media (min-width: 900px) { .hb-logo { width: 180px; } }

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

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

.hb-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;
}
.hb-nav__burger span { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s, opacity .2s; }
.hb-nav__toggle:focus-visible + .hb-nav__burger { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }
.hb-nav__toggle:checked + .hb-nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hb-nav__toggle:checked + .hb-nav__burger span:nth-child(2) { opacity: 0; }
.hb-nav__toggle:checked + .hb-nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

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

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

@media (min-width: 1100px) {
	.hb-nav__burger { display: none; }
	.hb-nav { display: block; flex-basis: auto; }
	.hb-nav__list { display: flex; gap: 1.1rem; align-items: center; }
	.hb-nav__list > li { border-top: 0; position: relative; }
	.hb-nav__list a, .hb-nav__parent { padding: .4rem 0; }
	.hb-nav__parent::after { content: " \25BE"; font-size: .8em; }
	.hb-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;
	}
	.hb-nav__has-sub:hover .hb-nav__sub,
	.hb-nav__has-sub:focus-within .hb-nav__sub,
	.hb-nav__subtoggle:checked ~ .hb-nav__sub { opacity: 1; visibility: visible; }
	.hb-nav__sub a { padding: .5rem .9rem; }
	.hb-nav__sub a:hover { background: var(--wp--preset--color--soft); }
}

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

.hb-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);
}
.hb-footer-nav { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .85rem; }
.hb-footer-nav a { color: inherit; }

.hb-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 Grasgrün). */
.hb-table .hb-table__name { display: block; font-weight: 600; color: var(--hb-accent-text, #6a0f12); text-decoration: underline; text-underline-offset: 2px; }
.hb-table .hb-table__name:hover, .hb-table .hb-table__name:focus { text-decoration-thickness: 2px; }
.hb-table .hb-table__go { display: inline-block; margin-top: 0.35rem; padding: 0.25rem 0.55rem; border-radius: 4px; background: var(--hb-accent-text, #6a0f12); color: #fff; font-size: 0.8rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.hb-table .hb-table__go:hover, .hb-table .hb-table__go:focus { background: var(--hb-ink, #1d2b22); color: #fff; }
.hb-box__title a { color: inherit; text-decoration: none; }
.hb-box__title a:hover, .hb-box__title a:focus { text-decoration: underline; }

/* ---- Home-Boxing-Eigenheiten ------------------------------------------- */

/* Überschriften und Wortmarke in einer runden Systemschrift: freundlich, ohne Webfont-Download. */
.hb-brand span { font-family: var(--wp--preset--font-family--rund); font-size: 1.3rem; font-weight: 700; letter-spacing: -.005em; }
.hb-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; }

/* Strich unter der H1: ein Balken in Oxblood mit angesetztem Stueck in Stahl.
   Hier lag bis zum 05.11.2026 das vierfarbige Konfetti aus dem Ursprungsprojekt. Für
   .hb-hero war der Verzicht darauf schon entschieden, an der Überschrift war er nur
   nicht nachgezogen. Zwei Flächen statt eines Inline-SVG: nichts zu laden, keine
   Farbe außerhalb der Palette, und bei dunkler Darstellung bleibt es lesbar. */
.wp-block-post-title, .wp-block-query-title { position: relative; padding-bottom: 1rem; }
.wp-block-post-title::after, .wp-block-query-title::after {
	content: "";
	position: absolute; left: 0; bottom: 0;
	width: 4.5rem; height: 4px; border-radius: 2px;
	background: linear-gradient(to right,
		var(--wp--preset--color--accent, #8e1519) 0 2.6rem,
		var(--wp--preset--color--stahl, #3c4650) 2.6rem 100%);
}

/* Einstieg auf der Startseite: etwas größer, mit Balken links. */
/* Ein durchgehender Balken statt des Vierfarbverlaufs aus dem Ursprungsprojekt.
   Konfettifarben gehören auf eine Kindergeburtstagsseite, nicht hierher. */
.hb-hero { font-size: 1.12rem; line-height: 1.6; border-left: 4px solid var(--wp--preset--color--accent, #8e1519); padding-left: 1rem; }