/*
Theme Name: DSA5 Pergament
Description: Schlichtes Block-Theme für das DSA5-Portal (Fanprojekt): dunkles Leder, Pergament mit Bronzerahmen, Namensplaketten. Hell und dunkel nach Systemeinstellung, Schriften lokal eingebunden (Cinzel, EB Garamond, Caveat). Keine Fremdbibliotheken, kein Builder.
Version: 0.1.2
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dsa5-pergament
Tags: block-theme, full-site-editing, dark-mode, custom-colors
*/

/* ==========================================================================
   1. Dunkelmodus (Systemeinstellung)
   Warmes Anthrazit mit Bronze und Gold, bewusst ohne starken Rotanteil.
   Die Plugin-Bausteine (DSA5-Portal) bringen eigene, passende Farben mit.
   ========================================================================== */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) {
	:root {
		--wp--preset--color--leder: #0e0b0a;
		--wp--preset--color--rahmen: #3a2a1c;
		--wp--preset--color--bronze: #b58a4a;
		--wp--preset--color--pergament: #221a15;
		--wp--preset--color--pergament-dunkel: #1d1611;
		--wp--preset--color--tinte: #eadfc6;
		--wp--preset--color--tinte-hell: #bba98a;
		--wp--preset--color--akzent: #d9b45f;
		--wp--preset--color--akzent-text: #1a120a;
		--wp--preset--color--plakette: #b9b6ad;
		--wp--preset--color--kopftext: #eadfc6;
		color-scheme: dark;
	}
}

/* ==========================================================================
   2. Grundlagen
   ========================================================================== */
body { min-height: 100vh; display: flex; flex-direction: column; }
.wp-site-blocks { flex: 1; display: flex; flex-direction: column; }
.wp-site-blocks > main { flex: 1; }
/* Flex-Kinder schrumpfen sonst nicht unter ihre Inhaltsbreite (z. B. die waagerecht scrollende Schrittleiste) */
body > *, .wp-site-blocks > * { min-width: 0; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid #8fb8ff; outline-offset: 2px; }
.dp-uebersprung { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--wp--preset--color--pergament); color: var(--wp--preset--color--tinte); padding: .5rem 1rem; }
.dp-uebersprung:focus { left: 16px; top: 16px; }

/* Knöpfe von WordPress (Button-Block, Suche, Kommentare) geben beim Drücken leicht nach – wie die Knöpfe des Portals */
:where(.wp-element-button, .wp-block-button__link, .wp-block-search__button) { transition: transform .09s ease-out, box-shadow .12s ease-out, filter .12s ease-out; }
:where(.wp-element-button, .wp-block-button__link, .wp-block-search__button):not([aria-disabled="true"], :disabled):active {
	transform: translateY(1px) scale(.97); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .28); filter: brightness(.94); transition-duration: .04s;
}
@media (prefers-reduced-motion: reduce) {
	:where(.wp-element-button, .wp-block-button__link, .wp-block-search__button) { transition: none; }
}

/* Abstand für die klebende Seitenleiste des Generators (WordPress-Werkzeugleiste) */
body { --dsa5-oben: 16px; }
body.admin-bar { --dsa5-oben: 48px; }
@media (max-width: 782px) { body.admin-bar { --dsa5-oben: 62px; } }

/* ==========================================================================
   3. Kopf: Lederleiste mit Bronzelinie, Navigation als Namensplaketten
   ========================================================================== */
