/*
Theme Name:        SAC Rossberg
Theme URI:         https://www.sac-zug.ch/
Description:       Standalone theme for SAC Sektion Rossberg (Zug). "Höhenlinien" — an alpine-atlas design system with topographic contour lines, a cloud-dissolved hero and the Rossberg trail-red. Mobile-first, accessible, Gutenberg-native. Architecture inspired by BlankSlate, no parent theme required.
Author:            Kraftsy
Author URI:        https://kraftsy.ch
Version:           2.0.0
Requires at least: 6.3
Tested up to:      6.8
Requires PHP:      8.1
Text Domain:       sac-rossberg
License:           GNU General Public License v3 or later
License URI:       https://www.gnu.org/licenses/gpl-3.0.html
*/

/* ==========================================================================
   SAC ROSSBERG — DESIGN TOKENS + BASE LAYER
   --------------------------------------------------------------------------
   Only tokens and the global base live here. Layout, navigation, components,
   content and front-page styles are split into assets/css/*.css.

   COLOUR — single source of truth, light AND dark in one declaration:
     --token: color-mix(in srgb, <dark> var(--dk), <light>);
   --dk is 0% (light) or 100% (dark) — --dkn is the same flag as 0/1 for
   opacity maths. accessibility.css flips them for the
   "Dunkel" choice and for the OS preference ("System"). Nothing is declared
   twice and there are no per-component dark overrides.

   DARK ISLANDS — the themed block below also applies to `.is-dark`, which sets
   --dk: 100% locally, so the navy footer and the menu overlay recompute every
   token as dark even on a light page.

   ACCENT — --c-accent / --c-accent-highlight come from the Customizer
   (Design → Farben) via an inline :root style; all variants derive from them.
   ========================================================================== */

