/*
Theme Name: Zahnarztpraxis Michendorf
Theme URI: https://zahn.borkason.org
Description: Modernes, vertrauenswürdiges Redesign der Zahnarztpraxis-Website Michendorf. Child-Theme von Twenty Twenty-Five.
Author: Zahnarztpraxis Michendorf
Template: twentytwentyfive
Text Domain: zahnarztpraxis-michendorf
Version: 1.0.0
Requires PHP: 8.0
*/

/* -----------------------------------------------------------------------
   Silbentrennung für lange deutsche Komposita (z. B. "Parodontitis-
   behandlung", "Implantatversorgung") – ohne das brechen Überschriften
   auf schmalen Bildschirmen sonst mitten im Wort um.
----------------------------------------------------------------------- */
.wp-block-heading,
.wp-block-post-title {
	overflow-wrap: break-word;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/* -----------------------------------------------------------------------
   Sticky Header
----------------------------------------------------------------------- */
.zpm-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--base);
	box-shadow: 0 1px 0 var(--wp--preset--color--border);
}

/* -----------------------------------------------------------------------
   Öffnungszeiten- / Kontakt-Badges (Header & Startseite)
----------------------------------------------------------------------- */
.zpm-quick-fact {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}

.zpm-quick-fact .zpm-quick-fact__icon {
	flex-shrink: 0;
	box-sizing: content-box;
	width: 1.3em;
	height: 1.3em;
	padding: 0.45em;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary-tint);
	color: var(--wp--preset--color--primary);
}

/* -----------------------------------------------------------------------
   Cards (Leistungen, Team-Teaser)
----------------------------------------------------------------------- */
.zpm-card {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 18px;
	padding: var(--wp--preset--spacing--40);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Gleiche Kartenhöhe nur innerhalb von Grid-Layouts (Leistungen, Praxisteam) –
   nicht bei einzelnen Karten wie Öffnungszeiten/Anfahrt, sonst strecken sich
   diese auf die Höhe der Nachbarspalte und erzeugen Leerraum/Überlagerung. */
.is-layout-grid > .zpm-card {
	height: 100%;
}

.zpm-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--custom--shadow--soft, 0 2px 10px rgba(107,45,84,0.10));
}

/* Team-Kacheln auf der Startseite: immer exakt 2 Spalten (2x2 bei 4 Personen),
   statt sich wie ein reguläres Grid an die verfügbare Spaltenbreite anzupassen
   (dort hätten z. B. 3 Karten in eine Reihe gepasst und die 4. wäre allein
   in die nächste Zeile gerutscht). Erst auf sehr schmalen Bildschirmen wird
   einspaltig unter­einander dargestellt. */
.zpm-team-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media (max-width: 480px) {
	.zpm-team-grid {
		grid-template-columns: 1fr !important;
	}
}

/* Rund gestellte Portraits (Praxisteam) erhalten einen farbigen Ring */
.wp-block-image.is-style-rounded img {
	box-shadow: 0 0 0 4px var(--wp--preset--color--primary-tint);
}

/* Dezenter, verspielter Akzentbalken unter zentrierten Abschnittstiteln */
.zpm-section-title {
	text-align: center;
}

.zpm-section-title::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	margin: 0.9rem auto 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--wp--preset--color--accent), var(--wp--preset--color--highlight));
}

.wp-block-button__link {
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--custom--shadow--soft, 0 2px 10px rgba(107,45,84,0.10));
}

/* -----------------------------------------------------------------------
   Slideshow ("Einblicke in unsere Praxis")
----------------------------------------------------------------------- */
.zpm-slideshow {
	position: relative;
}

.zpm-slideshow__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	border-radius: 18px;
	scrollbar-width: none;
}

.zpm-slideshow__track::-webkit-scrollbar {
	display: none;
}

.zpm-slideshow__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	aspect-ratio: 16 / 9;
}

.zpm-slideshow__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.zpm-slideshow__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	box-shadow: var(--wp--custom--shadow--raised, 0 10px 26px rgba(107,45,84,0.16));
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.zpm-slideshow__arrow svg {
	width: 20px;
	height: 20px;
}

.zpm-slideshow__arrow:hover {
	background-color: var(--wp--preset--color--primary-tint);
	transform: translateY(-50%) scale(1.06);
}

.zpm-slideshow__arrow--prev {
	left: 12px;
}

.zpm-slideshow__arrow--next {
	right: 12px;
}

.zpm-slideshow__dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1rem;
}

.zpm-slideshow__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: none;
	padding: 0;
	background-color: var(--wp--preset--color--border);
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.zpm-slideshow__dot:hover {
	background-color: var(--wp--preset--color--primary-tint);
}

.zpm-slideshow__dot.is-active {
	background-color: var(--wp--preset--color--accent);
	transform: scale(1.25);
}

