/* ============================================================
   ZENCY SIDER  ·  delte komponenter til nye sidetyper (.zs-*)
   ------------------------------------------------------------
   Handle: zency-sider · afhænger af zency-design-system + zency-behandling.

   Tokens, .z-*-vokabularet og .zency-article-prose-liftet kommer derfra.
   Her bor KUN det de to ikke har: en lys hero, paginering, prislistetabel,
   kvitteringsblok, tom tilstand, filterchips og knap-størrelser.

   Tre regler filen holder sig til — de er grunden til at den kan loades
   sammen med hvad som helst:

   • Ingen bare element-selektorer. Alt hænger på en .zs-*- eller
     .zency-article-klasse, så en regel aldrig kan bløde ud over en side
     der blot har filen i kø.
   • Ingen hex-farver ud over ren hvid (#fff). Systemet har bevidst intet
     hvid-token — designsystemet skriver den også som literal — så den ene
     farve står direkte; alt andet går gennem var(--color-*).
   • Komponenter der kan stå inde i .zency-article bærer .zency-article i
     selektoren. Prose-liftet styler p/ul/li/table som efterkommere (0,1,1),
     og en enkelt komponentklasse (0,1,0) taber tavst.

   Navigation, paginering og chips er sage-grønne. Oliven er reserveret til
   den primære handling på siden — en pager i oliven stjæler blikket fra den.
   ============================================================ */


/* ============================================================
   0 · KNAP-STØRRELSER — .z-btn--sm / .z-btn--lg
   ------------------------------------------------------------
   Størrelserne er lavet ad hoc pr. side indtil nu (en stor hero-knap, en
   lille knap i en kortfod). Her står de ét sted, og de rører KUN padding og
   font-size: højde, radius, farve og de link-/knap-garantier designsystemet
   giver .z-btn arves uændret. Derfor er der heller ingen :hover/:focus her —
   varianten ændrer ikke farve, så der er intet at gen-deklarere.
   ============================================================ */
.z-btn--sm { padding: 0.6rem 1.4rem; font-size: 0.9rem; }
.z-btn--lg { padding: 1rem 2.2rem; font-size: 1.06rem; }

/* Størrelserne ender ofte på et <button> (paginering, filtre). Uden for .zby
   nulstiller ingen den native knap-chrome, og knappen får browserens egen
   baggrund og kant oven i vores. */
button.z-btn--sm,
button.z-btn--lg { appearance: none; -webkit-appearance: none; }


/* ============================================================
   1 · LYS HERO — .zs-hero
   ------------------------------------------------------------
   Sidehoved til de sidetyper hvor et fotografi med scrim er forkert:
   vilkår, kvitteringer, oversigter, arkiver. Ren tekst på sidens egen
   cremeflade, så heroen læses som toppen af siden og ikke som et banner.

   Den lodrette rytme er den samme som den mørke heros: overskrift og
   manchet står tæt (12/16px), handling og meta-linje langt fra (36/48px).
   Springet mellem de to par er dét der gør at man kan klikke mellem
   sidetyper uden at layoutet hopper.

   ⚠ Sektionen under heroen skal have en synlig anden flade (hvid), ellers
   løber hero og indhold sammen til ét langt felt.
   ============================================================ */
.zs-hero { background: var(--color-cream); }
.zs-hero__inner {
	box-sizing: border-box;
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	/* Toppen matcher .zb-hero__inner; bunden er kortere, fordi der ikke
	   ligger et trust-badge og overlapper nedenunder. */
	padding: 5rem 1.25rem 3rem;
}
@media (min-width: 768px) {
	.zs-hero__inner { padding: 6rem 2rem 3.5rem; }
}

.zs-hero__eyebrow { margin: 0 0 0.9rem; }
.zs-hero__h1 { margin: 0; color: var(--color-forest); text-wrap: balance; }
.zs-hero__intro {
	margin: 12px 0 0;
	max-width: 60ch;
	color: var(--color-ink-soft);
	text-wrap: pretty;
}
.zs-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 36px 0 0;
}
.zs-hero__meta {
	margin: 11px 0 0;
	font-family: var(--font-source);
	font-size: 0.875rem;
	color: var(--color-ink-soft);
}
/* Uden CTA-række bliver meta-linjen selv det andet "par" og skal have
   det store spring — ellers klistrer den til manchetten. */
.zs-hero__h1 + .zs-hero__meta,
.zs-hero__intro + .zs-hero__meta { margin-top: 36px; }

