/* Linzer Friedensnetzwerk: layout and motifs that theme.json cannot express. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }

:focus-visible { outline: 3px solid var(--wp--preset--color--kerze); outline-offset: 3px; }

.skip-link.screen-reader-text:focus { background: var(--wp--preset--color--papier); color: var(--wp--preset--color--tinte); }

/* Header */
.kopf { padding-block: 1rem; }
.kopf__innen { row-gap: 0.5rem; }
.marke__logo { display: block; line-height: 0; }
.marke__logo img { width: 52px; height: auto; }
.marke .wp-block-site-title { margin: 0; }
.kopf .wp-block-navigation a { text-decoration: none; color: var(--wp--preset--color--tinte); }
.kopf .wp-block-navigation a:hover,
.kopf .wp-block-navigation .current-menu-item > a { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.35em; text-decoration-color: var(--wp--preset--color--kerze); }

/* Orange circles from the posters */
.wp-block-group.is-style-kreis,
.wp-block-group.is-style-kreis-klein {
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--wp--preset--color--kerze);
	color: var(--wp--preset--color--tinte);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 0.15rem;
	padding: 1.25rem;
	box-shadow: 0 0 0 6px var(--wp--preset--color--papier);
}
.wp-block-group.is-style-kreis { width: clamp(11rem, 22vw, 15rem); }
.wp-block-group.is-style-kreis-klein { width: clamp(8rem, 15vw, 10.5rem); }
.is-style-kreis > *, .is-style-kreis-klein > * { margin: 0 !important; line-height: 1.2; }
.is-style-kreis a, .is-style-kreis-klein a { color: inherit; }

/* Candle-dot list */
ul.is-style-lichtpunkte { list-style: none; padding-left: 0; }
ul.is-style-lichtpunkte > li { position: relative; padding-left: 2.25rem; }
ul.is-style-lichtpunkte > li + li { margin-top: 1.5rem; }
ul.is-style-lichtpunkte > li::before {
	content: "";
	position: absolute;
	left: 0.2rem;
	top: 0.3em;
	width: 1.05rem;
	height: 1.05rem;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 45%, var(--wp--preset--color--gold) 0 30%, var(--wp--preset--color--kerze) 60%);
}

/* Hero: the poster, translated */
.buehne { position: relative; padding-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); }
.start .wp-block-post-content > .alignfull,
.seite--voll .wp-block-post-content > .alignfull { margin-block-start: 0; }
.buehne__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--wp--preset--spacing--40); align-items: center; }
.buehne__titel { font-size: var(--wp--preset--font-size--plakat); line-height: 0.95; letter-spacing: -0.01em; word-spacing: 0.06em; margin: 0; }
.buehne__titel .zeile { display: block; }
.buehne__titel .zeile--trenn::after { content: "-"; }
.buehne__text { max-width: 30rem; }
.buehne__bild { position: relative; margin: 0; }
.buehne__bild img { display: block; width: auto; height: min(88vh, 54rem); max-width: 100%; margin-inline: auto; object-fit: contain; }
.buehne__kreise { position: absolute; left: 0; bottom: 14%; display: flex; flex-direction: column; align-items: flex-start; }
.buehne__kreise .is-style-kreis-klein { margin-top: -1.75rem !important; margin-left: 2.5rem !important; }
.kreis__titel { font-weight: 800; font-size: 1.05rem; }
.kreis__datum { font-weight: 800; font-size: clamp(1.25rem, 2vw, 1.6rem); }

@media (max-width: 781px) {
	.buehne__raster { grid-template-columns: 1fr; }
	.buehne__bild { order: -1; max-width: 26rem; margin-inline: auto; }
	.buehne__bild img { height: auto; width: 100%; }
	.buehne__kreise { left: -0.5rem; bottom: 4%; }
	.wp-block-group.is-style-kreis { width: 9.5rem; padding: 0.9rem; }
	.wp-block-group.is-style-kreis-klein { width: 7.25rem; padding: 0.75rem; font-size: 0.9rem; }
	.kreis__titel { font-size: 0.9rem; }
	.kreis__datum { font-size: 1.15rem; }
}

/* Sections on the front page */
.abschnitt { padding-block: var(--wp--preset--spacing--60); }
.abschnitt > h2 { margin-bottom: var(--wp--preset--spacing--40); }
.forderungen { font-size: var(--wp--preset--font-size--gross); line-height: 1.45; }
.forderungen strong { font-weight: 800; }

/* Night band with candle lights */
.nacht { position: relative; overflow: hidden; }
.nacht::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 7rem;
	pointer-events: none;
	background:
		radial-gradient(circle at 8% 70%, rgb(224 136 26 / 0.55) 0 0.35rem, rgb(211 167 56 / 0.18) 0.5rem, transparent 2.6rem),
		radial-gradient(circle at 19% 85%, rgb(224 136 26 / 0.5) 0 0.3rem, rgb(211 167 56 / 0.15) 0.45rem, transparent 2.2rem),
		radial-gradient(circle at 31% 62%, rgb(224 136 26 / 0.45) 0 0.25rem, rgb(211 167 56 / 0.14) 0.4rem, transparent 2rem),
		radial-gradient(circle at 46% 80%, rgb(224 136 26 / 0.55) 0 0.35rem, rgb(211 167 56 / 0.18) 0.5rem, transparent 2.6rem),
		radial-gradient(circle at 63% 66%, rgb(224 136 26 / 0.4) 0 0.25rem, rgb(211 167 56 / 0.12) 0.4rem, transparent 1.9rem),
		radial-gradient(circle at 77% 86%, rgb(224 136 26 / 0.5) 0 0.3rem, rgb(211 167 56 / 0.16) 0.45rem, transparent 2.3rem),
		radial-gradient(circle at 92% 70%, rgb(224 136 26 / 0.45) 0 0.3rem, rgb(211 167 56 / 0.14) 0.45rem, transparent 2.1rem);
}
.nacht a { color: var(--wp--preset--color--gold); }
.nacht a:hover { color: var(--wp--preset--color--papier); }
.nacht__zitat { font-size: var(--wp--preset--font-size--xxl); font-weight: 800; line-height: 1.05; word-spacing: 0.06em; text-wrap: balance; margin: 0; }

