/*
Theme Name: Klebegeister
Description: Block-Theme für klebegeister.de. Hell, papierfarben, werkzeugorientiert: Material-Finder, Rezept-Rechner, Bastelkiste, Projektdatenbank, 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: klebegeister
*/

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

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

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

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

/* Wortmarke mit Klebegeist (Inline-SVG, Körper erbt die Akzentfarbe, Klecks in Gelb). Für ein späteres Bildlogo: <img class="kg-logo"> in .kg-brand setzen. */
.kg-brand { display: inline-flex; align-items: center; gap: .45rem; }
.kg-brand__mark { color: var(--wp--preset--color--accent); flex: 0 0 auto; }
.kg-logo { display: block; width: 140px; height: auto; }
@media (min-width: 900px) { .kg-logo { width: 180px; } }

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

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

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

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

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

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

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

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

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

/* ---- Klebegeister-Eigenheiten ------------------------------------------- */

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

/* Klebestreifen unter der H1 — drei Papierschnipsel in Petrol, Klecks-Gelb und Schnipsel-Rot. */
.wp-block-post-title { position: relative; padding-bottom: .9rem; }
.wp-block-post-title::after {
	content: "";
	position: absolute; left: 0; bottom: 0;
	width: 7.2rem; height: 8px;
	background:
		linear-gradient(90deg, var(--wp--preset--color--accent) 0 30%, transparent 30% 35%, var(--wp--preset--color--flamme) 35% 65%, transparent 65% 70%, var(--wp--preset--color--rot) 70% 100%);
	border-radius: 2px;
	transform: rotate(-1deg);
}

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