@media (min-width: 768px) {
	.zs-hero__intro { margin-top: 16px; }
	.zs-hero__cta { margin-top: 48px; }
	.zs-hero__meta { margin-top: 15px; }
	.zs-hero__h1 + .zs-hero__meta,
	.zs-hero__intro + .zs-hero__meta { margin-top: 48px; }
}

/* Centreret — tak-/kvitteringssider og andre fokale sidehoveder. Heroen er
   ét af de få steder hvor centrering bevares hele vejen ned på mobil. */
.zs-hero--centreret .zs-hero__inner { max-width: 48rem; text-align: center; }
.zs-hero--centreret .zs-hero__intro { margin-inline: auto; }
.zs-hero--centreret .zs-hero__cta { justify-content: center; }

/* Smal — juridiske dokumenter. Samme mål som .zb-wrap--narrow, så heroen
   flugter med brødteksten under den. */
.zs-hero--smal .zs-hero__inner { max-width: 768px; }


/* ============================================================
   2 · PAGINERING — .zs-pager
   ------------------------------------------------------------
   Markup kommer fra zency_pager(). Grid frem for flex, fordi pilene skal
   blive i deres kolonne selv når den ene mangler: på første side ligger
   "Næste" stadig i højre side, og tallene står stadig i midten.

   Mobil: tallene på egen række over pilene, så en lang talrække ikke
   klemmer knapperne sammen.
   ============================================================ */
.zs-pager {
	display: grid;
	align-items: center;
	gap: 1rem;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"tal tal"
		"forrige naeste";
	margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0;
}
@media (min-width: 600px) {
	.zs-pager {
		grid-template-columns: 1fr auto 1fr;
		grid-template-areas: "forrige tal naeste";
	}
}
.zs-pager__pil--forrige { grid-area: forrige; justify-self: start; }
.zs-pager__pil--naeste { grid-area: naeste; justify-self: end; }
.zs-pager__pil svg { width: 1rem; height: 1rem; flex: none; }

.zs-pager__tal {
	grid-area: tal;
	justify-self: center;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 2,75rem = 44px: WCAG 2.5.8's mindstemål for et trykmål, og samtidig
   omtrent højden på .z-btn--sm, så tal og pile står på samme linje. */
.zs-pager__nr {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding-inline: 0.6rem;
	font-family: var(--font-dosis);
	font-weight: 600;
	font-size: 1rem;
	background: transparent;
	border: 1px solid var(--color-line);
	border-radius: 9999px;
	color: var(--color-sage-700);
	text-decoration: none;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
/* a.zs-pager__nr (0,1,1) frem for .zs-pager__nr (0,1,0): den scopede
   :where(a){color:inherit}, der neutraliserer Hello-resettets #c36, vejer
   præcis lige så meget som en enkelt klasse, og så afgør indlæsnings-
   rækkefølgen farven. Element + klasse afgør den uanset rækkefølge. */
a.zs-pager__nr,
a.zs-pager__nr:link,
a.zs-pager__nr:visited { color: var(--color-sage-700); text-decoration: none; }
a.zs-pager__nr:hover,
a.zs-pager__nr:focus,
a.zs-pager__nr:active {
	background: var(--color-sage-50);
	border-color: var(--color-sage-400);
	color: var(--color-sage-800);
}
a.zs-pager__nr:focus-visible { outline: 2px solid var(--color-sage-500); outline-offset: 2px; }

.zs-pager__nr--aktiv,
a.zs-pager__nr--aktiv {
	background: var(--color-sage-500);
	border-color: var(--color-sage-500);
	color: #fff; /* ren hvid — systemet har intet hvid-token, se filhovedet */
}

.zs-pager__brud {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	height: 2.75rem;
	color: var(--color-sage-400);
}

/* Havner pageren alligevel inde i en artikel, tegner prose-liftet
   ol-markers på hvert tal. Guard frem for en fejl der først ses live. */
.zency-article .zs-pager__tal,
.zency-article .zs-pager__tal li { margin: 0; padding: 0; list-style: none; }
.zency-article .zs-pager__tal li::before { content: none; }


/* ============================================================
   3 · PRISLISTETABEL — .zs-pristabel
   ------------------------------------------------------------
   En lang prisliste med en handling pr. række. Bygger videre på
   .zency-article table (sage-kanter, sage-50 thead, zebra) frem for at
   blive en fjerde priskort-variant — tre findes allerede.

   ⚠ Hver selektor bærer .zency-article. Uden præfikset vejer reglerne
   mindre end prose-liftets egne table-regler og taber tavst.
   ============================================================ */
.zency-article .zs-pristabel-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 1.8rem 0;
}
/* Prose-liftet gør tabeller til display:block under 600px for at kunne
   scrolle dem. Her ejer wrapperen scrollen, så tabellen forbliver en
   tabel — ellers falder kolonnejusteringen fra hinanden. */
.zency-article table.zs-pristabel { margin: 0; min-width: 32rem; }
@media (max-width: 600px) {
	.zency-article table.zs-pristabel { display: table; }
}

.zency-article .zs-pristabel th,
.zency-article .zs-pristabel td { vertical-align: middle; }
.zency-article .zs-pristabel tbody tr:hover td { background: var(--color-sage-100); }

.zency-article .zs-pristabel__navn { color: var(--color-forest); font-weight: 600; }
.zency-article .zs-pristabel__note {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.45;
	color: var(--color-ink-soft);
}
.zency-article .zs-pristabel__pris {
	font-family: var(--font-dosis);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--color-forest);
	white-space: nowrap;
}
.zency-article .zs-pristabel__handling { text-align: right; white-space: nowrap; }
.zency-article .zs-pristabel__handling .z-btn { white-space: nowrap; }


