/*
Theme Name: Ordnungsgenie
Description: Block-Theme für ordnungsgenie.de. Ruhig, hell, minimal: Vergleiche, Hilfsseiten, Werkzeuge. Kein Blog-Layout.
Author: Bianca Hofmann
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.2
Text Domain: ordnungsgenie
*/

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

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

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

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

/* Für ein späteres Bildlogo: <img class="og-logo"> in .og-brand setzen. */
.og-logo { display: block; width: 140px; height: auto; }
@media (min-width: 900px) { .og-logo { width: 180px; } }

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

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

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

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

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

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

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

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

.og-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;
}