/*
Theme Name: Osterfeine
Theme URI: https://schuetzenverein-osterfeine.de
Description: Gestaltung der Vereinsseite des Bürgerschützenvereins Osterfeine-Dümmer e.V.
Author: Bürgerschützenverein Osterfeine-Dümmer e.V.
Template: twentytwentyfive
Version: 1.0
Requires at least: 6.7
Tested up to: 7.1
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sv-osterfeine
*/

/* Gestaltung läuft über theme.json. Hier steht nur, was sich dort nicht
   ausdrücken lässt. */

/* Terminliste - eigener Block, den theme.json nicht kennt. */
.sv-termine {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--10);
}

.sv-termin {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.9rem;
	padding-bottom: var(--wp--preset--spacing--10);
	border-bottom: 1px solid var(--wp--preset--color--papier-tief);
}

.sv-termin time {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--wp--preset--color--vereinsgruen);
	min-width: 6.5em;
}

.sv-termin-ort {
	color: var(--wp--preset--color--tinte-matt);
	font-size: var(--wp--preset--font-size--klein);
	flex-basis: 100%;
}

/*
 * Der Link auf die Kalenderdatei.
 *
 * margin-left: auto schiebt ihn an den rechten Rand der Zeile. Der Ort hat
 * flex-basis: 100% und rutscht dadurch von allein in die naechste Zeile.
 */
.sv-termin-kalender {
	margin-left: auto;
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--tinte-matt);
	white-space: nowrap;
}

.sv-termin-kalender:hover,
.sv-termin-kalender:focus {
	color: var(--wp--preset--color--vereinsgruen);
}

.sv-termin-kalender-zeile {
	margin-top: var(--wp--preset--spacing--20);
}

/*
 * Auf schmalen Schirmen gibt es keinen rechten Rand, an den sich etwas
 * schieben liesse: Der Link landete allein auf einer eigenen Zeile und sah
 * verloren aus. Dort laeuft er einfach hinter dem Titel mit.
 */
@media (max-width: 599px) {
	.sv-termin-kalender {
		margin-left: 0;
	}
}

.sv-termine-leer {
	color: var(--wp--preset--color--tinte-matt);
}

/* Sprunglink zum Inhalt: WordPress setzt ihn selbst (Klasse skip-link) und
   blendet ihn nur bei Fokus ein. Hier bekommt er nur die Vereinsfarben. */
.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--vereinsgruen);
	color: var(--wp--preset--color--papier);
}

/* Das Ziel des Sprunglinks ist der Inhaltsbereich (main, tabindex -1). Sobald
   er den Fokus bekommt - nach dem Sprunglink oder in Safari schon nach einem
   Klick in den Text - zeichnet der Browser seinen Fokusrahmen über die ganze
   Seitenbreite: eine dunkle Linie unter der Kopfzeile und eine über dem Fuß.
   Der Rahmen hilft niemandem, der nächste Tabulatorschritt landet ohnehin auf
   dem ersten Link im Inhalt und wird dort sichtbar markiert. */
#inhalt:focus {
	outline: none;
}

/* Instagram, Facebook, WhatsApp-Kanal: Symbol mit Beschriftung, auf der
   in der Fußzeile jeder Seite. */
.sv-kanaele {
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--10);
}

.sv-kanaele .wp-block-social-link-label {
	font-size: var(--wp--preset--font-size--klein);
}

/* Königsthron - das Bild des Jahres bekommt Luft und eine ruhige Bildunterschrift. */
.sv-thron img {
	width: 100%;
	height: auto;
	border-radius: 2px;
}

.wp-block-image figcaption {
	color: var(--wp--preset--color--tinte-matt);
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.5;
	text-align: left;
	margin-top: 0.6rem;
}

.wp-block-image figcaption strong {
	color: var(--wp--preset--color--tinte);
}

/* Das Wappen im Kopfbereich steht auf dunklem Grund. */
.wp-block-site-logo img {
	background: transparent;
}

