/*
Theme Name: Praxis Sörgel
Theme URI: http://diabetes-soergel.de
Description: Eigenständiges Block-Theme für die Diabetes-Schwerpunktpraxis Anja Sörgel (Teuschnitz). Layout, Breiten und Typografie folgen dem abgestimmten Entwurf „Variante B". Schriften liegen lokal im Theme, es wird nichts von Google nachgeladen. Erstellt von ITL Systemhaus für Datentechnik GmbH.
Author: ITL Systemhaus für Datentechnik GmbH
Author URI: https://www.itl-edv.de
Version: 2.0.0
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: praxis-soergel
Tags: block-theme, one-column, custom-colors, custom-menu
*/

/* ==================================================================
   Praxis Sörgel – Stylesheet
   Maßstab ist der abgestimmte Entwurf: Container 1040 px mit 40 px
   Rand (= 960 px Textbreite), Abschnitte 96 px / kompakt 64 px,
   Schriftstufen 76 / 40 / 22 / 20 / 17 / 15 / 12 px.
   Farben, Schriften und Abstandsstufen stehen in der theme.json und
   sind im Backend unter Design > Entwurf editierbar.
   ================================================================== */

/* ---- Grundraster -------------------------------------------------
   WordPress zentriert jeden Block, der schmaler als der Container
   ist, und zwar mit margin-left:auto !important. In diesem Layout
   steht alles an derselben linken Kante – daher die Übersteuerung.
   Das ist die einzige Stelle im Stylesheet, die !important braucht. */

.ps-section > *,
.ps-section--tight > *,
.ps-hero > *,
.ps-footer > * {
	margin-inline-start: 0 !important;
	margin-inline-end: 0 !important;
}

.ps-section { padding-block: 6rem; }
.ps-section--tight { padding-block: 4rem; }
.ps-hero { padding-block: 7rem 4rem; }
.ps-rule-top { border-top: 1px solid var(--wp--preset--color--linie); }

/* Lesebreiten wie im Entwurf: Fließtext 64 Zeichen, Schlagzeile kurz */
.ps-section > p,
.ps-section--tight > p,
.ps-hero > p,
.ps-section > .wp-block-list,
.ps-section--tight > .wp-block-list { max-width: 64ch; }

.ps-hero > h1 { max-width: 15ch; }
.ps-section > h1,
.ps-section > h2,
.ps-section--tight > h1,
.ps-section--tight > h2 { max-width: 22ch; }

/* ---- Auszeichnungszeile ------------------------------------------ */

.ps-label {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-bottom: 1.6rem;
	max-width: none;
}

/* ---- Handlungsaufforderung ---------------------------------------
   Im Entwurf ist das ein unterstrichener Textlink, keine Pille. */

.wp-element-button,
.wp-block-button__link {
	display: inline-block;
	background: none;
	border: 0;
	border-radius: 0;
	border-bottom: 2px solid currentColor;
	padding: 0 0 0.25rem;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	background: none;
	color: var(--wp--preset--color--akzent);
}

.wp-block-buttons { margin-block-start: 2rem; }

/* ---- Nummerierte Zeilen ------------------------------------------ */

.wp-block-columns.ps-zeile {
	border-top: 1px solid var(--wp--preset--color--linie);
	margin-block: 0;
	padding-block: 1.875rem;
	gap: 1rem 3.5rem;
	align-items: flex-start;
}

.wp-block-columns.ps-zeile:last-of-type {
	border-bottom: 1px solid var(--wp--preset--color--linie);
}

.ps-zeile .ps-nummer {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--akzent);
	font-variant-numeric: tabular-nums;
	margin: 0;
	padding-top: 0.3rem;
}

.ps-zeile h3 { margin-bottom: 0.5rem; }
.ps-zeile p { max-width: 62ch; margin-block-start: 0; }

/* ---- Sprechzeiten -------------------------------------------------- */

.wp-block-columns.ps-zeiten {
	border-top: 1px solid var(--wp--preset--color--linie);
	margin-block: 0;
	padding-block: 0.75rem;
	gap: 1.5rem;
	align-items: baseline;
	max-width: 28rem;
}

.wp-block-columns.ps-zeiten:last-of-type {
	border-bottom: 1px solid var(--wp--preset--color--linie);
}

.ps-zeiten p { margin: 0; }

@media (min-width: 782px) {
	.ps-zeiten .wp-block-column:last-child {
		text-align: right;
		font-variant-numeric: tabular-nums;
	}
}

/* ---- Faktenzeile --------------------------------------------------- */

.wp-block-columns.ps-fakten {
	border-block: 1px solid var(--wp--preset--color--linie);
	margin-block: 0;
	padding-block: 1.625rem;
	gap: 1.5rem 4rem;
	align-items: flex-start;
}

.ps-fakten h3 {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.625rem;
}

.ps-fakten p {
	margin: 0;
	font-size: 1.125rem;
	color: var(--wp--preset--color--ink);
}

/* ---- Zweispalter mit Bild ------------------------------------------ */

