/*
 * Korte alias-navne til theme.json-tokens.
 * Blokkenes CSS (og denne fil) bruger --pine, --sun osv. i stedet for de
 * lange --wp--preset--color--pine-navne, så design-CSS'en kan overføres
 * næsten 1:1 fra design/lene-mockup.html uden at skulle omskrives.
 */
:root {
	--pine: var(--wp--preset--color--pine);
	--pine-soft: var(--wp--preset--color--pine-soft);
	--stone: var(--wp--preset--color--stone);
	--sky: var(--wp--preset--color--sky);
	--sky-deep: var(--wp--preset--color--sky-deep);
	--paper: var(--wp--preset--color--paper);
	--sun: var(--wp--preset--color--sun);
	--sun-deep: var(--wp--preset--color--sun-deep);
	--berry: var(--wp--preset--color--berry);

	--line: var(--wp--custom--line);
	--line-strong: var(--wp--custom--line-strong);

	--footer-text: var(--wp--custom--footer--text);
	--footer-heading: var(--wp--custom--footer--heading);
	--footer-meta: var(--wp--custom--footer--meta);
	--footer-border: var(--wp--custom--footer--border);
	--tint-berry: var(--wp--custom--tint--berry);
	--tint-gold: var(--wp--custom--tint--gold);

	--r-lg: var(--wp--custom--radius--lg);
	--r-md: var(--wp--custom--radius--md);
	--r-sm: var(--wp--custom--radius--sm);
	--shadow: var(--wp--custom--shadow--lifted);
	--shadow-soft: var(--wp--custom--shadow--soft);

	--display: var(--wp--preset--font-family--display);
	--body: var(--wp--preset--font-family--body);

	--wrap: 1140px;
}

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

body {
	overflow-x: hidden;
}

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

a {
	color: inherit;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

h1,
h2,
h3,
h4 {
	font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 100;
}

.wrap {
	width: min(100% - clamp(28px, 6vw, 48px), var(--wrap));
	margin-inline: auto;
}

/*
 * Alle Lene-sektioner er bygget til at være fuldbredde-bånd (baggrund
 * kant-til-kant, indhold centreret via .wrap indeni) — uanset om
 * blokkens "align"-attribut rent faktisk er sat til "full" i det
 * gemte indhold. WP's constrained-layout ("is-layout-constrained")
 * spænder ellers disse ned til contentSize (1140px) med
 * "margin-left/right: auto !important", så vi bryder ud manuelt her
 * i stedet for at være afhængige af at align:"full" er sat korrekt på
 * hver eneste blok-instans.
 */
.wp-site-blocks .section,
.wp-site-blocks .pagehead,
.wp-site-blocks .hero {
	width: 100vw !important;
	max-width: none !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}
/*
 * Samme udbrud i selve editoren kan ikke bruge 100vw/50vw — det trick
 * antager at elementets egen vandrette midte falder sammen med hele
 * browservinduets midte, hvilket ikke nødvendigvis er sandt i
 * wp-admin (fx når blok-panelet i siden lægger beslag på plads). Her
 * er den relevante "fulde bredde" i stedet ganske enkelt beholderens
 * egen bredde, så vi undgår vw-regnestykket helt.
 */
.editor-styles-wrapper .section,
.editor-styles-wrapper .pagehead,
.editor-styles-wrapper .hero {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/*
 * Hero/sidehoved har altid farvet (--sky) baggrund. Følges de — eller en
 * hvilken som helst sektion — direkte af en anden sektion med samme
 * baggrund (to "sky" eller to "paper" i træk), fjernes mellemrummet
 * mellem dem, så de glider sammen til én sammenhængende flade i stedet
 * for at vise en tynd, akavet stribe af sidens bundfarve imellem to ens
 * farver. Generel regel, så det virker uanset hvilke to sektioner der
 * ender med samme baggrund på en given side.
 */
.wp-site-blocks .hero + .section--sky,
.wp-site-blocks .pagehead + .section--sky,
.wp-site-blocks .section--sky + .section--sky,
.wp-site-blocks .section--paper + .section--paper,
.editor-styles-wrapper .hero + .section--sky,
.editor-styles-wrapper .pagehead + .section--sky,
.editor-styles-wrapper .section--sky + .section--sky,
.editor-styles-wrapper .section--paper + .section--paper {
	margin-top: 0 !important;
}

/*
 * Mockuppens .section har kun lodret PADDING (56-90px), aldrig margin —
 * sektionerne støder direkte op til hinanden, og det er paddingen der
 * giver luften. WordPress' automatiske blockGap lægger dog 24px margin
 * oven på det, både mellem header og den første sektion og mellem den
 * sidste sektion og footeren, hvilket viser sig som en tynd, uønsket
 * stribe af sidens bund-farve. Hver rigtig side starter og slutter med
 * en fuldbredde-sektion (hero/sidehoved/tilmelding .. pladstavle/galleri
 * osv.), som allerede har rigelig egen padding, så mellemrummet kan
 * fjernes helt her uden at siderne kommer til at virke trange.
 */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-top: 0 !important;
}

.eyebrow {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--stone);
	margin-bottom: 14px;
}