/* Partnerbereich in der Fußzeile: steht auf jeder Seite, soll aber ruhig
   bleiben und dem Inhalt nicht die Aufmerksamkeit wegnehmen. */
.sv-partner {
	gap: var(--wp--preset--spacing--30);
	align-items: start;
}

.sv-partner-karte {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.sv-partner-titel {
	font-family: var(--wp--preset--font-family--ueberschrift);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tinte-matt);
	margin: 0;
}

/* Die Bilder werden nicht beschnitten - sie stehen vollständig da und behalten
   ihr Seitenverhältnis. Dadurch sind die Karten unterschiedlich hoch; sie
   beginnen oben auf gleicher Linie, und das genügt für einen ruhigen Eindruck. */
.sv-partner-bild,
.sv-partner-bild a {
	display: block;
	width: 100%;
	margin: 0;
}

.sv-partner-bild img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 220px;
	height: auto;
	border-radius: 2px;
}

.sv-partner-logo img {
	max-width: 220px;
	height: auto;
}

.sv-trenner {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--papier-tief);
	margin: var(--wp--preset--spacing--20) 0;
	opacity: 1;
}

/* Übersicht der Unterseiten auf den Abteilungsseiten. */
.sv-unterseiten {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--10);
}

.sv-unterseiten li {
	padding-bottom: var(--wp--preset--spacing--10);
	border-bottom: 1px solid var(--wp--preset--color--papier-tief);
}

.sv-unterseiten a {
	font-family: var(--wp--preset--font-family--ueberschrift);
	font-size: var(--wp--preset--font-size--gross);
	text-decoration: none;
}

.sv-unterseiten-text {
	display: block;
	color: var(--wp--preset--color--tinte-matt);
	font-size: var(--wp--preset--font-size--klein);
}

/* Untermenüs öffnen beim Überfahren.
   WordPress blendet sie über Deckkraft ein und steuert das per JavaScript.
   Die folgenden Regeln erledigen dasselbe allein mit CSS - dadurch öffnet das
   Menü auch dann, wenn das Skript langsam lädt, und bei Tastaturbedienung. */
.wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
.wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container,
.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	/* WordPress klappt per Hoehe und Breite 0 ein; mit der Tastatur blieb
	   das Menue sonst unsichtbar, obwohl der Fokus schon darin stand. */
	height: auto;
	width: auto;
	min-width: 16rem;
	overflow: visible;
}

.wp-block-navigation__submenu-container {
	min-width: 16rem;
	padding: 0.4rem 0;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
	border: 0;
	border-radius: 2px;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5rem 1rem;
}

/* Der Pfeil neben Hauptpunkten mit Untermenü. */
.wp-block-navigation .wp-block-navigation-submenu__toggle svg {
	opacity: .7;
}

/* Am Telefon klappt alles untereinander auf - dort ist Überfahren sinnlos. */
@media (max-width: 599px) {
	.wp-block-navigation__submenu-container {
		box-shadow: none;
		min-width: 0;
	}
}

/* ------------------------------------------------------------------
   Namenslisten (Schützenkönige, Kinderkönige, Jugendprinzen, Kaiser)
   ------------------------------------------------------------------
   Die Bilder stammen aus vierzig Jahren und sind entsprechend
   unterschiedlich: alte Aufnahmen liegen als 150er-Quadrat vor, neue als
   Hochformat mit 1024 Pixeln. Die alte Seite hat das mit festen
   Pixelmaßen im HTML erschlagen - die brechen aber die Mobilansicht.

   Deshalb hier: ein einheitlicher Rahmen, in den sich jedes Bild
   vollständig einpasst. Bewusst "contain" und nicht "cover" - beim
   Zuschneiden würden bei Gruppenaufnahmen Köpfe wegfallen, und das ist
   bei Königsbildern der falsche Kompromiss. */

.sv-liste table {
	width: 100%;
	border-collapse: collapse;
}

.sv-liste td,
.sv-liste th {
	padding: .5rem .75rem;
	vertical-align: middle;
}

