/*
Theme Name:   Backyard Ultra
Theme URI:    https://backyardultra.de
Author:       meteoCORE
Author URI:   https://meteocore.com
Description:  Child-Theme von meteocore-wordpress-theme für backyardultra.de. Konzept: vision/04-Produkte/BackyardUltra/konzept.md
Template:     meteocore-wordpress-theme
Version:      0.1.0+46257cba
Requires at least: 7.0
Tested up to: 7.1
Requires PHP: 8.1
License:      UNLICENSED
Text Domain:  backyardultra
*/

/* Wortmarke im Logofeld des Kopfs (Filter meteocore_kopf_logo). */
.by-wortmarke {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--4-xl);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	color: var(--wp--preset--color--text-primary);
	white-space: nowrap;
}

/* Schmale Kopfzeile: dieselbe Schwelle wie beim Logo im Paket
   (.seitenkopf, unter 900 px 24 px hoch). */
@media (max-width: 899.98px) {
	.by-wortmarke {
		font-size: var(--wp--preset--font-size--xl);
	}
}

.seitenkopf__logo:has(.by-wortmarke) {
	text-decoration: none;
	aspect-ratio: auto;
	width: auto;
}

/* Hinweis „Selbst veranstalten“ auf der Startseite. */
.by-hinweis {
	padding: var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--radius-l);
	background: var(--wp--preset--color--surface);
}

/*
 * The Events Calendar bringt eigene Farben und Schriften als Variablen
 * mit (helles Standardschema). Hier auf die Werte des Pakets umgelegt,
 * damit der Kalender im hellen wie im dunklen Theme stimmt. Die
 * Plugin-Stylesheets liegen in der Ebene `tec` (functions.php), deshalb
 * gewinnt :root hier gegen ihr :root.
 */
:root {
	--tec-color-background: var(--wp--preset--color--abyss);
	--tec-color-background-events: transparent;
	--tec-color-background-secondary: var(--wp--preset--color--surface);
	--tec-color-background-secondary-hover: var(--wp--preset--color--surface-2);
	--tec-color-background-primary-multiday: var(--wp--preset--color--surface-2);
	--tec-color-text-primary: var(--wp--preset--color--text-primary);
	--tec-color-text-primary-light: var(--wp--preset--color--text-secondary);
	--tec-color-text-secondary: var(--wp--preset--color--text-secondary);
	--tec-color-text-disabled: var(--wp--preset--color--text-tertiary);
	--tec-color-text-events-title: var(--wp--preset--color--text-primary);
	--tec-color-text-event-title: var(--wp--preset--color--text-primary);
	--tec-color-text-event-date: var(--wp--preset--color--text-secondary);
	--tec-color-text-day-of-week-month: var(--wp--preset--color--text-tertiary);
	--tec-color-day-marker-month: var(--wp--preset--color--text-tertiary);
	--tec-color-day-marker-past-month: var(--wp--preset--color--text-tertiary);
	--tec-color-icon-primary: var(--wp--preset--color--text-secondary);
	--tec-color-icon-active: var(--wp--preset--color--brand-orange);
	--tec-color-icon-focus: var(--wp--preset--color--brand-orange);
	--tec-color-border-default: var(--wp--preset--color--border);
	--tec-color-border-secondary: var(--wp--preset--color--border);
	--tec-color-border-tertiary: var(--wp--preset--color--border);
	--tec-color-border-active: var(--wp--preset--color--brand-orange);
	--tec-color-accent-primary: var(--wp--preset--color--brand-orange);
	--tec-color-accent-primary-hover: var(--wp--preset--color--brand-orange);
	--tec-color-accent-primary-active: var(--wp--preset--color--brand-orange);
	--tec-color-link-primary: var(--wp--preset--color--text-primary);
	--tec-color-link-accent: var(--wp--preset--color--brand-orange);
	--tec-color-link-accent-hover: var(--wp--preset--color--brand-orange);
	--tec-color-button-primary: var(--wp--preset--color--brand-orange);
	--tec-font-family-sans-serif: var(--wp--preset--font-family--body);
}

/* Beiträge ohne Titelbild: Die Anrisskarte des Eltern-Themes hält sonst
   eine leere Bildspalte frei. */
.mc-teaser__bild:not(:has(img)) {
	display: none;
}

/* Titel im Kalender in der Auszeichnungsschrift, wie im übrigen Theme. */
.tribe-events .tribe-events-calendar-list__event-title,
.tribe-events .tribe-events-calendar-month__header-column-title,
.tribe-events .tribe-events-c-top-bar__datepicker-button,
.tribe-events-single .tribe-events-single-event-title,
.tribe-events .tribe-events-calendar-list__month-separator-text {
	font-family: var(--wp--preset--font-family--display);
}