/* ============================================================
   4 · KVITTERING — .zs-kvittering
   ------------------------------------------------------------
   Succes-hoved + opsummering. Fluebenet er den samme figur som
   .z-summary__list .ic (sage-cirkel, hvidt flueben), bare i stor
   udgave — siden skal se ud som resten af huset, ikke som en
   bekræftelsesskærm fra et andet system.
   ============================================================ */
.zs-kvittering { background: var(--color-cream); }
.zs-kvittering__inner {
	box-sizing: border-box;
	width: 100%;
	max-width: 640px;
	margin-inline: auto;
	padding: 4rem 1.25rem 3rem;
	text-align: center;
}
@media (min-width: 768px) {
	.zs-kvittering__inner { padding: 5rem 2rem 3.5rem; }
}

.zs-kvittering__ic {
	display: grid;
	place-items: center;
	width: clamp(3.5rem, 3rem + 2.4vw, 4.5rem);
	height: clamp(3.5rem, 3rem + 2.4vw, 4.5rem);
	margin: 0 auto 1.5rem;
	background: var(--color-sage-500);
	border-radius: 50%;
}
.zs-kvittering__ic svg {
	width: 52%;
	height: 52%;
	fill: none;
	stroke: #fff; /* ren hvid — systemet har intet hvid-token, se filhovedet */
}

.zs-kvittering__h1 { margin: 0; color: var(--color-forest); text-wrap: balance; }
.zs-kvittering__lead {
	margin: 12px auto 0;
	max-width: 46ch;
	color: var(--color-ink-soft);
	text-wrap: pretty;
}
.zs-kvittering__ref {
	margin: 1.25rem 0 0;
	font-family: var(--font-dosis);
	font-size: 0.95rem;
	letter-spacing: 0.06em;
	color: var(--color-sage-700);
}
.zs-kvittering__ref strong { color: var(--color-forest); font-weight: 700; }

.zs-kvittering__liste {
	margin: 2.25rem 0 0;
	padding: clamp(1.1rem, 0.9rem + 1vw, 1.6rem) clamp(1.1rem, 0.85rem + 1.4vw, 1.75rem);
	background: #fff; /* ren hvid — systemet har intet hvid-token, se filhovedet */
	border: 1px solid var(--color-line);
	border-radius: var(--radius-xl);
	text-align: left;
}
/* Hver linje er en <div> om et dt/dd-par — samme greb som prisboksens fod,
   så et dl kan flex'es uden at miste sin semantik. */
.zs-kvittering__linje {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.35rem 1rem;
	padding-block: 0.8rem;
	border-bottom: 1px solid var(--color-line);
}
.zs-kvittering__linje:first-child { padding-top: 0; }
.zs-kvittering__linje:last-child { padding-bottom: 0; border-bottom: 0; }
.zs-kvittering__linje dt {
	margin: 0;
	font-family: var(--font-source);
	font-size: 0.95rem;
	color: var(--color-ink-soft);
}
.zs-kvittering__linje dd {
	margin: 0;
	font-family: var(--font-source);
	font-weight: 600;
	color: var(--color-forest);
	text-align: right;
}

/* Totallinjen: sage-streg over i stedet for en hårfin skillelinje, og tallet
   i Dosis som alle andre tal i systemet. Selektoren gentager forælderen, så
   den slår :last-child ovenfor uanset hvor i listen totalen står. */
