/*
Theme Name: KBC 1913
Theme URI: https://kohlscheiderbc.de
Author: Kohlscheider BC 1913 e.V.
Description: Eigenes Block-Theme fuer den Kohlscheider BC 1913 e.V. Farben aus dem Vereinslogo (Gelb #FEF900, Schwarz #131210), Schriften lokal eingebunden (keine externen Aufrufe).
Version: 0.1.0
Requires at least: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kbc
Tags: block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, translation-ready, wide-blocks
*/

/* ------------------------------------------------------------------
   Nur was theme.json nicht abdeckt: Zustaende, Sticky-Header, Karten.
   ------------------------------------------------------------------ */

:root {
	--kbc-header-hoehe: 4.75rem;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--kbc-header-hoehe) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Sichtbarer Fokus – Gelb allein reicht auf Weiss nicht, daher Doppelring. */
:where(a, button, input, select, textarea, .wp-block-button__link, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--schwarz);
	outline-offset: 2px;
	border-radius: 3px;
}

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

.kbc-header {
	z-index: 100;
	border-bottom: 1px solid var(--wp--preset--color--linie);
	backdrop-filter: saturate(150%) blur(8px);
	background-color: rgba(255, 255, 255, 0.88);
	transition: box-shadow var(--wp--custom--transition);
}

.kbc-header .wp-block-site-logo img {
	border-radius: 0;
	transition: transform var(--wp--custom--transition);
}

.kbc-header .wp-block-site-logo a:hover img { transform: scale(1.06); }

/* Navigation: Unterstrich in Vereinsgelb statt flaechigem Gelb. */
.kbc-header .wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.35rem;
	text-decoration: none;
}

.kbc-header .wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	border-radius: 2px;
	background: var(--wp--preset--color--gelb);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--wp--custom--transition);
}

.kbc-header .wp-block-navigation .wp-block-navigation-item__content:hover::after,
.kbc-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* Mobiles Overlay-Menue in Schwarz mit gelber Schrift.

   Zwei Fallen stecken hier drin:
   1. Solange das Menue offen ist, darf der Header keinen backdrop-filter
      haben. Ein Element mit Filter wird zum Bezugsrahmen fuer
      position:fixed – das Overlay waere sonst nur so gross wie der Header.
   2. Core setzt Padding und Ausrichtung des Overlays mit der Kombination
      .is-menu-open:not(.disable-default-overlay) und ueber die Variablen
      --navigation-layout-*. Wer weniger spezifisch schreibt, verliert.
      Ausserdem gilt hier content-box: eine eigene Breite zusaetzlich zum
      Padding macht das Overlay breiter als den Bildschirm.
   ------------------------------------------------------------------ */
.kbc-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
	backdrop-filter: none;
	background-color: transparent;
	border-bottom-color: transparent;
}

.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	/* Ausrichtung des Overlays: untereinander und linksbuendig, auch wenn
	   die Navigation im Kopfbereich rechtsbuendig steht. */
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-align: flex-start;
	--navigation-layout-justify: flex-start;
	--navigation-layout-direction: column;
	--navigation-layout-wrap: nowrap;

	box-sizing: border-box;
	inset: 0;
	background-color: var(--wp--preset--color--schwarz) !important;
	color: var(--wp--preset--color--weiss) !important;
	padding: 1.25rem clamp(1.25rem, 5vw, 3rem) 3rem;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Platz fuer den Schliessen-Knopf, der absolut oben rechts sitzt. */
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content {
	width: 100%;
	padding-top: 4rem;
}

.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-page-list {
	width: 100%;
	gap: 0.25rem;
}

.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation-item {
	width: 100%;
}

/* Grosse Tippflaechen; die Schrift waechst mit, bleibt aber im Rahmen. */
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	font-size: clamp(1.5rem, 6vw, 2.125rem);
	line-height: 1.2;
	padding-block: 0.5rem;
	overflow-wrap: break-word;
}

/* Der Unterstrich bleibt ein kurzer Akzent – ueber die volle Zeilenbreite
   saehe er wie eine Trennlinie aus. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	background: var(--wp--preset--color--gelb);
	right: auto;
	width: 2.5rem;
}

/* Menue-Knopf und Schliessen-Knopf gross genug zum Treffen. */
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
	padding: 0.25rem;
}