/* Rennkarten in der Listenansicht (tribe/events/v2/list/event.php). */
.by-rennkarte {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mc-teaser .by-rennort {
	margin-top: var(--wp--preset--spacing--2);
}

/* Zwischentitel im Infoblock einer Rennseite („Details“, „Veranstaltungsort“).
   Ohne die Rücksetzung des Plugins (Ebene `tec`) greift sonst die h2
   des Themes. */
.tribe-events-single .tribe-events-single-section-title {
	font-size: var(--wp--preset--font-size--l);
}

/* „Kalender abonnieren“ (tribe/events/v2/components/subscribe-links/list.php):
   kleiner Knopf, darunter die Aufklappliste .dropdown aus dem Paket. Ein-
   und ausgeblendet wird sie vom Skript des Plugins über style="display";
   zu Beginn ist sie zu. */
.by-abo {
	display: flex;
	margin-top: var(--wp--preset--spacing--5);
}

.by-abo .tribe-events-c-subscribe-dropdown {
	position: relative;
}

/* Der Rahmen um den Knopf trägt im Plugin Fläche und Rahmen, aufgeklappt
   die Akzentfarbe über die ganze Breite; hier ist der Knopf selbst .btn. */
.by-abo .tribe-events-c-subscribe-dropdown__button,
.by-abo .tribe-events-c-subscribe-dropdown__button--active {
	display: inline-block;
	width: auto;
	padding: 0;
	border: 0;
	background: none;
}

.by-abo__liste {
	display: none;
	position: absolute;
	left: 0;
	top: calc(100% + 4px);
	z-index: 10;
	min-width: max-content;
}

.by-abo__liste ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

/* Die Aufklapper, deren Markup das Plugin selbst erzeugt (Datumswahl,
   Ansichtswahl), bekommen die Werte der Hülle .dropdown aus dem Paket. */
.tribe-events .datepicker,
.tribe-events .tribe-events-c-view-selector__content {
	background: var(--core-abyss);
	border: 1px solid var(--core-border-strong);
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-float);
}

/* Blättern unter der Rennliste (tribe/events/v2/list/nav.php). Abstände,
   Knopfgrößen und Unterstrich regelt das Eltern-Theme über
   .wp-block-query-pagination; hier nur die Reihe, die bei den News der
   Layout-Support des Blocks setzt. */
.by-blaettern {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

/* ===================================================================
   Rennseite (templates/single-event.html)
   =================================================================== */

.by-renndatum {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--wp--preset--spacing--2);
}

.by-renndatum__vorbei {
	font-size: var(--wp--preset--font-size--s);
	color: var(--wp--preset--color--text-tertiary);
}

.by-steckbrief {
	margin-block: var(--wp--preset--spacing--6);
}

.by-steckbrief__angaben {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	margin: 0;
}

.by-steckbrief__angabe dt {
	margin-bottom: var(--wp--preset--spacing--1);
}

.by-steckbrief__angabe dd {
	margin: 0;
}

.by-steckbrief__kategorien {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	margin-top: var(--wp--preset--spacing--5);
}

.by-steckbrief__kategorien .chip {
	text-decoration: none;
	background: var(--gradient-brand);
	color: var(--text-on-accent);
	border-color: transparent;
}

.by-steckbrief__website {
	margin: var(--wp--preset--spacing--5) 0 0;
}

.by-steckbrief__website .btn {
	text-decoration: none;
}

/* Gleiche Schwelle wie die Anrisskarten im Eltern-Theme. */
@media (max-width: 781px) {
	.by-steckbrief__angaben {
		grid-template-columns: 1fr;
	}
}

/* ===================================================================
   Strecke im Steckbrief (inc/strecke-grafik.php): rechts neben den
   Angaben, auf schmalen Bildschirmen darunter. Eine Angabe zum Rennen,
   nicht der Hauptinhalt; deshalb nicht in voller Lesebreite.
   =================================================================== */

.by-steckbrief--mit-strecke {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--6);
	align-items: start;
}

/* In der halben Breite stehen die Angaben untereinander. */
.by-steckbrief--mit-strecke .by-steckbrief__angaben {
	grid-template-columns: 1fr;
}

@media (max-width: 781px) {
	.by-steckbrief--mit-strecke {
		grid-template-columns: 1fr;
	}
}

.by-strecke__karte {
	display: block;
	width: 100%;
	max-height: 320px;
}

/* Strichstärken in Bildschirmpixeln, unabhängig von der Größe der Runde. */
.by-strecke__glanz,
.by-strecke__linie {
	fill: none;
	stroke: var(--brand-orange);
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.by-strecke__glanz {
	stroke-width: 8;
	stroke-opacity: 0.12;
}

.by-strecke__linie {
	stroke-width: 2.5;
}

.by-strecke__start {
	fill: var(--brand-orange);
}

.by-strecke__laeufer {
	fill: var(--text-primary);
}

.by-strecke__profil {
	margin: var(--wp--preset--spacing--4) 0 0;
}

/* Im Seitenverhältnis 5 : 1 und nicht auf eine feste Höhe gestreckt: sonst
   würden die laufenden Punkte im Profil zu Ellipsen. */
.by-strecke__profil svg {
	display: block;
	width: 100%;
	height: auto;
}

.by-strecke__flaeche {
	fill: var(--brand-blue);
	fill-opacity: 0.18;
}

.by-strecke__hoehenlinie {
	fill: none;
	stroke: var(--brand-blue);
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
}

.by-strecke__achse {
	display: flex;
	justify-content: space-between;
	margin-top: var(--wp--preset--spacing--2);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--text-tertiary);
}

