/*
Theme Name:  SOYL Blog
Theme URI:   https://christian-cap.com/blog
Author:      Christian Cap
Author URI:  https://christian-cap.com
Description: Reduziertes Child-Theme für den Chronik-Blog. Papierton, Crimson Pro
             im Fließtext, Jura in den Überschriften. Der Farbwechsel Terrakotta →
             Petrol beim Überfahren von Links ist der einzige bewegliche Teil.
Template:    twentytwentyfive
Version:     1.0.0
Requires at least: 6.6
Tested up to: 7.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: soyl-blog
*/

/* -------------------------------------------------------------------------
   Alles Farbliche und Typografische steckt in der theme.json.
   Hier stehen nur Dinge, die dort nicht abbildbar sind.
   ------------------------------------------------------------------------- */

/* 1 — Deutscher Blocksatz-Ersatz: Trennung erlauben, Waisenkinder vermeiden.
   Bei schmalem Satzspiegel und langen Komposita ist das der Unterschied
   zwischen ruhigem und löchrigem Grau. */
.wp-block-post-content p,
.wp-block-post-content li,
.entry-content p,
.entry-content li {
	hyphens: auto;
	-webkit-hyphens: auto;
	hyphenate-limit-chars: 7 4 3;
	text-wrap: pretty;
}

/* Überschriften brechen ausgewogen statt mit einem Wort in der letzten Zeile. */
h1, h2, h3,
.wp-block-post-title,
.wp-block-site-title {
	text-wrap: balance;
}

/* Anführungszeichen und Gedankenstriche hängen in den Rand aus. */
body {
	hanging-punctuation: first last;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* 2 — Kippmoment: der Farbwechsel läuft, statt zu springen. */
a {
	transition: color 180ms ease, text-decoration-color 180ms ease;
	text-underline-offset: 0.16em;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}
a:hover {
	text-decoration-color: currentColor;
}

/* 3 — Tastaturbedienung sichtbar machen. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--petrol);
	outline-offset: 3px;
	border-radius: 0;
}

/* 4 — Zahlen im Fließtext als Mediävalziffern, in Tabellen als Versalziffern. */
.wp-block-post-content,
.entry-content {
	font-variant-numeric: oldstyle-num proportional-nums;
}
.wp-block-table,
.wp-block-code,
time {
	font-variant-numeric: lining-nums tabular-nums;
}

/* 5 — Bilder liegen auf dem Papier, ohne Rahmen, ohne Radius. */
.wp-block-image img,
.wp-block-post-featured-image img {
	border-radius: 0;
}
.wp-block-image figcaption {
	margin-top: 0.6rem;
}

/* 6 — Trennlinien als Haarlinie über die Textbreite. */
.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--linie);
	opacity: 1;
	margin-block: var(--wp--preset--spacing--50);
}

/* 7 — Wer Bewegung reduziert haben will, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}