/*
Theme Name: Blockstudio54
Theme URI: https://bureau54.ch
Author: Bureau54 AG
Author URI: https://bureau54.ch
Description: Schlankes Block Theme als Basis fuer Blockstudio Projekte. Kein Ballast, alle Design Tokens in der theme.json.
Version: 1.1.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blockstudio54
Tags: block-theme, full-site-editing, one-column, custom-colors
*/

/*
 * Styling laeuft primaer ueber theme.json und ueber die style.scss der
 * einzelnen Blockstudio Blocks. Hier nur globales, was theme.json nicht kann,
 * plus das Sektionssystem, das von mehreren Blocks gemeinsam genutzt wird.
 *
 * Diese Datei ist auch als Editor-Stylesheet eingebunden (add_editor_style in
 * functions.php), das Sektionssystem wirkt also im Editor wie im Frontend.
 */

html {
	scroll-behavior: smooth;
}

/*
 * Bewegungsreduktion, global. Ohne diesen Block bleibt scroll-behavior: smooth
 * auch dann aktiv, wenn das Betriebssystem Bewegung reduziert. Vier der
 * sechzehn Sektionsblocks brachten die Abfrage selbst mit, zwoelf nicht.
 * Darum gehoert sie hierher und nicht in die einzelnen style.scss.
 */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/*
 * Fokus-Grundregel. Einzelne Komponenten setzen eigene Ringe, zwoelf der
 * sechzehn Sektionsblocks tun das nicht und hatten damit gar keinen. Diese
 * Regel greift fuer alles Uebrige. Auf Marineblau-Sektionen wird die
 * Ringfarbe weiter unten invertiert, sonst verschwindet der Ring im Grund.
 */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}

/* ==========================================================================
   Sektionssystem

   Wird von allen Sektionsblocks genutzt. Grund und Textfarbe werden als
   benanntes Paar gesetzt, nie einzeln, damit der Kontrast nicht unterschritten
   werden kann. Die Blocks bieten deshalb bewusst keine Farb- und
   Abstands-Supports an.
   ========================================================================== */

.b54-section {
	/* Neutralisiert den blockGap zwischen aufeinanderfolgenden Sektionen.
	   Der Abstand kommt aus dem Padding, nicht aus Margins, sonst addieren
	   sich beide. Die theme.json-Regeln nutzen :where() und haben damit
	   Spezifitaet 0, ein normaler Selektor genuegt. */
	margin-block: 0;
}

/* Erscheinungsbilder. Kontrastwerte im Kommentar, gerechnet gegen den Grund. */

.b54-section--weiss {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast); /* 15.8:1 */
}

.b54-section--hell {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast); /* 14.6:1 */
}

.b54-section--tuerkis {
	background-color: var(--wp--preset--color--flaeche-tuerkis);
	color: var(--wp--preset--color--contrast); /* 7.9:1 */
}

.b54-section--hellgruen {
	background-color: var(--wp--preset--color--flaeche-hellgruen);
	color: var(--wp--preset--color--contrast); /* 9.9:1 */
}

.b54-section--gelbgruen {
	background-color: var(--wp--preset--color--flaeche-gelbgruen);
	color: var(--wp--preset--color--contrast); /* 13.0:1 */
}

.b54-section--marineblau {
	background-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base); /* 8.7:1 */
}

/*
 * Auf den vier Flaechenfarben bleibt der Text dunkel, Links und Buttons
 * behalten darum das Marineblau. Auf Marineblau selbst muessen sie invertiert
 * werden, sonst verschwinden sie im Grund. Genau der Fall, den zwei getrennte
 * Farbwaehler nicht abfangen koennen.
 */
.b54-section--marineblau a:not(.wp-element-button) {
	color: var(--wp--preset--color--base);
}

.b54-section--marineblau a:not(.wp-element-button):hover {
	color: var(--wp--preset--color--flaeche-tuerkis);
}

.b54-section--marineblau .wp-element-button {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--brand);
}

.b54-section--marineblau .wp-element-button:hover {
	background-color: var(--wp--preset--color--flaeche-tuerkis);
	color: var(--wp--preset--color--contrast);
}

.b54-section--marineblau :focus-visible {
	outline-color: var(--wp--preset--color--base);
}

