/*
Theme Name: Bücherkasten – Publishing & Media
Theme URI: https://buecherkasten.de
Description: Child-Theme für Twenty Twenty-Five auf Grundlage des Designsystems Bücherkasten v1.4.1. Typografiegeführt, klassischer Buchsatz im Web: EB Garamond als Lesetypografie, IBM Plex Sans für alle UI-Elemente. Farbsystem Cremeweiß / Anthrazit mit Terrakotta und Tintenblau als einzigen Akzenten. Schriften selbst gehostet, kein externes CDN.
Author: Tobias Rackebrandt
Author URI: https://buecherkasten.de
Template: twentytwentyfive
Version: 1.4.2
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: buecherkasten
Tags: block-theme, editorial, typography, full-site-editing
*/

/* -------------------------------------------------------------------------
   Hinweis zur Arbeitsweise

   Alle Gestaltungswerte (Farben, Schriften, Größen, Abstände) stehen in
   theme.json — NICHT hier. Diese Datei enthält nur die wenigen Gesten, die
   sich in theme.json nicht ausdrücken lassen: die Terrakotta-Rule über dem
   Titel, den Pull-Quote-Rand und ein paar WooCommerce-Angleichungen.

   Regel: Wenn ein Wert auch in theme.json stehen könnte, gehört er dorthin.
   ------------------------------------------------------------------------- */


/* === 1. Grundpartitur ==================================================== */

/* Optischer Feinschliff für EB Garamond: Ligaturen und alte Ziffern im
   Lauftext, Kerning an. Macht den Buchsatz-Eindruck aus. */
body {
	font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
	text-rendering: optimizeLegibility;
}

/* Ziffern in UI-Elementen bleiben Versalziffern — sonst wirken Preise,
   Seitenzahlen und Datumsangaben unruhig. */
.wp-block-navigation,
.wp-block-button,
.woocommerce .price,
.wp-block-post-date {
	font-feature-settings: "kern" 1, "lnum" 1;
}


/* === 2. Die Terrakotta-Rule über dem Titel =============================== */
/* Designsystem 4.3: Terrakotta ist das ceremonielle Brand-Zeichen.
   Eine Rule über dem Titel — nicht mehr. */

.bk-title-rule,
.wp-block-post-title.bk-title-rule {
	position: relative;
	padding-top: 0.7em;
}

.bk-title-rule::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 3.5rem;
	height: 3px;
	background-color: var(--wp--preset--color--terrakotta);
}


/* === 3. Pull Quote ======================================================= */
/* EB Garamond Italic mit Terrakotta-Border links. */

.wp-block-quote.is-style-bk-pullquote {
	border-left: 3px solid var(--wp--preset--color--terrakotta);
	border-top: none;
	border-right: none;
	border-bottom: none;
	padding: 0.2em 0 0.2em 1.4em;
	margin-block: var(--wp--preset--spacing--60);
	font-family: var(--wp--preset--font-family--garamond);
	font-style: italic;
	font-size: var(--wp--preset--font-size--quote);
	line-height: 1.5;
	color: var(--wp--preset--color--anthrazit);
}

.wp-block-quote.is-style-bk-pullquote cite {
	display: block;
	margin-top: 0.8em;
	font-family: var(--wp--preset--font-family--plex);
	font-style: normal;
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--anthrazit-soft);
}


/* === 4. Säulen-Marker ==================================================== */
/* Zweiteiliges System: Label über der Nummer, beides Tintenblau.
   Designsystem 5.2. */

.bk-saeule {
	display: flex;
	flex-direction: column;
	gap: 0.1em;
	margin-block: var(--wp--preset--spacing--50);
}

.bk-saeule__label {
	font-family: var(--wp--preset--font-family--plex);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tintenblau);
}

.bk-saeule__nummer {
	font-family: var(--wp--preset--font-family--garamond);
	font-size: var(--wp--preset--font-size--saeulen-nummer);
	font-weight: 500;
	line-height: 1;
	color: var(--wp--preset--color--tintenblau);
}

.bk-saeule__name {
	font-family: var(--wp--preset--font-family--plex);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wp--preset--color--anthrazit);
}

/* Säulen-Pill für das Seitenende */
.bk-pill {
	display: inline-block;
	padding: 0.28em 0.85em;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--plex);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tintenblau);
	text-decoration: none;
	background-color: var(--wp--preset--color--cream-soft);
}


/* === 5. Navigation ======================================================= */
/* Aktiver Menüpunkt in Tintenblau (Designsystem 4.3). */

.wp-block-navigation .wp-block-navigation-item.current-menu-item > a,
.wp-block-navigation .wp-block-navigation-item.current_page_item > a {
	color: var(--wp--preset--color--tintenblau);
}


