/*
Theme Name: Christen in Lantenbach
Theme URI: https://christen-in-lantenbach.de
Author: Gemeinde Christen in Lantenbach
Description: Schlankes Block-Theme für die Website der Gemeinde Christen in Lantenbach. Ohne Baukasten-Plugin, ohne externe Dienste.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
Version: 1.5.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: christen-in-lantenbach
Tags: block-theme, one-column, accessibility-ready
*/

/* --------------------------------------------------------------------------
   Ergänzungen, die sich in theme.json nicht ausdrücken lassen.
   Bewusst kurz halten: Alles Gestalterische gehört nach theme.json.
   -------------------------------------------------------------------------- */

/* Die Wortmarke im Kopf ist ein Link, soll aber nicht unterstrichen sein. */
.cil-wortmarke a {
	text-decoration: none;
}

/* Die Wortmarke bekommt beim Überfahren keinen Unterstrich, sondern
   denselben ruhigen Farbwechsel wie die Navigation. */
.cil-wortmarke a:hover,
.cil-wortmarke a:focus-visible {
	text-decoration: none;
	color: var(--wp--preset--color--salbei-dunkel) !important;
}

.cil-wortmarke a {
	transition: color 200ms ease;
}

/* Die drei Einstiegskarten enden auf gleicher Höhe, die Knöpfe stehen
   bündig unten — sonst franst die Reihe bei ungleich langen Texten aus. */
@media (min-width: 782px) {
	.cil-karten > .wp-block-column {
		display: flex;
		flex-direction: column;
	}

	.cil-karten > .wp-block-column > .wp-block-group {
		display: flex;
		flex: 1;
		flex-direction: column;
	}

	.cil-karten .wp-block-buttons {
		margin-top: auto;
		padding-top: 0.8rem;
	}
}

/* Wortmarke und Navigation laufen in der Überschriftenschrift — wie beim
   Vorbild, wo nur der Fließtext eine Slab-Serif ist. Der Ortsname ist davon
   ausgenommen: Er steht in der Handschrift (siehe unten). */
.cil-wortmarke,
.wp-block-navigation {
	font-family: var(--wp--preset--font-family--ueberschrift);
}

/* Die Wortmarke nach der Vorlage der Gemeinde: „CHRISTEN“ in weit gestellten
   Versalien, darunter der Ortsname in der Handschrift. Die Farben bleiben
   unverändert — geändert wurde ausdrücklich nur der Stil.

   Die Versalien entstehen erst hier und nicht im Text: Vorlesegeräte und
   Suchmaschinen bekommen weiterhin „Christen“ zu lesen, nicht „CHRISTEN“. */
.cil-wortmarke,
.cil-wortmarke-fuss {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	/* Der letzte Buchstabe schleppt seinen Sperrabstand sonst mit und
	   schiebt die Zeile sichtbar aus der Flucht. */
	margin-right: -0.1em;
}

/* Der Gruß auf dem Hero-Bild steht ohne Schleier über dem Foto. Damit er
   trotzdem lesbar bleibt, bringt er seinen Kontrast selbst mit: vier
   gestaffelte Schatten, vom harten Rand bis zum weichen Hof. Der Hof allein
   reicht nicht über dem hellen Wasser, der harte Rand allein sieht nach
   Aufkleber aus.

   Gemessen an den Bildpunkten, an denen wirklich Schrift steht: ohne
   Schatten liegen 81 % der Schriftfläche unter 4,5 : 1, mit Schatten sind es
   0,1 %. Die Begründung in voller Länge steht im Kopf von
   patterns/hero-willkommen.php. */
.cil-hero-gruss {
	text-shadow:
		0 1px 2px rgba(17, 17, 17, 0.75),
		0 2px 8px rgba(17, 17, 17, 0.7),
		0 0 26px rgba(17, 17, 17, 0.6),
		0 0 60px rgba(17, 17, 17, 0.45);
}

/* --------------------------------------------------------------------------
   Bewegung
   Grundsatz: dezent und abschaltbar. Ohne JavaScript ist alles sichtbar —
   erst das Skript setzt die Klasse cil-bewegung und macht Animation möglich.
   Wer im Betriebssystem "Bewegung reduzieren" gewählt hat, bekommt keine.
   -------------------------------------------------------------------------- */

/* Sanftes Einblenden beim Hochscrollen */
.cil-bewegung .cil-einblenden {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: opacity, transform;
}