.sv-liste td img {
	width: 150px;
	height: 150px;
	object-fit: contain;
	object-position: center;
	display: block;
	margin: 0 auto;
}

/* Die Bildspalte soll nicht mitwachsen, wenn die Namen lang werden. */
.sv-liste td:last-child {
	width: 170px;
}

/* Am Telefon wird die Tabelle sonst breiter als der Bildschirm. */
@media (max-width: 599px) {
	.sv-liste td img {
		width: 80px;
		height: 80px;
	}

	.sv-liste td:last-child {
		width: 88px;
	}

	.sv-liste td,
	.sv-liste th,
	.sv-verstorbene td,
	.sv-verstorbene th {
		padding: .3rem .3rem;
		font-size: var(--wp--preset--font-size--klein);
		overflow-wrap: anywhere;
	}

	/* Die Jahreszahl bleibt in einer Zeile - "197" und "2" untereinander
	   liest niemand als 1972. */
	.sv-liste td:first-child {
		white-space: nowrap;
	}
}

/* Beitragsverzeichnis auf "Aktuelles" - gleiche Anmutung wie die Terminliste,
   damit Datum und Titel auf beiden Seiten an derselben Stelle stehen. */
.sv-beitrag-jahr {
	margin-top: var(--wp--preset--spacing--30);
}

.sv-beitraege {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--10);
}

.sv-beitrag {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.9rem;
	padding-bottom: var(--wp--preset--spacing--10);
	border-bottom: 1px solid var(--wp--preset--color--papier-tief);
}

.sv-beitrag time {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--wp--preset--color--vereinsgruen);
	min-width: 6.5em;
}

.sv-beitrag a {
	font-family: var(--wp--preset--font-family--ueberschrift);
	font-size: var(--wp--preset--font-size--normal);
	text-decoration: none;
}

.sv-beitrag-text {
	flex-basis: 100%;
	color: var(--wp--preset--color--tinte-matt);
	font-size: var(--wp--preset--font-size--klein);
}

/* Kinderkönigsthron und Jugendprinz nebeneinander. Unter 700 Pixeln
   untereinander - zwei halbe Gruppenfotos sind auf dem Telefon nicht lesbar. */
.sv-thron-reihe {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--30);
}

.sv-thron-spalte {
	flex: 1 1 14rem;
	min-width: 0;
}

.sv-thron-spalte-breit {
	flex-grow: 1.4;
}

.sv-thron-reihe img {
	width: 100%;
	height: auto;
}

/* Die Listen kommen aus PHP, nicht aus gespeicherten Blöcken - WordPress lädt
   sein Tabellen-Stylesheet dafür nicht mit. Die Linien stehen deshalb hier,
   und auch das seitliche Rollen: Ohne das schiebt die Tabelle am Telefon die
   ganze Seite in die Breite. */
.sv-liste {
	overflow-x: auto;
}

.sv-liste td,
.sv-liste th {
	border: 1px solid var(--wp--preset--color--papier-tief);
}

/* ------------------------------------------------------------------
   Kopfbereich
   ------------------------------------------------------------------ */

/* Das Wappen ist ein Hochformat. Bei voller Größe schiebt es am Telefon
   die Menüschaltfläche in eine eigene Zeile und das grüne Band wird
   doppelt so hoch wie nötig. */
@media (max-width: 599px) {
	.wp-block-site-logo,
	.wp-block-site-logo img {
		width: 48px !important;
		height: auto;
	}

	header .wp-block-site-title {
		font-size: var(--wp--preset--font-size--klein);
		line-height: 1.2;
	}

	/* Wappen, Name und Menüschaltfläche bleiben in einer Zeile; der Name
	   bricht dafür lieber um. Sonst rutscht die Schaltfläche darunter und
	   steht allein auf weiter Flur. */
	header .alignwide.is-layout-flex {
		flex-wrap: nowrap;
	}

	header .wp-block-site-title,
	header .alignwide.is-layout-flex > .wp-block-group {
		min-width: 0;
	}
}