/*
 * Gedaempfter Text: die Blocks lesen --b54-muted mit Fallback auf das
 * Preset. Auf farbigem Grund waere die feste Preset-Farbe unlesbar.
 */
.b54-section--weiss,
.b54-section--hell {
	--b54-muted: var(--wp--preset--color--muted);
}

.b54-section--tuerkis,
.b54-section--hellgruen,
.b54-section--gelbgruen {
	--b54-muted: color-mix(in srgb, var(--wp--preset--color--contrast) 76%, transparent);
}

.b54-section--marineblau {
	--b54-muted: color-mix(in srgb, var(--wp--preset--color--base) 84%, transparent);
}

/* Breite. Die Blocks waehlen die Variante, nicht die Redaktion. */

/*
 * Aussenbreite deckungsgleich mit alignwide von WordPress.
 *
 * alignwide setzt max-width auf wide-size ohne Innenabstand. Unsere
 * Sektionen laufen randlos, brauchen den Innenabstand also selbst. Damit
 * der Inhaltskasten trotzdem exakt wide-size misst, kommt der Abstand oben
 * drauf statt abgezogen zu werden. Sonst sitzt jede Sektion um den
 * Innenabstand weiter rechts als Header und Footer.
 *
 * Eine Breite fuer alle Sektionen. Leseweiten regeln die Blocks intern,
 * linksbuendig, nicht ueber einen schmaleren zentrierten Container.
 */
.b54-section__inner {
	max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--wp--preset--spacing--40));
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
}

/* Abstaende. Vier Stufen, keine freien Werte. */

.b54-section--top-keiner { padding-block-start: 0; }
.b54-section--top-klein { padding-block-start: var(--wp--preset--spacing--50); }
.b54-section--top-normal { padding-block-start: var(--wp--preset--spacing--60); }
.b54-section--top-gross { padding-block-start: var(--wp--preset--spacing--70); }

.b54-section--bottom-keiner { padding-block-end: 0; }
.b54-section--bottom-klein { padding-block-end: var(--wp--preset--spacing--50); }
.b54-section--bottom-normal { padding-block-end: var(--wp--preset--spacing--60); }
.b54-section--bottom-gross { padding-block-end: var(--wp--preset--spacing--70); }

/* ==========================================================================
   Auffangnetz

   Fliesstext-Bloecke muessen erlaubt sein, damit InnerBlocks in b54/text
   funktioniert. Damit koennen sie auch direkt in den Seiteninhalt gesetzt
   werden, ausserhalb jeder Sektion. Das soll nicht kaputt aussehen.
   ========================================================================== */

.entry-content > p,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > ul,
.entry-content > ol {
	max-width: var(--wp--custom--measure);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
}

/* Innerhalb einer Sektion regelt der Block die Breite, nicht diese Regel. */
:is(.b54-text__body, .b54-form-text__text) > :first-child { margin-top: 0; }
:is(.b54-text__body, .b54-form-text__text) > :last-child { margin-bottom: 0; }
:is(.b54-text__body, .b54-form-text__text) h2,
:is(.b54-text__body, .b54-form-text__text) h3,
:is(.b54-text__body, .b54-form-text__text) h4 {
	margin-top: var(--wp--preset--spacing--50);
}

/* ==========================================================================
   Kein Aussenabstand zwischen Header, Inhalt und Footer

   blockGap aus der theme.json legt ueber :root :where(.is-layout-flow) > *
   einen Abstand auf alle obersten Elemente. Zwischen main und footer wird
   daraus ein sichtbarer Streifen in der Hintergrundfarbe des Body.

   Unsere Sektionen bringen ihre Abstaende als Padding mit, damit die
   Hintergrundfarbe mitlaeuft. Ein zusaetzlicher Aussenabstand ist deshalb
   nicht nur ueberfluessig, sondern falsch.

   body davor, damit die Regel die :where()-Regel sicher schlaegt, ohne
   dass es !important braucht.
   ========================================================================== */

