/*
Theme Name:   Vital Motion
Description:  Child-Theme von Twenty Twenty-Four für die Landingpage von Vital-Motion Physio in Kriens.
Template:     twentytwentyfour
Version:      0.6.1
Text Domain:  vital-motion
*/

/*
 * Landingpage auf einen Bildschirm. Farben/Schrift-Familie in theme.json, hier Layout und Grössen.
 *
 * Schriftgrössen folgen EINER Reihe mit Faktor 1.25 (Stufe 0 = 1rem = 16px):
 *   -1: 0.8rem   0: 1rem   1: 1.25rem   2: 1.563rem   3: 1.953rem   4: 2.441rem   7: 4.768rem
 *
 *                     Handy     Desktop
 *   Text, Button        0         0
 *   Footer (alles)      0         0
 *   Eröffnungsdatum     0         1
 *   Angebote            2         2
 *   Titel               4    →    7   (dazwischen fliessend, auf niedrigen Bildschirmen begrenzt)
 */

:root {
	--vm-s-1: 0.8rem;
	--vm-s0: 1rem;
	--vm-s1: 1.25rem;
	--vm-s2: 1.563rem;
	--vm-s3: 1.953rem;
	--vm-s4: 2.441rem;
	--vm-s7: 4.768rem;
}

/* ---------- Schrift ---------- */

h1, h2, h3, h4, h5, h6,
.vm-services {
	font-stretch: 75%;
}

/* Nur für Screenreader (z.B. Überschrift des Footers). */
.vm-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: 0 !important;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

a:focus-visible {
	outline: 2px solid var(--wp--preset--color--kupfer-dunkel);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---------- Ein Bildschirm ---------- */

.home .wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}

