/*
 * prixo base.css: nur was theme.json nicht kann.
 * Werte kommen aus theme.json (var(--wp--preset--*) / var(--wp--custom--*)).
 *
 * 1. Responsive Tokens (Seitenrand, Fliesstextgrösse)
 * 2. Hülle: Abstände zwischen Template-Teilen
 * 3. Fokus-Ring
 * 4. Header-Verhalten (transparent, Smart Sticky, Navy beim Hochscrollen)
 * 5. Nach-oben-Knopf
 * 6. 404-Seite
 * 7. Lightbox (Core) ohne Beschnitt, Bildzähler
 * 8. Technische Farben (nicht im Farbwähler, als CSS-Variablen erhalten)
 */

/* 1. Responsive Tokens ---------------------------------------------------- */
:root {
	--prixo-gutter: var(--wp--custom--gutter--desktop);
	--prixo-body-size: var(--wp--custom--font-size-body--desktop);
	--prixo-h1-size: var(--wp--custom--heading-size--h-1--desktop);
	--prixo-h2-size: var(--wp--custom--heading-size--h-2--desktop);
	--prixo-h3-size: var(--wp--custom--heading-size--h-3--desktop);
	--prixo-h4-size: var(--wp--custom--heading-size--h-4--desktop);
	--prixo-h5-size: var(--wp--custom--heading-size--h-5--desktop);
	--prixo-h6-size: var(--wp--custom--heading-size--h-6--desktop);
	--prixo-button-py: var(--wp--custom--button--padding-y--desktop);
	--prixo-button-px: var(--wp--custom--button--padding-x--desktop);
	--prixo-button-size: var(--wp--custom--button--font-size--desktop);
	--prixo-header-height: var(--wp--custom--header--height);
	--prixo-header-inset: var(--wp--custom--header--padding-x);
}

/* Elementor «Laptop» 1025–1366 px: 50 px Seitenrand */
@media (max-width: 1366px) {
	:root {
		--prixo-gutter: var(--wp--custom--gutter--laptop);
	}
}

/* Header-Umbruch wie live (UiCore): bis 1025 px Burger-Menü */
@media (max-width: 1025px) {
	:root {
		--prixo-header-height: var(--wp--custom--header--height-tablet);
		/* 95 % der Breite abzüglich 2 × 10 px (UiCore-Header) */
		--prixo-header-inset: calc(10px + (100% - 20px) * 0.025);
	}
}

@media (max-width: 1024px) {
	:root {
		--prixo-gutter: var(--wp--custom--gutter--tablet);
		--prixo-body-size: var(--wp--custom--font-size-body--tablet);
		--prixo-h1-size: var(--wp--custom--heading-size--h-1--tablet);
		--prixo-h2-size: var(--wp--custom--heading-size--h-2--tablet);
		--prixo-h3-size: var(--wp--custom--heading-size--h-3--tablet);
		--prixo-h4-size: var(--wp--custom--heading-size--h-4--tablet);
		--prixo-h5-size: var(--wp--custom--heading-size--h-5--tablet);
		--prixo-h6-size: var(--wp--custom--heading-size--h-6--tablet);
	}
}

@media (max-width: 767px) {
	:root {
		--prixo-gutter: var(--wp--custom--gutter--mobile);
		--prixo-body-size: var(--wp--custom--font-size-body--mobile);
		--prixo-h1-size: var(--wp--custom--heading-size--h-1--mobile);
		--prixo-h2-size: var(--wp--custom--heading-size--h-2--mobile);
		--prixo-h3-size: var(--wp--custom--heading-size--h-3--mobile);
		--prixo-h4-size: var(--wp--custom--heading-size--h-4--mobile);
		--prixo-h5-size: var(--wp--custom--heading-size--h-5--mobile);
		--prixo-h6-size: var(--wp--custom--heading-size--h-6--mobile);
		--prixo-button-py: var(--wp--custom--button--padding-y--mobile);
		--prixo-button-px: var(--wp--custom--button--padding-x--mobile);
		--prixo-button-size: var(--wp--custom--button--font-size--mobile);
		--prixo-header-height: var(--wp--custom--header--height-mobile);
	}
}

/*
 * Seitenrand-Ausnahmen je Abschnitt (Komponentenkatalog §2.1). Klasse an die Abschnittsgruppe
 * (alignfull, Layout «constrained» → .has-global-padding) setzen:
 *   prixo-gutter-l-0   Laptop 1025–1366 ohne Rand (z. B. Logo-Laufband)
 *   prixo-gutter-t-50  Tablet 768–1024 mit 50 px (Produktzeilen, Katalog)
 *   prixo-gutter-t-0   Tablet ohne Rand (Tracker)
 *   prixo-gutter-m-inset  Mobile nur 2.5 % (95-%-Regel ohne 20 px Padding, z. B. Stapelkarten)
 *   prixo-gutter-m-0   Mobile ohne Rand
 *   prixo-gutter-0     immer ohne Rand
 */