.wp-block-navigation__responsive-container-close svg,
.wp-block-navigation__responsive-container-open svg {
	width: 28px;
	height: 28px;
}

/* --- Hero -------------------------------------------------------- */

.kbc-hero { min-height: min(78vh, 46rem); }

.kbc-hero .wp-block-cover__inner-container { max-width: 62rem; }

.kbc-hero h1 {
	color: var(--wp--preset--color--weiss);
	text-wrap: balance;
}

/* Gelber Balken als Akzent unter der Hero-Ueberschrift. */
.kbc-akzent-linie::before {
	content: "";
	display: block;
	width: 4.5rem;
	height: 6px;
	border-radius: 3px;
	background: var(--wp--preset--color--gelb);
	margin-bottom: 1.25rem;
}

/* --- Karten ------------------------------------------------------ */

.kbc-karte {
	border-radius: var(--wp--custom--radius--gross);
	overflow: hidden;
	background: var(--wp--preset--color--weiss);
	box-shadow: var(--wp--preset--shadow--karte);
	transition: transform var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}

.kbc-karte:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--hoch);
}

.kbc-karte .wp-block-image img { border-radius: 0; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* --- Mannschaften und Personen ---------------------------------- */

/* Jede Mannschaft ist eine Gruppe `.kbc-team`: Kopf (Foto | Name,
   Jahrgang/Liga) und Inhalt (Trainingszeiten, Trainerteam). Das Aufklappen
   uebernimmt assets/js/mannschaften.js – im Editor und ohne JavaScript ist
   der Inhalt immer sichtbar. */
.kbc-hinweis {
	color: var(--wp--preset--color--grau);
	font-size: var(--wp--preset--font-size--klein);
}

/* Verweis-Box oben auf einer Seite (z. B. Jugendkonzept auf der
   Junioren-Seite): Text links, Button rechts, auf dem Handy untereinander. */
.kbc-verweis {
	background: var(--wp--preset--color--sand);
	border-left: 4px solid var(--wp--preset--color--gelb);
	border-radius: var(--wp--custom--radius--klein);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	gap: var(--wp--preset--spacing--30);
}
.kbc-verweis > * { margin: 0; }

.kbc-team {
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: var(--wp--custom--radius--gross);
	background: var(--wp--preset--color--weiss);
	overflow: hidden;
	transition: box-shadow var(--wp--custom--transition);
}
.wp-block-post-content > .kbc-team + .kbc-team { margin-block-start: var(--wp--preset--spacing--30); }
.kbc-team.ist-bereit:hover,
.kbc-team.ist-offen { box-shadow: var(--wp--preset--shadow--karte); }

/* Zu: Foto | Name | Pfeil nebeneinander. Offen: Foto ueber die ganze
   Breite, Name und Pfeil darunter. Der Pfeil wird per JS als dritte
   Spalte eingehaengt, damit er in beiden Zustaenden neben dem Namen steht. */
.kbc-team__kopf {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
	align-items: center;
	column-gap: var(--wp--preset--spacing--40);
}
.kbc-team__kopf > *,
.kbc-team__titel > * { margin: 0; }

.kbc-team.ist-offen .kbc-team__kopf { grid-template-columns: minmax(0, 1fr) auto; }
.kbc-team.ist-offen .kbc-team__foto { grid-column: 1 / -1; }
.kbc-team.ist-offen .kbc-team__titel {
	padding: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.kbc-team__foto img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 0;
}

.kbc-team__titel h2 { font-size: var(--wp--preset--font-size--gross); }
.kbc-team__titel > .kbc-team__meta {
	margin-top: 0.35rem;
	color: var(--wp--preset--color--grau);
	font-weight: 600;
}

/* Die Ueberschrift wird per JS zum Knopf; sein ::after spannt die
   Klickflaeche ueber den ganzen Kopf, damit auch das Foto aufklappt. */
.kbc-team__schalter {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-align: left;
	cursor: pointer;
}
.kbc-team__schalter::after { content: ""; position: absolute; inset: 0; }
.kbc-team__schalter:focus-visible { outline: none; }
.kbc-team__kopf:has(.kbc-team__schalter:focus-visible) {
	outline: 3px solid var(--wp--preset--color--schwarz);
	outline-offset: -3px;
	border-radius: var(--wp--custom--radius--gross);
}

.kbc-team__pfeil {
	position: relative;
	width: 2.25rem;
	height: 2.25rem;
	margin-right: var(--wp--preset--spacing--40);
	pointer-events: none; /* Klicks gehen an den Knopf darunter */
	border-radius: 50%;
	background: var(--wp--preset--color--gelb);
	transition: transform var(--wp--custom--transition);
}
.kbc-team__pfeil::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0.55rem;
	height: 0.55rem;
	border: solid var(--wp--preset--color--schwarz);
	border-width: 0 2.5px 2.5px 0;
	transform: translate(-50%, -70%) rotate(45deg);
}
.kbc-team.ist-offen .kbc-team__pfeil { transform: rotate(180deg); }

