/*
Theme Name: Vigtig Viden
Theme URI: https://www.vigtigviden.dk
Author: Alexander
Description: Moderne magasin-/videnssite tema med indbyggede annoncefelter, optimeret til Gutenberg og hurtig indlæsning.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: vigtigviden
*/

/* ==========================================================================
   Design tokens
   ---
   Farver: papirhvid baggrund, blæksort tekst, "highlighter"-signal (gul) som
   det ene bevidste risikoelement, plus en dæmpet teal til kategorier/tags.
   Typografi: Space Grotesk (display/overskrifter) + Inter (brødtekst,
   skarp og letlæst — som moderne danske nyhedssites) + IBM Plex Mono
   (metadata: dato, forfatter, tags, tal).
   Runding + skygge: bevidst mere rundet og med let dybde, for et nutidigt,
   app-agtigt udtryk frem for det flade/skarpkantede.
   ========================================================================== */
:root {
	--vv-color-paper: #F7F6F2;
	--vv-color-paper-raised: #FFFFFF;
	--vv-color-ink: #14151A;
	--vv-color-ink-soft: #4A4A52;
	--vv-color-line: #E4E2DA;
	--vv-color-signal: #FFC845;
	--vv-color-signal-ink: #14151A;
	--vv-color-teal: #0B8577;
	--vv-color-teal-soft: #E4F1EF;
	--vv-color-red: #B3241C;
	--vv-color-red-soft: #FBE7E4;
	--vv-color-red-dark: #8C1B15;
	--vv-color-focus: #B3241C;

	--vv-font-display: "Space Grotesk", "Arial Narrow", sans-serif;
	--vv-font-body: "Inter", -apple-system, "Segoe UI", sans-serif;
	--vv-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

	--vv-container: 1240px;
	--vv-radius: 6px;
	--vv-radius-sm: 4px;
	--vv-radius-pill: 999px;
	--vv-gap: clamp(1rem, 2vw, 1.75rem);

	--vv-shadow-sm: 0 1px 2px rgba(20, 21, 26, 0.06), 0 1px 1px rgba(20, 21, 26, 0.04);
	--vv-shadow-md: 0 8px 24px rgba(20, 21, 26, 0.08), 0 2px 6px rgba(20, 21, 26, 0.05);
	--vv-shadow-lg: 0 16px 40px rgba(20, 21, 26, 0.12), 0 4px 10px rgba(20, 21, 26, 0.06);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

body {
	margin: 0;
	background: var(--vv-color-paper);
	color: var(--vv-color-ink);
	font-family: var(--vv-font-body);
	font-size: 1.0625rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .vv-font-display {
	font-family: var(--vv-font-display);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin: 0 0 0.5em;
}

a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible {
	outline: 3px solid var(--vv-color-focus);
	outline-offset: 2px;
}

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

.vv-container {
	max-width: var(--vv-container);
	margin-inline: auto;
	padding-inline: var(--vv-gap);
}

.vv-eyebrow {
	display: inline-flex;
	align-items: center;
	font-family: var(--vv-font-mono);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--vv-cat-text, var(--vv-color-red));
	background: var(--vv-cat-bg, var(--vv-color-red-soft));
	padding: 0.3rem 0.75rem;
	border-radius: var(--vv-radius-pill);
	text-decoration: none;
}

.vv-meta {
	font-family: var(--vv-font-mono);
	font-size: 0.78rem;
	color: var(--vv-color-ink-soft);
}

/* Signature element: "highlighter mark" for pull quotes / vigtige fakta.
   Rough-edged SVG background mimics a real highlighter stroke. */
.vv-highlight {
	background-image: url("assets/images/highlight-stroke.svg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	padding: 0.05em 0.3em;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.vv-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--vv-color-ink);
	color: #fff;
	padding: 0.75rem 1.25rem;
	z-index: 1000;
}
.vv-skip-link:focus {
	left: var(--vv-gap);
	top: var(--vv-gap);
}