/* ============================================================
   ZENCY SIDER — TEKST + KVITTERING  ·  v1.1.0  ·  2026-09-02
   ------------------------------------------------------------
   Sidespecifik CSS til Batch D's to templates:

     zency-tekst-page.php       juridisk, redaktionel proces, kontakt
     zency-kvittering-page.php  tak-, bekraeftelses- og kampagnesider

   Alt andet paa de to sidetyper kommer fra eksisterende ark:

     zency-design-system.css  .z-*, .zency-article (prose-liftet)
     behandling.css           .zb-wrap, .zb-crumbs, .zb-faq, .zb-cardgrid,
                              .zb-author, .zb-grid, .zb-guarantee, .zb-trust
     by.css                   .zby-panel, .zby-contact*, .zby-form*
     forside.css              .zf-section, .zf-locations (kun sider m. by-faner)
     sider.css                .zs-hero, .zs-kvittering, .z-btn--sm / --lg

   Reglerne filen holder sig til:
     • Ingen bare element-selektorer. Alt haenger paa en .zst-/.zkv-klasse.
     • Ingen brandfarver som literal. Den ENESTE literal er hvid, som
       designsystemet ikke har en token for — den staar ét sted nedenfor,
       praecis som by.css goer det for .zby-contact.
     • clamp() med loft, aldrig 100vw-flader. 390px → 2560px.

   ⚠️ NY CSS-FIL: skal i LiteSpeeds `optm-css_exc` i SAMME arbejdsgang som
      deployet, og verificeres frontend UDLOGGET. UCSS/combine rammer kun
      gaester.
   ============================================================ */

.zst,
.zkv {
	/* Designsystemet har ingen hvid token. Den ene literal bor her. */
	--zst-hvid: #fff;
}

/* ============================================================
   1 · TEKSTSIDER
   ============================================================ */

/* Hvid broedtekstflade.
   .zs-hero er cream og main.zb er ogsaa cream: uden en hvid flade under
   heroen findes der ingen kant mellem sidehoved og dokument. */
.zst-flade {
	background: var(--zst-hvid);
	padding-block: clamp(2.25rem, 1.6rem + 2.6vw, 4rem);
}

/* To hvide flader i traek laeses som ét felt — saa lad dem ogsaa vaere det. */
.zst-flade + .zst-flade,
.zst-flade + .zst-kanaler { padding-top: 0; }

/* Forfatterlinket i heroens meta-linje. sider.css styler .zs-hero__meta,
   men ikke et link inde i den — og et ustylet link paa cream laeses ikke
   som et link. */
.zst .zs-hero__meta a {
	color: var(--color-sage-700);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-color: var(--color-sage-300);
}
.zst .zs-hero__meta a:hover {
	color: var(--color-olive);
	text-decoration-color: var(--color-olive);
}

/* Topbillede paa /om-zency/vores-redaktionelle-proces/. */
.zst-figur { margin: 0 0 clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); }
.zst-figur img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-xl);
}

/* Portraet paa /kontakt/. Billedet findes kun i 150x150 — derfor et loft. */
.zst-portraet { margin: 0 0 1.5rem; }
.zst-portraet img {
	display: block;
	width: clamp(4.5rem, 3.6rem + 3.6vw, 7rem);
	height: auto;
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--color-line);
}

/* Kontaktkanaler som ét panel (afloeser de tre loesrevne Elementor-kort). */
.zst-kanaler {
	background: var(--zst-hvid);
	padding-block: clamp(2rem, 1.5rem + 2vw, 3.25rem);
}
.zst-kanaler .zby-panel {
	max-width: 768px;
	margin-inline: auto;
}

/* Vilkaars-stribe. Samme figur som .zom-terms paa om-siden; den bor kun som
   inline-CSS dér, saa den er gentaget her frem for at goere om-siden
   afhaengig af dette ark. */
.zst-terms {
	border-top: 1px solid var(--color-line);
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
	padding-bottom: clamp(2rem, 4vw, 3rem);
}
.zst-terms ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
	margin: 0.7rem 0 0;
	padding: 0;
}
.zst-terms a {
	font-size: 0.95rem;
	color: var(--color-sage-700);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-color: var(--color-sage-300);
}
.zst-terms a:hover {
	color: var(--color-olive);
	text-decoration-color: var(--color-olive);
}
.zst-terms a:focus-visible {
	outline: 2px solid var(--color-sage-600);
	outline-offset: 2px;
}

/* ============================================================
   2 · DELT SEKTIONSFLADE (begge templates)
   ============================================================ */

/* Generisk sektionsflade. --cream bruges naar naboen er hvid, og omvendt:
   to ens flader i traek er ét langt felt, ikke to sektioner. */
.zst-sektion {
	background: var(--zst-hvid);
	padding-block: clamp(2.25rem, 1.6rem + 2.6vw, 4rem);
}
.zst-sektion--cream { background: var(--color-cream); }
.zst-sektion--tight { padding-block: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem); }

.zst-sektion__sub {
	max-width: 46rem;
	margin: 1.1rem 0 0;
	font-family: var(--font-source);
	font-size: 1.01rem;
	line-height: 1.65;
	color: var(--color-ink-soft);
	text-wrap: pretty;
}
.zst-sektion__body { margin-top: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); }