.ps-section > .wp-block-columns:not([class*="ps-"]),
.ps-section--tight > .wp-block-columns:not([class*="ps-"]) {
	gap: 3.5rem;
	align-items: center;
	margin-block: 0;
}

/* ---- Bildplatzhalter ----------------------------------------------- */

.ps-platzhalter {
	border: 1px solid var(--wp--preset--color--linie);
	background: var(--wp--preset--color--flaeche);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 320px;
	padding: 2rem;
}

.ps-platzhalter p {
	margin: 0;
	max-width: none;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* ---- Abstand zwischen Überschrift und Text ------------------------- */

.ps-section :where(h1, h2) + p,
.ps-section--tight :where(h1, h2) + p,
.ps-hero :where(h1) + p { margin-top: 1.5rem; }

h1, h2, h3, .wp-block-heading { overflow-wrap: break-word; hyphens: auto; }

a:where(:not(.wp-element-button):not(.wp-block-button__link)) { text-underline-offset: 3px; }

/* ---- Dunkle Abschnitte --------------------------------------------- */

.has-gruen-background-color :where(h1, h2, h3, h4),
.has-ink-background-color :where(h1, h2, h3, h4) { color: inherit; }

.has-gruen-background-color a:where(:not(.wp-element-button):not(.wp-block-button__link)),
.has-ink-background-color a:where(:not(.wp-element-button):not(.wp-block-button__link)) {
	color: inherit;
	text-decoration-color: rgba(255, 255, 255, 0.55);
}

.has-gruen-background-color .wp-element-button,
.has-gruen-background-color .wp-block-button__link,
.has-ink-background-color .wp-element-button,
.has-ink-background-color .wp-block-button__link { color: inherit; }

.has-gruen-background-color .wp-element-button:hover,
.has-ink-background-color .wp-element-button:hover { color: var(--wp--preset--color--hell); }

.has-gruen-background-color .ps-platzhalter,
.has-ink-background-color .ps-platzhalter {
	background: #24543C;
	border-color: #3A5F49;
}

.has-gruen-background-color .ps-platzhalter p,
.has-ink-background-color .ps-platzhalter p { color: #A9BFAE; }

/* Vom Editor gesetzte Textfarben dürfen auf dunklem Grund nicht
   gewinnen – WordPress gibt ihnen !important mit. */
.has-gruen-background-color .has-body-color,
.has-ink-background-color .has-body-color { color: inherit !important; }

.has-gruen-background-color .has-muted-color,
.has-gruen-background-color .has-akzent-color,
.has-ink-background-color .has-muted-color,
.has-ink-background-color .has-akzent-color { color: #A9BFAE !important; }

.has-gruen-background-color .ps-label,
.has-ink-background-color .ps-label,
.has-gruen-background-color .ps-zeile .ps-nummer,
.has-ink-background-color .ps-zeile .ps-nummer { color: #A9BFAE; }

.has-gruen-background-color .wp-block-columns.ps-zeile,
.has-ink-background-color .wp-block-columns.ps-zeile,
.has-gruen-background-color .wp-block-columns.ps-zeile:last-of-type,
.has-ink-background-color .wp-block-columns.ps-zeile:last-of-type { border-color: #3A5F49; }

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

.ps-header {
	border-bottom: 1px solid var(--wp--preset--color--linie);
	padding-block: 1.375rem;
}

.ps-header .wp-block-site-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
	max-width: 20ch;
}

.ps-header .wp-block-site-title a { color: var(--wp--preset--color--ink); text-decoration: none; }

.ps-header .wp-block-navigation { font-size: var(--wp--preset--font-size--small); }

.ps-header .wp-block-navigation a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
}

.ps-header .wp-block-navigation a:hover { border-bottom-color: var(--wp--preset--color--akzent); }
.ps-header .wp-block-navigation .current-menu-item a { border-bottom-color: var(--wp--preset--color--ink); }

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

.ps-footer {
	border-top: 1px solid var(--wp--preset--color--linie);
	padding-block: 3.5rem 4rem;
}

.ps-footer p { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
.ps-footer strong { color: var(--wp--preset--color--ink); font-weight: 600; }
.ps-footer a { color: var(--wp--preset--color--muted); text-decoration: none; }
.ps-footer a:hover { color: var(--wp--preset--color--ink); text-decoration: underline; }
.ps-footer .wp-block-columns { gap: 2rem 3.5rem; align-items: flex-start; margin-block: 0; }

/* ---- Kleinere Bildschirme -------------------------------------------- */

@media (max-width: 900px) {
	.ps-section { padding-block: 4.25rem; }
	.ps-section--tight { padding-block: 3.25rem; }
	.ps-hero { padding-block: 4.5rem 3rem; }
}

@media (max-width: 640px) {
	.ps-section { padding-block: 3.25rem; }
	.ps-section--tight { padding-block: 2.75rem; }
	.ps-hero { padding-block: 3.5rem 2.5rem; }
	.wp-block-columns.ps-zeile { padding-block: 1.375rem; gap: 0.5rem 1.5rem; }
	.ps-zeile .ps-nummer { padding-top: 0; }
	.ps-platzhalter { min-height: 220px; }
	.ps-header { padding-block: 1rem; }
}