/*
Theme Name: Waldjugend Horst
Author: Waldjugend Würselen
Description: Schlankes Block-Theme für einen Horst der Deutschen Waldjugend. Die Startseite besteht aus Kopfbereich, „Was wir machen“, Fotomosaik und Mitmachen-Box. Das Theme lädt nichts von fremden Servern und setzt keine Cookies.
Requires at least: 6.6
Requires PHP: 7.4
Version: 1.4.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: waldjugend-horst
*/

/* Farben, Schriften und Abstände stehen in theme.json.
   Hier nur, was sich dort nicht ausdrücken lässt. */

/* ---------- Grundgerüst ---------- */

.wp-site-blocks {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}
.wp-site-blocks > * { margin-block: 0; }
.wp-site-blocks > main { flex: 1 0 auto; }

:focus-visible {
	outline: 3px solid var(--wp--preset--color--glut);
	outline-offset: 3px;
	border-radius: 4px;
}

.wj-abschnitt { padding-block: clamp(4rem, 9vw, 7rem); }
.wj-startseite.wj-startseite > * { margin-block: 0; }
/* Solange die Startseite noch keinen Waldkopf hat, darf der Kopf den Inhalt nicht überdecken */
.wj-startseite:not(:has(.is-style-wj-hero)) { padding-block: 7rem 3rem; }

/* ---------- Kopf ---------- */

.wj-kopf {
	background: var(--wp--preset--color--tanne);
	color: var(--wp--preset--color--moos);
	padding-block: 1.25rem;
}
.wj-kopf--ueber {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 10;
	background: transparent;
}
.wj-kopf a { color: inherit; text-decoration: none; }

.wj-marke { gap: .7rem; }
.wj-marke .wp-block-site-logo img { width: 3.1rem; height: auto; }
.wj-marke .wp-block-site-logo { flex: none; }
/* Solange kein eigenes Logo hochgeladen ist, steht das DWJ-Logo da */
.wj-marke:not(:has(.wp-block-site-logo))::before {
	content: "";
	flex: none;
	width: 3.1rem;
	aspect-ratio: 399.66 / 493.3;
	background: url("assets/img/dwj-logo.svg") center / contain no-repeat;
}
.wj-marke .wp-block-site-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: .95rem;
	line-height: 1.15;
	letter-spacing: .01em;
}
.wj-marke .wp-block-site-tagline {
	margin: 0;
	font-size: .72rem;
	line-height: 1.2;
	letter-spacing: .05em;
	text-transform: uppercase;
	opacity: .75;
}

.wj-anker { font-weight: 600; font-size: .9rem; }
.wj-anker .wp-block-navigation__container { gap: 1.5rem; }
.wj-anker .wp-block-navigation-item__content {
	border-bottom: 2px solid transparent;
	padding-bottom: 2px;
	transition: border-color .2s;
}
.wj-anker .wp-block-navigation-item__content:hover { border-color: var(--wp--preset--color--maigruen); }
@media (max-width: 40rem) {
	.wj-anker { display: none; }
}

/* ---------- Dachzeile (Absatz-Stil) ---------- */