/* === 5b. Kopfbereich ===================================================== */
/* Voraussetzung: Die äußere Zeile im Vorlagenteil „Kopfbereich" trägt die
   CSS-Klasse bk-header (Blockeinstellungen → Erweitert).

   Warum hier und nicht über Editor-Einstellungen: So liegt der Aufbau in
   einer Datei und ist versioniert. Wer den Kopf später ändern will, ändert
   eine Zeile CSS statt sich durch vier verschachtelte Blöcke zu klicken. */

.bk-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);

	/* Auf Inhaltsbreite bringen — sonst kleben Mark und Navigation
	   an den Fensterrändern, während der Inhalt darunter mittig sitzt. */
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
}

/* Linke Seite: Mark und Schriftzug nebeneinander, eng geführt */
.bk-header > .wp-block-group:first-child {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 18px;
}

.bk-header .wp-block-site-logo,
.bk-header .wp-block-site-logo img {
	display: block;
	margin: 0;
}

/* Titel und Untertitel ohne Zwischenraum — sie bilden ein Schriftbild */
.bk-header .wp-block-site-title,
.bk-header .wp-block-site-tagline {
	margin: 0;
	line-height: 1.15;
}

.bk-header .wp-block-site-tagline {
	margin-top: 3px;
}

.bk-header .wp-block-site-title a {
	text-decoration: none;
	color: inherit;
}

/* Rechte Seite: Navigation */
.bk-header .wp-block-navigation {
	gap: var(--wp--preset--spacing--40);
}

/* Trennlinie: dicht heranziehen und auf dieselbe Breite bringen */
.bk-header ~ .wp-block-separator {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wp--style--global--content-size);
	margin-top: var(--wp--preset--spacing--40);
	margin-bottom: 0;
	margin-inline: auto;
}

/* Auf schmalen Bildschirmen untereinander */
@media (max-width: 600px) {
	.bk-header {
		gap: var(--wp--preset--spacing--30);
	}
	.bk-header > .wp-block-group:first-child {
		gap: 14px;
	}
}


/* === 5b2. Archivtitel ==================================================== */
/* „Blog", „Kategorie: …", Suchergebnisse. Steht in manchen Vorlagen in
   Grundtextgröße, weil eine im Editor gespeicherte Fassung theme.json
   überschreibt — hier erzwungen. */

.wp-block-query-title,
h1.wp-block-query-title,
.wp-block-post-title {
	font-family: var(--wp--preset--font-family--garamond);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.012em;
	color: var(--wp--preset--color--anthrazit);
}

/* Notlösung: Die Größe kommt aus der Vorlage von Twenty Twenty-Five und
   sticht eine gewöhnliche Regel aus. Sauberer wäre, sie im Editor an der
   Vorlage selbst zu ändern — dann kann dieser Block hier entfallen. */
.wp-block-query-title,
h1.wp-block-query-title {
	font-size: var(--wp--preset--font-size--h1) !important;
}

.wp-block-post-title {
	font-size: var(--wp--preset--font-size--h1);
}

.wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.wp-block-post-title a:hover {
	color: var(--wp--preset--color--terrakotta);
}


/* === 5c. Navigationsfarbe erzwingen ====================================== */
/* Setzt sich auch gegen eine im Website-Editor gespeicherte Stilfassung
   durch, die sonst theme.json überschreibt. */

.wp-block-navigation a,
.wp-block-navigation .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item__content:visited {
	color: var(--wp--preset--color--anthrazit);
	text-decoration: none;
}

.wp-block-navigation a:hover,
.wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--tintenblau);
}


/* === 6. WooCommerce ====================================================== */
/* Bewusst zurückhaltend: Der Shop soll wie der Rest der Seite aussehen,
   nicht wie ein aufgesetzter Laden. Erst nach dem ersten echten Produkt
   erweitern — vorher gestaltet man ins Blaue. */

.woocommerce .price,
.woocommerce-Price-amount {
	font-family: var(--wp--preset--font-family--plex);
	font-weight: 500;
	color: var(--wp--preset--color--anthrazit);
}

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
	background-color: var(--wp--preset--color--cream-soft);
	border-top-color: var(--wp--preset--color--terrakotta);
}

/* Kleinunternehmer- und Versandhinweise als Metadaten setzen */
.woocommerce .product .wc-gzd-additional-info,
.woocommerce .wc-gzd-additional-info {
	font-family: var(--wp--preset--font-family--plex);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--anthrazit-soft);
}


/* === 7. Barrierefreiheit ================================================= */

:where(a:focus-visible),
:where(button:focus-visible),
:where(input:focus-visible),
:where(select:focus-visible),
:where(textarea:focus-visible) {
	outline: 2px solid var(--wp--preset--color--tintenblau);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}