/*
Theme Name: GM tools4life
Theme URI: https://tools4life.eu/
Description: Ruhiges, gut lesbares Child-Theme für die Praxis-Seite von Dr. phil. Gertrud Müller M.A. auf Basis von Twenty Twenty-Five. Nur lokale Schriften (aus dem Eltern-Theme), keine fremden Ressourcen, keine Lizenz nötig.
Author: Verwaltung
Template: twentytwentyfive
Version: 1.2.0
Update URI: false
Requires at least: 6.7
Tested up to: 7.1
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-t4l
*/

/* ------------------------------------------------------------------
 * 1) Grundlagen: nichts darf seitlich überlaufen
 * ---------------------------------------------------------------- */
body {
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img,
video,
iframe,
embed,
object,
svg {
	max-width: 100%;
}
img {
	height: auto;
}
/* Das Eltern-Theme setzt „a { text-decoration-thickness: 1px !important }“ –
   dickere Linien (Hover, aktuelle Seite) brauchen deshalb ebenfalls !important. */
a {
	text-underline-offset: 0.18em;
}
a:hover {
	text-decoration-thickness: 2px !important;
}
/* Footer schließt direkt an den Inhalt an (Abstand kommt aus dem Inhalt) */
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* ------------------------------------------------------------------
 * 2) Sichtbarer Tastatur-Fokus überall
 * ---------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent-3);
	outline-offset: 3px;
	border-radius: 3px;
}
.gm-footer :where(a, button, input):focus-visible,
.gm-zitatband :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--base);
}

/* ------------------------------------------------------------------
 * 3) Kopfbereich und Hauptnavigation
 * ---------------------------------------------------------------- */
.gm-header {
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}
.gm-header .wp-block-site-logo img {
	width: clamp(150px, 16vw, 210px);
	height: auto;
	/* Das Logo hat einen weißen Hintergrund – so verschmilzt er mit dem Kopfbereich */
	mix-blend-mode: multiply;
}
.gm-hauptnav .wp-block-navigation-item__content {
	padding-block: 0.35em;
}
/* Aktuelle Seite markieren – auch den Hauptpunkt, wenn eine Unterseite offen ist (z. B. Profil bei Leistungen) */
.gm-hauptnav .current-menu-item > .wp-block-navigation-item__content,
.gm-hauptnav .current-menu-ancestor > .wp-block-navigation-item__content {
	text-decoration: underline;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 0.4em;
}
/* Pfeil-Schalter der Untermenüs: Klickfläche mind. 24 × 24 px (WCAG 2.5.8), ohne das Layout zu verschieben */
.gm-hauptnav .wp-block-navigation-submenu__toggle {
	position: relative;
}
.gm-hauptnav .wp-block-navigation-submenu__toggle::after {
	content: "";
	position: absolute;
	inset: -7px -12px -7px -2px; /* nach rechts in die Lücke, nicht über den Link-Text */
}
/* Menü-Symbol und Schließen-Kreuz: Klickfläche 44 × 44 px statt 24 × 24 px */
.gm-hauptnav .wp-block-navigation__responsive-container-open,
.gm-hauptnav .wp-block-navigation__responsive-container-close {
	padding: 10px;
	margin: -10px;
}
.gm-hauptnav .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--accent-6) !important;
	border-radius: 10px;
	padding: 0.4em 0;
	box-shadow: 0 10px 28px rgba(31, 43, 41, 0.1);
	min-width: 16em !important;
}
.gm-hauptnav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5em 1.1em;
	font-weight: 400;
}
/* Kontakt als ruhiger Akzent-Button */
.gm-hauptnav .gm-nav-kontakt > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--base) !important;
	padding: 0.45em 1.15em;
	border-radius: 999px;
	text-decoration: none !important;
}
.gm-hauptnav .gm-nav-kontakt > .wp-block-navigation-item__content:hover {
	background: color-mix(in srgb, var(--wp--preset--color--accent-3) 78%, #000);
}
.gm-hauptnav .gm-nav-kontakt.current-menu-item > .wp-block-navigation-item__content {
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 0.25em;
}
/* Links zu anderen Websites mit kleinem Pfeil kennzeichnen (eigene Adressen ausgenommen,
   falls später interne Links mit voller Adresse ins Menü kommen) */
.gm-hauptnav a[href^="http"]:not([href*="tools4life."]) .wp-block-navigation-item__label::after {
	content: "\00a0\2197";
	content: "\00a0\2197" / ", externe Website"; /* Screenreader hören den Hinweis statt „Pfeil“ */
	font-size: 0.8em;
}
/* Bis 1080 px Breite das aufgeräumte Menü-Symbol statt umbrechender Menüzeilen */
@media (min-width: 600px) and (max-width: 1079.98px) {
	.gm-hauptnav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.gm-hauptnav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}
/* Geöffnetes Menü (Handy/Tablet): linksbündig, großzügig und gut lesbar */
.gm-hauptnav .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
}
.gm-hauptnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: calc(var(--wp--preset--spacing--50) + 24px);
	gap: 0.9em;
	align-items: flex-start;
}
.gm-hauptnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 1.1em;
	font-size: var(--wp--preset--font-size--large);
	align-items: flex-start;
	width: 100%;
}
.gm-hauptnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: flex-start;
}
.gm-hauptnav .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-1) !important;
	box-shadow: none;
	min-width: 0 !important;
	margin-top: 0.5em;
	padding: 0.1em 0 0.1em 1em !important;
	gap: 0.55em;
	font-size: var(--wp--preset--font-size--medium);
}
.gm-hauptnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.15em 0;
	font-weight: 400;
}
.gm-hauptnav .wp-block-navigation__responsive-container.is-menu-open .gm-nav-kontakt > .wp-block-navigation-item__content {
	padding: 0.45em 1.15em;
	margin-top: 0.4em;
}