.is-style-wj-kicker {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-block-end: 0;
	color: var(--wp--preset--color--glut);
	font-size: .8rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.is-style-wj-kicker::before {
	content: "";
	flex: none;
	width: 1.75rem;
	height: 2px;
	background: currentColor;
}
.is-style-wj-kicker + :is(h1, h2, h3) { margin-block-start: .9rem; }

/* ---------- Waldkopf (Gruppen-Stil) ---------- */

.is-style-wj-hero {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--tanne);
	color: var(--wp--preset--color--moos);
	padding-block: clamp(8rem, 16vw, 11rem) clamp(7rem, 14vw, 10rem);
}
/* Höhenlinien */
.is-style-wj-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: .16;
	pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 700'%3E%3Cg fill='none' stroke='%23f5f7dd' stroke-width='1.4'%3E%3Cpath d='M-50 520C150 470 260 560 420 510s260-170 430-150 280 140 400 110'/%3E%3Cpath d='M-50 470C140 420 280 510 430 460s250-170 420-160 290 120 400 90'/%3E%3Cpath d='M-50 420C130 370 290 450 440 410s240-160 410-160 300 100 400 70'/%3E%3Cpath d='M-50 360C120 320 300 390 450 350s230-150 400-150 300 80 400 50'/%3E%3Cpath d='M-50 300C110 260 300 330 460 290s220-130 390-140 300 60 400 30'/%3E%3Cpath d='M-50 240C100 200 300 270 470 230s210-110 380-120 300 40 400 10'/%3E%3Cpath d='M-50 180C90 140 300 210 480 170s200-90 370-100 300 20 400-10'/%3E%3Cpath d='M-50 120C80 80 300 150 490 110s190-70 360-80 300 0 400-30'/%3E%3Cpath d='M760 330c40-40 110-40 140 0s-10 90-70 90-110-50-70-90Z'/%3E%3Cpath d='M790 330c25-22 70-22 88 0s-8 55-44 55-68-30-44-55Z'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat;
}
/* Baumkante als Übergang zum nächsten Abschnitt */
.is-style-wj-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: clamp(60px, 9vw, 120px);
	pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill='%23f5f7dd' d='M0 120V92l18-10 14 6 10-30 12 30 16-8 20-40 20 40 14-4 10-22 12 24 22 6 16-12 18-50 18 50 20 8 22-2 12-30 14 30 30 4 16-18 14-44 16 44 18 16 26 0 14-20 12 18 28 6 18-26 20-58 22 58 16 20 24-4 12-24 14 26 30 2 14-16 16-40 18 40 14 14 28 2 16-30 16 30 24 6 18-22 22-52 22 52 16 18 26-2 14-22 12 20 26 4 18-18 16-36 16 36 20 14 22 0 14-26 16 26 28 8 14-14 18-46 20 46 14 12 24 2 14-20 12 22 20 0 18-8V120Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.is-style-wj-hero > * { position: relative; z-index: 1; }
.is-style-wj-hero :is(h1, h2, p) { color: inherit; }
.is-style-wj-hero .is-style-wj-kicker { color: var(--wp--preset--color--maigruen); }
.is-style-wj-hero h1 {
	max-width: 12ch;
	margin-block: 1.1rem 1.5rem;
	font-size: clamp(2.9rem, 9vw, 6.5rem);
	line-height: .95;
	letter-spacing: -.01em;
}
/* Kursiv gesetzte Wörter in der Überschrift werden hellgrün */
.is-style-wj-hero h1 em { font-style: normal; color: var(--wp--preset--color--maigruen); }
.is-style-wj-hero h1 + p {
	max-width: 36rem;
	font-size: clamp(1.05rem, 2vw, 1.25rem);
	opacity: .92;
}
.is-style-wj-hero .wp-block-buttons { margin-block-start: 2.25rem; }

@media (prefers-reduced-motion: no-preference) {
	:where(body:not(.editor-styles-wrapper)) .is-style-wj-hero > * > * {
		opacity: 0;
		transform: translateY(18px);
		animation: wj-auf .8s cubic-bezier(.2, .7, .2, 1) forwards;
	}
	:where(body:not(.editor-styles-wrapper)) .is-style-wj-hero > * > :nth-child(2) { animation-delay: .1s; }
	:where(body:not(.editor-styles-wrapper)) .is-style-wj-hero > * > :nth-child(3) { animation-delay: .2s; }
	:where(body:not(.editor-styles-wrapper)) .is-style-wj-hero > * > :nth-child(4) { animation-delay: .3s; }
	@keyframes wj-auf { to { opacity: 1; transform: none; } }
}

/* ---------- Knöpfe ---------- */

.wp-element-button { transition: transform .2s, background-color .2s; }
.wp-element-button:hover { transform: translateY(-2px); }
.wp-block-button:not(.is-style-outline) .wp-block-button__link::after {
	content: "→";
	margin-inline-start: .6rem;
}

/* ---------- Karten mit Symbol (Gruppen-Stile) ---------- */