:root {
	color-scheme: light;
	--dk: 0%;   /* dark flag as a percentage (for color-mix) */
	--dkn: 0;   /* the same flag, unitless (for opacity/calc) */

	/* --- Brand (fixed) ---------------------------------------------------- */
	--c-white:    #ffffff;
	--c-navy-950: #070d18;
	--c-navy-900: #0f1d30;
	--c-navy-800: #16283f;
	--c-navy-700: #213857;

	/* --- Accent + highlight (Customizer) ---------------------------------- */
	--c-accent:           #c1471f;
	--c-accent-highlight: #c1471f;
	--c-accent-ink:       color-mix(in srgb, var(--c-accent) 74%, #000);
	--c-accent-light:     color-mix(in srgb, var(--c-accent) 62%, #fff);
	--c-accent-soft:      color-mix(in srgb, var(--c-accent) 12%, transparent);
	--c-on-accent:        var(--c-white);
	/* The translucent red panel (hero box, CTA box). */
	--sac-red-panel:      color-mix(in srgb, var(--c-accent) 90%, transparent);

	/* --- Type ------------------------------------------------------------- */
	--font-scale: 1;
	--font-sans:  "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-heading: var(--font-sans);
	--font-body:    var(--font-sans);
	--font-mono:  ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	--font-quote: var(--font-sans);   /* one family only — quotes use its italic */

	--fs-xs:      0.72rem;
	--fs-sm:      0.875rem;
	--fs-body:    1rem;
	--fs-lead:    clamp(1.125rem, 1.03rem + 0.45vw, 1.35rem);
	--fs-h4:      clamp(1.15rem, 1.06rem + 0.45vw, 1.35rem);
	--fs-h3:      clamp(1.35rem, 1.16rem + 0.95vw, 1.8rem);
	--fs-h2:      clamp(1.75rem, 1.3rem + 2.2vw, 2.8rem);
	--fs-h1:      clamp(2.2rem, 1.5rem + 3.4vw, 4rem);
	--fs-display: clamp(1.9rem, 0.9rem + 5vw, 5.4rem);   /* uppercase section titles */
	--fs-hero:    clamp(2.1rem, 1.45rem + 3.1vw, 4rem);

	--lh-tight: 1.04;
	--lh-snug:  1.25;
	--lh-body:  1.65;

	--ls-tight: -0.022em;
	--ls-caps:  0.04em;
	--ls-mono:  0.16em;

	/* --- Space + rhythm (4/8/12/16/24/32/48/64/96/128px) ------------------ */
	--space-1:  0.25rem;
	--space-2:  0.5rem;
	--space-3:  0.75rem;
	--space-4:  1rem;
	--space-5:  1.5rem;
	--space-6:  2rem;
	--space-7:  3rem;
	--space-8:  4rem;
	--space-9:  6rem;
	--space-10: 8rem;
	--section-y: clamp(4.5rem, 3rem + 6vw, 9.5rem);   /* vertical breath between sections */

	/* --- Layout ----------------------------------------------------------- */
	--container:     1320px;
	--content-width: 44rem;
	--measure:       66ch;
	--gutter:        clamp(1.25rem, 4.6vw, 3rem);
	--header-h:      4.75rem;

	/* --- Shape, depth, motion --------------------------------------------- */
	--radius: 0;                       /* fully rectangular, like a map sheet */
	--shadow-sm: 0 1px 2px rgb(13 26 44 / 0.06), 0 2px 6px rgb(13 26 44 / 0.06);
	--shadow:    0 14px 34px -14px rgb(13 26 44 / 0.28);
	--shadow-lg: 0 30px 70px -24px rgb(13 26 44 / 0.38);
	/* Hover on round (circular) controls: the outline lights up in the accent. */
	--ring-hover: inset 0 0 0 1px var(--c-accent);

	--ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--dur-1: 160ms;   /* colour, press */
	--dur-2: 340ms;   /* slides, reveals */
	--dur-3: 900ms;   /* entrances, survey sweeps */

	--z-header:   100;
	--z-overlay:  1000;
	--z-lightbox: 1100;
}

/* Themed tokens — one declaration each. `color-mix(DARK var(--dk), LIGHT)`. */
:root,
.is-dark {
	--c-bg:            color-mix(in srgb, #0a1120 var(--dk), #ffffff);
	--c-section:       color-mix(in srgb, #0d1626 var(--dk), #f3f5f7);
	--c-surface:       color-mix(in srgb, #121e33 var(--dk), #ffffff);
	--c-surface-2:     color-mix(in srgb, #17263f var(--dk), #f6f8fa);
	--c-border:        color-mix(in srgb, #24364e var(--dk), #e2e7ec);
	--c-border-strong: color-mix(in srgb, #3a5072 var(--dk), #c8d1db);
	--c-text:          color-mix(in srgb, #e3eaf4 var(--dk), #18212e);
	--c-text-muted:    color-mix(in srgb, #9badc2 var(--dk), #556171);
	--c-heading:       color-mix(in srgb, #f5f8ff var(--dk), #0d1a2c);
	--c-topo:          color-mix(in srgb, #34557a var(--dk), #a3aebb);
	--c-link:          color-mix(in srgb, #b7cbe8 var(--dk), var(--c-navy-700));
	--c-link-hover:    color-mix(in srgb, var(--c-accent-light) var(--dk), var(--c-accent));
	--c-accent-text:   var(--c-link-hover);   /* accent as text: legible on light AND dark */
	--c-focus:         color-mix(in srgb, color-mix(in srgb, var(--c-accent-highlight) 60%, #fff) var(--dk), var(--c-accent-highlight));
	--c-overlay-bg:    color-mix(in srgb, #050a14 var(--dk), var(--c-navy-900));
	--c-overlay-text:  var(--c-white);
	--c-scrim:         rgb(7 13 24 / 0.92);
	--c-diff-easy:     color-mix(in srgb, #5cc07e var(--dk), #2f7d46);
	--c-diff-medium:   color-mix(in srgb, #e3ad4f var(--dk), #8f5d0e);
	--c-diff-hard:     color-mix(in srgb, #ef7f5f var(--dk), #b23a16);
}

/* A dark island: footer, menu overlay. */
.is-dark {
	--dk: 100%;
	--dkn: 1;
	color-scheme: dark;
	color: var(--c-text);
}

/* ==========================================================================
   BASE
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	/* 112.5% ≈ 18px. The a11y font-size control multiplies this. */
	font-size: calc(112.5% * var(--font-scale));
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + var(--space-4));
}

body {
	margin: 0;
	background-color: var(--c-bg);
	color: var(--c-text);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-kerning: normal;
}

::selection {
	background: var(--c-accent);
	color: var(--c-on-accent);
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--space-4);
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: var(--lh-snug);
	letter-spacing: -0.012em;
	color: var(--c-heading);
	text-wrap: balance;
}

h1 { font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.12; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p,
ul,
ol {
	margin: 0 0 var(--space-4);
}

p {
	text-wrap: pretty;
}

a {
	color: var(--c-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--dur-1) ease;
}

a:hover {
	color: var(--c-link-hover);
}

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

/* One visible, high-contrast focus style everywhere (WCAG 2.4.7). */
:focus-visible {
	outline: 2px solid var(--c-focus);
	outline-offset: 3px;
}

hr {
	border: 0;
	border-top: 1px solid var(--c-border);
}

/* ==========================================================================
   ACCESSIBILITY HELPERS
   ========================================================================== */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
	word-wrap: normal !important;
}

/* Skip link — visually hidden until focused, then pinned top-left. */
.skip-link {
	position: absolute;
	top: var(--space-2);
	left: var(--space-2);
	z-index: calc(var(--z-overlay) + 10);
	padding: var(--space-3) var(--space-5);
	background: var(--c-accent);
	color: var(--c-on-accent);
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	letter-spacing: var(--ls-caps);
	text-decoration: none;
	transform: translateY(-200%);
	transition: transform var(--dur-2) var(--ease-out);
}

.skip-link:focus {
	transform: none;
	color: var(--c-on-accent);
}

/* Honour "reduce motion" everywhere (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}