/*
Theme Name: juleica online
Theme URI: https://juleicaonline.de
Author: Studienzentrum für evangelische Jugendarbeit in Josefstal e.V.
Description: Minimales Block-Theme für juleicaonline.de. Kein Page Builder, kein Slider-Plugin, keine Fremdabhängigkeit. Farben und Abstände stehen in theme.json.
Version: 0.2.5
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: juleicaonline
*/

/* Nur was theme.json nicht kann. Alles Gestalterische gehört dorthin. */

/* Sichtbarer Fokus. Schwarz statt Gelb, weil Gelb auf hellem Grund
   dasselbe Kontrastproblem hätte wie gelbe Schrift. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--tinte);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Auf gelber Fläche kehrt sich der Ring um. */
:where(.wp-element-button, .wp-block-button__link):focus-visible {
	outline-color: var(--wp--preset--color--weiss);
	box-shadow: 0 0 0 5px var(--wp--preset--color--tinte);
}

/* Sprunglink: sichtbar, sobald er den Fokus bekommt. */
.sprunglink {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 12px 20px;
	background: var(--wp--preset--color--tinte);
	color: var(--wp--preset--color--weiss);
	text-decoration: none;
}
.sprunglink:focus {
	left: 0;
}

/* Bilder behalten ihr Seitenverhältnis und springen beim Laden nicht.
   Gegen CLS – der einzige Core-Web-Vitals-Wert, an dem die Seite scheitert. */
img,
video {
	max-width: 100%;
	height: auto;
}

/* Sprungziele nicht unter dem Kopfbereich verstecken. */
:target {
	scroll-margin-top: 2rem;
}

/* Wer Bewegung reduziert haben will, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ------------------------------------------------------------------
   Kopfbereich der Startseite

   Nachbau des Slider-Revolution-Heros als statisches HTML. Werte aus den
   Originaldaten (SR7.JSON), siehe 20260815_Design-Tokens.md, Abschnitt 4a.

   Zwei Fassungen zum Vergleich:
   --a  Blau abgedunkelt (#0680a8), weißer Text – 4,51:1
   --b  Originalverlauf, dunkle Auflage hinter dem Text – 4,93:1
   ------------------------------------------------------------------ */

.juleica-hero {
	position: relative;
	overflow: hidden;
	min-height: 750px;
	display: flex;
	align-items: center;
	/* Netzmuster in den vier Ecken, wie im Original vier Instanzen desselben
	   Bildes. Rein dekorativ, deshalb als Hintergrund und nicht als <img>. */
	background-image:
		url(assets/img/netzmuster.png),
		url(assets/img/netzmuster.png),
		url(assets/img/netzmuster.png),
		url(assets/img/netzmuster.png);
	background-position: left -140px top -140px, right -140px top -140px,
		left -140px bottom -140px, right -140px bottom -140px;
	background-repeat: no-repeat;
	background-size: 460px 460px;
	background-blend-mode: soft-light;
}

/* Der Verlauf liegt unter dem Netzmuster. */
.juleica-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
}

.juleica-hero--a::before {
	background: linear-gradient(90deg, #0680a8, #51e68f);
}

.juleica-hero--b::before {
	background: linear-gradient(90deg, #0796c6, #51e68f);
}

.juleica-hero__innen {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	align-items: center;
	width: 100%;
	max-width: 1250px;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
}

@media (min-width: 900px) {
	.juleica-hero__innen {
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--80);
	}
}

/* Die beiden Handys. Im Original überlappen sie leicht und sind gekippt –
   die Neigung steckt schon in den Bilddateien. Die Breiten sitzen an den
   figure-Elementen: das sind die Flex-Kinder, nicht die Bilder. */
.juleica-hero__bilder {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.juleica-hero__bilder figure {
	margin: 0;
	min-width: 0;
}

.juleica-hero__bilder img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.28));
}

/* Das goldene Gerät liegt im Bild waagerecht in viel freiem Raum,
   deshalb braucht es mehr Breite als das hochkant gekippte. */
.juleica-hero__bilder figure:first-child {
	flex: 0 1 58%;
	margin-right: -12%;
	z-index: 1;
}

.juleica-hero__bilder figure:last-child {
	flex: 0 1 44%;
	margin-bottom: 6%;
}

.juleica-hero__text > * {
	color: #fff;
}

.juleica-hero__text h1 {
	color: #fff;
	margin-bottom: var(--wp--preset--spacing--50);
}

/* Fassung B: dunkle Auflage nur hinter dem Textblock, damit der
   Originalverlauf unangetastet bleibt. */
.juleica-hero--b .juleica-hero__text {
	background: rgba(0, 0, 0, 0.45);
	padding: var(--wp--preset--spacing--60);
	border-radius: 8px;
}