.wp-block-group[class*="is-style-wj-karte-"] {
	display: grid;
	grid-template-columns: 3rem 1fr;
	column-gap: 1.1rem;
	align-items: start;
	padding: 1.4rem 1.5rem;
	background: var(--wp--preset--color--weiss);
	border: 1px solid var(--wp--preset--color--moos-2);
	border-radius: 1.25rem;
}
.wp-block-group[class*="is-style-wj-karte-"] > * { grid-column: 2; margin: 0; }
.wp-block-group[class*="is-style-wj-karte-"] > h3 { margin-block: .15rem .3rem; }
.wp-block-group[class*="is-style-wj-karte-"] > p { font-size: .97rem; }
.wp-block-group[class*="is-style-wj-karte-"]::before {
	content: "";
	grid-column: 1;
	grid-row: 1 / span 3;
	width: 3rem;
	height: 3rem;
	border-radius: .9rem;
	background: var(--wp--preset--color--tanne) center / 1.6rem no-repeat;
}
.wp-block-group.is-style-wj-karte-feuer::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2388bd27' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round' d='M12 3c1 3 5 5 5 9.5A5 5 0 0 1 7 12.5C7 10 8.5 9 9 7c1 1.5 1.5 2.5 1.5 3.5C12 9 12.5 6 12 3ZM5 21l14-3M5 18l14 3'/%3E%3C/svg%3E");
}
.wp-block-group.is-style-wj-karte-zelt::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2388bd27' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round' d='M3 20 12 4l9 16H3Zm9-16v16m-3 0 3-5 3 5'/%3E%3C/svg%3E");
}
.wp-block-group.is-style-wj-karte-blatt::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2388bd27' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round' d='M5 19C5 10 10 5 20 4c0 10-5 15-14 15Zm0 0 8-8'/%3E%3C/svg%3E");
}

/* ---------- Fotomosaik (Galerie-Stil) ---------- */

.wp-block-gallery.has-nested-images.is-style-wj-mosaik {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 9rem;
	gap: .75rem;
}
@media (min-width: 48rem) {
	.wp-block-gallery.has-nested-images.is-style-wj-mosaik {
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: 12rem;
		gap: 1rem;
	}
	/* Das Muster wiederholt sich alle 6 Bilder */
	.is-style-wj-mosaik > figure:nth-child(6n + 1) { grid-column: span 2; grid-row: span 2; }
	.is-style-wj-mosaik > figure:nth-child(6n + 2) { grid-row: span 2; }
	.is-style-wj-mosaik > figure:nth-child(6n + 5),
	.is-style-wj-mosaik > figure:nth-child(6n + 6) { grid-column: span 2; }
}
.wp-block-gallery.has-nested-images.is-style-wj-mosaik figure.wp-block-image {
	width: auto !important;
	height: 100%;
	margin: 0;
	overflow: hidden;
	border-radius: 1rem;
	background: var(--wp--preset--color--tanne);
}
.wp-block-gallery.has-nested-images.is-style-wj-mosaik figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.wp-block-gallery.has-nested-images.is-style-wj-mosaik figure.wp-block-image:hover img { transform: scale(1.04); }
.wp-block-gallery.has-nested-images.is-style-wj-mosaik figure.wp-block-image::before { display: none; }
.wp-block-gallery.has-nested-images.is-style-wj-mosaik figure.wp-block-image figcaption {
	left: .75rem;
	right: auto;
	bottom: .75rem;
	width: auto;
	max-height: none;
	margin: 0;
	padding: .45rem .7rem;
	overflow: visible;
	border-radius: 999px;
	background: rgba(38, 57, 26, .82);
	color: var(--wp--preset--color--moos);
	font-size: .8rem;
	font-weight: 600;
	line-height: 1;
	text-align: left;
	text-shadow: none;
	backdrop-filter: blur(4px);
}

/* ---------- Aktuelles (Beitragsliste) ---------- */

