/**
 * Theme – Global
 *
 * @package spnkt
 */

/* =========================================================================
   Breakpoint-Referenz (Mobile-First, min-width)
   =========================================================================
   CSS Custom Properties können nicht in @media-Queries verwendet werden.
   Diese Kommentare dienen als verbindliche Referenz – Werte nie ändern
   ohne alle Media Queries in allen CSS-Dateien nachzuführen.

   --spnkt-bp-sm:  600px   Kleine Tablets, grosse Smartphones (landscape)
   --spnkt-bp-md:  782px   WordPress Admin-Bar-Breakpoint, Tablets
   --spnkt-bp-lg:  1024px  Grosse Tablets, kleine Desktops
   --spnkt-bp-xl:  1280px  Desktop
   --spnkt-bp-2xl: 1520px  Wide (entspricht theme.json contentSize/wideSize)

   Verwendung:
   @media (min-width: 600px)  { ... }   sm
   @media (min-width: 782px)  { ... }   md
   @media (min-width: 1024px) { ... }   lg
   @media (min-width: 1280px) { ... }   xl
   @media (min-width: 1520px) { ... }   2xl
   ========================================================================= */


/* =========================================================================
   Screen-Reader-Only (WCAG)
   ========================================================================= */

.spnkt-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.spnkt-sr-only-focusable:focus,
.spnkt-sr-only-focusable:active {
	position: static;
	width: auto;
	height: auto;
	padding: inherit;
	margin: inherit;
	overflow: visible;
	clip: auto;
	white-space: inherit;
}

/* =========================================================================
   Seitenlayout (Sticky Footer)
   ========================================================================= */

/*
 * Sticky Footer – Seite füllt immer die volle Viewport-Höhe.
 * WP setzt bei eingeloggten Nutzern margin-top auf <html> (Admin-Bar).
 * Custom Property --spnkt-admin-bar kompensiert diese Höhe dynamisch.
 */
:root {
	--spnkt-admin-bar: 0px;
}

.admin-bar {
	--spnkt-admin-bar: 32px;
}

/* WP-Admin-Bar ist unter 782px 46px hoch (statt 32px) */
@media screen and (max-width: 781px) {
	.admin-bar {
		--spnkt-admin-bar: 46px;
	}
}

/* wp-site-blocks fuellt verfuegbaren Platz (FSE-Wrapper) */
body > .wp-site-blocks {
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Main-Bereich fuellt verfuegbaren Platz zwischen Header und Footer */
body > .wp-site-blocks > main,
body > .wp-site-blocks > #wp--skip-link--target {
	flex: 1;
	margin-top: 0;
}

/* Vertikaler Abstand des Main-Bereichs zu Header und Footer. Nicht auf der
   Startseite: dort bringen die vollbreiten Sections ihr eigenes Padding mit. */
body:not( .home ) > .wp-site-blocks > main,
body:not( .home ) > .wp-site-blocks > #wp--skip-link--target {
	padding-block: var( --wp--preset--spacing--klein );
}


/* =========================================================================
   Grundlegende Resets
   ========================================================================= */

*,
*::before,
*::after {
	box-sizing: border-box;
	text-decoration-thickness: 0.5px;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Browser-Standard-Fokusring bei Mausklick entfernen */
:focus:not(:focus-visible) {
	outline: none;
}

:focus-visible {
	outline: 1px solid var( --wp--preset--color--foreground );
	outline-offset: -1px;
}


/* Reduzierte Bewegung respektieren (Barrierefreiheit) */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* =========================================================================
   Typografie – globale Font-Features
   ========================================================================= */

/* Optische Grössenanpassung und OpenType-Features global aktivieren
   (wirkt nur bei Fonts, die diese Features mitbringen, z.B. Variable Fonts) */
:root {
	font-optical-sizing: auto;
	font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* =========================================================================
   Seitenhintergrund

   Hintergrundfarbe liegt auf dem FSE-Wrapper .wp-site-blocks, nicht auf <body>.

   Grund: iOS Safari (ab 26) leitet die Browser-Toolbar- und Overscroll-Farbe
   aus body { background-color } ab. Mit neutralem body bleibt die Browser-
   Chrome neutral; eine allfaellige Akzent-Hintergrundfarbe deckt via
   .wp-site-blocks weiterhin exakt den Layoutbereich ab.

   Projektspezifische Seitenhintergruende (Farbe, Wasserzeichen-Bild) hier
   auf body > .wp-site-blocks ergaenzen.
   ========================================================================= */
body {
	display: flex;
	flex-direction: column;
	background-color: var( --wp--preset--color--background );
}

body > .wp-site-blocks {
	background-color: var( --wp--preset--color--background );
}


/* =========================================================================
   Body-Scroll-Lock für Modals/Overlays

   Wird von JS gesetzt (z.B. Navigations-Overlay):
   document.documentElement.classList.add( 'spnkt-has-modal-open' )
   ========================================================================= */
html.spnkt-has-modal-open,
html.spnkt-has-modal-open body {
	overflow: hidden;
}