.lede {
	font-size: clamp(17px, 0.5vw + 16px, 19px);
	color: var(--pine-soft);
	max-width: 56ch;
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--body);
	font-weight: 700;
	font-size: 16px;
	padding: 14px 24px;
	border-radius: 999px;
	border: 2px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn--primary {
	background: var(--sun);
	color: var(--pine);
	box-shadow: var(--shadow-soft);
}
.btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 28px -18px color-mix(in srgb, var(--sun-deep) 90%, transparent);
}
.btn--ghost {
	border-color: var(--line-strong);
	color: var(--pine);
}
.btn--ghost:hover {
	background: var(--sky);
	transform: translateY(-2px);
}

.section {
	padding: clamp(56px, 8vw, 90px) 0;
}
.section--sky {
	background: var(--sky);
}
.section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px 30px;
	margin-bottom: clamp(32px, 5vw, 52px);
	flex-wrap: wrap;
}
.section__head h2 {
	max-width: 16ch;
}
.updated {
	font-size: 13px;
	color: var(--stone);
	display: flex;
	align-items: center;
	gap: 8px;
}
.updated::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--sun-deep);
}

@media (max-width: 680px) {
	.section__head {
		align-items: flex-start;
		flex-direction: column;
	}
	.section__head .lede {
		max-width: none;
	}
}

/* ============================================================
   KORTGITTER — delt af lene/kortgitter, lene/regelkort og
   lene/temagitter (samme .cards/.card-gitter, jf. temabriefen).
   ============================================================ */
.cards {
	display: grid;
	grid-template-columns: repeat( var( --kolonner, 3 ), minmax( 0, 1fr ) );
	gap: clamp( 20px, 2.5vw, 28px );
}
.card {
	background: var( --paper );
	border-radius: var( --r-lg );
	overflow: hidden;
	border: 1px solid var( --line );
	box-shadow: var( --shadow-soft );
}
.card__img {
	aspect-ratio: 5 / 4;
	background: var( --sky-deep );
}
.card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.card__body {
	padding: 26px 26px 30px;
}
.card h3 {
	font-size: 22px;
	margin: 0 0 9px;
}
.card p {
	font-size: 15.5px;
	color: var( --stone );
	margin: 0;
}
.card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var( --sky );
	color: var( --sun-deep );
	margin-bottom: 16px;
}
.card__icon svg {
	width: 22px;
	height: 22px;
}