/* Wer Bewegung reduziert hat, sieht die Strecke ohne Läuferinnen und Läufer. */
@media (prefers-reduced-motion: reduce) {
	.by-strecke__laeufer {
		display: none;
	}
}

/* Ausgaben eines Rennens (blocks/ausgaben). */
.by-ausgaben__liste {
	margin: 0;
	padding: 0;
}

.by-steckbrief__website {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
}

/* Veranstalter-Seite (blocks/veranstalter). */
.by-veranstalter__website {
	margin-top: 0;
}

/* ===================================================================
   Veranstalterbereich (Shortcode aus backyard-strecken-plugin)
   =================================================================== */

.by-bereich {
	margin-block: var(--wp--preset--spacing--5);
}

.by-bereich__feld {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--1);
	margin: 0 0 var(--wp--preset--spacing--4);
}

.by-bereich__feld small {
	color: var(--wp--preset--color--text-tertiary);
	font-size: var(--wp--preset--font-size--s);
}

/* „Neues Rennen anlegen“ nur, solange oben kein Rennen gewählt ist. */
.by-bereich__formular:has(#by-rennen option:checked:not([value="0"])) .by-bereich__rennen-neu {
	display: none;
}

/* Mit .by-bereich davor: Der Bereich steht im Inhalt (.lesestrecke), und
   dessen Regel für Aufzählungen (Paket: 22 px Einzug, Abstand je Eintrag)
   ist sonst spezifischer. */
.by-bereich .by-bereich__liste {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
	margin: 0 0 var(--wp--preset--spacing--5);
	padding: 0;
	list-style: none;
}

.by-bereich__eintrag,
.by-bereich .by-ortswahl__treffer li {
	margin: 0;
}

.by-bereich__eintrag {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--1);
}

.by-bereich__aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	margin-top: var(--wp--preset--spacing--2);
}

.by-bereich__meldung,
.by-bereich__fehler {
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--radius-m);
	background: var(--wp--preset--color--surface);
}

.by-bereich__fehler {
	border-color: var(--wp--preset--color--brand-orange);
	padding-left: var(--wp--preset--spacing--6);
}

/* Veranstaltungsort: Suche mit Trefferliste und Karte (assets/js/ortswahl.js im Plugin) */

.by-ortswahl__eingabe {
	position: relative;
}

.by-bereich .by-ortswahl__treffer {
	position: absolute;
	z-index: 5;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.by-ortswahl__treffer .dropdown__eintrag {
	cursor: pointer;
}

.by-ortswahl__karte {
	height: 280px;
	margin: 0 0 var(--wp--preset--spacing--4);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--radius-m);
	overflow: hidden;
}

/* Editor der Beschreibung im Veranstalterprofil (TinyMCE aus WordPress):
   gebaut wie .feld aus dem Paket, also kleine Rundung, starke Kante,
   Fläche surface, im Fokus (Klasse ist-fokussiert, gesetzt vom Editor)
   die Kante in brand-blue. Gewählte Knöpfe
   (fett, unterstrichen an der Schreibmarke) ebenfalls in brand-blue. */

.by-bereich .wp-editor-container {
	border: 0;
}

.by-bereich .wp-editor-wrap .mce-tinymce {
	border: 1px solid var(--core-border-strong);
	border-radius: var(--radius-s);
	overflow: hidden;
	box-shadow: none;
}

.by-bereich .wp-editor-wrap .mce-tinymce.ist-fokussiert {
	border-color: var(--brand-blue);
}

.by-bereich .wp-editor-wrap .mce-panel,
.by-bereich .wp-editor-wrap .mce-toolbar-grp,
.by-bereich .wp-editor-wrap .mce-statusbar {
	background: var(--core-surface);
	border-color: var(--core-border-strong);
}

.by-bereich .wp-editor-wrap .mce-toolbar .mce-btn-group .mce-btn,
.by-bereich .wp-editor-wrap .mce-toolbar .mce-btn-group .mce-btn:hover,
.by-bereich .wp-editor-wrap .mce-toolbar .mce-btn-group .mce-btn:focus,
.by-bereich .wp-editor-wrap .mce-toolbar .mce-btn-group .mce-btn.mce-active,
.by-bereich .wp-editor-wrap .mce-btn button {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}

.by-bereich .wp-editor-wrap .mce-ico {
	color: var(--text-secondary);
}

.by-bereich .wp-editor-wrap .mce-btn:hover .mce-ico {
	color: var(--text-primary);
}

.by-bereich .wp-editor-wrap .mce-btn.mce-active .mce-ico {
	color: var(--brand-blue);
}

/* Startseite: Dachzeile über den beiden Hinweiskarten, mit Luft zur Karte davor */
.by-kicker {
	margin-block: var(--wp--preset--spacing--6) var(--wp--preset--spacing--2);
}