/*
 * ASKÖ Designsystem: Vereinsschriften und Schriftregeln für die Website.
 * Quelle der Regeln: Designsystem.md im Ordner Verein/Brand-Marke.
 * Die Schriftfamilien selbst wählt der Customizer (Design > Anpassen > Typografie).
 * Schriftgrößen bleiben beim Theme.
 * Michelle ersetzt in Editor-Styles den kleingeschriebenen Namen des Body-Elements durch ":root".
 * Selektoren auf dieses Element gehören deshalb nicht in diese Datei.
 */

/* Jost: Überschriften und Bedienelemente. Variable Schrift, Gewichte 100 bis 900. */
@font-face {
	font-family: "Jost";
	src: url("fonts/jost.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Jost";
	src: url("fonts/jost-italic.woff2") format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

/* Literata: Fließtext. */
@font-face {
	font-family: "Literata";
	src: url("fonts/literata-regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Literata";
	src: url("fonts/literata-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Literata";
	src: url("fonts/literata-bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Literata";
	src: url("fonts/literata-bold-italic.woff2") format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

/*
 * Bedienelemente, Tabellen und Fußbereich in der Überschriftenschrift (Jost),
 * wie Tabellen, Kopf- und Fußzeilen im Designsystem.
 * Bedienelemente des Block-Editors (components-…) lässt die Regel unberührt.
 * :root und :is() geben allen Einträgen die Spezifität des stärksten (0,3,0). Auf der Website
 * ziehen sie damit mit Michelles .page-numbers:not(.current):not(.dots) gleich und gewinnen,
 * weil dieses Stylesheet nach global.css lädt; .wp-block-calendar table schlagen sie direkt.
 * Im Editor kommt .editor-styles-wrapper dazu (0,4,0), das schlägt
 * .editor-styles-wrapper [class].wp-block-button__link unabhängig von der Reihenfolge.
 */
:root :is(
	.main-navigation,
	.menu-toggle,
	.site-footer,
	table,
	.button,
	.page-numbers,
	.post-page-numbers,
	.wp-block-button__link,
	.wp-element-button,
	.wp-block-search .wp-block-search__button,
	[type="button"]:not([class*="components-"]),
	[type="reset"]:not([class*="components-"]),
	[type="submit"]:not([class*="components-"]),
	button:not([class*="components-"]),
	input:not([class*="components-"]),
	select:not([class*="components-"]),
	textarea:not([class*="components-"])
) {
	font-family: var(--typography_font_headings);
}

/*
 * Gewichte laut Designsystem: Titel und Überschrift 1 fett, Überschrift 2 halbfett.
 * Michelle setzt h1 bis h3 auf 300, im Editor mit .editor-styles-wrapper davor.
 * Das :not() hebt die Spezifität knapp über beide Regeln; Gewichtsklassen aus dem Editor behalten Vorrang.
 */
:is(h1, .h1):not([class*="-font-weight"]) {
	font-weight: 700;
}

:is(h2, .h2, h3, .h3):not([class*="-font-weight"]) {
	font-weight: 600;
}