/* ==========================================================================
   noegus design system (preliminary) – webgras
   Tokens, region themes by page class, region menu, Nunito Sans.
   Colour values sampled from the design screenshots (2026-09-23).
   Reference: https://claude.ai/artifact/PZPJS537x5QmjTNpxAChg7
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Font: Nunito Sans (variable, wght 200–1000), self-hosted – no Google Fonts
      CDN (GDPR). Files: ../fonts/nunito-sans/ (Fontsource, OFL-1.1)
   -------------------------------------------------------------------------- */
@font-face {
	font-family: "Nunito Sans";
	font-style: normal;
	font-weight: 200 1000;
	font-display: swap;
	src: url("../fonts/nunito-sans/nunito-sans-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Nunito Sans";
	font-style: normal;
	font-weight: 200 1000;
	font-display: swap;
	src: url("../fonts/nunito-sans/nunito-sans-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Nunito Sans";
	font-style: italic;
	font-weight: 200 1000;
	font-display: swap;
	src: url("../fonts/nunito-sans/nunito-sans-latin-wght-italic.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Nunito Sans";
	font-style: italic;
	font-weight: 200 1000;
	font-display: swap;
	src: url("../fonts/nunito-sans/nunito-sans-latin-ext-wght-italic.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
	/* Primary colours – contrast (WCAG 2.2) in brackets */
	--noegus-bg: #f9fcff;          /* Global Background */
	--noegus-text: #060c12;        /* Global: text (19:1 on bg) */
	--noegus-primary: #005a9a;     /* Primary: buttons, text links (7:1 on white/bg) */
	--noegus-secondary: #f9fcff;   /* Secondary: light surfaces, secondary button */
	--noegus-inverse: #fff;        /* Invers: text on primary (7:1) */
	--noegus-link: #1a0dab;        /* System: links in running text – always underlined */

	/* Regions
	   base   = brand colour: stripes, large areas – NOT for text/borders/icons
	            (Mostviertel, Weinviertel, NÖ Mitte are below 3:1 on white)
	   tint   = 10 % on white: region menu bar, tinted surfaces
	   strong = text, links, active/hover lines, icons (>= 4.6:1 on white, bg and tint)
	   on     = text on the base colour */
	--noegus-region-weinviertel: #22b7bd;
	--noegus-region-weinviertel-tint: #e8f7f8;
	--noegus-region-weinviertel-strong: #047a7f;
	--noegus-region-weinviertel-on: var(--noegus-text);

	--noegus-region-mostviertel: #71b737;
	--noegus-region-mostviertel-tint: #f0f7eb;
	--noegus-region-mostviertel-strong: #447c02;
	--noegus-region-mostviertel-on: var(--noegus-text);

	--noegus-region-waldviertel: #264f0e;
	--noegus-region-waldviertel-tint: #e9ede6;
	--noegus-region-waldviertel-strong: #264f0e;
	--noegus-region-waldviertel-on: #fff;

	--noegus-region-industrieviertel: #c1272d;
	--noegus-region-industrieviertel-tint: #f8e9e9;
	--noegus-region-industrieviertel-strong: #c1272d;
	--noegus-region-industrieviertel-on: #fff;

	--noegus-region-noe-mitte: #ffc801;
	--noegus-region-noe-mitte-tint: #fff9e5;
	--noegus-region-noe-mitte-strong: #8c6d04;
	--noegus-region-noe-mitte-on: var(--noegus-text);

	--noegus-region-zukunftsforum: #268cc3;
	--noegus-region-zukunftsforum-tint: #e9f3f9;
	--noegus-region-zukunftsforum-strong: #0573a6;
	--noegus-region-zukunftsforum-on: var(--noegus-text);

	/* Typography */
	--noegus-font-sans: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	/* Surfaces */
	--noegus-region-stripe: 1.25rem; /* 20px colour stripe above the region menu */
	--noegus-shadow-bar: 0 2px 8px rgb(6 12 18 / 6%);

	/* Cassiopeia: body and headings in Nunito Sans (keep the template font option on "None") */
	--cassiopeia-font-family-body: var(--noegus-font-sans);
	--cassiopeia-font-family-headings: var(--noegus-font-sans);

	/* Current region – defaults for pages without a region class */
	--region: var(--noegus-primary);
	--region-tint: var(--noegus-secondary);
	--region-strong: var(--noegus-primary);
	--region-on: var(--noegus-inverse);
}

/* --------------------------------------------------------------------------
   3. Region themes: page class of the menu item (Seitenklasse), inherited by
      its sub-items (index.php). New region: add a block here and the class in 4.
      Works on any element, e.g. a module class, not only on <body>.
   -------------------------------------------------------------------------- */
.movi-kiju { /* Mostviertel · Kinder & Jugend */
	--region: var(--noegus-region-mostviertel);
	--region-tint: var(--noegus-region-mostviertel-tint);
	--region-strong: var(--noegus-region-mostviertel-strong);
	--region-on: var(--noegus-region-mostviertel-on);
}

.wevi-kiju { /* Weinviertel · Kinder & Jugend */
	--region: var(--noegus-region-weinviertel);
	--region-tint: var(--noegus-region-weinviertel-tint);
	--region-strong: var(--noegus-region-weinviertel-strong);
	--region-on: var(--noegus-region-weinviertel-on);
}

.wevi-erw { /* Weinviertel · Erwachsene (Zukunftsforum) */
	--region: var(--noegus-region-zukunftsforum);
	--region-tint: var(--noegus-region-zukunftsforum-tint);
	--region-strong: var(--noegus-region-zukunftsforum-strong);
	--region-on: var(--noegus-region-zukunftsforum-on);
}

.nomi-kiju { /* NÖ Mitte · Kinder & Jugend */
	--region: var(--noegus-region-noe-mitte);
	--region-tint: var(--noegus-region-noe-mitte-tint);
	--region-strong: var(--noegus-region-noe-mitte-strong);
	--region-on: var(--noegus-region-noe-mitte-on);
}

.wavi-kiju { /* Waldviertel · Kinder & Jugend */
	--region: var(--noegus-region-waldviertel);
	--region-tint: var(--noegus-region-waldviertel-tint);
	--region-strong: var(--noegus-region-waldviertel-strong);
	--region-on: var(--noegus-region-waldviertel-on);
}

.invi-kiju { /* Industrieviertel · Kinder & Jugend */
	--region: var(--noegus-region-industrieviertel);
	--region-tint: var(--noegus-region-industrieviertel-tint);
	--region-strong: var(--noegus-region-industrieviertel-strong);
	--region-on: var(--noegus-region-industrieviertel-on);
}

/* --------------------------------------------------------------------------
   4. Region menu: colour stripe + tinted bar (design "Menü Regionen")
   -------------------------------------------------------------------------- */
:is(.movi-kiju, .wevi-kiju, .wevi-erw, .nomi-kiju, .wavi-kiju, .invi-kiju) .container-menu {
	--headerbg: var(--region-tint);           /* read by global/colors.css */
	--headercolor: var(--noegus-text);
	--nav-indicator: var(--region-strong);
	--nav-indicator-opacity: 1;               /* Cassiopeia: .2 – too faint for the line to count */
	--region-switch-color: var(--noegus-primary);
	border-top: var(--noegus-region-stripe) solid var(--region);
	box-shadow: var(--noegus-shadow-bar);
}

/* "Region wechseln": menu module with the menu class " region-switch" */
.container-menu .region-switch > li > :is(a, button, span) {
	color: var(--region-switch-color, inherit);
}

/* --------------------------------------------------------------------------
   5. Menu details: Cassiopeia hardcodes white in the header – follow the header
      variables instead, so light menu bars stay readable
   -------------------------------------------------------------------------- */
.container-menu .navbar-toggler {
	color: var(--headercolor);
	border-color: currentColor;
}

/* Active/hover line: region colour (strong) on region pages, otherwise as before */
.container-menu .mod-menu > li.active::after,
.container-menu .mod-menu > li:hover::after {
	background: var(--nav-indicator, currentColor);
	opacity: var(--nav-indicator-opacity, .2);
}

.container-menu .metismenu > li > a:hover::after,
.container-menu .metismenu > li > button:hover::before,
.container-menu .metismenu > li.active > a::after,
.container-menu .metismenu > li.active > button::before {
	background: var(--nav-indicator, color-mix(in srgb, currentColor, #fff 25%));
	opacity: var(--nav-indicator-opacity, .2);
}

@media (width <= 991.98px) {
	.container-menu .mod-menu .mod-menu__sub :is(a, span) {
		color: var(--headercolor);
	}
}

/* Focus: 2px outline in the text colour (>= 3:1 on header and all region tints) */
.container-menu :is(a, button):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Module chrome "nav" (html/layouts/chromes/nav.php): same layout as without wrapper */
.container-menu .mod-nav {
	display: flex;
	flex: 1 0 100%;
	margin-top: 0;
}

@media (width >= 992px) {
	.container-menu .mod-nav {
		flex: 1;
	}
}

/* --------------------------------------------------------------------------
   6. Helpers for modules and articles (follow the current region)
   -------------------------------------------------------------------------- */
.region-tint {
	background-color: var(--region-tint);
}

.region-stripe {
	border-top: var(--noegus-region-stripe) solid var(--region);
}

.region-text {
	color: var(--region-strong);
}