/*
Theme Name: Toolrevier
Description: Block-Theme für toolrevier.de. Hell, sachlich, werkzeugorientiert: Akku-Checker, Dübel-Finder, Mieter-Ratgeber, 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: toolrevier
*/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ---- Toolrevier-Eigenheiten ------------------------------------------- */

/* Überschriften und Wortmarke in einer kantigen, leicht kondensierten Systemschrift (Bahnschrift/DIN): technisch, ohne Webfont-Download. */
.tr-brand span { font-family: var(--wp--preset--font-family--kante); font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; }
.tr-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--kante); letter-spacing: -.005em; }

/* Zollstock unter der H1 — dasselbe Gelb wie die Ladebalken im Logo: Glieder mit kurzen und langen Teilstrichen. */
.wp-block-post-title { position: relative; padding-bottom: 1rem; }
.wp-block-post-title::after {
	content: "";
	position: absolute; left: 0; bottom: 0;
	width: 8rem; height: 10px;
	background-color: var(--wp--preset--color--signal);
	background-image:
		repeating-linear-gradient(90deg, var(--wp--preset--color--ink) 0 1px, transparent 1px 6px),
		repeating-linear-gradient(90deg, var(--wp--preset--color--ink) 0 2px, transparent 2px 30px),
		linear-gradient(90deg, transparent 0 63px, var(--wp--preset--color--ink) 63px 65px, transparent 65px);
	background-size: 100% 35%, 100% 70%, 100% 100%;
	background-repeat: no-repeat;
	border-radius: 1px;
}

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

/* Zwei Werkzeug-Einstiege auf der Startseite. */
.tr-einstieg { display: grid; gap: 1rem; margin: 1.6rem 0; }
@media (min-width: 700px) { .tr-einstieg { grid-template-columns: 1fr 1fr; } }
.tr-einstieg__karte { display: block; border: 1px solid var(--wp--preset--color--line); border-top: 4px solid var(--wp--preset--color--accent); border-radius: 6px; background: var(--wp--preset--color--surface); padding: 1rem; text-decoration: none; color: inherit; }
.tr-einstieg__karte strong { display: block; font-family: var(--wp--preset--font-family--kante); font-size: 1.15rem; color: var(--wp--preset--color--accent-strong); margin-bottom: .3rem; }
.tr-einstieg__karte:hover strong, .tr-einstieg__karte:focus strong { text-decoration: underline; }
.tr-einstieg__karte span { font-size: .95rem; color: var(--wp--preset--color--muted); }