/*
Theme Name: GM blog-gertrud-mueller
Theme URI: https://blog-gertrud-mueller.de/
Author: Verwaltung
Description: Ruhiges, gut lesbares Child-Theme für den Blog von Dr. Gertrud Müller auf Basis von Twenty Twenty-Five. Nur lokale Schriften, keine fremden Ressourcen.
Template: twentytwentyfive
Version: 1.3.0
Update URI: false
Requires at least: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gm-blog
*/

/* ---------- Grundlagen ---------- */

html {
	-webkit-text-size-adjust: 100%;
}

body {
	overflow-wrap: break-word;
}

/* Deutsche Langwörter auf dem Handy trennen statt überlaufen lassen. */
.wp-block-post-content,
.wp-block-post-excerpt,
.wp-block-post-title,
.wp-block-query-title {
	hyphens: auto;
	-webkit-hyphens: auto;
}

/* Lange Links (z. B. YouTube- oder Pixabay-Adressen) dürfen umbrechen. */
.wp-block-post-content a,
.wp-block-post-excerpt a {
	overflow-wrap: anywhere;
}

/* Gut sichtbarer Tastatur-Fokus überall. */
:where(.wp-site-blocks) :focus-visible,
.skip-link:focus {
	outline: 3px solid var(--wp--preset--color--accent-1) !important;
	outline-offset: 3px;
	border-radius: 3px;
}

/* ---------- Kopfbereich ---------- */

.gm-header {
	border-top: 4px solid var(--wp--preset--color--accent-2);
}

.gm-brand {
	min-width: 0;
}

.gm-brand .wp-block-site-logo img {
	height: auto;
	max-height: 52px;
	width: auto;
	/* Die Logo-Datei hat einen weißen Kasten als Hintergrund. „multiply“ lässt das Weiß
	   im papierweißen Kopf verschwinden, ohne die Datei zu ändern. */
	mix-blend-mode: multiply;
}

.gm-brand .wp-block-site-title {
	line-height: 1.2;
}

.gm-header .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--accent-6) !important;
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(31, 45, 42, 0.1);
	padding: 0.5rem 0 !important;
	min-width: 17rem !important;
}

.gm-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.45rem 1.1rem !important;
}

/* Aktueller Menüpunkt – auch der Oberpunkt („Über mich“ auf „Leistungen“) und „Blog“ auf
   Beiträgen, Archiven und der Suche. Linie in Petrol (6,8:1); Blattgrün hätte nur 2,6:1. */
.gm-header .wp-block-navigation .current-menu-item > a,
.gm-header .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-submenu__toggle,
body:is(.single-post, .archive, .search) .gm-header .wp-block-navigation:not(:has(.current-menu-item)) .wp-block-home-link > a {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent-1);
	text-decoration-thickness: 3px;
	text-underline-offset: 0.35em;
}

/* Suche im Kopf: ruhiger Symbol-Knopf statt gefüllter Fläche, damit er nicht wie die
   wichtigste Aktion der Seite wirkt. Mindestens 44 × 44 px groß. */
.gm-header .wp-block-search .wp-block-search__button {
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--accent-6);
	min-width: 2.75rem;
	min-height: 2.75rem;
}

.gm-header .wp-block-search .wp-block-search__button:hover {
	background-color: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--accent-4);
}

.gm-header .wp-block-search .wp-block-search__button svg {
	fill: currentColor;
}

/* Handy: Logo ausblenden, damit Titel und Menü-Knopf Platz haben. */
@media (max-width: 599.98px) {
	.gm-brand .wp-block-site-logo {
		display: none;
	}
}

/* Menü-Knopf und Schließen-Knopf: Klickfläche 44 × 44 px (vorher 24 × 24 px). */
.gm-header .wp-block-navigation__responsive-container-open,
.gm-header .wp-block-navigation__responsive-container-close {
	min-width: 2.75rem;
	min-height: 2.75rem;
	align-items: center;
	justify-content: center;
}

.gm-header .wp-block-navigation__responsive-container-open {
	/* Symbol bleibt bündig mit dem rechten Rand, der Kopf wird nicht höher. */
	margin: -0.625rem -0.625rem -0.625rem 0;
	padding: 0 0.625rem;
	gap: 0.4rem;
	font-weight: 600;
}

/* Sichtbares Wort „Menü“ neben dem Symbol – das Strich-Symbol allein erkennen nicht alle.
   Screenreader lesen weiterhin „Menü öffnen“ (aria-label des Knopfs). */
.gm-header .wp-block-navigation__responsive-container-open::after {
	content: "Menü";
	content: "Menü" / "";
}

/* Tablet und kleine Laptops (600–1149 px): Logo, Titel, fünf Menüpunkte und Lupe passen
   nicht in eine Zeile – das Menü brach früher in 2–3 Zeilen um und der Kopf wurde fast
   200 px hoch. Deshalb hier wie auf dem Handy der Menü-Knopf mit aufklappendem Menü.
   (Der WordPress-Navigationsblock schaltet sonst fest bei 600 px um.) */