.home .wp-site-blocks > main {
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Der Einstieg nimmt den freien Platz; Abstände hängen an der Bildschirmhöhe. */
.home .vm-hero {
	flex: 1;
	display: grid;
	align-content: center;
	padding-top: clamp(1.25rem, 5vh, 3.5rem) !important;
	padding-bottom: clamp(1.25rem, 5vh, 3.5rem) !important;
}

/* Abschnitte stossen ohne Lücke aneinander (gilt auch im Editor). */
footer.wp-block-template-part {
	margin-block-start: 0;
}

/* ---------- Header ---------- */

/* Schriftzug wie im Logo: VITAL-MOTION, darunter P H Y S I O gesperrt. */
.vm-wordmark,
.vm-wordmark-sub {
	margin: 0;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

.vm-wordmark {
	font-size: var(--vm-s0);
	font-weight: 700;
	letter-spacing: 0.04em;
}

.vm-wordmark-sub {
	font-size: 0.65rem;
	font-weight: 500;
	letter-spacing: 0.42em;
}

.vm-header-phone {
	margin: 0;
	font-size: var(--vm-s0);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.vm-header-phone a {
	color: var(--wp--preset--color--accent-4);
	text-decoration: none;
}

.vm-header-phone a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ---------- Einstieg ---------- */

/* Die Bildmarke ragt bewusst über den Rand hinaus; hier wird sie abgeschnitten, ohne seitliches Scrollen. */
.vm-hero {
	position: relative;
	overflow: clip;
}

.vm-hero-text {
	position: relative;
	z-index: 1;
}

/* Eröffnungsdatum mit einem Wirbel-Punkt aus dem Logo davor. */
.vm-opening {
	margin: 0;
	font-size: var(--vm-s1);
	font-weight: 600;
	color: var(--wp--preset--color--accent-4);
}

.vm-opening::before,
.vm-services li::before {
	content: "";
	display: inline-block;
	flex: none;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-3);
}

.vm-opening::before {
	width: 0.5em;
	height: 0.5em;
	margin-right: 0.55em;
	vertical-align: 0.08em;
}

.vm-claim {
	margin-top: clamp(0.5rem, 2vh, 1.25rem);
	font-size: clamp(var(--vm-s4), min(5vw, 9vh), var(--vm-s7));
	line-height: 1.08;
	text-wrap: balance;
}

.vm-cta {
	margin-top: clamp(1rem, 3.5vh, 2rem);
}

/* Angebote mit je einem Wirbel-Punkt aus dem Logo, alle gleich gross. */
.vm-services {
	list-style: none;
	margin: clamp(1.25rem, 5vh, 3rem) 0 0;
	padding: 0;
	padding-inline-start: 0 !important; /* Standard-Einzug von WordPress-Listen aufheben */
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1.4em;
	font-size: var(--vm-s2);
	font-weight: 600;
	line-height: 1.1;
	color: var(--wp--preset--color--accent-5);
}

.vm-services li {
	--vm-dot: 0.3em;
	display: flex;
	align-items: center;
	gap: 0.4em;
}

.vm-services li::before {
	width: var(--vm-dot);
	height: var(--vm-dot);
}

/* Hinweis zur Physio und Sport Arena: ruhige Fusszeile des Einstiegs, Stufe 0. */
.vm-note {
	margin: clamp(1rem, 3.5vh, 2rem) 0 0;
	max-width: 34em;
	font-size: var(--vm-s0);
	line-height: 1.45;
	color: var(--wp--preset--color--accent-4);
	text-wrap: pretty;
}

/* Firmenname nie am Bindestrich umbrechen. */
.vm-nowrap {
	white-space: nowrap;
}

/* Grosse Bildmarke: breiter als ihre Spalte, rechts angeschnitten, Höhe an den Bildschirm gebunden. */
.vm-hero-mark {
	margin: 0;
}

.vm-hero-mark img {
	display: block;
	width: min(150%, 64vh);
	max-width: none;
	height: auto;
	animation: vm-orbit 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both;
}

/* Die einzige Bewegung der Seite: die Figur dreht sich einmal entlang ihres Kreises in Position. */
@keyframes vm-orbit {
	from {
		opacity: 0;
		transform: rotate(-24deg);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ---------- Footer mit Kontakt ----------
 * Ein Streifen, eine Schriftgrösse, ein Raster: Adresse | Telefon + E-Mail | Copyright.
 * Hierarchie nur über die Farbe: Firmenname und Links Warmweiss, Rest Sand, Copyright Taupe.
 */

.vm-footer {
	display: grid;
	grid-template-columns: auto auto 1fr;
	align-items: end;
	column-gap: clamp(2.5rem, 7vw, 6rem);
}

.vm-footer > * {
	margin: 0 !important;
}

.vm-footer p {
	font-size: var(--vm-s0);
	line-height: 1.5;
}

.vm-footer-name {
	color: var(--wp--preset--color--base);
}

.vm-footer-reach a {
	color: var(--wp--preset--color--base);
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}

.vm-footer-reach a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.vm-footer-copy {
	justify-self: end;
	color: var(--wp--preset--color--contrast-3);
}

#kontakt a:focus-visible {
	outline-color: var(--wp--preset--color--accent);
}

/* ---------- Handy: „Wirbelsäule“ ----------
 * Eigenes Konzept statt verkleinerter Desktop: alles mittig um eine senkrechte Achse aus
 * Kupfer-Punkten (die Wirbelsäule aus dem Logo). Die Angebote sitzen abwechselnd links und rechts,
 * ihre gleich grossen Punkte liegen genau auf der Achse; dazwischen je zwei kleine Wirbel im
 * gleichen Takt, oben und unten zwei auslaufende.
 * Die grosse Bildmarke entfällt hier – die Wirbelsäule ist das Bild.
 */

@media (max-width: 781px) {
	/* Header: nur Logo + Schriftzug; angerufen wird über den Button. */
	.vm-header-phone {
		display: none;
	}

	.vm-hero .wp-block-column:has(.vm-hero-mark) {
		display: none;
	}

	.vm-hero-text {
		text-align: center;
	}

	.vm-opening {
		font-size: var(--vm-s0);
	}

	.vm-claim {
		font-size: var(--vm-s4);
	}

	.vm-cta {
		justify-content: center;
	}

	/*
	 * Die Achse: drei Zeilen, jede mit Text | Wirbel | Text.
	 * Takt: Zeilenhöhe 1.1em + Abstand 0.95em = 2.05em von Wirbel zu Wirbel; die kleinen Wirbel
	 * sitzen bei einem und zwei Dritteln davon. Sie sind SVG-Kreise (immer rund, nie angeschnitten).
	 */
	.vm-services {
		--vm-axis: 2.5rem;
		--vm-step: 2.05em;
		position: relative;
		display: grid;
		gap: 0.95em;
		margin-top: clamp(1.25rem, 4vh, 2rem);
		padding-block: 1em !important;
		/* Stufe 2, auf sehr schmalen Handys etwas kleiner, damit „Physiotherapie“ nicht umbricht. */
		font-size: min(var(--vm-s2), 6.4vw);
		white-space: nowrap;
	}

	.vm-services li {
		--vm-dot: 0.55em;
		display: grid;
		grid-template-columns: 1fr var(--vm-axis) 1fr;
		align-items: center;
		gap: 0;
		position: relative;
	}

	/* Der grosse Wirbel jedes Angebots sitzt in der Mittelspalte. */
	.vm-services li::before {
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
	}

	/* Kleine Wirbel: oberhalb des ersten (auslaufend), zwischen den Angeboten, unterhalb des letzten (auslaufend). */
	.vm-services::before,
	.vm-services li::after {
		content: "";
		position: absolute;
		left: 50%;
		width: 12px;
		height: var(--vm-step);
		translate: -50% 0;
		background-repeat: no-repeat;
		pointer-events: none;
	}

	.vm-services::before {
		top: calc(1em + 0.55em - var(--vm-step));
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23b36836'%3E%3Ccircle cx='50%25' cy='33.3%25' r='1.6'/%3E%3Ccircle cx='50%25' cy='66.7%25' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
	}

	.vm-services li::after {
		top: 50%;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23b36836'%3E%3Ccircle cx='50%25' cy='33.3%25' r='2.6'/%3E%3Ccircle cx='50%25' cy='66.7%25' r='2.6'/%3E%3C/g%3E%3C/svg%3E");
	}

	.vm-services li:last-child::after {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23b36836'%3E%3Ccircle cx='50%25' cy='33.3%25' r='2.2'/%3E%3Ccircle cx='50%25' cy='66.7%25' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
	}

	/* Links: Text rechtsbündig zur Achse. */
	.vm-services li:nth-child(odd) {
		text-align: right;
	}

	/* Rechts: Spalten gespiegelt, Text linksbündig zur Achse. */
	.vm-services li:nth-child(even) {
		direction: rtl;
		text-align: left;
	}

	.vm-note {
		margin-inline: auto;
	}

	/* Footer: dieselben drei Teile mittig untereinander, gleiche Grösse. */
	.vm-footer {
		grid-template-columns: 1fr;
		row-gap: 1rem;
		text-align: center;
	}

	.vm-footer-copy {
		justify-self: center;
	}
}

/* ---------- Weniger Bewegung, wenn im System so eingestellt ---------- */

@media (prefers-reduced-motion: reduce) {
	.vm-hero-mark img {
		animation: none;
	}
}