/* Uebergang beim Auf-/Zuklappen (Namen setzt mannschaften.js). */
::view-transition-group(kbc-team-teil-0),
::view-transition-group(kbc-team-teil-1) {
	animation-duration: 320ms;
	animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
}

.kbc-team__inhalt {
	border-top: 1px solid var(--wp--preset--color--linie);
	padding: var(--wp--preset--spacing--40);
}
.kbc-team__inhalt[hidden] { display: none; }
.kbc-team__inhalt > .kbc-team__zwischentitel + * { margin-block-start: var(--wp--preset--spacing--30); }

.kbc-team__zwischentitel {
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grau);
}

.kbc-team__zeiten { list-style: none; padding-left: 0; }
.kbc-team__zeiten li + li { margin-top: 0.25rem; }
.kbc-team__zeiten strong { display: inline-block; min-width: 7.5rem; }

/* Personenkarte: rundes Portrait, Name, Rolle, Kontakt. Wird auf den
   Mannschaftsseiten und beim Vorstand verwendet. */
.kbc-person { text-align: center; }
.kbc-person > * { margin: 0; }
.kbc-person > .kbc-person__foto { max-width: 8rem; margin: 0 auto 0.75rem; }
.kbc-person__foto img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--wp--preset--color--linie);
}
.kbc-person__name {
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 700;
	line-height: 1.25;
}
.kbc-person > .kbc-person__rolle {
	margin-top: 0.15rem;
	color: var(--wp--preset--color--grau);
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.35;
}
.kbc-person > .kbc-person__kontakt {
	margin-top: 0.5rem;
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.6;
	overflow-wrap: anywhere; /* lange E-Mail-Adressen */
}

/* Vorstand: zwei offene Abschnitte, Karten auf Sand. */
.wp-block-post-content > .kbc-vorstand + .kbc-vorstand { margin-block-start: var(--wp--preset--spacing--60); }
.kbc-vorstand .kbc-person {
	background: var(--wp--preset--color--sand);
	border-radius: var(--wp--custom--radius--gross);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}

@media (max-width: 40rem) {
	.kbc-team__kopf {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto;
		column-gap: var(--wp--preset--spacing--30);
	}
	.kbc-team.ist-offen .kbc-team__titel { padding-left: var(--wp--preset--spacing--30); }
	.kbc-team__titel h2 { font-size: var(--wp--preset--font-size--mittel); }
	.kbc-team__titel > .kbc-team__meta { font-size: var(--wp--preset--font-size--klein); }
	.kbc-team__pfeil { width: 1.9rem; height: 1.9rem; margin-right: 0.75rem; }
	.kbc-team__inhalt { padding: var(--wp--preset--spacing--30); }
	.kbc-team__zeiten strong { min-width: 6.5rem; }
}

/* --- Fussbereich ------------------------------------------------- */

.kbc-footer a { color: inherit; text-decoration-color: var(--wp--preset--color--gelb); text-underline-offset: 4px; }
.kbc-footer a:hover { color: var(--wp--preset--color--gelb); }
.kbc-footer :is(h2, h3, h4, h5, h6) { color: var(--wp--preset--color--weiss); }

