/*
Theme Name: Schoko Base
Description: Neutrales Block-Theme als Basis für Radevent-Websites. Eventspezifische Werte gehören in ein Kind-Theme.
Version: 2.7.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.2
License: GPL-2.0-or-later
Text Domain: schoko-base
*/

/* Fokus für Tastatur: gelber bzw. Akzent-Ring mit dunklem Außenring, sichtbar auf hellem und dunklem Grund. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--wp--preset--color--contrast);
}

/*
 * Lange Wörter in Überschriften mit Trennstrich umbrechen statt hart (braucht
 * das lang-Attribut der Seite). theme.json kennt keine Eigenschaft hyphens.
 * Navigation und Buttons sind keine Überschriften und bleiben ohne Trennung.
 */
:where(h1, h2, h3) {
	hyphens: auto;
	overflow-wrap: break-word;
}

/* Sprachumschalter (Polylang), Blockstil „Kürzel“: DE | EN in einer Zeile. */
.wp-block-polylang-language-switcher.is-style-kuerzel {
	display: flex;
	gap: 0.5em;
	margin: 0;
	padding: 0;
	list-style: none;
	text-transform: uppercase;
}

.wp-block-polylang-language-switcher.is-style-kuerzel li + li::before {
	content: "|";
	margin-right: 0.5em;
}

/* Auf dunklem Grund (Kopfbereich): aktive Sprache hervorgehoben, die übrigen gedämpft und unterstrichen. */
.has-brand-background-color .is-style-kuerzel a {
	color: var(--wp--preset--color--brand-light);
	text-decoration: underline;
}

.has-brand-background-color .is-style-kuerzel li + li::before {
	color: var(--wp--preset--color--brand-light);
}

.has-brand-background-color .is-style-kuerzel .current-lang a {
	color: var(--wp--preset--color--base);
	font-weight: 700;
	text-decoration: none;
}

/*
 * Kopfzeile als Raster: links Logo, Mitte Hauptnavigation, rechts Sprache und
 * Button. Die Seitenspalten teilen sich den Rest gleich (1fr), die Mitte steht
 * damit in der Mitte der Inhaltsbreite. Reicht der Platz nicht (z. B. langer
 * Button-Text), werden die Seitenspalten so breit wie ihr Inhalt und die Mitte
 * rückt aus der Mitte, statt zu überlappen. Werte aus theme.json (custom.kopf).
 */
header .schoko-kopf {
	display: grid;
	grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
	align-items: center;
	column-gap: var(--wp--preset--spacing--40);
	min-height: var(--wp--custom--kopf--hoehe);
	padding-block: var(--wp--preset--spacing--10);
	box-sizing: border-box;
}

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

header .schoko-kopf__mitte {
	gap: var(--wp--custom--kopf--menue-abstand);
}

header .schoko-kopf__mitte .wp-block-navigation {
	gap: var(--wp--custom--kopf--menue-abstand);
	font-size: var(--wp--custom--kopf--menue-schrift);
}

header .schoko-kopf__rechts {
	justify-self: end;
	gap: var(--wp--custom--kopf--abstand-sprache);
}

/*
 * Social Icons (functions.php, schoko_base_header_social): links neben dem
 * Logo, solange das Menü in der Zeile steht; im Overlay der Navigation unter
 * den Menüpunkten. Farbe wie der Text des Kopfbereichs statt der Markenfarben
 * des Stils „Nur Logos“.
 */
header .schoko-kopf__links {
	gap: var(--wp--custom--kopf--abstand-social);
}

header .wp-block-social-links.schoko-social {
	gap: var(--wp--custom--kopf--social-abstand);
}

header .schoko-social .wp-social-link {
	color: inherit;
}

header .schoko-social .wp-social-link svg {
	width: var(--wp--custom--kopf--social-groesse);
	height: var(--wp--custom--kopf--social-groesse);
}

header .wp-block-navigation__responsive-container:not(.is-menu-open) .schoko-kopf__social-overlay {
	display: none;
}

header .wp-block-navigation__responsive-container.is-menu-open .schoko-kopf__social-overlay {
	margin-top: var(--wp--preset--spacing--40);
}

header .schoko-kopf .is-style-kuerzel {
	font-size: var(--wp--custom--kopf--sprache-schrift);
}

/* Link „Live“ im Race-Modus, Punkt in der Farbe „live“. */
.schoko-live-link {
	margin: 0;
	font-weight: 700;
	font-size: var(--wp--custom--kopf--menue-schrift);
	white-space: nowrap;
}