/* Das Menü steht am Rechner rechts. Im aufgeklappten Menü am Telefon führt
   dieselbe Ausrichtung dazu, dass die Hauptpunkte am rechten Rand kleben und
   abgeschnitten werden - dort gehören sie an den linken Rand.

   Die Ausrichtung hängt an einer eigenen Variable des Navigationsblocks. Sie
   umzusetzen ist sauberer, als gegen die Regeln des Blocks anzuschreiben: Die
   tragen vier Klassen und gewinnen sonst jedes Mal. */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.items-justified-right,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	--navigation-layout-justification-setting: flex-start;
}

/* Etwas Luft zum Rand, damit der Umriss des angewählten Punktes nicht am
   Bildschirmrand klebt. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-left: var(--wp--preset--spacing--10);
}

/* ------------------------------------------------------------------
   Zähler bis zum Schützenfest
   ------------------------------------------------------------------ */
.sv-countdown {
	background: var(--wp--preset--color--vereinsgruen);
	color: var(--wp--preset--color--papier);
	padding: var(--wp--preset--spacing--20);
	border-radius: 2px;
	text-align: center;
}

.sv-countdown p {
	margin: 0;
}

.sv-countdown-titel {
	font-family: var(--wp--preset--font-family--ueberschrift);
	font-size: var(--wp--preset--font-size--gross);
}

.sv-countdown-zahl {
	font-family: var(--wp--preset--font-family--ueberschrift);
	font-size: clamp(1.6rem, 3.5vw, 2.4rem);
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	margin-top: 0.2em;
}

.sv-countdown-datum {
	font-size: var(--wp--preset--font-size--klein);
	opacity: 0.85;
	margin-top: 0.4em;
}

/* ------------------------------------------------------------------
   Eckdaten eines Termins (Seite eines einzelnen Termins)
   ------------------------------------------------------------------ */
.sv-termin-daten {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.3rem 1.2rem;
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--papier-tief);
	border-radius: 2px;
}

.sv-termin-daten dt {
	color: var(--wp--preset--color--tinte-matt);
	font-size: var(--wp--preset--font-size--klein);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding-top: 0.15em;
}

.sv-termin-daten dd {
	margin: 0;
}

.sv-termin-daten time {
	font-weight: 600;
	color: var(--wp--preset--color--vereinsgruen);
	font-variant-numeric: tabular-nums;
}

/* Der Kalenderlink darf hier umbrechen - in der Terminliste steht er in
   einer Zeile, in den Eckdaten hat er eine ganze Spalte. */
.sv-termin-daten .sv-termin-kalender {
	white-space: normal;
	margin-left: 0;
	font-size: inherit;
	color: var(--wp--preset--color--vereinsgruen);
}

@media (max-width: 599px) {
	.sv-termin-daten {
		grid-template-columns: 1fr;
		gap: 0.1rem;
	}

	.sv-termin-daten dd {
		margin-bottom: 0.6rem;
	}
}

/* ------------------------------------------------------------------
   Brotkrumen über dem Titel der Unterseiten
   ------------------------------------------------------------------ */
.sv-brotkrumen ol {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--10);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 0;
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--tinte-matt);
}

.sv-brotkrumen li + li::before {
	content: "›";
	padding: 0 0.5em;
	color: var(--wp--preset--color--tinte-matt);
}

.sv-brotkrumen a {
	color: inherit;
	text-decoration: none;
}

.sv-brotkrumen a:hover,
.sv-brotkrumen a:focus {
	color: var(--wp--preset--color--vereinsgruen);
	text-decoration: underline;
}

/* ------------------------------------------------------------------
   Kopfzeile: Menue und Name nebeneinander, das Menue rechts.
   Wenn es doch umbricht, bleibt es rechts statt links zu kleben.
   ------------------------------------------------------------------ */
header .alignwide.is-layout-flex > nav {
	margin-left: auto;
}