/* --- Inhalte aus dem alten Theme --------------------------------- */

/* Tabellen (TablePress und Core) lesbar halten. */
.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table :is(th, td) { border: 1px solid var(--wp--preset--color--linie); padding: 0.6rem 0.8rem; vertical-align: top; }
.wp-block-table :is(thead th, table:not(:has(thead)) tbody tr:first-child td) {
	background: var(--wp--preset--color--sand);
	font-family: var(--wp--preset--font-family--archivo);
}

/* Die Mannschaftstabellen haben 5 bis 7 Spalten und passen nicht in die
   Inhaltsspalte. Sie duerfen daher bis zur breiten Breite wachsen - aber nur
   so weit, wie sie wirklich brauchen (`fit-content`), damit kurze Tabellen
   wie im Impressum schmal bleiben. Der Fliesstext bleibt in der schmaleren
   Inhaltsspalte. Dafuer steht `align: wide` am post-content in den Vorlagen.
   Was dann immer noch nicht passt (Handy), scrollt innerhalb der Tabelle. */
.wp-block-table {
	width: fit-content;
	max-width: min(100%, var(--wp--style--global--wide-size));
	overflow-x: auto;
}
.wp-block-post-content > .wp-block-table {
	min-width: min(100%, var(--wp--style--global--content-size));
}

/* Auf schmalen Schirmen enger setzen, damit mehr Spalten hineinpassen. */
@media (max-width: 48rem) {
	.wp-block-table { font-size: 0.9375rem; }
	.wp-block-table :is(th, td) { padding: 0.45rem 0.55rem; }
}

/* fussball.de-Widget: Das Plugin setzt die Breite fest auf 900px, das ist
   breiter als die Inhaltsspalte (54rem) und laeuft auf dem Handy heraus.
   Deshalb hier auf die Spaltenbreite ziehen. Die Seite *im* iframe kommt von
   fussball.de und setzt selbst `body { min-width: 550px }` - schmaler geht
   nicht, darum darunter seitlich scrollen (wie bei den Tabellen). */
.include-fussball-de-widgets { overflow-x: auto; }
.include-fussball-de-widgets iframe {
	width: 100%;
	min-width: 550px;
}

/* PDF-Viewer duerfen ebenfalls nicht ueberlaufen. */
.pdfemb-viewer { max-width: 100%; }

/* Algori-PDF-Viewer: Rahmen genau so gross wie eine PDF-Seite (A4 hoch),
   pdf.js zeigt sie per #zoom=page-fit ganz (Filter in functions.php).
   Breite = Spalte, Hoehe folgt dem Seitenformat - aber nie hoeher als der
   Bildschirm unter dem Sticky-Header; dann wird der Rahmen schmaler.
   Zugaben von pdf.js: Werkzeugleiste 32px + 5px oben/unten, 40px seitlich. */
.wp-block-algori-pdf-viewer-block-algori-pdf-viewer {
	container-type: inline-size;
}
.wp-block-algori-pdf-viewer-block-algori-pdf-viewer iframe {
	--pdf-seite: 1.4142;
	--pdf-zugabe-x: 40px;
	--pdf-zugabe-y: 37px;
	--pdf-max-hoehe: calc(100svh - var(--kbc-header-hoehe) - 2rem);
	display: block;
	box-sizing: border-box;
	width: min(100cqi, (var(--pdf-max-hoehe) - var(--pdf-zugabe-y)) / var(--pdf-seite) + var(--pdf-zugabe-x));
	height: min((100cqi - var(--pdf-zugabe-x)) * var(--pdf-seite) + var(--pdf-zugabe-y), var(--pdf-max-hoehe));
	margin-inline: auto;
	border: 0;
}

/* Altlasten aus der Core-Standardpalette (in Seiteninhalten verwendet),
   damit nach dem Themewechsel nichts unformatiert wirkt. */
.has-white-background-color { background-color: var(--wp--preset--color--weiss) !important; }
.has-black-color { color: var(--wp--preset--color--schwarz) !important; }
.has-vivid-cyan-blue-color { color: var(--wp--preset--color--schwarz) !important; }