/* ==========================================================================
   Base / designsystem. Definerer de CSS-variabler komponenterne bruger,
   plus delte klasser (.container, .btn, .eyebrow, .section, osv.).
   Skift paletten her pr. kunde.
   ========================================================================== */

:root {
	/* Palette: ÉN sand kilde. Disse tokens refererer de samme palette-variabler
	   (--mp-*) som design-system.css, så det gamle og det nye lag ALTID viser
	   samme farver. Palettes.php overstyrer --mp-* pr. kunde; fallback = moden default. */
	--color-primary: var(--mp-ink-3, #21364f);
	--color-primary-dark: var(--mp-ink, #0e1a2b);
	--color-on-primary: #ffffff;
	--color-accent: var(--mp-accent, #c4671b);
	--color-text: #1f2937;
	--color-muted: #6b7280;
	--color-surface: var(--mp-surface, #f5f6f9);
	--color-border: var(--mp-line, #e1e5ec);

	/* Form: radier flugter med design-system (--r 8 / --r-lg 12), så rundhed er ens. */
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-pill: 999px;
	--shadow-card: 0 10px 28px rgba(0, 0, 0, 0.08);
	--shadow-float: 0 8px 24px rgba(0, 0, 0, 0.18);

	/* Layout */
	--container: 1160px;
	--font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--color-text);
	line-height: 1.6;
	background: #fff;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); }

.container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 24px;
}

.section { padding: 64px 0; }

.section-h2 {
	font-size:2rem;
	line-height: 1.15;
	margin: 0 0 14px;
}

.section-lead {
	font-size: 1.1rem;
	color: var(--color-muted);
	margin: 0 0 8px;
	max-width: 60ch;
}

/* Eyebrow: farvet prik + label */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: 12px;
}

.eyebrow .dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--color-accent);
}

/* Knapper: pille, min 48px */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 24px;
	border-radius: var(--radius-pill);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	border: 2px solid transparent;
	transition: transform 0.12s ease, background 0.15s ease;
}

.btn:hover { transform: translateY(-2px); }

.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-secondary { background: var(--color-accent); color: #1a1a1a; }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.btn-light { background: #fff; color: var(--color-primary); }

.chip {
	background: var(--color-surface);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 0.85rem;
}

h1, h2, h3 { font-family: var(--font-body); }

/* FAQ details/summary basis */
details summary { cursor: pointer; }

/* Brødkrumme */
.breadcrumb { padding: 16px 0; font-size: 0.88rem; color: var(--color-muted); }
.breadcrumb__inner { display: flex; gap: 8px; flex-wrap: wrap; }
.breadcrumb a { text-decoration: none; }

/* ==========================================================================
   Header / nav / mobil-drawer / footer
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 800;
	background: #fff;
	border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 72px;
}

.site-header__brand {
	font-weight: 800;
	font-size: 1.15rem;
	text-decoration: none;
	color: var(--color-primary);
}

.site-nav { margin-left: auto; }

.site-nav__list {
	list-style: none;
	display: flex;
	gap: 22px;
	margin: 0;
	padding: 0;
}

.site-nav__list a {
	text-decoration: none;
	color: var(--color-text);
	font-weight: 500;
}

.site-nav__list a:hover { color: var(--color-primary); }

.site-header__cta { margin-left: 8px; }

/* Burger skjult på desktop */
.site-header__burger {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 8px;
}

.site-header__burger span {
	width: 24px;
	height: 2px;
	background: var(--color-text);
	display: block;
}

/* Mobil-drawer: skjult og inaktiv på desktop */
.mobile-drawer {
	display: none;
	visibility: hidden;
	pointer-events: none;
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: #fff;
	padding: 72px 24px 24px;
}

.mobile-drawer__close {
	position: absolute;
	top: 16px;
	right: 20px;
	font-size: 2rem;
	background: none;
	border: 0;
	cursor: pointer;
}

.mobile-drawer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
	font-size: 1.2rem;
}

.mobile-drawer__list a { text-decoration: none; color: var(--color-text); }

@media (max-width: 980px) {
	.site-nav,
	.site-header__cta { display: none; }
	.site-header__burger { display: flex; }
	.mobile-drawer:not([hidden]) {
		display: block;
		visibility: visible;
		pointer-events: auto;
	}
}

/* Footer */
.site-footer {
	background: var(--color-primary);
	color: #fff;
	margin-top: 64px;
}

.site-footer a { color: rgba(255, 255, 255, 0.85); }

.site-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 32px;
	padding: 56px 24px;
}

.site-footer__menu,
.site-footer__legal {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.site-footer__legal { gap: 10px; }
.site-footer__legal a { display: block; }

.site-footer__base {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding: 16px 0;
	color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   Formular (kontakt)
   ========================================================================== */
.manids-form, .contact-form { max-width: 640px; }
.form-row { margin-bottom: 16px; }
.form-row--two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-weight: 600; font-size: 0.92rem; }
.form-req { color: #c0392b; }
.form-field input, .form-field select, .form-field textarea {
	padding: 12px 14px;
	border: 1px solid var(--color-border, #d9dde3);
	border-radius: 10px;
	font: inherit;
	width: 100%;
}
.form-field textarea { min-height: 120px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
	outline: 2px solid var(--color-primary, #1f3a5f); outline-offset: 1px; border-color: transparent;
}
.form-consent { display: flex; align-items: flex-start; gap: 8px; font-size: 0.9rem; margin: 12px 0; }
.form-error { color: #c0392b; font-size: 0.85rem; }
.form-success {
	background: #eaf7ee; border: 1px solid #b6e2c4; color: #1e6b3a;
	padding: 16px 18px; border-radius: 12px;
}
@media (max-width: 600px) { .form-row--two { grid-template-columns: 1fr; } }

/* ==========================================================================
   Tilgængelighed: skip-link + synlige fokus-states
   ========================================================================== */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 2000;
	background: var(--color-primary, #1f3a5f);
	color: #fff;
	padding: 12px 18px;
	border-radius: 0 0 10px 0;
	text-decoration: none;
}
.skip-link:focus { left: 0; }

:focus-visible {
	outline: 3px solid var(--color-accent, #e0a449);
	outline-offset: 2px;
}

.btn:focus-visible {
	outline: 3px solid var(--color-accent, #e0a449);
	outline-offset: 3px;
}