/*
Theme Name: Zukunft Stockerau
Description: Block-Theme für zukunft-stockerau.at. Farben, Schrift und Au-Streifen der bisherigen Seite; das Aussehen der Blöcke aus dem Plugin „Zukunft Stockerau“ liegt ebenfalls hier.
Version: 0.1.0
Author: TeraIT e.U.
Text Domain: zukunft-stockerau
Requires at least: 6.5
Requires PHP: 8.1
License: GPL-2.0-or-later
*/

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body { -webkit-font-smoothing: antialiased; }

a:focus-visible, button:focus-visible, input:focus-visible {
	outline: 3px solid var(--wp--preset--color--green);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Hervorhebung in Überschriften: kursiv gesetzt heißt hier grün. */
h1 em, h2 em, h3 em { font-style: normal; color: var(--wp--preset--color--green); }

.wp-block-button__link { transition: background .15s ease, border-color .15s ease, color .15s ease; }
/* Der Core gibt dem Link height: 100%; die Hülle bliebe dann eine Textzeile hoch, der Link ragt heraus
   und umbrochene Knöpfe kleben aneinander. Hier umschließt die Hülle den Link. */
.wp-block-buttons > .wp-block-button { display: flex; }
.wp-block-buttons .wp-block-button__link { height: auto; }
/* Gefüllte Knöpfe so hoch wie umrandete daneben. */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link { border: 2px solid transparent; }
/* Die Umriss-Variante lädt WordPress nur zusammen mit einem Knopf-Block. Die Plugin-Blöcke
   geben Knöpfe selbst aus, deshalb steht sie hier fest. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--grey);
	border: 2px solid var(--wp--preset--color--line);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: transparent;
	border-color: var(--wp--preset--color--green);
	color: var(--wp--preset--color--green-dark);
}

/* ---------- Kopf ---------- */
.zs-header { padding-top: 2rem; }
.zs-brand { display: flex; align-items: center; gap: 1.15rem; text-decoration: none; color: inherit; }
.zs-brand__logo { width: 76px; height: 76px; display: block; flex: none; }
.zs-brand__text { display: flex; flex-direction: column; line-height: .88; }
.zs-brand__text b, .zs-brand__text span {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 1.9rem;
	letter-spacing: .16em;
}
.zs-brand__text b { color: var(--wp--preset--color--green); }
.zs-brand__text span { color: var(--wp--preset--color--grey); }
/* Menü: als Menü erkennbar, jeder Punkt mit Unterstreichung; die aktive Seite fest grün. */
.zs-nav .wp-block-navigation__container { gap: 1.6rem; }
.zs-nav .wp-block-navigation-item__content {
	text-decoration: none;
	padding: .3rem .1rem .15rem;
	border-bottom: 3px solid var(--wp--preset--color--line);
	transition: border-color .15s ease, color .15s ease;
}
.zs-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--green-dark); border-bottom-color: var(--wp--preset--color--meadow-light); }
.zs-nav .current-menu-item > .wp-block-navigation-item__content,
.zs-nav [aria-current="page"] { color: #2f2e30; border-bottom-color: var(--wp--preset--color--green); }
/* Im aufgeklappten Handy-Menü ohne Linien, dafür größer. */
.zs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { border-bottom: 0; font-size: 1.8rem; }

/* ---------- Hero ---------- */
.zs-hero { padding-top: 3.5rem; padding-bottom: 3rem; }
.zs-hero h1 { margin: 0 0 1.2rem; }
.zs-hero h1 em { display: block; }
.zs-hero__lead { font-size: var(--wp--preset--font-size--large); color: #434244; text-wrap: balance; }
/* Das Layout würde die schmale Zeile mittig setzen; sie soll bündig unter der Überschrift stehen. */
.zs-hero > .zs-hero__lead { max-width: 64ch; margin: 0 0 0 max(0px, calc((100% - 68rem) / 2)) !important; }

/* ---------- Au-Streifen als Trenner ---------- */
.zs-au-band { display: block; width: 100%; height: clamp(90px, 12vw, 150px); }
.wp-block-html:has(> .zs-au-band), .zs-au-band-wrap { margin: 0; line-height: 0; }

/* ---------- Abschnitte ---------- */
main.wp-block-group { margin-top: 0; }
/* Startseite: die Abschnitte stoßen direkt aneinander; sonst entsteht durch den Blockabstand ein weißer Streifen. */
.zs-front > * { margin-block-start: 0; margin-block-end: 0; }
.zs-section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.zs-section.is-sky { background: var(--wp--preset--color--sky); }
/* Setzt den Au-Streifen nahtlos fort, dunkelster Ton unten im Streifen. */
.zs-section.is-meadow-dark { background: var(--wp--preset--color--meadow-dark); color: #e8f0dc; }
.zs-section.is-meadow-dark h2 { color: #fff; }
.zs-section.is-meadow-dark h2 em { color: var(--wp--preset--color--meadow-light); }
.zs-upcoming { padding-top: 1.5rem; }
.zs-upcoming .zs-events-empty { color: #e8f0dc; }
/* Feiner heller Rand: ein Datumsblock in Au-Dunkelgrün würde sonst mit dem Hintergrund verschwimmen. */
.zs-upcoming .zs-events--featured .zs-event { box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 6px 18px rgba(20, 35, 15, .25); }
.zs-upcoming__intro { max-width: 70ch; margin: -.6rem 0 1.6rem; }
.zs-upcoming__more { margin: 1.4rem 0 0; }
.zs-upcoming__more a { color: #fff; font-weight: 600; }
.zs-section h2 { margin: 0 0 1.6rem; }
.zs-text > p, .zs-text > .wp-block-paragraph { max-width: 70ch; }
/* Schmale Absätze direkt in einem Abschnitt würde das Layout mittig setzen; sie sollen bündig unter der Überschrift stehen. */
.zs-text.is-layout-constrained > p,
.is-layout-constrained > .zs-upcoming__intro { margin-left: max(0px, calc((100% - 68rem) / 2)) !important; margin-right: auto !important; }
.zs-section h3.zs-subheading { font-size: 1.35rem; margin-top: 2.2rem; }

/* Das Core-Raster füllt mit leeren Spalten auf; wie bisher sollen die Karten die Breite teilen. */
.zs-cards.zs-cards { gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.zs-card {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-top: 4px solid var(--wp--preset--color--meadow-light);
	border-radius: 4px;
	padding: 1.6rem 1.5rem;
}
.zs-card:nth-child(2) { border-top-color: var(--wp--preset--color--meadow); }
.zs-card:nth-child(3) { border-top-color: var(--wp--preset--color--meadow-dark); }
.zs-card h3 { margin: 0 0 .5rem; }
.zs-card p { margin: 0; color: #4d4c4e; }

/* ---------- Initiativen-Verzeichnis ---------- */
.zs-search { margin: 0 0 1rem; }
.zs-search__field {
	width: 100%;
	max-width: 32rem;
	font: inherit;
	padding: .7rem 1rem;
	border: 2px solid var(--wp--preset--color--line);
	border-radius: 3px;
	background: var(--wp--preset--color--paper);
}
.zs-search__field:focus { border-color: var(--wp--preset--color--green); outline: none; }
.zs-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.6rem; }
.zs-filter__chip {
	display: inline-block;
	padding: .3rem .9rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	color: var(--wp--preset--color--grey);
	text-decoration: none;
	font-size: .95rem;
	background: var(--wp--preset--color--paper);
}
.zs-filter__chip:hover { border-color: var(--wp--preset--color--green); color: var(--wp--preset--color--green-dark); }
.zs-filter__chip[aria-current="true"] {
	background: var(--wp--preset--color--green);
	border-color: var(--wp--preset--color--green);
	color: #fff;
}
/* Themenfilter in der Farbe des Themas: Punkt und Rand, aktiv als Fläche. */
.zs-filter__chip[style*="--zs-topic"] { border-color: var(--zs-topic-border); }
.zs-filter__chip[style*="--zs-topic"]::before {
	content: "";
	display: inline-block;
	width: .55rem;
	height: .55rem;
	margin-right: .45rem;
	border-radius: 50%;
	background: var(--zs-topic);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
	vertical-align: .05em;
}
.zs-filter__chip[style*="--zs-topic"]:hover { border-color: var(--zs-topic); color: #2f2e30; }
.zs-filter__chip[style*="--zs-topic"][aria-current="true"] { background: var(--zs-topic); border-color: var(--zs-topic); color: var(--zs-topic-text); }
.zs-filter__chip[style*="--zs-topic"][aria-current="true"]::before { display: none; }
.zs-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.zs-grid__cell { display: flex; }
.zs-tile {
	flex: 1;
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-top: 4px solid var(--wp--preset--color--meadow);
	border-radius: 4px;
	padding: 1.4rem 1.4rem 1.5rem;
}
.zs-tile--invite { border-style: dashed; border-top-style: solid; border-top-color: var(--wp--preset--color--ochre); background: transparent; }
.zs-tile__image { display: flex; align-items: center; justify-content: center; height: 8rem; margin: -.4rem 0 1rem; }
.zs-tile__image img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.zs-tile__title { margin: 0 0 .35rem; }
.zs-tile__title a { color: inherit; text-decoration: none; }
.zs-tile__title a:hover { color: var(--wp--preset--color--green-dark); }
.zs-tile__meta { margin: 0 0 .6rem; font-size: .9rem; color: var(--wp--preset--color--grey-light); }
.zs-tile__text { margin: 0 0 1rem; color: #4d4c4e; }
.zs-tile__address { margin: -.4rem 0 1rem; font-size: .9rem; color: var(--wp--preset--color--grey); }
/* Website und Terminseite der Initiative: Adresse sichtbar, damit man sieht, wohin es geht. */
.zs-web { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .25rem; }
.zs-web a { display: inline-flex; align-items: baseline; gap: .6rem; font-weight: 600; color: var(--wp--preset--color--green-dark); text-decoration: none; }
.zs-web a::after { content: "↗"; font-weight: 400; }
.zs-web a:hover .zs-web__address, .zs-web a:focus-visible .zs-web__address { text-decoration: underline; }
.zs-web__label { flex: none; width: 4.4rem; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--grey-light); }
.zs-web__address { overflow-wrap: break-word; }
.zs-profile .zs-web { margin: 0 0 1.2rem; padding-bottom: 1.1rem; border-bottom: 1px solid rgba(0, 0, 0, .1); gap: .45rem; }
.zs-profile .zs-web a { font-size: 1.1rem; }
.zs-events-more { margin-top: 1.4rem; }
/* Kalender abonnieren, unter den anstehenden Veranstaltungen. */
.zs-subscribe { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin-top: 1.6rem; }
.zs-subscribe .wp-block-button__link { font-size: 1.05rem; padding: .55rem 1.1rem .45rem; }
.zs-subscribe__hint { flex: 1 1 20rem; margin: 0; font-size: .9rem; color: var(--wp--preset--color--grey); overflow-wrap: anywhere; }
/* Terminseiten der Initiativen auf der Veranstaltungsseite. */
.zs-event-pages-section { margin-top: 3rem; }
.zs-event-pages { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.zs-event-pages__item {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-left: 4px solid var(--wp--preset--color--meadow);
	border-radius: 4px;
	padding: .8rem 1rem .85rem;
}
.zs-event-pages__name { font-weight: 600; color: inherit; text-decoration: none; }
.zs-event-pages__name:hover { color: var(--wp--preset--color--green-dark); }
.zs-event-pages__link { font-weight: 600; color: var(--wp--preset--color--green-dark); text-decoration: none; overflow-wrap: break-word; }
.zs-event-pages__link::after { content: " ↗"; font-weight: 400; }
.zs-event-pages__link:hover, .zs-event-pages__link:focus-visible { text-decoration: underline; }
.zs-events-more a::after { content: " ↗"; }
.zs-tile .zs-buttons { margin-top: auto; }
.zs-buttons { display: flex; flex-wrap: wrap; gap: .6rem; }
.zs-tile .wp-block-button__link { font-size: 1.05rem; padding: .55rem 1.1rem .45rem; }
.zs-empty { color: var(--wp--preset--color--grey); }
.zs-more-row { text-align: center; margin-top: 1.6rem; }
.zs-more { cursor: pointer; border: 0; }

/* ---------- Steckbrief und Termin ---------- */
.zs-profile__data { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.5rem; margin: 0 0 1.2rem; }
.zs-profile__data dt { font-weight: 600; color: var(--wp--preset--color--grey); }
.zs-profile__data dd { margin: 0; }
.zs-profile__map { font-size: .9rem; }
/* Steckbrief in der schmalen Spalte: Beschriftung klein über dem Wert, damit nichts gedrängt umbricht. */
.zs-profile {
	background: var(--wp--preset--color--sky);
	border-top: 4px solid var(--wp--preset--color--meadow);
	border-radius: 4px;
	padding: 1.3rem 1.4rem 1.5rem;
}
.zs-profile .zs-profile__data { display: block; margin: 0 0 1.4rem; }
.zs-profile .zs-profile__data dt {
	margin: 1rem 0 .15rem;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grey-light);
}
.zs-profile .zs-profile__data dt:first-child { margin-top: 0; }
.zs-profile .zs-profile__data dd { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.zs-profile .zs-buttons .wp-block-button__link { font-size: 1.05rem; padding: .55rem 1.1rem .45rem; }
.zs-initiative-logo img { max-height: 9rem; width: auto; object-fit: contain; }
.zs-disclaimer { font-size: .875rem; color: var(--wp--preset--color--grey-light); }
/* Termin, Ort und Knöpfe als Kopf der Veranstaltung, deutlich getrennt vom Beschreibungstext darunter. */
.zs-event-details { padding-bottom: 1.8rem; margin-bottom: 1rem; border-bottom: 1px solid var(--wp--preset--color--line); }
.zs-event-details > :last-child { margin-bottom: 0; }

/* ---------- Veranstaltungen ---------- */
.zs-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.zs-event {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	overflow: hidden;
}
.zs-event__image { display: block; aspect-ratio: 16 / 9; background: var(--wp--preset--color--water-light); }
.zs-event__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zs-event__body { padding: 1rem 1.2rem 1.2rem; }
.zs-event__date { margin: 0 0 .3rem; font-size: .9rem; color: var(--wp--preset--color--green-dark); font-weight: 600; }
.zs-event__title { margin: 0 0 .35rem; font-size: 1.3rem; letter-spacing: .08em; }
.zs-event__title a { color: inherit; text-decoration: none; }
.zs-event__title a:hover { color: var(--wp--preset--color--green-dark); }
.zs-event__meta { margin: 0; font-size: .9rem; color: var(--wp--preset--color--grey); }
.zs-event__badge {
	display: inline-block;
	margin: .7rem 0 0;
	padding: .1rem .6rem;
	border-radius: 3px;
	font-size: .8rem;
	background: var(--wp--preset--color--water-light);
	color: #2f4f52;
}
.zs-events-empty { color: var(--wp--preset--color--grey); }

/* Hervorgehobene Termine: großes Datum links, Angaben rechts. */
.zs-events--featured { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }
.zs-events--featured .zs-event { flex-direction: row; align-items: stretch; border: 0; box-shadow: 0 6px 18px rgba(20, 35, 15, .18); }
.zs-event__when {
	flex: none;
	width: 5.2rem;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--green);
	color: #fff;
	font-family: var(--wp--preset--font-family--display);
	line-height: 1;
}
.zs-event__day { font-size: 2.8rem; }
.zs-event__month { font-size: 1.1rem; letter-spacing: .12em; text-transform: uppercase; margin-top: .2rem; }
.zs-events--featured .zs-event__body { padding: 1.1rem 1.2rem 1.2rem; }
.zs-events--featured .zs-event__title { font-size: 1.45rem; }

/* Themen als Pillen. Farbe je Thema unter Initiativen → Themen (Hex-Wert); die Schriftfarbe wählt das Plugin nach Kontrast. */
.zs-topics { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.zs-topic {
	display: inline-block;
	padding: .15rem .65rem;
	border-radius: 999px;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1.5;
	background: var(--wp--preset--color--line);
	color: #4d4c4e;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);   /* damit auch helle Farben auf hellem Grund sichtbar bleiben */
}
.zs-event-details > .zs-topics { margin: 0 0 1rem; }
/* Das Hauptthema steht vorne und etwas größer. */
.zs-topic--main { font-size: .86rem; padding: .22rem .8rem; }
a.zs-topic { text-decoration: none; transition: filter .15s ease, box-shadow .15s ease; }
a.zs-topic:hover { filter: brightness(.92); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 0 0 2px rgba(0, 0, 0, .12); }
.zs-tile .zs-topics { margin: -.2rem 0 .8rem; }
.zs-profile .zs-topics { margin: .15rem 0 0; }

/* ---------- Video mit zwei Klicks ---------- */
.zs-video { margin: 1.5rem 0; }
.zs-video__gate, .zs-video iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 4px;
}
.zs-video__gate {
	position: relative;
	cursor: pointer;
	background: var(--wp--preset--color--meadow-dark) center / cover no-repeat;
	color: #fff;
	font: inherit;
}
.zs-video__gate::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(to bottom, rgba(20, 35, 15, .25) 55%, rgba(20, 35, 15, .85));
}
.zs-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 4.5rem;
	height: 4.5rem;
	margin: -2.25rem 0 0 -2.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--green);
}
.zs-video__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: .8rem 0 .8rem 1.3rem;
	border-color: transparent transparent transparent #fff;
}
.zs-video__gate:hover .zs-video__play { background: var(--wp--preset--color--green-dark); }
.zs-video__note { position: absolute; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); left: 1rem; right: 1rem; bottom: .9rem; font-size: .875rem; text-align: center; }
.zs-video__direct { margin: .4rem 0 0; font-size: .875rem; }

/* ---------- Impressum und Fuß ---------- */
.zs-imprint { border-top: 1px solid var(--wp--preset--color--line); padding-top: 2.5rem; padding-bottom: 2.5rem; font-size: .95rem; color: #4d4c4e; }
.zs-imprint h2 { font-size: 1.4rem; margin: 0 0 1rem; }
.zs-imprint dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.5rem; margin: 0; }
.zs-imprint dt { font-weight: 600; color: var(--wp--preset--color--grey); }
.zs-imprint dd { margin: 0; }
.zs-imprint__note { margin-top: 1.2rem; color: var(--wp--preset--color--grey-light); font-size: .875rem; }
.zs-footer { background: var(--wp--preset--color--meadow-dark); color: #e8f0dc; padding-top: 1.6rem; padding-bottom: 1.6rem; font-size: .9rem; margin-block-start: 0; }
.zs-footer p { margin: 0; }
.zs-footer a { color: #cfe4b0; }

@media (max-width: 34rem) {
	.zs-imprint dl, .zs-profile__data { grid-template-columns: 1fr; gap: 0; }
	.zs-imprint dd, .zs-profile__data dd { margin-bottom: .7rem; }
}