.has-global-padding.prixo-gutter-0 {
	padding-left: 0;
	padding-right: 0;
}

@media (min-width: 1025px) and (max-width: 1366px) {
	.has-global-padding.prixo-gutter-l-0 {
		padding-left: 0;
		padding-right: 0;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.has-global-padding.prixo-gutter-t-50 {
		padding-left: 50px;
		padding-right: 50px;
	}

	.has-global-padding.prixo-gutter-t-0 {
		padding-left: 0;
		padding-right: 0;
	}
}

@media (max-width: 767px) {
	.has-global-padding.prixo-gutter-m-inset {
		padding-left: 2.5%;
		padding-right: 2.5%;
	}

	.has-global-padding.prixo-gutter-m-0 {
		padding-left: 0;
		padding-right: 0;
	}
}

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	/* Wie live (UiCore: html { overflow-x: hidden }): überstehende Elemente erzeugen keinen Querscroll.
	   clip statt hidden, wo unterstützt (kein Scroll-Container; position: sticky der Stapelkarten bleibt
	   am Viewport). Am Wurzelelement wirken beide gleich auf den Viewport. Sicherheitsnetz: die Seitenbreite
	   (scrollWidth) wächst trotzdem mit; Abschnitte mit bekanntem Überlauf schneiden deshalb selbst ab
	   (K05, K08, K14, K17: overflow-x: clip am Abschnitt). */
	overflow-x: hidden;
	overflow-x: clip;
}

/* Spalten brechen lange Wörter nicht um (wie Elementor; Core setzt an .wp-block-column
   overflow-wrap/word-break: break-word). Überlauf schneidet html ab, wie live. */
.wp-block-column {
	overflow-wrap: normal;
	word-break: normal;
}

/* 2. Hülle ------------------------------------------------------------------ */
.wp-site-blocks {
	position: relative;
	/* wie live (UiCore: .uicore-body-content { overflow-x: clip }): überlaufender Text (lange Wörter in Rechtstexten
	   bei 320/360 px) macht die Seite nicht breiter als den Viewport. clip = kein Scroll-Container, position: sticky
	   (Stapelkarten) und position: fixed (Header, Overlay) bleiben am Viewport. */
	overflow-x: clip;
}

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

/* 3. Fokus-Ring (live gibt es keinen; hier bewusst sichtbar) ------------ */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

:where(.wp-element-button, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--navy);
	outline-offset: 3px;
}

.prixo-header :where(a, button):focus-visible,
.prixo-footer :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--lime);
}

/* Auf Navy-Flächen (Hero, CTA-Bänder, Seitentitel) ist ein Navy-Rahmen unsichtbar: dort Lime (QA K6) */
:root :is(.has-navy-background-color, .is-style-page-title) :where(a, button, .wp-element-button, .wp-block-button__link):focus-visible {
	outline-color: var(--wp--preset--color--lime);
}

/* … ausser in hellen Karten/Flächen innerhalb der Navy-Fläche (Stapelkarten, weisse Boxen): dort wieder Navy */
:root :is(.has-navy-background-color, .is-style-page-title) :is([class*="is-style-card"], .has-white-background-color, .has-light-bg-background-color, .has-light-neutral-background-color) :where(a, button, .wp-element-button, .wp-block-button__link):focus-visible {
	outline-color: var(--wp--preset--color--navy);
}

/* 4. Header-Verhalten -------------------------------------------------------
 * Live (UiCore «transparent + smart sticky + shrink»):
 * - oben: transparent über Seitentitel/Hero, 111.6 px hoch
 * - runter scrollen: Header gleitet 35 px hoch und blendet aus
 * - hoch scrollen: Header kommt mit Navy-Hintergrund (131.6 px) zurück
 * - ab ≤ 1025 px: nicht sticky, liegt absolut über dem Seitenanfang
 * Klassen setzt assets/js/theme.js: .is-scrolled, .is-hidden
 */
:where(body:not(.editor-styles-wrapper)) .prixo-header {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 100;
	transition: all 0.4s ease;
}

.prixo-header {
	isolation: isolate;
}

.prixo-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--wp--preset--color--navy);
	opacity: 0;
	transition: all 0.2s cubic-bezier(0.16, 0.72, 0.23, 1.06);
	pointer-events: none;
}

.prixo-header.is-scrolled::before {
	opacity: 1;
}

.prixo-header.is-hidden {
	transform: translate3d(0, var(--wp--custom--header--hide-offset), 0);
	opacity: 0;
	pointer-events: none;
	transition: transform 0.3s cubic-bezier(0.41, 0.61, 0.36, 1.08), opacity 0.2s ease;
}

.prixo-header.is-hidden * {
	pointer-events: none;
}