.cil-bewegung .cil-einblenden.cil-sichtbar {
	opacity: 1;
	transform: none;
}

/* Das Hero-Bild wandert über eine halbe Minute unmerklich näher.
   Sehr langsam und sehr wenig — es soll auffallen, dass es lebt,
   nicht, dass es sich bewegt. */
.cil-bewegung .wp-block-cover .wp-block-cover__image-background {
	animation: cil-hero-naeher 32s ease-out both;
}

@keyframes cil-hero-naeher {
	from { transform: scale(1.06); }
	to   { transform: scale(1); }
}

/* Karten heben sich beim Überfahren leicht an */
.cil-karten > .wp-block-column {
	transition: transform 260ms ease, box-shadow 260ms ease;
}

@media (min-width: 782px) and (hover: hover) {
	.cil-karten > .wp-block-column:hover,
	.cil-karten > .wp-block-column:focus-within {
		transform: translateY(-6px);
		box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
	}
}

/* Kartenbilder ziehen beim Überfahren sacht an */
.cil-karten .wp-block-image {
	overflow: hidden;
}

.cil-karten .wp-block-image img {
	display: block;
	width: 100%;
	transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (hover: hover) {
	.cil-karten > .wp-block-column:hover .wp-block-image img {
		transform: scale(1.05);
	}
}

/* Die Trennlinie unter der Begrüßung wächst beim Erscheinen auf */
.cil-bewegung .wp-block-separator.cil-einblenden {
	transform-origin: left center;
}

.cil-bewegung .wp-block-separator.cil-einblenden:not(.cil-sichtbar) {
	transform: scaleX(0.15);
	opacity: 0;
}

.cil-bewegung .wp-block-separator.cil-einblenden.cil-sichtbar {
	transform: scaleX(1);
	transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 500ms ease;
}

/* Knöpfe und Links reagieren spürbar, aber ruhig */
.wp-element-button,
.wp-block-button__link {
	transition: background-color 200ms ease, transform 160ms ease;
}

@media (hover: hover) {
	.wp-element-button:hover,
	.wp-block-button__link:hover {
		transform: translateY(-2px);
	}
}

.wp-block-navigation a {
	transition: color 180ms ease;
}

/* Wer Bewegung reduziert haben möchte, bekommt gar keine. */
@media (prefers-reduced-motion: reduce) {
	.cil-einblenden,
	.cil-karten > .wp-block-column,
	.cil-karten .wp-block-image img,
	.wp-element-button,
	.wp-block-button__link,
	.wp-block-navigation a,
	.wp-block-cover .wp-block-cover__image-background {
		animation: none !important;
		transition: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
}

/* Beim Drucken ist alles sichtbar — Papier kennt kein Scrollen. */
@media print {
	.cil-einblenden {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* --------------------------------------------------------------------------
   Links
   Drei Fälle mit verschiedenen Regeln:
   1. Navigation und Fußzeile: kein Unterstrich, dafür eine Linie, die beim
      Überfahren von links einläuft.
   2. Links mitten im Fließtext: Unterstrich bleibt. Dort ist er kein Zierrat,
      sondern das einzige Merkmal, an dem man den Link erkennt — Farbe allein
      reicht für Farbfehlsichtige nicht aus.
   3. Knöpfe: unverändert.
   -------------------------------------------------------------------------- */

/* 1 — Navigation und Fußzeile */
.wp-block-navigation a,
footer .wp-block-columns a {
	position: relative;
	text-decoration: none;
}

.wp-block-navigation a::after,
footer .wp-block-columns a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.28em;
	height: 2px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.wp-block-navigation a:hover::after,
.wp-block-navigation a:focus-visible::after,
footer .wp-block-columns a:hover::after,
footer .wp-block-columns a:focus-visible::after {
	transform: scaleX(1);
	transform-origin: left center;
}

/* WordPress setzt die Farbklassen der Palette mit !important. Um beim
   Überfahren überhaupt die Farbe wechseln zu können, muss hier ebenfalls
   !important stehen — sonst gewinnt die Grundfarbe. */
.wp-block-navigation a:hover,
.wp-block-navigation a:focus-visible {
	color: var(--wp--preset--color--salbei-dunkel) !important;
}

/* In der Fußzeile wäre Salbei dunkel auf Anthrazit zu dunkel — dort wird
   beim Überfahren aufgehellt statt abgedunkelt. */
footer .wp-block-columns a:hover,
footer .wp-block-columns a:focus-visible {
	color: var(--wp--preset--color--salbei) !important;
}

/* Die Seite, auf der man gerade ist, bleibt dauerhaft markiert. */
.wp-block-navigation a[aria-current="page"] {
	color: var(--wp--preset--color--salbei-dunkel) !important;
	font-weight: 600;
}

.wp-block-navigation a[aria-current="page"]::after {
	transform: scaleX(1);
	transform-origin: left center;
}

/* Tastaturbedienung muss sichtbar bleiben — ohne Ausnahme. */
.wp-block-navigation a:focus-visible,
footer .wp-block-columns a:focus-visible,
.wp-block-button__link:focus-visible,
.cil-wortmarke a:focus-visible {
	outline: 2px solid var(--wp--preset--color--salbei-dunkel);
	outline-offset: 3px;
	border-radius: 2px;
}

footer .wp-block-columns a:focus-visible {
	outline-color: var(--wp--preset--color--salbei);
}

/* 2 — Links im Fließtext behalten ihren Unterstrich, nur feiner gesetzt. */
.wp-block-post-content p a,
.wp-block-post-content li a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: text-decoration-thickness 150ms ease, color 150ms ease;
}

.wp-block-post-content p a:hover,
.wp-block-post-content li a:hover {
	text-decoration-thickness: 2px;
}

/* Wer Bewegung reduziert, bekommt die Linie ohne Einlaufen. */
@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation a::after,
	footer .wp-block-columns a::after {
		transition: none !important;
	}
}

/* --------------------------------------------------------------------------
   Karte (Zwei-Klick-Lösung)
   Bis jemand auf "Karte laden" drückt, wird nichts an Google gesendet.
   -------------------------------------------------------------------------- */

.cil-karte {
	position: relative;
	overflow: hidden;
	background-color: var(--wp--preset--color--grau-hell);
	border-left: 4px solid var(--wp--preset--color--salbei-dunkel);
}

.cil-karte__vorschau {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: flex-start;
	padding: 1.75rem;
}

.cil-karte__hinweis {
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.7;
}

.cil-karte__knopf {
	font-family: var(--wp--preset--font-family--ueberschrift);
	font-size: 1rem;
	font-weight: 400;
	color: var(--wp--preset--color--weiss);
	background-color: var(--wp--preset--color--salbei-dunkel);
	border: 0;
	border-radius: 5px;
	padding: 7px 14px;
	cursor: pointer;
	transition: background-color 200ms ease, transform 160ms ease;
}

.cil-karte__knopf:hover {
	background-color: var(--wp--preset--color--anthrazit);
	transform: translateY(-2px);
}

.cil-karte__knopf:focus-visible {
	outline: 2px solid var(--wp--preset--color--salbei-dunkel);
	outline-offset: 3px;
}

.cil-karte__ersatz {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.7;
}

.cil-karte--geladen {
	border-left: 0;
	aspect-ratio: 16 / 9;
}

.cil-karte iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 320px;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.cil-karte__knopf {
		transition: none !important;
		transform: none !important;
	}
}

/* „Aktuelles“ wird in der Navigation hervorgehoben — dort ändert sich
   etwas, die übrigen Punkte stehen fest. */
.wp-block-navigation .cil-hervorgehoben a {
	color: var(--wp--preset--color--salbei-dunkel) !important;
	font-weight: 600;
}

.wp-block-navigation .cil-hervorgehoben a::after {
	background-color: var(--wp--preset--color--salbei-dunkel);
}

/* Fragen zum ersten Besuch: feine Trennlinien statt Kästen */
.cil-fragen > .wp-block-group + .wp-block-group {
	border-top: 1px solid #e0d9cc;
}

/* Mehrere Hinweise im Kasten „Aktuelles“ brauchen eine Trennung, sonst
   laufen sie ineinander. Dieselbe feine Linie wie bei den Fragen. */
.cil-aktuelles .cil-hinweis + .cil-hinweis {
	border-top: 1px solid #d6cdbb;
	padding-top: 1.2rem;
}

/* Die Wortmarke: „Christen“ und „in Lantenbach“ stehen direkt übereinander,
   ohne den Abstand, den Absätze sonst haben. */
.cil-ortsname {
	margin-top: 0.1rem;
}