/* ------------------------------------------------------------------
 * 4) Titelband und Inhalte
 * ---------------------------------------------------------------- */
.gm-titelband .wp-block-post-title,
.gm-titelband .wp-block-query-title,
.gm-titelband h1 {
	margin-block: 0;
}
.gm-eyebrow {
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 600;
}
.gm-motto {
	font-family: var(--wp--preset--font-family--literata);
	font-style: italic;
	font-size: var(--wp--preset--font-size--large);
}
/* Größere Absätze brauchen weniger Zeilenabstand als Fließtext */
p:is(.has-large-font-size, .has-x-large-font-size, .has-xx-large-font-size) {
	line-height: 1.45;
}
.wp-block-post-featured-image.gm-beitragsbild img {
	width: auto;
	max-width: 100%;
	max-height: 460px;
	margin-inline: auto;
	display: block;
	object-fit: contain;
}

/* Inhalte aus dem klassischen Editor (bestehende Seiten) */
.wp-block-post-content :is(h1, h2, h3, h4, h5, h6):empty {
	display: none;
}
.wp-block-post-content :is(h2, h3) {
	clear: both;
	margin-block-start: 2.2em;
}
.wp-block-post-content :is(h2, h3):first-child {
	margin-block-start: 0;
}
.wp-block-post-content::after {
	content: "";
	display: table;
	clear: both;
}
.wp-block-post-content :is(img.aligncenter, .wp-caption.aligncenter) {
	display: block;
	margin: 1.5em auto;
}
.wp-block-post-content :is(img.alignleft, .wp-caption.alignleft) {
	float: left;
	margin: 0.35em 1.75em 1em 0;
}
.wp-block-post-content :is(img.alignright, .wp-caption.alignright) {
	float: right;
	margin: 0.35em 0 1em 1.75em;
}
.wp-block-post-content img {
	border-radius: 6px;
}
.wp-caption {
	max-width: 100%;
}
.wp-caption img {
	display: block;
	margin-inline: auto;
}
.wp-caption-text,
.wp-caption .wp-caption-text {
	color: var(--wp--preset--color--accent-4);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	text-align: center;
	margin-top: 0.5em;
}
.wp-block-post-content blockquote:not(.wp-block-quote):not(.wp-block-pullquote) {
	border-left: 3px solid var(--wp--preset--color--accent-3);
	margin: 2em 0;
	padding: 0.4em 0 0.4em 1.4em;
	font-family: var(--wp--preset--font-family--literata);
	font-size: var(--wp--preset--font-size--large);
	font-style: italic;
}
.wp-block-post-content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}
.wp-block-post-content :is(td, th) {
	border: 1px solid var(--wp--preset--color--accent-6);
	padding: 0.4em 0.6em;
}
.wp-block-post-content hr {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--accent-6);
	margin: 2.5em 0;
	clear: both;
}
/* Buchliste auf der Startseite */
.wp-block-post-content .gm-label {
	display: inline-block;
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--contrast);
	border-radius: 999px;
	padding: 0.15em 0.8em;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}
@media (max-width: 599.98px) {
	.wp-block-post-content :is(img.alignleft, img.alignright, .wp-caption.alignleft, .wp-caption.alignright) {
		float: none;
		display: block;
		margin: 1em auto;
	}
}

/* ------------------------------------------------------------------
 * 5) Startseite
 * ---------------------------------------------------------------- */