.dp-kopf { background: var(--wp--preset--color--rahmen); border-bottom: 2px solid var(--wp--preset--color--bronze); }
.dp-kopf-innen { max-width: var(--wp--style--global--wide-size, 80rem); margin-inline: auto; padding: .6rem 16px; gap: .6rem 1.2rem; }
.dp-kopf-navi { gap: .4rem .8rem; }
.dp-haupt { padding-block: clamp(1.2rem, 4vw, 2.5rem) 3rem; }
.wp-block-post-template { display: grid; gap: 2rem; }
.dp-kopf .wp-block-site-title { margin: 0; font-family: var(--wp--preset--font-family--titel); font-size: 1.25rem; letter-spacing: .06em; }
.dp-kopf .wp-block-site-title a { color: var(--wp--preset--color--kopftext); text-decoration: none; }
.dp-kopf .wp-block-navigation a,
.dp-kopf .wp-block-loginout a {
	display: inline-block; background: var(--wp--preset--color--plakette); color: #2a2823; border: 1px solid #6d6b63; border-radius: 6px;
	padding: .2rem .8rem; font-variant: small-caps; letter-spacing: .05em; text-decoration: none; line-height: 1.5;
}
.dp-kopf .wp-block-navigation .current-menu-item > a,
.dp-kopf .wp-block-navigation a[aria-current="page"] { background: #e4e1d6; border-color: #2a2823; font-weight: 700; box-shadow: 0 0 0 2px var(--wp--preset--color--bronze); }
.dp-kopf .wp-block-loginout { margin: 0; }
.dp-kopf .wp-block-navigation__responsive-container-open,
.dp-kopf .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--kopftext); }
.dp-kopf .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--rahmen); color: var(--wp--preset--color--kopftext); }

/* ==========================================================================
   4. Blatt: Pergament mit dunklem Rahmen, Bronzelinie und Eckbeschlägen
   ========================================================================== */
.dp-blatt {
	position: relative; color: var(--wp--preset--color--tinte);
	background: radial-gradient(ellipse at 50% 30%, var(--wp--preset--color--pergament) 0%, var(--wp--preset--color--pergament-dunkel) 75%);
	border: 7px solid var(--wp--preset--color--rahmen); outline: 1px solid var(--wp--preset--color--bronze); outline-offset: -4px;
	border-radius: 4px; padding: clamp(16px, 4vw, 2.5rem) clamp(14px, 4vw, 3rem);
	box-shadow: 0 22px 40px -28px rgba(0, 0, 0, .7);
}
.dp-blatt::before, .dp-blatt::after {
	content: ""; position: absolute; width: 16px; height: 16px; top: -11px;
	background: var(--wp--preset--color--rahmen); border: 2px solid var(--wp--preset--color--bronze);
}
.dp-blatt::before { left: -11px; border-radius: 50% 0 50% 0; }
.dp-blatt::after { right: -11px; border-radius: 0 50% 0 50%; }
.dp-blatt a { color: var(--wp--preset--color--akzent); }
.dp-blatt h1, .dp-blatt h2, .dp-blatt h3 { color: var(--wp--preset--color--tinte); }
.dp-blatt h2 { border-bottom: 1px solid var(--wp--preset--color--bronze); padding-bottom: .2rem; }
.dp-blatt .wp-block-post-title { text-align: center; }
.dp-trenner { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--wp--preset--color--bronze), transparent); margin: 1rem auto 1.6rem; max-width: 24rem; }

/* Portal-Seiten (Generator, Übersicht): Titel direkt auf dem Leder */
.dp-portal .wp-block-post-title { color: var(--wp--preset--color--kopftext); letter-spacing: .04em; margin-bottom: .4rem; }

/* ==========================================================================
   5. Fuß
   ========================================================================== */
.dp-fuss { border-top: 2px solid var(--wp--preset--color--bronze); background: var(--wp--preset--color--rahmen); color: var(--wp--preset--color--kopftext); font-size: var(--wp--preset--font-size--klein); }
.dp-fuss-innen { padding: 1.4rem 16px 1.8rem; }
.dp-fuss p { opacity: .9; max-width: 60rem; margin-inline: auto; }
.dp-fuss a { color: inherit; }
/* Fanprojekt-Logo aus dem DSA-Fanpaket: nur verkleinert, keine Filter oder Farbänderung (Nutzungsbedingungen IV). */
.dp-fuss .dp-fuss-logo { margin: 0 auto .8rem; }
.dp-fuss .dp-fuss-logo img { display: block; margin-inline: auto; width: 220px; max-width: 70vw; height: auto; }

/* ==========================================================================
   6. Druck
   ========================================================================== */
@media print {
	body { background: #fff !important; color: #000 !important; }
	.dp-kopf, .dp-fuss, .dp-uebersprung { display: none !important; }
	.dp-blatt { border: 0; outline: 0; box-shadow: none; background: #fff; padding: 0; }
	.dp-blatt::before, .dp-blatt::after { display: none; }
	.dp-portal .wp-block-post-title { color: #000; }
}