/* Der Button behält das Orange des Originals, bekommt aber dunkle Schrift:
   weiß lag bei 2,20:1, schwarz liegt bei 7,92:1. */
.juleica-hero__text .wp-block-button__link {
	background: linear-gradient(180deg, #ff9500, #ff5e3a);
	color: var(--wp--preset--color--tinte);
	border: 0;
}

.juleica-hero__text .wp-block-button__link:hover,
.juleica-hero__text .wp-block-button__link:focus {
	background: linear-gradient(180deg, #ff5e3a, #ff9500);
	color: var(--wp--preset--color--tinte);
}

@media (max-width: 899px) {
	.juleica-hero {
		min-height: 850px;
		background-size: 420px 420px;
	}
	.juleica-hero__innen {
		grid-template-rows: auto auto;
	}
	.juleica-hero__bilder {
		order: 2;
	}
}

/* Videos. Breite und Höhe stehen im Markup, damit der Platz vor dem Laden
   reserviert ist. Autoplay stumm, aber ohne Vorladen – geladen wird erst,
   wenn das Video ins Bild kommt. */
.juleica-video {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	margin-top: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--tinte);
	/* Der Rückfalltext steht auf dieser dunklen Fläche. Ohne diese Regel erbt er
	   die Fließtextfarbe und käme auf 3,56:1. */
	color: var(--wp--preset--color--weiss);
}

.juleica-video a {
	color: var(--wp--preset--color--weiss);
}

/* Die Hochkant-Videos der Startseite sind 590×1280. In voller Breite wären sie
   über zwei Bildschirme hoch. */
.juleica-video--hoch {
	max-width: 340px;
	margin-left: auto;
	margin-right: auto;
}

/* Logo-Leisten. Alle Logos auf gleiche Höhe, Breite folgt dem Seitenverhältnis –
   die Originale reichen von 168x150 bis 4167x4167. 70 px, weil das kleinste
   Logo (VCP Bayern) genau 70 px hoch ist: So wird keines vergrößert. */
.juleica-logos {
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
	align-items: center;
	margin-top: var(--wp--preset--spacing--50);
}

.juleica-logos figure {
	margin: 0;
}

.juleica-logos img {
	height: 70px;
	width: auto;
	object-fit: contain;
}

@media (max-width: 600px) {
	.juleica-logos img {
		height: 60px;
	}
}

/* Die Förderlogos werden nicht auf gleiche Höhe gebracht, sondern in der Breite
   begrenzt und untereinander gestellt. Das EKD-Logo ist im Original nur
   300 × 41 px – auf Leistenhöhe gestreckt wäre es sichtbar unscharf. */
.juleica-logos--foerderer {
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
}

.juleica-logos--foerderer img {
	height: auto;
	max-width: min(100%, 340px);
}

/* Nummerierte Schritte. Im Bestand waren die Ziffern reine Icon-Bilder neben
   dem Text – hier sind es die Zahlen einer echten Liste. */
.juleica-schritte {
	list-style: none;
	counter-reset: schritt;
	/* Nur den unteren Rand und die Einrückung zurücksetzen. Ein pauschales
	   `margin: 0` nimmt auch den Blockabstand nach der H2 – gemessen 0 px
	   statt der sonst üblichen 24 px, und dann berührt der gelbe
	   Ziffernkreis die Überschrift. Bei 390 px fällt das am meisten auf,
	   weil die Ziffer dort über dem Text steht. */
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
}

.juleica-schritte > li {
	counter-increment: schritt;
	position: relative;
	padding-left: 4.5rem;
	margin-bottom: var(--wp--preset--spacing--70);
}

.juleica-schritte > li::before {
	content: counter(schritt);
	position: absolute;
	left: 0;
	top: 0;
	width: 3rem;
	height: 3rem;
	display: grid;
	place-items: center;
	background: var(--wp--preset--color--gelb);
	color: var(--wp--preset--color--tinte);
	font-size: 1.5rem;
	font-weight: 700;
	border-radius: 50%;
}

.juleica-schritte > li > *:first-child {
	margin-top: 0;
}

@media (max-width: 600px) {
	.juleica-schritte > li {
		padding-left: 0;
		padding-top: 3.75rem;
	}
}

/* FAQ. Die Frage steht als H3 im <summary> – siehe juleica_faq_ueberschrift(). */
.wp-block-details > summary {
	cursor: pointer;
	list-style-position: outside;
}

/* Inline, damit die Überschrift neben dem Aufklapp-Dreieck steht.
   Größe und Farbe kommen aus der h3-Regel in theme.json. */
.juleica-faq__frage {
	display: inline;
}

/* Der Marker soll dieselbe Farbe haben wie die Frage, nicht die Fließtextfarbe. */
.wp-block-details > summary::marker {
	color: var(--wp--preset--color--text-stark);
}

.wp-block-details[open] > summary {
	margin-bottom: var(--wp--preset--spacing--30);
}

/* Nur für Screenreader. */
.nur-vorlesen {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------
   Kopfbereich über dem Hero

   Im Original liegt das Logo auf dem Verlauf, nicht auf einem weißen Balken
   darüber. Nur Seiten mit Hero bekommen das – Impressum und Datenschutz
   behalten den normalen Kopfbereich, sonst stünde die Navigation dort auf
   Weiß über Weiß.
   ------------------------------------------------------------------ */
.juleica-kopf-ueber-hero {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
}

.juleica-kopf-ueber-hero header {
	background: transparent !important;
}

/* Grundfarbe der Navigation im Kopfbereich über dem Hero: dunkel.
   Sie trägt auf beiden Gründen – 12,40:1 auf dem Markengelb der
   Träger-Seite, 5,13:1 auf dem hellsten Punkt des Startseiten-Verlaufs.
   Deshalb steht sie hier als Rückfall, nicht Weiß. */
.juleica-kopf-ueber-hero .wp-block-navigation .wp-block-navigation-item__content,
.juleica-kopf-ueber-hero .wp-block-navigation a,
.juleica-kopf-ueber-hero .wp-block-navigation a:visited,
.juleica-kopf-ueber-hero .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--tinte);
	fill: var(--wp--preset--color--tinte);
}