/* Startseite: Der Vereinsname steht schon in der Kopfzeile; oben auf der
   Seite ist er nur noch eine Zeile, damit der Thron in den ersten Blick kommt. */
.sv-startseite-titel {
	margin-bottom: 0.2em;
}

.sv-startseite-titel + p {
	margin-top: 0;
	color: var(--wp--preset--color--tinte-matt);
}

/* Teaser auf der Startseite: drei Karten, am Telefon untereinander. */
.sv-teaser .wp-block-post-title {
	margin-top: 0.6rem;
	margin-bottom: 0.1rem;
	line-height: 1.3;
}

.sv-teaser .wp-block-post-date {
	display: block;
	color: var(--wp--preset--color--tinte-matt);
	margin-bottom: 0.3rem;
}

.sv-teaser .wp-block-post-excerpt p {
	margin: 0;
	color: var(--wp--preset--color--tinte-matt);
}

.sv-teaser .wp-block-post-featured-image img {
	border-radius: 2px;
}

/* Bilderuebersicht: Kacheln mit Titelbild statt Aufzaehlung. */
.sv-alben {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: var(--wp--preset--spacing--20);
}

.sv-album-kachel a {
	display: block;
	text-decoration: none;
	color: inherit;
}

.sv-album-bild {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 2px;
	background: var(--wp--preset--color--papier-tief);
	margin-bottom: 0.5rem;
}

.sv-album-bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s ease;
}

.sv-album-kachel a:hover img,
.sv-album-kachel a:focus img {
	transform: scale(1.03);
}

.sv-album-titel {
	display: block;
	font-family: var(--wp--preset--font-family--ueberschrift);
	font-size: var(--wp--preset--font-size--gross);
	line-height: 1.2;
	color: var(--wp--preset--color--vereinsgruen);
}

.sv-album-kachel a:hover .sv-album-titel,
.sv-album-kachel a:focus .sv-album-titel {
	text-decoration: underline;
}

.sv-album-anzahl {
	display: block;
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--tinte-matt);
}

/* Koenigslisten: Zeilen mit Haarlinie statt Gittertabelle. */
.sv-koenige {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sv-koenig {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--10) 0;
	border-bottom: 1px solid var(--wp--preset--color--papier-tief);
}

.sv-koenig-bild {
	flex: 0 0 110px;
	width: 110px;
	height: 110px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sv-koenig-bild img {
	max-width: 110px;
	max-height: 110px;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 2px;
	display: block;
}

.sv-koenig-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.sv-koenig-jahr {
	font-family: var(--wp--preset--font-family--ueberschrift);
	font-size: var(--wp--preset--font-size--gross);
	color: var(--wp--preset--color--vereinsgruen);
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

.sv-koenig-kompanie {
	color: var(--wp--preset--color--tinte-matt);
	font-size: var(--wp--preset--font-size--klein);
}

.sv-koenig-hinweis {
	color: var(--wp--preset--color--tinte-matt);
}

.sv-koenig-hinweis .sv-koenig-jahr {
	flex: 0 0 110px;
	text-align: center;
}

@media (max-width: 599px) {
	.sv-koenig {
		gap: var(--wp--preset--spacing--10);
	}

	.sv-koenig-bild,
	.sv-koenig-hinweis .sv-koenig-jahr {
		flex-basis: 80px;
		width: 80px;
		height: 80px;
	}

	.sv-koenig-bild img {
		max-width: 80px;
		max-height: 80px;
	}
}

/* Galerien: beschnittenes Raster, gleiche Reihenhoehen. Die Lightbox zeigt
   das ganze Bild, hier zaehlt der ruhige Ueberblick. */
.wp-block-gallery.has-nested-images figure.wp-block-image img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	width: 100%;
	height: auto;
}

/* Am Telefon weniger Luft zwischen den Abschnitten. */
@media (max-width: 599px) {
	:root {
		--wp--preset--spacing--40: 3.5rem;
	}
}