@media ( max-width: 1024px ) {
	.cards {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}
@media ( max-width: 680px ) {
	.cards {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   FORMULAR — delt af lene/kontaktkort og lene/tilmelding.
   ============================================================ */
.form {
	background: var( --paper );
	border: 1px solid var( --line );
	border-radius: var( --r-lg );
	padding: clamp( 22px, 3.5vw, 32px );
	box-shadow: var( --shadow-soft );
}
.field {
	margin-bottom: 18px;
}
.field label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin-bottom: 7px;
}
.field input,
.field textarea {
	width: 100%;
	font: inherit;
	font-size: 16px;
	padding: 12px 14px;
	border: 1.5px solid var( --line-strong );
	border-radius: var( --r-sm );
	background: var( --paper );
	color: var( --pine );
}
.field textarea {
	min-height: 110px;
	resize: vertical;
}
.lene-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.form__besked {
	padding: 14px 16px;
	border-radius: var( --r-sm );
	margin-bottom: 18px;
	font-size: 15px;
}
.form__besked--ok {
	background: color-mix( in srgb, var( --pine ) 8%, transparent );
	color: var( --pine );
}
.form__besked--fejl {
	background: color-mix( in srgb, var( --berry ) 12%, transparent );
	color: var( --berry );
}

@media ( max-width: 680px ) {
	.form {
		padding: 20px 16px;
	}
}

@media print {
	.site-header,
	.site-footer,
	.no-print {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================================
   HEADER — parts/header.html
   ============================================================ */
.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(255, 255, 255, 0.9);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--line);
}
.site-header__in {
	display: flex;
	align-items: center;
	gap: 26px;
	padding: 14px 0;
	min-width: 0;
}
.brand {
	display: flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
	min-width: 0;
}
.brand svg {
	flex-shrink: 0;
}
.brand__name {
	min-width: 0;
	font-family: var(--display);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.05;
	font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 40;
}
.brand__name small {
	display: block;
	font-family: var(--body);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--stone);
}
.nav {
	display: flex;
	gap: 24px;
	margin-left: auto;
	font-size: 15px;
	font-weight: 500;
}
.nav a {
	text-decoration: none;
	padding: 6px 0;
	border-bottom: 2px solid transparent;
	color: var(--pine);
}
.nav a:hover {
	border-color: var(--sun-deep);
}
.burger {
	display: none;
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	aspect-ratio: 1;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: none;
	border: 1px solid var(--line-strong);
	border-radius: 12px;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	color: var(--pine);
	margin-left: 12px;
}
.mobile-nav {
	border-top: 1px solid var(--line);
	background: var(--paper);
	padding: 14px 0 22px;
}
.mobile-nav .wrap {
	display: grid;
	gap: 2px;
}
.mobile-nav a {
	text-decoration: none;
	font-size: 17px;
	font-weight: 500;
	padding: 14px 4px;
	border-bottom: 1px solid var(--line);
	color: var(--pine);
}
.mobile-nav .btn {
	margin-top: 18px;
	justify-content: center;
	border-bottom: none;
}

@media (max-width: 1180px) {
	.nav {
		gap: 18px;
		font-size: 14.5px;
	}
	.site-header__in {
		gap: 18px;
	}
}

@media (max-width: 1024px) {
	.nav {
		display: none;
	}
	.burger {
		display: flex;
		margin-left: auto;
	}
	.lene-pladschip.status-chip {
		margin-left: 0;
	}
}

@media (max-width: 680px) {
	.site-header__in {
		padding: 11px 0;
	}
	.brand__name {
		font-size: 17px;
	}
}

/* ============================================================
   FOOTER — parts/footer.html
   ============================================================ */
.site-footer {
	background: var(--pine);
	color: var(--footer-text);
	padding: clamp(50px, 7vw, 70px) 0 34px;
}
.site-footer h4 {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--footer-heading);
	font-family: var(--body);
	margin-bottom: 16px;
}
.footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: clamp(30px, 4vw, 48px);
}
.footer__brand .brand__name {
	color: #fff;
}
.footer__grid p,
.footer__grid li {
	font-size: 15px;
}
.footer__grid a {
	text-decoration: none;
	color: inherit;
}
.footer__grid a:hover {
	color: var(--sun);
}
.footer__grid ul {
	display: grid;
	gap: 9px;
}
.footer__bottom {
	margin-top: 52px;
	padding-top: 22px;
	border-top: 1px solid var(--footer-border);
	display: flex;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	font-size: 13.5px;
	color: var(--footer-meta);
}

@media (max-width: 680px) {
	.footer__grid {
		grid-template-columns: 1fr;
	}
	.footer__bottom {
		margin-top: 38px;
	}
}