@media (prefers-reduced-motion: reduce) {
	.zpm-slideshow__track {
		scroll-behavior: auto;
	}
}

/* -----------------------------------------------------------------------
   TablePress: responsive & an das Theme angepasst
   (Rein präsentationell – Tabelleninhalte bleiben unverändert)
----------------------------------------------------------------------- */
.zpm-table-scroll {
	overflow-x: auto;
	margin-block: 1.75rem;
	-webkit-overflow-scrolling: touch;
}

table.tablepress {
	/* TablePress rendert leere Kopfzeilen an gefallweise als <td> statt <th>;
	   die Header-Farbe daher über TablePress' eigene CSS-Variablen setzen,
	   damit wirklich jede Zelle der Kopf-/Fußzeile erfasst wird. */
	--head-bg-color: var(--wp--preset--color--primary-tint);
	--head-text-color: var(--wp--preset--color--primary-dark);
	--odd-bg-color: var(--wp--preset--color--base);
	--even-bg-color: var(--wp--preset--color--surface);
	--hover-bg-color: var(--wp--preset--color--surface);
	--border-color: var(--wp--preset--color--border);
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

table.tablepress th,
table.tablepress td {
	padding: 0.7rem 1rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
	text-align: left;
	vertical-align: top;
}

table.tablepress thead th,
table.tablepress thead td {
	font-weight: 700;
}

table.tablepress tbody tr:hover {
	background-color: var(--wp--preset--color--surface);
}

/* Team-Profiltabellen: Manche haben die Spalten Bild | Zeitraum | Beschreibung
   für eine Person (--career), andere mehrere Personen nebeneinander mit
   Name/Bild/Zeitraum/Text je Spalte (--people); siehe zpm_wrap_tablepress_tables()
   in functions.php. table-layout:auto zwingt beide Varianten sonst dazu, über
   den mobilen Viewport hinauszuragen – Inhalte landen dann unsichtbar
   außerhalb des Bildschirms statt sichtbar umzubrechen. */
@media (max-width: 600px) {
	.zpm-table-scroll table.tablepress {
		table-layout: fixed;
		width: 100%;
	}

	/* max-width 200px = tatsächliche Bildgröße der Team-Fotos. Ohne diese Grenze
	   würde z. B. das Foto einer einzelnen Person in einer einspaltigen Tabelle
	   auf die volle Tabellenbreite gestreckt und dadurch deutlich größer wirken
	   als die Fotos von Personen, die sich eine mehrspaltige Tabelle teilen. */
	.zpm-table-scroll table.tablepress img {
		width: 100% !important;
		max-width: 200px !important;
		height: auto !important;
	}

	/* Einzelperson: schmale Bild-/Zeitraumspalte, viel Platz für den Text. */
	.zpm-table-scroll--career table.tablepress td:first-child:not(:only-child),
	.zpm-table-scroll--career table.tablepress th:first-child:not(:only-child) {
		width: 30%;
	}

	.zpm-table-scroll--career table.tablepress td:nth-child(2),
	.zpm-table-scroll--career table.tablepress th:nth-child(2) {
		width: 24%;
	}

	/* Mehrere Personen nebeneinander: alle Spalten gleich breit (table-layout:fixed
	   ohne weitere Breitenangabe verteilt den Platz bereits automatisch gleichmäßig). */

	/* Einzelne lange Wörter ohne Leerzeichen (z. B. "Prophylaxeassistentin")
	   liefen in der schmalen, fest breiten Spalte sonst über den Rand hinaus. */
	.zpm-table-scroll table.tablepress td,
	.zpm-table-scroll table.tablepress th {
		overflow-wrap: break-word;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
}

/* -----------------------------------------------------------------------
   Contact Form 7: an Theme-Typografie und -Farben angleichen
----------------------------------------------------------------------- */
.wpcf7-form {
	max-width: 40rem;
}

.wpcf7-form p {
	margin-bottom: 1.1rem;
}

.wpcf7-form label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
	width: 100%;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
}

.wpcf7-form input[type="submit"] {
	font-family: inherit;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	border: none;
	border-radius: 8px;
	padding: 0.9rem 1.75rem;
	cursor: pointer;
}

.wpcf7-form input[type="submit"]:hover {
	background-color: var(--wp--preset--color--accent-dark);
}

.wpcf7-not-valid-tip {
	color: var(--wp--preset--color--accent-dark);
	font-size: var(--wp--preset--font-size--small);
}

.wpcf7-response-output {
	border-radius: 8px !important;
	padding: 1rem !important;
}

/* -----------------------------------------------------------------------
   Diverses
----------------------------------------------------------------------- */
.zpm-emergency-link {
	color: var(--wp--preset--color--accent-dark);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid currentColor;
}

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

	.zpm-card,
	.wp-block-button__link {
		transition: none !important;
	}

	.zpm-card:hover,
	.wp-block-button__link:hover {
		transform: none !important;
	}
}