/*
Theme Name: Schoko RAN
Theme URI: https://ran-bike.at
Description: Kind-Theme von Schoko für das Race Around Niederösterreich (ran-bike.at). Trägt die RAN-Farben, Schriften, Typografie und den Fußbereich.
Author: Race Around Niederösterreich
Template: schoko-base
Version: 0.8.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.2
License: GPL-2.0-or-later
Text Domain: schoko-ran
*/

/* Logo im Kopfbereich: Höhe 56 px (390 px Breite) bis 76 px (1440 px), laut Entwurf. */
header .wp-block-site-logo img {
	width: auto;
	height: clamp(3.5rem, 3.0357rem + 1.9048vw, 4.75rem);
}

/* Button im Kopfbereich: 48 px hoch am Desktop, 44 px mobil. */
header .wp-block-button__link {
	padding: 0.75rem 1.75rem;
}

@media (max-width: 599px) {
	header .wp-block-button__link {
		padding: 0.625rem 1rem;
		font-size: var(--wp--preset--font-size--small);
	}
}

/*
 * Umbruch zum Burger bei 1350 px (Rechnung in docs/kopfzeile.md): Logo mit
 * vier Social Icons, acht Menüpunkte (16 px, Abstand 24 px), Sprache und
 * Button brauchen mit echter Mitte und 32 px Mindestabstand rund 1227 px
 * Inhaltsbreite (ab etwa 1348 px Fensterbreite); maßgeblich sind die linke
 * Spalte und das deutsche Menü. Der Navigation-Block schaltet fest bei
 * 600 px um; dazwischen hier ebenfalls Burger und Overlay, Anordnung wie in
 * schoko-base unter 600 px (Social Icons dann im Overlay).
 */
@media (min-width: 600px) and (max-width: 1349px) {
	header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		display: flex;
	}

	header .schoko-kopf {
		grid-template-columns: 1fr auto auto;
		column-gap: var(--wp--preset--spacing--20);
	}

	header .schoko-kopf__mitte {
		order: 3;
	}

	header .schoko-live-link,
	header .schoko-kopf__social {
		display: none;
	}
}

/* Banner im Race-Modus: 52 px hoch, Überschriftenschrift in Großbuchstaben (Entwurf). */
.schoko-rennbanner {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Buttons im Inhalt: 60 px (Hero) bzw. 56 px hoch, Entwurf. */
.schoko-button-gross .wp-block-button__link {
	padding: 1rem 2.25rem;
	font-size: var(--wp--preset--font-size--large);
}

/* Links mit Pfeil ohne Unterstreichung. */
.schoko-pfeil-link a {
	text-decoration: none;
}

.schoko-pfeil-link a:hover {
	text-decoration: underline;
}

/*
 * Hero: 620 px (390 px Breite) bis 780 px (1440 px) hoch, Abdunklung 55 %.
 * Text senkrecht mittig, Countdown unten rechts; schmal steht alles unten
 * in der Reihenfolge Dachzeile, Titel, Termin, Countdown, Button.
 */
.wp-block-cover.schoko-hero {
	min-height: clamp(38.75rem, 35.0357rem + 15.2381vw, 48.75rem);
	align-items: stretch;
}

.schoko-hero .wp-block-cover__background.has-background-dim {
	opacity: 0.55;
}

.schoko-hero .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
}

.schoko-hero .schoko-hero__raster {
	flex: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: var(--wp--preset--spacing--40);
}

.schoko-hero .schoko-hero__raster > * {
	margin-block: 0;
}

.schoko-hero__text {
	max-width: 73.75rem;
}

.schoko-hero__text > * {
	margin-block: 0;
}

.schoko-hero__eyebrow {
	font-size: var(--wp--preset--font-size--large);
}

.schoko-hero__termin p {
	margin: 0;
}

.schoko-countdown {
	align-self: end;
	width: 11.25rem;
	min-height: 8.75rem;
	padding: var(--wp--preset--spacing--20);
	box-sizing: border-box;
	align-items: center;
	gap: 0.25rem;
	text-align: center;
}

.schoko-countdown p {
	margin: 0;
	line-height: 1.2;
}

.schoko-countdown .schoko-countdown__zahl {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 900;
	line-height: 1;
}

@media (max-width: 781px) {
	.schoko-hero .schoko-hero__raster {
		grid-template-columns: minmax(0, 1fr);
		align-content: end;
		row-gap: var(--wp--preset--spacing--30);
	}

	.schoko-hero .schoko-hero__text {
		display: contents;
	}

	.schoko-hero__eyebrow { order: 1; }
	.schoko-hero__titel { order: 2; }
	.schoko-hero__termin { order: 3; }
	.schoko-countdown { order: 4; }
	.schoko-hero__buttons { order: 5; }

	.schoko-countdown {
		align-self: auto;
		width: auto;
		min-height: 0;
		flex-direction: row;
		align-items: baseline;
		justify-content: flex-start;
		gap: 0.625rem;
		padding: 0.875rem 1rem;
	}
}

