/* ==========================================================================
 * Base — reset, dokumentflow, typografi, hjælpeklasser.
 * ========================================================================== */

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

/*
 * hidden skal betyde skjult — også når en komponent selv sætter display.
 *
 * Uden denne regel vinder enhver `display: flex/grid` over browserens
 * `[hidden] { display: none }`, og elementet bliver stående synligt.
 * Det har kostet tre fejl i dette tema (sticky-CTA, accordion, cookiebanner),
 * så reglen står her ét sted i stedet for som undtagelser rundt omkring.
 */
[hidden] { display: none !important; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--tg-header-h) + var(--tg-space-6));
}

body {
	margin: 0;
	background:
		radial-gradient(60rem 40rem at 82% -8%, var(--tg-accent-tint), transparent 62%),
		radial-gradient(48rem 34rem at 6% 4%, var(--tg-accent-tint), transparent 58%),
		var(--tg-bg-base);
	color: var(--tg-text);
	font-family: var(--tg-font-sans);
	font-size: var(--tg-fs-400);
	line-height: var(--tg-leading);
	font-synthesis-weight: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--tg-space-4);
	color: var(--tg-text-strong);
	font-family: var(--tg-font-display);
	font-weight: 700;
	line-height: var(--tg-leading-snug);
	letter-spacing: -.02em;
	text-wrap: balance;
}

h1 { font-size: var(--tg-fs-900); line-height: var(--tg-leading-tight); }
h2 { font-size: var(--tg-fs-800); }
h3 { font-size: var(--tg-fs-600); }
h4 { font-size: var(--tg-fs-500); }

p, ul, ol, dl, table, figure, blockquote { margin: 0 0 var(--tg-space-5); }
p { text-wrap: pretty; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a {
	color: var(--tg-accent-solid);
	text-decoration-color: color-mix(in srgb, var(--tg-accent-solid) 40%, transparent);
	text-underline-offset: .18em;
	transition: color var(--tg-dur-fast) var(--tg-ease);
}
a:hover { color: var(--tg-accent-2); }

strong, b { color: var(--tg-text-strong); font-weight: 650; }

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

ul, ol { padding-left: 1.25rem; }
li { margin-bottom: var(--tg-space-2); }

hr {
	border: 0;
	height: 1px;
	background: var(--tg-border);
	margin: var(--tg-space-10) 0;
}

blockquote {
	margin-inline: 0;
	padding: var(--tg-space-5) var(--tg-space-6);
	border-left: 3px solid var(--tg-accent);
	background: var(--tg-surface);
	border-radius: 0 var(--tg-radius-lg) var(--tg-radius-lg) 0;
	color: var(--tg-text-strong);
	font-size: var(--tg-fs-500);
}

table { width: 100%; border-collapse: collapse; }
th, td {
	padding: var(--tg-space-3) var(--tg-space-4);
	border-bottom: 1px solid var(--tg-border);
	text-align: left;
}
th { color: var(--tg-text-strong); font-weight: 650; }

/* --- Formularelementer --- */
input, select, textarea, button { font: inherit; color: inherit; }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="number"], input[type="search"],
input[type="date"], select, textarea {
	width: 100%;
	padding: .8rem 1rem;
	background: var(--tg-surface-input);
	border: 1px solid var(--tg-border-strong);
	border-radius: var(--tg-radius-md);
	color: var(--tg-text-strong);
	transition: border-color var(--tg-dur-fast) var(--tg-ease), box-shadow var(--tg-dur-fast) var(--tg-ease);
}
textarea { min-height: 8rem; resize: vertical; }

input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--tg-accent);
	box-shadow: var(--tg-ring);
}

/* Synligt fokus for tastaturbrugere — aldrig fjernet, kun flyttet til :focus-visible. */
:focus-visible {
	outline: 2px solid var(--tg-accent);
	outline-offset: 2px;
	border-radius: var(--tg-radius-xs);
}

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

/* --- Type-skalering på større skærme --- */
@media (min-width: 48rem) {
	:root {
		--tg-fs-600: 1.5rem;
		--tg-fs-700: 2rem;
		--tg-fs-800: 2.75rem;
		--tg-fs-900: 3.5rem;
		--tg-fs-1000: 4.25rem;
	}
}

/* ==========================================================================
 * Layout
 * ========================================================================== */

.tg-container {
	width: 100%;
	max-width: var(--tg-container);
	margin-inline: auto;
	padding-inline: var(--tg-gutter);
}
.tg-container--narrow { max-width: var(--tg-container-narrow); }
.tg-container--wide { max-width: var(--tg-container-wide); }

.tg-main { display: block; }

.tg-section { padding-block: var(--tg-section-y); position: relative; }
.tg-section--tight { padding-block: calc(var(--tg-section-y) * .6); }
.tg-section--sunk { background: var(--tg-surface-sunk); }

/* ==========================================================================
 * Hjælpeklasser
 * ========================================================================== */

.tg-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Logo-spriten er et <svg> med width/height 0, men et inline-element danner
   stadig en linjeboks — og den skubbede headeren en linjehøjde ned. Den skal
   derfor helt ud af flowet. Ingen visibility:hidden her: den ville arve ned
   i <use>-kopierne og skjule logoet. */
.tg-logo-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.tg-skip-link {
	position: absolute;
	left: var(--tg-space-4);
	top: -100%;
	z-index: 999;
	padding: var(--tg-space-3) var(--tg-space-5);
	background: var(--tg-surface-strong);
	color: var(--tg-text-strong);
	border-radius: var(--tg-radius-md);
	box-shadow: var(--tg-shadow);
	text-decoration: none;
	transition: top var(--tg-dur-fast) var(--tg-ease);
}
.tg-skip-link:focus { top: var(--tg-space-4); }

.tg-gradient-text {
	background: var(--tg-grad-accent);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.tg-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--tg-space-2);
	font-family: var(--tg-font-display);
	font-size: var(--tg-fs-300);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tg-accent-solid);
}

.tg-lede {
	font-size: var(--tg-fs-500);
	color: var(--tg-text);
	max-width: 62ch;
}

/*
 * Ikoner er blokke, ikke inline.
 *
 * Et inline <svg> står på tekstens grundlinje, og forælderen reserverer så
 * plads til underlængder under det. I en knap med fast højde skubber det
 * ikonet nogle pixels op — tema-knappen sad 3,95 px for højt af netop den
 * grund. Som blok har ikonet ingen grundlinje at hænge på.
 */
.tg-icon { flex: none; display: block; }

/* ==========================================================================
 * Bevægelse — respekterer altid prefers-reduced-motion
 * ========================================================================== */

/*
 * Reveal-elementer.
 *
 * Skjulningen er scopet til .tg-anim, som sættes i <head> før første paint —
 * og kun når JavaScript er til stede og bevægelse ikke er reduceret. Uden den
 * klasse er alt synligt fra start, hvilket er det rigtige fallback.
 *
 * Selektorlisten der FÅR data-tg-reveal ligger i assets/js/reveal.js.
 */
.tg-anim [data-tg-reveal] {
	opacity: 0;
	transform: translateY(18px);
}
[data-tg-reveal] {
	transition: opacity .7s var(--tg-ease-out), transform .7s var(--tg-ease-out);
}
[data-tg-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	[data-tg-reveal] { opacity: 1; transform: none; }
}

/* Print: drop navigation og dekorationer. */
@media print {
	.tg-header, .tg-footer, .tg-mobile-nav, .tg-sticky-cta, .tg-cart-drawer { display: none !important; }
	body { background: #fff; color: #000; }
}