header .schoko-live-link a {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.schoko-live-link__punkt,
.schoko-rennbanner__punkt {
	display: inline-block;
	width: 0.625em;
	height: 0.625em;
	border-radius: 50%;
	background: var(--wp--preset--color--live);
}

/* Banner im Race-Modus über dem Kopfbereich. */
.schoko-rennbanner p {
	margin: 0;
}

.schoko-rennbanner a {
	display: inline-flex;
	align-items: center;
	gap: 0.75em;
	text-decoration: none;
}

.schoko-rennbanner__punkt {
	background: currentColor;
}

/*
 * Unterhalb des Umbruchs der Navigation: Logo, Sprache und Button, Burger.
 * 599 px ist der Umbruch des Navigation-Blocks; ein Kind-Theme kann ihn
 * erweitern (siehe schoko-ran/style.css).
 */
@media (max-width: 599px) {
	header .schoko-kopf {
		grid-template-columns: 1fr auto auto;
		column-gap: var(--wp--preset--spacing--10);
	}

	header .schoko-kopf__mitte {
		order: 3;
	}

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

/* Aktiver Menüpunkt im Kopfbereich (aria-current), auch beim Überfahren. */
header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent);
}

/* Startseite und Seiten: Abschnitte schließen ohne Abstand an Kopf- und Fußbereich an. */
.wp-site-blocks > .schoko-ohne-abstand,
.wp-site-blocks > .schoko-ohne-abstand + * {
	margin-block-start: 0;
}

/*
 * Seitenkopf (templates/page.html): Beitragsbild mit Abdunklung, Inhalt unten.
 * Ohne Beitragsbild bleibt die Fläche in der Primärfarbe, ohne Abdunklung.
 * Höhen und Innenabstand oben und unten aus theme.json (custom.seitenkopf).
 * Seitlich kein eigener Innenabstand (der Cover-Block bringt 1em mit): Es
 * gilt allein der Seitenabstand der Website, der Titel steht damit bündig
 * über dem Inhalt.
 */
.wp-block-cover.schoko-seitenkopf {
	min-height: var(--wp--custom--seitenkopf--hoehe);
	padding: var(--wp--custom--seitenkopf--abstand) 0;
	align-items: flex-end;
	background-color: var(--wp--preset--color--brand);
}

.schoko-seitenkopf:not(:has(.wp-block-cover__image-background)) .wp-block-cover__background {
	opacity: 0;
}

/*
 * Ohne Beitragsbild niedriger (custom.seitenkopf.hoeheOhneBild) und mit
 * kleinerem Innenabstand (abstandOhneBild), damit Brotkrumen und ein
 * einzeiliger Titel in die Mindesthöhe passen.
 */
.wp-block-cover.schoko-seitenkopf:not(:has(.wp-block-cover__image-background)) {
	min-height: var(--wp--custom--seitenkopf--hoehe-ohne-bild);
	padding-block: var(--wp--custom--seitenkopf--abstand-ohne-bild);
}

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

.schoko-seitenkopf__inhalt .wp-block-post-excerpt {
	max-width: 47.5rem;
}

.schoko-seitenkopf__inhalt .wp-block-post-excerpt__excerpt {
	margin: 0;
}

/*
 * Knopf zum Anhalten des Hintergrundvideos im Cover-Block (functions.php,
 * assets/js/hintergrundvideo.js): 44 px, oben rechts über Abdunklung und
 * Inhalt. Zeigt zwei Balken (anhalten) bzw. ein Dreieck (abspielen).
 */
.schoko-video-schalter {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 2px solid currentColor;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	cursor: pointer;
}

.schoko-video-schalter[hidden] {
	display: none;
}

.schoko-video-schalter:hover {
	background: rgba(0, 0, 0, 0.7);
}

.schoko-video-schalter::before {
	content: "";
	box-sizing: border-box;
	width: 0.75rem;
	height: 0.875rem;
	border-inline: 0.25rem solid currentColor;
}

.schoko-video-schalter.ist-angehalten::before {
	width: 0;
	margin-left: 0.1875rem;
	border-block: 0.4375rem solid transparent;
	border-inline: 0.75rem solid currentColor;
	border-inline-end: 0;
}

/* Inhalt ohne eigene Abschnitte (z. B. reiner Text): Abstand zu Seitenkopf und Fußbereich. */
.schoko-seite > .wp-block-post-content > :first-child:not(.alignfull) {
	margin-block-start: var(--wp--preset--spacing--60);
}

.schoko-seite > .wp-block-post-content > :last-child:not(.alignfull) {
	margin-block-end: var(--wp--preset--spacing--60);
}

/* Abschnitte in voller Breite folgen ohne Lücke aufeinander. */
.schoko-seite > .wp-block-post-content > .alignfull {
	margin-block: 0;
}

/* Platzhalter für Inhalte, die noch fehlen („[Inhalt folgt]“): deutlich markiert, auch für Besucher. */
.schoko-platzhalter {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 2px dashed var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
}

/*
 * Block „Online-Anmeldung“ (schoko-core). Das Formular kommt vom
 * Anmeldedienst (Klassen RRRegStart…); gestaltet wird es nur innerhalb der
 * Hülle .schoko-anmeldung und nur der Bereich .RRRegStart_Registrations. Das
 * Logo „Powered by“ darunter (eigener Bereich mit Inline-Styles des Dienstes)
 * bleibt unberührt. Bekannt ist nur das Markup bei geschlossener Anmeldung;
 * der offene Zustand ist allgemein über Buttons und Links abgedeckt.
 */
