/* en2x Custom – global styles. CSS classes use the .en2x- prefix. */

/*
 * en2x project-wide design tokens.
 *
 * These custom properties are the single source of truth for en2x brand
 * colours and are meant to be used by EVERY module (current and future) instead
 * of hard-coded hex values. Add new shared tokens here.
 *
 * Headline convention: all relevant headlines/titles across modules use
 * var(--en2x-color-headline) (#250F51) – this is the project's standard
 * headline colour. Keep it consistent in new modules.
 */
:root {
	--en2x-color-headline: #250F51; /* Headlines/titles in all modules. */
	--en2x-color-primary: #221182;  /* Accent / Thema colour. */
	/* Full-pill button radius. A large value always caps at half the element
	 * height, so buttons are fully round regardless of their height (a fixed
	 * px value like Salient's --nectar-border-radius is not enough on taller
	 * buttons). Lower this for less rounding. */
	--en2x-button-radius: 999px;

	/* Content container width – matches the Beitrag-Hero (__inner max-width). */
	--en2x-container: 1600px;

	/* Self-brought side gutter for the article modules. In WPBakery "Full Width
	 * Content" rows the container padding is gone, so the modules bring their
	 * own. The centering offset (100vw - container)/2 aligns content to the same
	 * edge as the hero box; clamped so it is at least 20px and never over-pads a
	 * narrow column (cap 20% of the column width = safe on ultrawide). One place
	 * to tweak for all modules. */
	--en2x-side-gutter: clamp( 20px, calc( ( 100vw - var( --en2x-container ) ) / 2 ), 20% );

	/* Offset for the fixed Salient header. Anchor targets use this as
	 * scroll-margin-top so a jumped-to headline is not hidden under the header.
	 * Staggered desktop / tablet / mobile (same height thinking as the Beitrag-
	 * Hero spacing) – the header gets shorter on smaller screens. Tune here once. */
	--en2x-header-offset: 110px;
}

/* Tablet: shorter Salient header. */
@media (max-width: 1000px) {
	:root {
		--en2x-header-offset: 94px;
	}
}

/* Mobile: compact header. */
@media (max-width: 690px) {
	:root {
		--en2x-header-offset: 78px;
	}
}

/* Smooth in-page jumps to anchors. Respect reduced-motion preferences and only
 * set it if nothing else already does (low-risk, global). */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}