/* Tastatur: ausgeblendeter Header erscheint bei Fokus wieder */
.prixo-header.is-hidden:focus-within {
	transform: none;
	opacity: 1;
	pointer-events: auto;
}

.prixo-header.is-hidden:focus-within * {
	pointer-events: auto;
}

@media (max-width: 1025px) {
	:where(body:not(.editor-styles-wrapper)) .prixo-header {
		position: absolute;
		top: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.prixo-header,
	.prixo-header::before,
	.prixo-header.is-hidden {
		transition: none;
	}
}

/* 5. Nach-oben-Knopf --------------------------------------------------------- */
.prixo-back-to-top {
	position: fixed;
	right: 2em;
	bottom: 2em;
	z-index: 999;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--headline);
	font-size: 15px;
	box-shadow: var(--wp--preset--shadow--back-to-top);
	cursor: pointer;
	transform: scale(1);
	transition: all 0.3s cubic-bezier(0.61, -0.12, 0.08, 1.55);
}

.prixo-back-to-top[hidden] {
	display: none;
}

.prixo-back-to-top:not(.is-visible) {
	opacity: 0;
	pointer-events: none;
	transform: scale(0.3);
}

.prixo-back-to-top:hover {
	transform: scale(1.1);
	box-shadow: 0 0 20px -9px rgba(0, 0, 0, 0.2);
}

.prixo-back-to-top svg {
	display: block;
}

/* 6. 404-Seite (templates/404.html) ----------------------------------------------
 * Wie live (UiCore «utility-page»): Header nicht transparent über dem Titelband, sondern eigene Navy-Leiste
 * davor (UiCore ohne «transparent» auf 404), danach das leere Titelband (350 px, mobil 250 px) und der Inhalt
 * mit 10 % Innenabstand: Bild 267 px, «Error 404» als H1 mit Browser-Rand 0.67em, Text, Link 40 px darunter.
 * Gemessen live 1440/1024/390 (qa/fix-f2/live/404-probe.txt).
 */
body.error404 .wp-site-blocks {
	padding-top: var(--prixo-header-height);
}

body.error404 .prixo-header::before {
	opacity: 1;
}

.prixo-404 {
	padding: 10% 0;
	text-align: center;
}

.prixo-404 > * {
	margin: 0;
}

.prixo-404 > .prixo-404__img {
	margin: 0 auto;
}

.prixo-404 > .prixo-404__img img {
	display: block;
	width: 267px;
	height: auto;
}

.prixo-404 > .prixo-404__title {
	margin: 0.67em 0;
}

.prixo-404 > .prixo-404__text {
	margin: 0 0 1em;
}

.prixo-404 > .prixo-404__link {
	margin-top: calc(1em + 40px);
}

/* 7. Lightbox --------------------------------------------------------------------
 * Core übernimmt das Seitenverhältnis des Vorschaubilds (Galerie «zuschneiden», 3:2) und schneidet das grosse Bild
 * per object-fit: cover. Live (Elementor) zeigt das Bild ganz: in der Lightbox nur einpassen, Vorschau bleibt 3:2.
 */
.wp-lightbox-overlay .lightbox-image-container img {
	object-fit: contain !important;
}

/* Zähler «1 / 8» oben links wie die Elementor-Lightbox (theme.js, liegt am Ende von <body> über dem Overlay) */
.prixo-lightbox-counter {
	position: fixed;
	top: calc(28px + var(--wp-admin--admin-bar--height, 0px));
	left: 20px;
	z-index: 100001;
	color: #fff;
	font-size: 14px;
	line-height: 16px;
	font-weight: 500;
	pointer-events: none;
}

.prixo-lightbox-counter[hidden] {
	display: none;
}

/* 8. Technische Farben ------------------------------------------------------------
 * Nicht im Farbwähler (theme.json settings.custom.color, inc/theme-json.php), die bisherigen Preset-Namen bleiben als
 * Alias, damit Abschnitts-, Formular- und FAQ-CSS unverändert greifen.
 */
:root {
	--wp--preset--color--navy-dark: var(--wp--custom--color--navy-dark);
	--wp--preset--color--muted: var(--wp--custom--color--muted);
	--wp--preset--color--divider: var(--wp--custom--color--divider);
	--wp--preset--color--lime-hover: var(--wp--custom--color--lime-hover);
	--wp--preset--color--faq-border: var(--wp--custom--color--faq-border);
	--wp--preset--color--faq-title: var(--wp--custom--color--faq-title);
	--wp--preset--color--red: var(--wp--custom--color--red);
	--wp--preset--color--faq-panel-border: var(--wp--custom--color--faq-panel-border);
	--wp--preset--color--form-required: var(--wp--custom--color--form-required);
	--wp--preset--color--form-success: var(--wp--custom--color--form-success);
	--wp--preset--color--form-error: var(--wp--custom--color--form-error);
	--wp--preset--color--black: var(--wp--custom--color--black);
}