@media (min-width: 600px) and (max-width: 1149.98px) {
	.gm-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.gm-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Ab 1150 px: Das Suchfeld klappt unter der Lupe auf, statt das Menü zu verschieben
   (vorher rutschte beim Öffnen der Suche der ganze Kopf in zwei Zeilen). */
@media (min-width: 1150px) {
	.gm-header .wp-block-navigation .wp-block-search__button-only {
		position: relative;
	}

	.gm-header .wp-block-navigation .wp-block-search__button-only:not(.wp-block-search__searchfield-hidden) .wp-block-search__input {
		position: absolute;
		top: calc(100% + 0.5rem);
		right: 0;
		z-index: 30;
		width: 20rem;
		max-width: calc(100vw - 2rem);
		box-shadow: 0 10px 30px rgba(31, 45, 42, 0.12);
	}
}

/* Overlay-Menü auf dem Handy: linksbündig (rechtsbündige Listen liest man schlecht),
   Abstand nach oben für den Schließen-Knopf, Untermenüs mit Linie eingerückt. */
.gm-header .wp-block-navigation__responsive-container.is-menu-open,
.gm-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
}

.gm-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 3.5rem;
	font-size: 1.125rem;
	gap: 1rem;
	text-align: left;
}

.gm-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	border: 0 !important;
	border-left: 2px solid var(--wp--preset--color--accent-6) !important;
	border-radius: 0;
	box-shadow: none;
	padding: 0.25rem 0 0.25rem 1rem !important;
	margin-top: 0.6rem;
	min-width: 0 !important;
	max-width: 100%;
}

.gm-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
	font-weight: 600;
}

/* ---------- Startseite ---------- */

.gm-eyebrow {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-1);
}

/* Leitsatz (H1) bündig mit Kopfzeile, Untertitel und Knopf. Früher hatte er eine eigene
   Breite (22ch) und stand dadurch je nach Bildschirm versetzt bzw. ragte links heraus.
   Bricht er auf dem Handy um, dann in zwei möglichst gleich lange Zeilen. */
.gm-hero .wp-block-site-tagline {
	text-wrap: balance;
}

/* ---------- Beitragsliste ---------- */

.gm-post-list > li + li .gm-post-card {
	border-top: 1px solid var(--wp--preset--color--accent-6);
}

/* Vorschaubild: ganzes Bild zeigen (Plakate, Hochformate), ruhig gerahmt. */
.gm-post-card .gm-card-image {
	margin: 0;
}

.gm-post-card .gm-card-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: contain;
	background-color: var(--wp--preset--color--accent-3);
}

.gm-post-card .gm-card-image a {
	display: block;
}

.gm-post-card .gm-card-image a:hover img {
	opacity: 0.9;
}

/* Ab Tablet-Breite: Bild links, Text rechts. */
@media (min-width: 640px) {
	.gm-post-card:has(> .gm-card-image) {
		display: grid;
		grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--50);
		align-items: start;
	}

	.gm-post-card:has(> .gm-card-image) > * {
		margin-block: 0;
	}

	.gm-post-card .gm-card-image img {
		aspect-ratio: 1;
	}
}

.gm-post-card .wp-block-post-excerpt__more-text {
	margin-top: 0.75rem;
}

.gm-post-card .wp-block-post-excerpt__more-link {
	font-weight: 600;
}

.gm-post-card .wp-block-post-excerpt__more-link::after {
	content: " →";
	content: " →" / ""; /* Pfeil nur fürs Auge, Screenreader lesen ihn nicht vor */
}

.gm-pagination {
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--accent-6);
	row-gap: 0.75rem;
}

/* Seitenzahlen: Klickflächen mindestens 44 × 44 px (vorher 10 × 23 px), aktuelle Seite gefüllt. */
.gm-pagination .wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
}

.gm-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 0.6rem;
	box-sizing: border-box;
	border-radius: 6px;
	line-height: 1;
}

.gm-pagination a.page-numbers {
	border: 1px solid var(--wp--preset--color--accent-6);
	color: var(--wp--preset--color--accent-1);
	text-decoration: none;
}

.gm-pagination a.page-numbers:hover {
	background-color: var(--wp--preset--color--accent-3);
	border-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--contrast);
}

.gm-pagination .page-numbers.current {
	background-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	font-weight: 700;
}

.gm-pagination .page-numbers.dots {
	min-width: 1.5rem;
	padding: 0;
}

.gm-pagination .wp-block-query-pagination-previous,
.gm-pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
}

/* ---------- Bücher ---------- */

.gm-book {
	position: relative;
}

/* Auf breiten Bildschirmen genau fünf gleich breite Spalten (vorher sechs Spalten mit
   einer leeren Lücke rechts neben dem fünften Buch). */