.zs-kvittering__liste .zs-kvittering__linje--total {
	margin-top: 0.35rem;
	padding-block: 1rem 0;
	border-top: 1px solid var(--color-sage-200);
	border-bottom: 0;
}
.zs-kvittering__linje--total dt {
	font-family: var(--font-dosis);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-sage-600);
}
.zs-kvittering__linje--total dd {
	font-family: var(--font-dosis);
	font-weight: 700;
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	color: var(--color-forest);
}

.zs-kvittering__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin: 2rem 0 0;
}


/* ============================================================
   5 · TOM TILSTAND — .zs-tom
   ------------------------------------------------------------
   Vises når et arkiv eller et filter ikke giver resultater. Sage-panel som
   .zby-panel, så den læses som en del af siden og ikke som en fejlbesked.
   ============================================================ */
.zs-tom {
	box-sizing: border-box;
	max-width: 34rem;
	margin-inline: auto;
	padding: clamp(2rem, 1.5rem + 2.5vw, 3rem) clamp(1.25rem, 1rem + 2vw, 2.25rem);
	background: var(--color-sage-50);
	border: 1px solid var(--color-sage-200);
	border-radius: var(--radius-xl);
	text-align: center;
}
.zs-tom__ic {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	margin: 0 auto 1rem;
	color: var(--color-sage-400);
}
.zs-tom__ic svg { width: 100%; height: 100%; }
.zs-tom__h {
	margin: 0;
	font-family: var(--font-merriweather);
	font-weight: 400;
	font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.45rem);
	line-height: 1.25;
	letter-spacing: 0.6px;
	color: var(--color-forest);
	text-wrap: balance;
}
.zs-tom__tekst {
	margin: 0.7rem auto 0;
	max-width: 44ch;
	font-family: var(--font-source);
	font-size: 1.0588rem;
	line-height: 1.6;
	color: var(--color-ink-soft);
	text-wrap: pretty;
}
.zs-tom__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	margin: 1.5rem 0 0;
}


/* ============================================================
   6 · FILTER-/KATEGORICHIPS — .zs-chips
   ------------------------------------------------------------
   Samme pille som forsidens landsdels-faner, men som links: en chip
   skifter side, den skifter ikke panel, og skal derfor kunne åbnes i en
   ny fane og crawles. Aktiv chip er sage-fyldt — oliven ville trække
   blikket væk fra sidens egentlige handling.
   ============================================================ */
.zs-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0 0 clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
}
.zs-chips--centreret { justify-content: center; }

.zs-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 2.75rem;
	padding: 0.55rem 1.4rem;
	font-family: var(--font-dosis);
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.3px;
	background: #fff; /* ren hvid — systemet har intet hvid-token, se filhovedet */
	border: 1px solid var(--color-sage-300);
	border-radius: 9999px;
	color: var(--color-sage-700);
	text-decoration: none;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
/* Element + klasse (0,1,1) af samme grund som ved pagerens tal. */
a.zs-chip,
a.zs-chip:link,
a.zs-chip:visited { color: var(--color-sage-700); text-decoration: none; }
a.zs-chip:hover,
a.zs-chip:focus,
a.zs-chip:active { border-color: var(--color-sage-500); color: var(--color-sage-800); }
a.zs-chip:focus-visible { outline: 2px solid var(--color-sage-500); outline-offset: 2px; }

.zs-chip--aktiv,
a.zs-chip--aktiv,
a.zs-chip--aktiv:link,
a.zs-chip--aktiv:visited,
a.zs-chip--aktiv:hover,
a.zs-chip--aktiv:focus,
a.zs-chip--aktiv:active {
	background: var(--color-sage-500);
	border-color: var(--color-sage-500);
	color: #fff; /* ren hvid — systemet har intet hvid-token, se filhovedet */
}

.zs-chip__antal { font-weight: 400; font-size: 0.82rem; opacity: 0.75; }

/* Inde i en artikel understreger prose-liftet alle links. En chip er en
   knap-form og skal aldrig være understreget. */
.zency-article a.zs-chip { text-decoration: none; }


/* ============================================================
   7 · HJÆLPER — kun for skærmlæsere
   ------------------------------------------------------------
   Bruges af pagerens tal ("Side 3") og prislistetabellens handlingskolonne,
   hvor en synlig kolonne-overskrift ville være støj men en tom <th> gør
   tabellen svær at navigere med skærmlæser.
   ============================================================ */
.zs-skjult {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}