/* The series "Lichter für den Frieden": gold title as on the posters, reserved for the series */
.reihe__titel { color: var(--wp--preset--color--gold); font-size: var(--wp--preset--font-size--xxl); line-height: 1; margin-block-end: var(--wp--preset--spacing--40); }
h1.reihe__titel { font-size: var(--wp--preset--font-size--plakat); line-height: 0.95; }
.reihe__foto { margin-block: var(--wp--preset--spacing--40) 0; }
.reihe__foto img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 62%; }
.reihe__foto figcaption { font-size: 0.9rem; opacity: 0.8; margin-block-start: 0.5rem; }
.reihe__fest { font-size: var(--wp--preset--font-size--xl); margin-block-start: var(--wp--preset--spacing--50); }
.reihe-kopf { padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70); }
.reihe-kopf .nacht__zitat { margin-block-start: var(--wp--preset--spacing--50); }

/* Network list */
.netzwerk-liste { columns: 3 15rem; column-gap: var(--wp--preset--spacing--50); list-style: none; padding: 0; }
.netzwerk-liste li { break-inside: avoid; padding-block: 0.4rem; border-bottom: 1px solid rgb(28 26 22 / 0.12); }

/* Footer */
.fuss a { color: var(--wp--preset--color--papier); }
.fuss a:hover { color: var(--wp--preset--color--kerze); }
.fuss__logo { width: 88px; height: auto; display: block; margin-bottom: 1rem; }
.fuss h2 { color: var(--wp--preset--color--kerze); }

/* Inner pages */
.seite .wp-block-post-title { font-size: var(--wp--preset--font-size--xxl); margin-bottom: var(--wp--preset--spacing--40); }
.seite .wp-block-post-content > p:first-child,
.seite .wp-block-post-content > .sprachwahl:first-child + p { font-size: var(--wp--preset--font-size--gross); line-height: 1.5; }
/* Link to the other language version of a page */
.seite .wp-block-post-content > p.sprachwahl { font-size: 1rem; font-weight: 700; margin-block-end: var(--wp--preset--spacing--30); }

/* Lining figures where numbers carry dates */
.is-style-kreis, .is-style-kreis-klein, .nacht, .wp-block-post-date, h1, h2, h3 { font-variant-numeric: lining-nums; }

h1, h2, h3 { word-spacing: 0.06em; }

/* Mobile menu overlay */
.kopf .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--papier);
	color: var(--wp--preset--color--tinte);
	padding: 1.25rem clamp(1rem, 4vw, 2.5rem);
}
.kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start; padding-top: 4rem; }
.kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start; gap: 1.25rem; }
.kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: var(--wp--preset--font-size--xl); font-weight: 800; }
.kopf .wp-block-navigation__responsive-container-open svg,
.kopf .wp-block-navigation__responsive-container-close svg { width: 32px; height: 32px; }

/* Event list on the Termine page */
.termin-liste { list-style: none; padding-left: 0; }
.termin-liste > li { padding-block: 1rem; border-top: 1px solid rgb(28 26 22 / 0.15); }
.termin-liste > li:last-child { border-bottom: 1px solid rgb(28 26 22 / 0.15); }
.termin-liste strong { font-variant-numeric: lining-nums; }

/* Photo series of an event: one lead image, then a calm mosaic on the night band */
/* Text keeps the column of the page head; only the photos run wider */
.fotostrecke > .fotostrecke__kopf { max-width: 52rem; }
.fotostrecke__kopf > h2 { margin-block-end: var(--wp--preset--spacing--30); }
.fotostrecke__text { max-width: 40rem; font-size: var(--wp--preset--font-size--gross); }
/* Two night bands in a row share one candle row at the very bottom */
.reihe-kopf:has(+ .fotostrecke) { padding-block-end: 0; }
.reihe-kopf:has(+ .fotostrecke)::after { display: none; }
.fotostrecke__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(0.5rem, 1.2vw, 1rem); margin-block-start: var(--wp--preset--spacing--40); }
.fotostrecke__raster > figure { margin: 0; }
.fotostrecke__raster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto--gross { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.foto--gross img { object-position: 50% 62%; }
.foto--platz { grid-column: span 7; aspect-ratio: 4 / 3; }
/* Takes the height of its neighbour so the pair ends on one line */
.foto--menge { grid-column: span 5; position: relative; }
.foto--menge img { position: absolute; inset: 0; }
.foto--buehne { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
.foto--buehne img { object-position: 50% 70%; }
.foto--portrait { grid-column: span 3; aspect-ratio: 4 / 5; }
.fotostrecke__nachweis { font-size: 0.9rem; opacity: 0.8; margin-block-start: 1rem; }

@media (max-width: 781px) {
	.foto--platz, .foto--menge { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
	.foto--menge img { position: static; }
	.foto--buehne { aspect-ratio: 4 / 3; }
	.foto--portrait { grid-column: span 6; }
}