@media (min-width: 1000px) {
	.gm-discover .gm-books {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

.gm-book .wp-block-image img {
	width: 100%;
	max-width: 11rem;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	border-radius: 4px;
	box-shadow: 0 6px 18px rgba(31, 45, 42, 0.15);
}

.gm-book-title {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.35;
}

.gm-book-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

/* Die ganze Karte ist klickbar (ein einziger Link pro Buch). */
.gm-book-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.gm-book:hover .gm-book-title a,
.gm-book-title a:focus-visible {
	color: var(--wp--preset--color--accent-1);
	text-decoration: underline;
}

/* ---------- Im Archiv stöbern (Startseite) ---------- */

.gm-browse .wp-block-search {
	max-width: 36rem;
}

.gm-browse-label {
	margin: 0 0 0.5rem;
}

/* Jahres-Archiv als Reihe von Knöpfen (ersetzt die Monats-Auswahlliste, die beim
   Blättern mit den Pfeiltasten sofort die Seite gewechselt hat). */
.gm-years {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.gm-years li {
	margin: 0;
}

.gm-years a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0 1.1rem;
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--accent-1);
	border-radius: 999px;
	color: var(--wp--preset--color--accent-1);
	font-weight: 600;
	text-decoration: none;
}

.gm-years a:hover {
	background-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
}

/* ---------- Einzelbeitrag ---------- */

.gm-meta-row {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent-4);
}

.gm-post-nav .post-navigation-link__label {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent-4);
	font-weight: 400;
}

.gm-post-nav .post-navigation-link-previous,
.gm-post-nav .post-navigation-link-next {
	max-width: 48%;
	/* Pfeil neben (nicht über) „Vorheriger/Nächster Beitrag“ */
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}

.gm-post-nav .post-navigation-link-next {
	justify-content: flex-end;
}

.gm-post-nav .post-navigation-link-previous:empty,
.gm-post-nav .post-navigation-link-next:empty {
	display: none;
}

.gm-post-nav .post-navigation-link-next {
	text-align: right;
	margin-left: auto;
}

@media (max-width: 600px) {
	.gm-post-nav {
		flex-direction: column;
		align-items: stretch !important;
	}

	.gm-post-nav .post-navigation-link-previous,
	.gm-post-nav .post-navigation-link-next {
		max-width: 100%;
	}
}

/* ---------- Klassische Inhalte aus dem alten Editor ---------- */

.wp-block-post-content img {
	max-width: 100%;
	height: auto;
}

.wp-block-post-content .alignleft {
	float: left;
	margin: 0.3em 1.5em 1em 0;
}

.wp-block-post-content .alignright {
	float: right;
	margin: 0.3em 0 1em 1.5em;
}

.wp-block-post-content .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-block-post-content .wp-caption {
	max-width: 100%;
}

.wp-block-post-content .wp-caption-text {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent-4);
	margin-top: 0.4em;
}

.wp-block-post-content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}

.wp-block-post-content td,
.wp-block-post-content th {
	border: 1px solid var(--wp--preset--color--accent-6);
	padding: 0.4em 0.6em;
}

.wp-block-post-content iframe,
.wp-block-post-content video {
	max-width: 100%;
}

.wp-block-post-content blockquote:not([class]) {
	margin: 1.5em 0;
	padding: 0.25em 0 0.25em 1.25em;
	border-left: 3px solid var(--wp--preset--color--accent-2);
	font-family: var(--wp--preset--font-family--literata);
	font-style: italic;
}

.wp-block-post-content pre:not([class]) {
	background: var(--wp--preset--color--accent-3);
	padding: 1rem 1.25rem;
	border-radius: 6px;
	white-space: pre-wrap;
	overflow-x: auto;
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-post-content::after {
	content: "";
	display: table;
	clear: both;
}

@media (max-width: 600px) {
	.wp-block-post-content .alignleft,
	.wp-block-post-content .alignright {
		float: none;
		display: block;
		margin: 1em auto;
	}
}

/* 2-Klick-Platzhalter (MU-Plugin gm-basis): Auf dem Handy ist der Hinweistext höher als
   das 16:9-Feld und wurde abgeschnitten – „Inhalt laden“ war dann nicht zu sehen.
   Das Feld darf jetzt mitwachsen; nach dem Laden bleibt das Video im 16:9-Format. */
.wp-site-blocks .gm-2klick {
	overflow: visible;
	min-height: auto;
}

.wp-site-blocks .gm-2klick iframe {
	border-radius: 5px;
}

.wp-site-blocks .gm-2klick-btn {
	font-family: inherit;
	font-weight: 600;
}

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

.gm-footer-heading {
	font-family: var(--wp--preset--font-family--fira-sans);
	font-size: var(--wp--preset--font-size--small) !important;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-4);
	margin-bottom: 0.75rem;
}

.gm-footer ul.gm-footer-links {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.gm-footer ul.gm-footer-links li {
	margin: 0 0 0.45rem;
}

.gm-footer a {
	text-underline-offset: 0.2em;
}

.gm-legal {
	gap: 0.25rem 1.25rem;
}

/* ---------- Bewegung reduzieren ---------- */

@media (prefers-reduced-motion: reduce) {
	* {
		scroll-behavior: auto !important;
		transition: none !important;
	}
}