body .wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ==========================================================================
   Inhaltsbloecke in Textspalten

   Gilt fuer beide Textspalten: die der Text-Sektion und die des Blocks
   Formular mit Text. Eine Begrenzung auf nur einen Container laeuft im
   jeweils anderen Block still ins Leere.

   Tabellen auf schmalen Bildschirmen

   Eine mehrspaltige Tabelle laeuft auf 375px aus dem Bild. Statt sie zu
   quetschen, bekommt sie einen horizontalen Scrollbereich. tabindex und
   role setzt WordPress nicht, darum ist der Bereich per Tastatur
   erreichbar gemacht.
   ========================================================================== */

:is(.b54-text__body, .b54-form-text__text) .wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

:is(.b54-text__body, .b54-form-text__text) .wp-block-table:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 3px;
}

:is(.b54-text__body, .b54-form-text__text) .wp-block-table table {
	min-width: 32rem;
	border-collapse: collapse;
}

:is(.b54-text__body, .b54-form-text__text) .wp-block-table :is(th, td) {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--30) 0;
	text-align: left;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

:is(.b54-text__body, .b54-form-text__text) .wp-block-table th {
	font-weight: 600;
}

/* Bild und Zitat bleiben in der Sektionsbreite. */
:is(.b54-text__body, .b54-form-text__text) .wp-block-image img {
	height: auto;
	max-width: 100%;
	border-radius: var(--wp--custom--radius--medium);
}

:is(.b54-text__body, .b54-form-text__text) .wp-block-quote {
	margin: var(--wp--preset--spacing--50) 0;
	padding-left: var(--wp--preset--spacing--40);
	border-left: 3px solid var(--wp--preset--color--brand);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.45;
}

:is(.b54-text__body, .b54-form-text__text) .wp-block-quote cite {
	display: block;
	margin-top: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	color: var(--b54-muted, var(--wp--preset--color--muted));
}

/* ==========================================================================
   Buttons innerhalb der Text-Sektion

   Aussehen kommt aus theme.json elements.button. Hier nur Abstand und die
   Outline-Variante, damit ein sekundaeres Ziel sich vom primaeren
   unterscheidet, ohne eine zweite Farbe einzufuehren.
   ========================================================================== */

:is(.b54-text__body, .b54-form-text__text) .wp-block-buttons {
	margin-block: var(--wp--preset--spacing--50);
	gap: var(--wp--preset--spacing--30);
}

:is(.b54-text__body, .b54-form-text__text) .wp-block-button__link {
	text-decoration: none;
}

/* Sekundaer: gleiche Farbe, nur als Kontur. Kein zweiter Akzent. */
:is(.b54-text__body, .b54-form-text__text) .is-style-outline > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--brand);
	box-shadow: none;
	border: 2px solid currentcolor;
}

:is(.b54-text__body, .b54-form-text__text) .is-style-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
}

/* Auf Marineblau wird auch die Kontur invertiert. */
.b54-section--marineblau .is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--base);
}

.b54-section--marineblau .is-style-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--brand);
}

/* ==========================================================================
   Formulare

   Gilt fuer jedes Formular innerhalb einer Sektion, unabhaengig davon, in
   welchem Block es steckt. Die vorherige Fassung war auf :is(.b54-text__body, .b54-form-text__text)
   begrenzt und griff im Block Formular mit Text darum nicht.

   Klassennamen stammen aus dem Form Builder von ASE Pro, ausgelesen aus
   dem gerenderten Markup, nicht geraten.
   ========================================================================== */


/* Der Eigentitel des Formulars entfaellt: die Sektion hat einen Kopf. */
.b54-section .fb-form-title {
	display: none;
}

.b54-section .fb-form-field {
	margin-bottom: var(--wp--preset--spacing--40);
}

.b54-section .fb-field-label {
	display: block;
	margin-bottom: 0.375rem;
	font-weight: 600;
	line-height: 1.35;
}

/* Pflichtstern in der Akzentfarbe. Rot ist im System nicht definiert und
   waere eine zweite Farbe. */
.b54-section .fb-field-required {
	color: var(--wp--preset--color--brand);
	margin-left: 0.15em;
}

.b54-section .fb-field-desc {
	margin-top: 0.375rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	color: var(--b54-muted, var(--wp--preset--color--muted));
}

/* Eingabefelder */
.b54-section .fb-form-field :is(input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number], input[type=date], input[type=time], input[type=password], select, textarea) {
	width: 100%;
	padding: 0.6875rem 0.75rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--small);
	box-shadow: none;
	appearance: none;
}