/* ============================================================
   3 · KVITTERINGSSIDER
   ============================================================ */

/* Soegefeltet (behandler-grid'ets [zency_location_filter]) under heroen. */
.zkv-soeg__lead {
	margin: 0;
	text-align: center;
	font-family: var(--font-source);
	font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.09rem);
	line-height: 1.6;
	color: var(--color-ink-soft);
	text-wrap: pretty;
}
.zkv-filter {
	max-width: 35rem;
	margin: clamp(1rem, 0.8rem + 0.9vw, 1.6rem) auto 0;
}

/* Indlejret GHL-formular. Hoejden saettes pr. side i wiring-filens
   inline-blok, fordi den afhaenger af den konkrete formular. */
.zkv-embed {
	max-width: 46rem;
	margin-inline: auto;
}
.zkv-embed iframe {
	display: block;
	width: 100%;
	border: 0;
}

/* Artikelunivers-figuren i blog-afsnittet. Fuld bredde med loft, aldrig 100vw.
   ⚠️ Stod indtil 02-09-2026 alene i sin egen sektion efter FAQ'en; den ligger
   nu inde i .zency-article, hvor billedteksten hoerer hjemme. Derfor er
   afstanden opad scopet med .zency-article i selektoren — prose-liftets
   efterkommer-selektorer vejer (0,1,1) og ville ellers slaa en enkelt klasse
   (KOMPONENTER §6.7). */
.zkv-afslut { margin: 0; }
.zency-article .zkv-afslut { margin: clamp(2rem, 1.5rem + 1.5vw, 2.75rem) 0 0; }
.zkv-afslut img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-xl);
}
.zkv-afslut__tekst {
	margin: 1.1rem 0 0;
	font-family: var(--font-source);
	font-size: 1.01rem;
	line-height: 1.65;
	color: var(--color-ink-soft);
	text-wrap: pretty;
}

/* Grid-sektionen paa kvitteringssiderne er sage-50 (.zb-grid) — den maa
   ikke ligge klods op ad en cream flade uden luft. */
.zkv .zb-grid {
	padding-block: clamp(2.5rem, 1.9rem + 2.4vw, 4rem);
	/* Sektionen er scroll-maalet for sidens CTA'er (#se-behandlinger).
	   Uden dette lander overskriften bag den klaebende header. */
	scroll-margin-top: var(--zb-header-h, 120px);
}

/* .zb-author har bevidst ingen topluft: paa behandlingssiderne fortsaetter
   den den cream sektion ovenover. Her foelger den en hvid flade og skal
   derfor selv aabne sektionen. */
.zkv .zb-author { padding-top: clamp(2.5rem, 1.9rem + 2.4vw, 4rem); }

/* .zb-trustpilot er tegnet til den MOERKE hero (mint-soft tekst). Paa den
   lyse hero ville linjen forsvinde i fladen. */
.zs-hero .zb-trustpilot { color: var(--color-ink-soft); }

/* ============================================================
   Lodret rytme — samme fire tokens som by.css §13, behandling.css §12,
   forside.css, behandler.css og bookside-critical.css §6 (rytme-audit
   2026-09-05, Mortens go på den samlede mockup). Ret tallet HER, aldrig i
   den enkelte regel.
     pair     overskrift → undertekst              12 · 14 · 16 · 16
     break    overskriftsgruppe → indhold/knap     32 · 32 · 36 · 40
     section  luft øverst/nederst i hver sektion   48 · 55 · 65 · 80
     (bredder 390 · 768 · 1024 · 1440)
   Målt 4/9: flader 63/36, kanaler 52/32, tæt søgeflade 40/25, undertekst 18, undertekst → indhold 36/24; kvittering: grid 64/40, forfatter 64, afslut-figur 44, anmeldelser 56.
   ============================================================ */
.zst,.zkv{--zst-pair:clamp(0.75rem,0.5rem + 0.8vw,1rem);--zst-break:clamp(2rem,1.2rem + 1.6vw,2.5rem);--zst-section:clamp(3rem,1.5rem + 4vw,5rem);--zst-section-tight:clamp(2rem,4vw,3.5rem)}
.zst .zst-flade,.zkv .zst-flade,.zst .zst-sektion,.zkv .zst-sektion,.zst .zst-kanaler,.zkv .zst-kanaler{padding-block:var(--zst-section)}
.zst .zst-sektion--tight,.zkv .zst-sektion--tight{padding-block:var(--zst-section-tight)}
.zst .zst-flade + .zst-flade,.zst .zst-flade + .zst-kanaler,.zkv .zst-flade + .zst-flade,.zkv .zst-flade + .zst-kanaler{padding-top:0}
.zst .zst-sektion__sub,.zkv .zst-sektion__sub{margin-top:0}
.zst .zst-sektion__body,.zkv .zst-sektion__body{margin-top:var(--zst-break)}
.zkv .zb-grid{padding-block:var(--zst-section)}
.zkv .zb-author{padding-block:var(--zst-section)}
.zkv .zency-article .zkv-afslut{margin-top:var(--zst-break)}
.zkv .zst-sektion .zb-brb{margin-top:var(--zst-break)}