.schoko-anmeldung > :first-child {
	margin-block-start: 0;
}

.schoko-anmeldung > :last-child {
	margin-block-end: 0;
}

/* Platzhalter im Editor. */
.schoko-anmeldung__platzhalter {
	padding: var(--wp--preset--spacing--30);
	border: 1px dashed var(--wp--preset--color--line);
}

/* Karte des Dienstes neutralisieren: keine Fläche, kein Schatten, kein Rahmen. */
.schoko-anmeldung .RRRegStart,
.schoko-anmeldung .RRRegStart_Registrations,
.schoko-anmeldung .RRRegStart_Registrations > div {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.schoko-anmeldung .RRRegStart {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
}

.schoko-anmeldung .RRRegStart_Registrations > div + div {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* Gruppenüberschrift (h1 des Dienstes) wie eine h3 des Themes. */
.schoko-anmeldung .RRRegStart_Registrations h1 {
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--brand);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	hyphens: manual;
}

/*
 * Tabelle der Wettbewerbe: Zeilen und Zellen sind div-Elemente, die erste
 * Zeile ist der Kopf. Schmal waagerecht scrollbar im eigenen Container.
 */
.schoko-anmeldung .RRRegStart_divContestsV2 {
	overflow-x: auto;
}

.schoko-anmeldung .RRRegStart_Table {
	display: table;
	width: 100%;
	min-width: 34rem;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.schoko-anmeldung .RRRegStart_Table > div {
	display: table-row;
}

.schoko-anmeldung .RRRegStart_Table > div > div {
	display: table-cell;
	padding: 0.875rem 1.125rem 0.875rem 0;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	text-align: left;
	vertical-align: top;
}

.schoko-anmeldung .RRRegStart_Table > div:first-child > div {
	font-weight: 700;
	vertical-align: bottom;
}

.schoko-anmeldung .RRRegStart_Table > .RRRegStart_Closed > div {
	color: var(--wp--preset--color--text-muted);
}

/* Buttons wie der Button des Themes, 48 px hoch. */
.schoko-anmeldung .RRRegStart_Registrations button {
	min-height: 3rem;
	margin-block-start: var(--wp--preset--spacing--20);
	padding: 0.75rem 1.75rem;
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--muted);
	box-shadow: none;
	color: var(--wp--preset--color--text-muted);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.2;
	cursor: default;
}

.schoko-anmeldung .RRRegStart_Table button {
	margin-block-start: 0;
}

/*
 * Gesperrter Button (Anmeldung geschlossen): Der Dienst setzt dafür ein
 * eigenes Grau, das die allgemeine Regel oben übersteuert. Deshalb mit dem
 * Zustand und beiden Klassen der Hülle (höhere Spezifität, kein !important).
 */
.wp-block-schoko-core-anmeldung.schoko-anmeldung .RRRegStart_Registrations button:disabled,
.wp-block-schoko-core-anmeldung.schoko-anmeldung .RRRegStart_Registrations button[disabled] {
	background: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--text-muted);
}

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

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

.schoko-anmeldung .RRRegStart_Registrations a {
	color: var(--wp--preset--color--brand);
	text-decoration: underline;
}

.schoko-anmeldung .RRRegStart_Registrations a:hover {
	color: var(--wp--preset--color--brand-dark);
}

/*
 * Formulare von Mailchimp for WordPress (Block mailchimp-for-wp/form, ohne
 * Stylesheet des Plugins: Option mc4wp_form_stylesheets leer). Aufbau des
 * Formulars: je Feld <p><label>Text <input></label></p>, zuletzt
 * <p><input type="submit"></p>. Felder nebeneinander, solange Platz ist,
 * sonst untereinander; Felder und Button 48 px hoch wie die Buttons.
 */
.mc4wp-form-fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	gap: var(--wp--preset--spacing--20);
	align-items: end;
}

.mc4wp-form-fields p {
	margin: 0;
}

.mc4wp-form label {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

.mc4wp-form input[type="text"],
.mc4wp-form input[type="email"] {
	box-sizing: border-box;
	width: 100%;
	min-height: 3rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	line-height: 1.2;
}

.mc4wp-form input[type="text"]::placeholder,
.mc4wp-form input[type="email"]::placeholder {
	color: var(--wp--preset--color--text-muted);
	opacity: 1;
}

.mc4wp-form input[type="submit"] {
	box-sizing: border-box;
	width: 100%;
	min-height: 3rem;
	padding: 0.75rem 1.75rem;
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

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

.mc4wp-response:not(:empty) {
	margin-block-start: var(--wp--preset--spacing--20);
}

.mc4wp-response p {
	margin: 0;
	font-weight: 700;
}