.b54-section .fb-form-field textarea {
	min-height: 10rem;
	resize: vertical;
}

/* Die Auswahlliste bekommt vom Plugin fb-auto-width, das macht sie winzig. */
.b54-section .fb-form-field.fb-auto-width select {
	width: 100%;
	max-width: 22rem;
}

.b54-section .fb-form-field :is(input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--brand);
}

/* Ankreuzfelder und Auswahlknoepfe behalten ihre Groesse. */
.b54-section .fb-form-field :is(input[type=checkbox], input[type=radio]) {
	width: auto;
	margin-right: 0.5rem;
	accent-color: var(--wp--preset--color--brand);
}

/* Absendeknopf, gleiche Anmutung wie wp-element-button. */
.b54-section .fb-submit-wrap {
	margin-top: var(--wp--preset--spacing--50);
}

.b54-section .fb-submit-button {
	padding: 0.8125rem 1.375rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--brand);
	border: 0;
	border-radius: var(--wp--custom--radius--small);
	cursor: pointer;
}

.b54-section .fb-submit-button:hover {
	background-color: var(--wp--preset--color--brand-dark);
}

.b54-section .fb-submit-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 3px;
}

/* Auf Marineblau wird der Knopf invertiert, wie alle Bedienelemente. */
.b54-section--marineblau .fb-submit-button {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--brand);
}

.b54-section--marineblau .fb-submit-button:hover {
	background-color: var(--wp--preset--color--flaeche-tuerkis);
	color: var(--wp--preset--color--contrast);
}

.b54-section .altcha-widget-wrap {
	max-width: 22rem;
}

/* Bestaetigung und Fehlermeldungen des Formulars. */
.b54-section :is(.fb-message, .fb-success, .fb-error, .fb-form-error) {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-left: 3px solid var(--wp--preset--color--brand);
	background-color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--small);
}

/* ==========================================================================
   Zustimmungsbanner Statistik

   Markup aus inc/statistik.php, ausgegeben an wp_body_open. Es steht damit am
   Anfang der Tab-Reihenfolge, optisch aber unten, darum position: fixed.

   Keine Schatten und kein Einblenden: Flaechenwechsel plus Haarlinie
   genuegen, und der Bewegungs-Dial steht auf 0.15.

   Beide Knoepfe sind absichtlich identisch gestaltet. Ein Ablehnen, das
   unscheinbarer ist als das Annehmen, waere ein Dark Pattern.
   ========================================================================== */

.b54-statistik-banner {
	position: fixed;
	inset-block-end: 0;
	inset-inline: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--surface);
	border-block-start: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast);
}

.b54-statistik-banner[hidden] {
	display: none;
}

.b54-statistik-banner__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	max-width: 1200px;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--40);
}

.b54-statistik-banner__text {
	flex: 1 1 26rem;
}

.b54-statistik-banner__text p {
	margin: 0;
	max-width: 70ch;
	font-size: var(--wp--preset--font-size--small);
}

.b54-statistik-banner__knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
}

/*
 * Konturvariante wie is-style-outline im Fliesstext. Gleiche Farbe, gleiche
 * Groesse, gleiche Gewichtung fuer beide Entscheide. 44px Mindesthoehe liegt
 * deutlich ueber den 24px, die WCAG 2.2 verlangt.
 */
.b54-statistik-knopf {
	min-height: 44px;
	padding: 0.6em 1.4em;
	border: 1px solid var(--wp--preset--color--brand);
	border-radius: 4px;
	background-color: transparent;
	color: var(--wp--preset--color--brand);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
}

.b54-statistik-knopf:hover {
	background-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
}

/* Schmale Anzeigen und starker Zoom: stapeln statt quetschen. */
@media (max-width: 600px) {
	.b54-statistik-banner__inner {
		padding: var(--wp--preset--spacing--30);
	}

	.b54-statistik-banner__knoepfe {
		width: 100%;
	}

	.b54-statistik-knopf {
		flex: 1 1 auto;
	}
}

/*
 * Bei sehr flachen Fenstern, etwa bei 400 Prozent Zoom, wuerde ein fixierter
 * Banner zu viel Inhalt verdecken. Dann scrollt er mit.
 */
@media (max-height: 26rem) {
	.b54-statistik-banner {
		position: static;
	}
}