/* Elemente, die schmal (unter 600 px) entfallen, wie im mobilen Entwurf. */
@media (max-width: 599px) {
	.schoko-nur-breit {
		display: none;
	}

	.schoko-hero__buttons .wp-block-button {
		width: 100%;
	}

	.schoko-hero__buttons .wp-block-button__link {
		width: 100%;
	}
}

/* Kennzahlen: vier in einer Reihe, unter 782 px 2 × 2. */
.schoko-kennzahlen__raster {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--50);
}

.schoko-kennzahlen__raster > * {
	margin-block: 0;
}

.schoko-kennzahlen__raster p {
	margin: 0;
}

@media (max-width: 781px) {
	.schoko-kennzahlen__raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Preiskarte: Absätze ohne eigenen Außenabstand. */
.schoko-preiskarte p {
	margin: 0;
}

/* Strecke: breit Bilder links, Text rechts; schmal Text zuerst. */
@media (min-width: 782px) {
	.schoko-strecke .schoko-strecke__bilder {
		order: -1;
	}
}

.schoko-strecke__raster {
	gap: var(--wp--preset--spacing--20);
}

.schoko-strecke__raster figure {
	margin: 0;
	height: 28.75rem;
}

.schoko-strecke__raster img {
	width: 100%;
	height: 100%;
}

.schoko-strecke__karte {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--30);
	box-sizing: border-box;
	background: var(--wp--preset--color--muted);
}

.schoko-strecke__karte img {
	object-fit: contain;
}

.schoko-strecke__foto img {
	object-fit: cover;
}

@media (max-width: 599px) {
	.schoko-strecke__raster {
		grid-template-columns: minmax(0, 1fr);
	}

	.schoko-strecke__raster figure {
		height: 18.75rem;
	}

	.schoko-strecke__foto {
		display: none;
	}
}

/* News: Karten auf Weiß, Titel in Blau ohne Unterstreichung. */
.schoko-news__karte .wp-block-post-featured-image {
	margin: 0;
}

.schoko-news__karte .wp-block-post-title a {
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

.schoko-news__karte .wp-block-post-title a:hover {
	text-decoration: underline;
}

.schoko-news__karte .wp-block-post-date,
.schoko-news__karte .wp-block-post-title {
	margin: 0;
}

/* Schmal: nur der erste Eintrag mit Bild, wie im mobilen Entwurf. */
@media (max-width: 599px) {
	.schoko-news .wp-block-post-template > li:not(:first-child) .schoko-news__bild {
		display: none;
	}
}

/* Partner: Logos in Kästen mit Linie, 88 px (breit) bzw. 72 px hoch. */
.wp-block-gallery.schoko-partner .wp-block-image {
	display: flex;
	align-items: center;
	justify-content: center;
	height: clamp(4.5rem, 4.1286rem + 1.5238vw, 5.5rem);
	padding: var(--wp--preset--spacing--10);
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--line);
}

.wp-block-gallery.schoko-partner .wp-block-image img {
	width: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/*
 * Verlinkte Logos (seit Auftrag 50 alle mit Link, wo belegt): Der Link füllt
 * den Kasten, sonst begrenzt max-height das Bild nicht (Hochformat
 * Maroitalia). Kästen in der letzten Reihe nicht strecken, die Reihe mittig.
 */
.wp-block-gallery.schoko-partner .wp-block-image > a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 0;
}

.wp-block-gallery.has-nested-images.schoko-partner {
	justify-content: center;
}

.wp-block-gallery.has-nested-images.schoko-partner figure.wp-block-image {
	flex-grow: 0;
}

/*
 * Eckdaten-Leiste der Unterseiten: Werte mit Einheit sind länger als die
 * Kennzahlen der Startseite, deshalb 28 px (390 px Breite) bis 48 px (1440 px,
 * Entwurf) statt der Größe „Kennzahl“.
 */
.schoko-eckdaten .has-xx-large-font-size {
	font-size: clamp(1.75rem, 1.2857rem + 1.9048vw, 3rem);
}

/*
 * Unterseiten (Muster unterseite-*): Karte auf heller Fläche, so hoch wie die
 * Spalte daneben.
 */
.wp-block-column:has(> .schoko-karte) {
	display: flex;
}

.wp-block-image.schoko-karte {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: var(--wp--preset--spacing--40);
	box-sizing: border-box;
	background: var(--wp--preset--color--muted);
}

.schoko-karte img {
	width: auto;
	max-width: 100%;
	max-height: 31rem;
	object-fit: contain;
}