/* Weiß nur dort, wo wirklich der Verlaufs-Hero liegt – also auf der
   Startseite. Auf der gelben Fläche der Träger-Seite käme Weiß auf 1,40:1
   und der Menüknopf wäre praktisch unsichtbar. Fällt :has() in einem alten
   Browser aus, greift die dunkle Regel darüber; die trägt ebenfalls. */
body:has(.juleica-hero) .juleica-kopf-ueber-hero .wp-block-navigation .wp-block-navigation-item__content,
body:has(.juleica-hero) .juleica-kopf-ueber-hero .wp-block-navigation a,
body:has(.juleica-hero) .juleica-kopf-ueber-hero .wp-block-navigation a:visited,
body:has(.juleica-hero) .juleica-kopf-ueber-hero .wp-block-navigation__responsive-container-open {
	color: #fff;
	fill: #fff;
}

.juleica-kopf-ueber-hero .wp-block-navigation a:hover,
.juleica-kopf-ueber-hero .wp-block-navigation a:focus {
	text-decoration: underline;
}

/* Der Menüknopf des Navigations-Blocks misst von Haus aus 24 × 24 px. Das
   erfüllt WCAG 2.5.8 gerade eben, ist für einen Daumen aber klein – und die
   Hälfte der Besuche kommt vom Smartphone. Das Polster bringt ihn auf
   44 × 44 px; der negative Außenabstand hält das Symbol dort, wo es war. */
.wp-block-navigation__responsive-container-open:not(.always-shown) {
	padding: 10px;
	margin: -10px;
}

/* Im aufgeklappten Menü auf Mobilgeräten liegt der Grund hell – dort bleibt
   die Schrift dunkel, sonst wäre sie weiß auf Weiß. */
.juleica-kopf-ueber-hero .wp-block-navigation__responsive-container.is-menu-open a {
	color: var(--wp--preset--color--text-stark);
}

/* Der Hero rutscht unter den Kopfbereich, deshalb oben mehr Luft. */
.juleica-hero__innen {
	padding-top: calc(var(--wp--preset--spacing--90) + 60px);
}

/* Dieselbe Luft braucht der flache Hero der Träger-Seite. Er hat kein
   .juleica-hero__innen, sondern bringt sein Polster als Inline-Stil aus dem
   Block mit (4rem) – der Kopfbereich ist bei 390 px aber 141 px hoch. Ohne
   diese Regel liegt das Logo auf der H1. Das !important ist nötig, weil ein
   Inline-Stil sonst jede Selektorregel schlägt. */
body:not(:has(.juleica-hero)) .juleica-kopf-ueber-hero + main > .entry-content > section:first-child {
	padding-top: calc(var(--wp--preset--spacing--90) + 60px) !important;
}

/* Hosting-Hinweis. Er bringt als Nonprofit die Hälfte der Hostingkosten und
   gehört deshalb auf jede Seite. Er steht auf Weiß über dem dunklen Balken,
   wie im Bestand – die Grafik ist dunkel auf transparent und wäre auf #222222
   unsichtbar. Im Bestand war sie ohne Alt-Text und ohne Link; beides ist jetzt
   gesetzt. */
.juleica-hosting {
	margin: 0;
	text-align: center;
}

.juleica-hosting img {
	width: 240px;
	height: auto;
	display: inline-block;
}