.wj-aktuell .wp-block-query { margin-block-start: 2rem; }
.wj-aktuell .wp-block-post-template { gap: 1rem; }
.wj-aktuell .wp-block-post { display: flex; }
.wj-aktuell-karte {
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	background: var(--wp--preset--color--weiss);
	border: 1px solid var(--wp--preset--color--moos-2);
	border-radius: 1.25rem;
	transition: transform .2s;
}
.wj-aktuell-karte:hover { transform: translateY(-3px); }
.wj-aktuell-karte > * { margin: 0; }
.wj-aktuell .wp-block-post-featured-image img { display: block; width: 100%; }
.wj-aktuell-text.wj-aktuell-text { padding: 1.4rem 1.5rem; }
.wj-aktuell-text > * + * { margin-block-start: .5rem; }
.wj-aktuell .wp-block-post-date {
	color: var(--wp--preset--color--glut);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.wj-aktuell .wp-block-post-title { font-size: 1.25rem; }
.wj-aktuell .wp-block-post-title a { text-decoration: none; }
.wj-aktuell .wp-block-post-title a:hover { text-decoration: underline; }
.wj-aktuell .wp-block-post-excerpt { font-size: .97rem; }
.wj-aktuell .wp-block-post-excerpt__more-text { margin-block-start: .5rem; font-weight: 600; }

/* ---------- Dunkle Karte (Gruppen-Stil) ---------- */

.is-style-wj-dunkel {
	position: relative;
	overflow: hidden;
	padding: clamp(2rem, 6vw, 4rem);
	border-radius: 2rem;
	background: var(--wp--preset--color--tanne-tief);
	color: var(--wp--preset--color--moos);
}
/* Jahresringe */
.is-style-wj-dunkel::after {
	content: "";
	position: absolute;
	top: -6rem;
	right: -6rem;
	width: 22rem;
	height: 22rem;
	opacity: .12;
	pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%2388bd27' stroke-width='1.5'%3E%3Ccircle cx='100' cy='100' r='95'/%3E%3Ccircle cx='100' cy='100' r='80'/%3E%3Ccircle cx='100' cy='100' r='64'/%3E%3Ccircle cx='100' cy='100' r='48'/%3E%3Ccircle cx='100' cy='100' r='32'/%3E%3Ccircle cx='100' cy='100' r='16'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.is-style-wj-dunkel > * { position: relative; z-index: 1; }
.is-style-wj-dunkel :is(h1, h2, h3) { color: var(--wp--preset--color--moos); }
.is-style-wj-dunkel p { max-width: 30rem; }
.is-style-wj-dunkel .is-style-wj-kicker { color: var(--wp--preset--color--maigruen); }
.is-style-wj-dunkel a:not(.wp-element-button) { color: var(--wp--preset--color--maigruen); }

/* ---------- Faktenliste (Listen-Stil) ---------- */

.is-style-wj-fakten {
	display: grid;
	gap: .9rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.is-style-wj-fakten li {
	display: grid;
	grid-template-columns: 7.5rem 1fr;
	gap: 1rem;
	padding-bottom: .9rem;
	border-bottom: 1px solid rgba(245, 247, 221, .15);
}
.is-style-wj-fakten li:last-child { padding-bottom: 0; border-bottom: 0; }
.is-style-wj-fakten li strong {
	color: var(--wp--preset--color--maigruen);
	font-size: .78rem;
	font-weight: 700;
	line-height: 1.6rem;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.is-style-wj-fakten li strong + br { display: none; }

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

.wj-fuss {
	padding-block: 3.5rem 2rem;
	background: var(--wp--preset--color--anthrazit);
	color: #cfd6c4;
}
.wj-fuss a { color: inherit; }
.wj-fuss a:hover { color: var(--wp--preset--color--maigruen); }
.wj-fuss .wj-marke { color: var(--wp--preset--color--moos); }
.wj-fuss .wj-marke a { text-decoration: none; }

.wj-sozial.wj-sozial { gap: .75rem; }
.wj-sozial .wp-social-link {
	border: 1px solid rgba(245, 247, 221, .22);
	border-radius: 999px;
	background: none !important;
	color: var(--wp--preset--color--moos) !important;
	transition: background-color .2s, border-color .2s, color .2s;
}
.wj-sozial .wp-social-link:hover {
	border-color: var(--wp--preset--color--maigruen);
	background: var(--wp--preset--color--maigruen) !important;
	color: var(--wp--preset--color--tanne-tief) !important;
	transform: none;
}
.wj-sozial .wp-social-link .wp-block-social-link-anchor {
	gap: .55rem;
	padding: .7rem 1.15rem;
	color: inherit;
	font-size: .92rem;
	font-weight: 600;
	text-decoration: none;
}
.wj-sozial .wp-social-link svg { width: 1.15rem; height: 1.15rem; }
.wj-sozial.wj-sozial .wp-social-link .wp-block-social-link-label { margin: 0; font-size: 1em; }

.wj-fuss-unten {
	margin-block-start: 2.5rem;
	padding-block-start: 1.5rem;
	border-top: 1px solid rgba(245, 247, 221, .12);
	font-size: .85rem;
}
.wj-fuss-unten p { margin: 0; }
.wj-rechtliches a + a { margin-inline-start: 1.25rem; }

/* ---------- Unterseiten (Impressum, Datenschutz …) ---------- */

.wj-seite { padding-block: clamp(3rem, 7vw, 5rem); }
.wj-seite .wp-block-post-title { margin-block-end: 1.5rem; }
.wj-seite .wp-block-post-content h2 { margin-block-start: 2.5rem; font-size: var(--wp--preset--font-size--x-large); }
.wj-seite .wp-block-post-date { font-size: .9rem; opacity: .75; }
.wj-seite .wp-block-post-featured-image { margin-block: 0 2rem; }

/* ---------- Beitragsseite ---------- */

.wj-beitrag > * { margin-block: 0; }
.wj-beitrag-kopf {
	padding-block: clamp(3rem, 7vw, 5rem) clamp(6rem, 10vw, 8rem);
	background: var(--wp--preset--color--tanne);
	color: var(--wp--preset--color--moos);
}
.wj-beitrag-kopf .is-style-wj-kicker { color: var(--wp--preset--color--maigruen); }
.wj-beitrag-kopf .wp-block-post-title {
	margin-block: 1rem 0;
	color: var(--wp--preset--color--moos);
	font-size: clamp(2.2rem, 5vw, 3.5rem);
}
.wj-beitrag-inhalt { padding-block: 0 clamp(4rem, 8vw, 6rem); }
/* Das Beitragsbild ragt in das dunkle Titelband hinein */
.wj-beitrag-inhalt > .wp-block-post-featured-image {
	margin-block: calc(-1 * clamp(4rem, 7vw, 5.5rem)) clamp(2.5rem, 5vw, 4rem);
}
.wj-beitrag-inhalt > .wp-block-post-featured-image img {
	border-radius: 1.25rem;
	box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .45);
}
/* Ohne Bild beginnt der Text mit Abstand zum Band */
.wj-beitrag-inhalt > .wp-block-post-content:first-child { padding-block-start: clamp(2.5rem, 5vw, 4rem); }
.wj-beitrag-inhalt .wp-block-post-content {
	font-size: clamp(1.0625rem, 1.5vw, 1.2rem);
	line-height: 1.7;
}
.wj-beitrag-inhalt .wp-block-post-content > * + * { margin-block-start: 1.25em; }
.wj-beitrag-inhalt .wp-block-post-content :is(h2, h3) { margin-block-start: 1.6em; }
.wj-beitrag-inhalt .wp-block-post-content h2 { font-size: var(--wp--preset--font-size--x-large); }
.wj-beitrag-inhalt .wp-block-post-content :is(.wp-block-image img, .wp-block-gallery img, .wp-block-video video) { border-radius: 1rem; }
.wj-beitrag-inhalt .wp-block-post-content figcaption { font-size: .9rem; opacity: .75; }
.wj-beitrag-inhalt .wj-zurueck { margin-block-start: 3rem; }
.wj-beitrag .wp-block-button.is-style-outline .wp-block-button__link {
	border: 2px solid var(--wp--preset--color--tanne);
	background: transparent;
	color: var(--wp--preset--color--tanne);
}
.wj-beitrag .wp-block-button.is-style-outline .wp-block-button__link::after { content: none; }
.wj-beitrag .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--tanne);
	color: var(--wp--preset--color--moos);
}
.wj-weitere.wj-weitere { background: var(--wp--preset--color--weiss); border-top: 1px solid var(--wp--preset--color--moos-2); }
.wj-seite .wp-block-post-template > li + li {
	margin-block-start: 2.5rem;
	padding-block-start: 2.5rem;
	border-top: 1px solid var(--wp--preset--color--moos-2);
}