.gm-portrait img {
	border-radius: 14px;
	box-shadow: 0 14px 40px rgba(31, 43, 41, 0.12);
}
/* Karten (Startseite) und Fußbereich-Spalten: 1 – 2 – 4 Spalten, nie 3 + 1 */
.gm-karten.is-layout-grid,
.gm-footer-spalten.is-layout-grid {
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 600px) {
	.gm-karten.is-layout-grid,
	.gm-footer-spalten.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1080px) {
	.gm-karten.is-layout-grid,
	.gm-footer-spalten.is-layout-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
.gm-karte {
	height: 100%;
	transition: box-shadow 0.2s ease;
}
.gm-karte:hover,
.gm-karte:focus-within {
	box-shadow: 0 10px 28px rgba(31, 43, 41, 0.1);
}
.gm-karte h3 a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.gm-karte h3 a::after {
	content: "\00a0\2192";
	content: "\00a0\2192" / "";
	color: var(--wp--preset--color--accent-3);
}
.gm-karte h3 a:hover {
	text-decoration: underline;
}
.gm-zitatband .wp-block-quote {
	border: 0;
	padding: 0;
	margin-inline: auto;
	text-align: center;
}
.gm-zitatband .wp-block-quote cite {
	display: block;
	text-align: center;
	font-style: normal;
	margin-top: 0.6em;
}

/* ------------------------------------------------------------------
 * 6) Fußbereich
 * ---------------------------------------------------------------- */
.gm-footer a,
.gm-footer a:hover,
.gm-footer a:focus,
.gm-footer .wp-block-navigation a,
.gm-footer .wp-block-navigation a:hover,
.gm-footer .wp-block-navigation a:focus {
	color: var(--wp--preset--color--base);
}
.gm-footer a {
	text-decoration: underline;
}
.gm-footer .wp-block-navigation a {
	text-decoration: none;
}
.gm-footer .wp-block-navigation a:hover,
.gm-footer .wp-block-navigation a:focus-visible,
.gm-footer .wp-block-navigation a[aria-current="page"] {
	text-decoration: underline;
}
.gm-footer .wp-block-navigation a[aria-current="page"] {
	text-decoration-thickness: 2px !important;
}
.gm-footer :is(h1, h2, h3, h4) {
	color: var(--wp--preset--color--base);
	margin-block-end: 0.3em;
}
.gm-footer .wp-block-social-links .wp-social-link {
	color: var(--wp--preset--color--base);
}
.gm-footer .wp-block-social-links .wp-social-link a {
	padding: 0.25em;
}
.gm-footer .wp-block-search__inside-wrapper {
	background: var(--wp--preset--color--base);
	border-radius: 999px;
	border: 0;
	padding: 4px;
}
.gm-footer .wp-block-search__input {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 0;
	padding-left: 1em;
}
.gm-footer .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--accent-4);
	opacity: 1;
}
.gm-footer .wp-block-search__button {
	border-radius: 999px;
	padding: 0.45em 0.8em;
}
/* Tastatur-Fokus im Suchfeld des Fußbereichs sichtbar machen: Das Eingabefeld selbst hat
   keinen Rahmen (WordPress entfernt ihn), deshalb bekommt die ganze weiße „Pille“ den Rahmen.
   Der Knopf liegt in der weißen Pille – dort ist ein Petrol-Rahmen sichtbar, ein heller nicht. */
.gm-footer .wp-block-search__inside-wrapper:focus-within {
	outline: 3px solid var(--wp--preset--color--base);
	outline-offset: 3px;
}
.gm-footer .wp-block-search__button:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-3);
	outline-offset: 1px;
}
.gm-footer .wp-block-separator {
	color: color-mix(in srgb, var(--wp--preset--color--base) 35%, transparent);
	opacity: 1;
}

/* ------------------------------------------------------------------
 * 7) 2-Klick-Platzhalter (aus gm-basis) an die Farben angleichen
 * ---------------------------------------------------------------- */
body .gm-2klick {
	box-sizing: border-box; /* Rahmen innerhalb der Inhaltsbreite, nicht 2 px breiter */
	background: var(--wp--preset--color--accent-5);
	border-color: color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent);
	color: var(--wp--preset--color--contrast);
	border-radius: 12px;
	margin-block: 1.5em;
}
body .gm-2klick-btn {
	background: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--base);
	border-radius: 999px;
	padding: 0.6em 1.4em;
	font-family: inherit;
}
body .gm-2klick-btn:hover {
	background: color-mix(in srgb, var(--wp--preset--color--accent-3) 78%, #000);
}
/* Auf dem Handy ist der Hinweistext höher als das Video-Format (16:9). Damit nichts abgeschnitten
   wird, darf der Kasten vor dem Laden mitwachsen; nach dem Laden gilt wieder das Video-Format. */
body .gm-2klick:not(:has(iframe)) {
	overflow: visible;
	min-height: auto;
}

/* ------------------------------------------------------------------
 * 8) Suchfelder im Inhalt (Suche, 404): deutlich sichtbarer Rand (mind. 3:1)
 * ---------------------------------------------------------------- */
.wp-block-search__button-outside .wp-block-search__input {
	border: 1px solid var(--wp--preset--color--accent-4);
	color: var(--wp--preset--color--contrast);
}

/* ------------------------------------------------------------------
 * 9) Beitrags-Navigation (vorheriger/nächster Beitrag)
 * ---------------------------------------------------------------- */
.post-navigation-link__label {
	font-weight: 600;
}
.post-navigation-link__label::after {
	content: ":";
}

/* Bewegung reduzieren, wenn gewünscht */
@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		scroll-behavior: auto !important;
	}
}