/*
 * Download-Zeilen: Rahmen in Blau, mit Hintergrundfarbe hervorgehoben. Der
 * Pfeil kommt aus dem Link: neuer Tab (externe Adresse) ↗, sonst ↓.
 */
.schoko-download,
.schoko-download.has-background {
	margin: 0;
	padding: 0;
	border: 2px solid var(--wp--preset--color--brand);
	font-weight: 700;
}

.schoko-download.has-background {
	border-color: transparent;
}

.schoko-download a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 3.75rem;
	padding: 0.5rem 1.25rem;
	box-sizing: border-box;
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

.schoko-download a:hover {
	text-decoration: underline;
}

.schoko-download a::after {
	content: "↓";
	content: "↓" / "";
}

.schoko-download a[target="_blank"]::after {
	content: "↗";
	content: "↗" / "";
}

/*
 * Höhenprofil: Grafik über die volle Breite der blauen Fläche, Höhe aus dem
 * Seitenverhältnis der (beschnittenen) Datei.
 */
.schoko-hoehenprofil {
	padding: var(--wp--preset--spacing--30);
}

.schoko-hoehenprofil figure {
	margin: 0;
}

.schoko-hoehenprofil img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 599px) {
	.schoko-hoehenprofil {
		padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--10);
	}
}

/*
 * Tabelle: Kopfzeile Blau auf Weiß, Zeilen mit Linie, Ziffern gleich breit.
 * Schmal bleibt sie Tabelle und lässt sich im eigenen Rahmen waagerecht
 * schieben.
 */
.wp-block-table.schoko-tabelle {
	overflow-x: auto;
}

.wp-block-table.schoko-tabelle table {
	min-width: 44rem;
	border-collapse: collapse;
	background: var(--wp--preset--color--base);
	font-variant-numeric: tabular-nums;
}

.wp-block-table.schoko-tabelle th,
.wp-block-table.schoko-tabelle td {
	padding: 0.875rem 1.125rem;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	text-align: left;
}

.wp-block-table.schoko-tabelle .has-text-align-right {
	text-align: right;
}

.wp-block-table.schoko-tabelle thead {
	border: 0;
}

.wp-block-table.schoko-tabelle thead th {
	border-bottom: 0;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
	font-weight: 700;
	vertical-align: bottom;
}

.wp-block-table.schoko-tabelle th:first-child {
	width: 26%;
}

.wp-block-table.schoko-tabelle tbody td:first-child {
	font-weight: 700;
}

.wp-block-table.schoko-tabelle tbody tr:last-child td {
	border-bottom: 0;
}

/* Hotspot-Karten: Nummer in fester Breite, Absätze ohne Außenabstand. */
.schoko-hotspot p {
	margin: 0;
}

.schoko-hotspot__nummer {
	min-width: 2.5rem;
}

/* Aufruf-Band: Überschrift ohne Außenabstand. */
.schoko-aufruf h2 {
	margin: 0;
}

/*
 * Online-Anmeldung: Buttons im Formular des Anmeldedienstes wie die Buttons
 * des Themes (Blau auf Gelb, Großbuchstaben); Grundgestaltung in schoko-base.
 */
.schoko-anmeldung .RRRegStart_Registrations button {
	text-transform: uppercase;
}

.schoko-anmeldung .RRRegStart_Registrations button:not([disabled]) {
	color: var(--wp--preset--color--brand);
}

.schoko-anmeldung .RRRegStart_Registrations button:not([disabled]):hover {
	color: var(--wp--preset--color--accent);
}

/*
 * Newsletter (Mailchimp for WordPress): Button wie die Buttons des Themes
 * (Blau auf Gelb, Großbuchstaben); Grundgestaltung in schoko-base.
 */
.mc4wp-form input[type="submit"] {
	text-transform: uppercase;
	color: var(--wp--preset--color--brand);
}

.mc4wp-form input[type="submit"]:hover {
	color: var(--wp--preset--color--accent);
}

/* Angaben über dem Formular (Renntermin, Anmeldeschluss): Absätze ohne Außenabstand. */
.schoko-angaben p {
	margin: 0;
}

/*
 * Seitentitel im Seitenkopf: unter 390 px Fensterbreite schrumpft er mit dem
 * Fenster (44 px bei 390 px = 11,28vw), damit ein Wort wie „REGISTRATION“
 * (7,54 em in Red Hat Display Black) auch auf schmaleren Telefonen in eine
 * Zeile passt. Ab 390 px gilt unverändert die Größe „Titel“.
 */
.schoko-seitenkopf .wp-block-post-title,
.schoko-seitenkopf h1.wp-block-heading {
	font-size: min(var(--wp--preset--font-size--display), 11.28vw);
}

/* Links in Menüs auf Blau: beim Überfahren weiß. */
.has-brand-background-color .wp-block-navigation a:hover {
	color: var(--wp--preset--color--base);
}