/* forta.dk · undersiderne i åbningsdesignets sprog (spor webundersider, 26-10-2026) — KUN FORSLAG.
 * Lægges OVEN PÅ aabning.css (forsidens godkendte design) og bruger kun dens tokens. Indlæses KUN på sider med
 * skabelonen side-aabning (functions.php), aldrig på forsiden. Som ekstra værn bærer forsidens HTML ingen af
 * undersidernes klasser (.hero-side, .trin, .sammen, .sms-*, .prosa, .citat, .familieliste, .fakta, .logliste,
 * .to-spalter) — byg.py --tjek dømmer det. */

/* ── Hero på en underside: samme gradient, lavere, og uden scene når siden ikke har et skud ── */
.hero-side { padding: 140px 0 88px; }
.hero-side h1 { font-size: clamp(2.25rem, 4.6vw, 3.6rem); }
.hero-side .hero-gitter.en { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
.hero-side .hero-gitter.en .ingress { max-width: 54ch; }
@media (max-width: 899px) { .hero-side { padding: 100px 0 64px; } }

/* ── Nummererede trin (arbejdsdagen, principperne, «sådan kommer I i gang») ── */
.trin { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; margin-top: 2.5rem; counter-reset: trin; }
.trin > li { list-style: none; position: relative; background: var(--flade); border: 1px solid var(--kant); border-radius: var(--r-xl);
  padding: 1.6rem; box-shadow: var(--skygge-1); counter-increment: trin; }
.trin > li::before { content: counter(trin, decimal-leading-zero); display: inline-grid; place-items: center; min-width: 42px; height: 42px;
  padding: 0 .6rem; border-radius: 12px; font-weight: 750; font-size: .95rem; color: #fff; background: linear-gradient(135deg, var(--navy-2), var(--teal-2)); }
.trin h3 { font-size: 1.15rem; letter-spacing: -.01em; margin-top: 1rem; }
.trin p { margin: .5rem 0 0; color: var(--tekst-2); }
.trin { padding: 0; }
@media (min-width: 900px) { .trin[data-antal="3"] { grid-template-columns: repeat(3, 1fr); } .trin[data-antal="4"] { grid-template-columns: repeat(4, 1fr); }
  .trin[data-antal="6"] { grid-template-columns: repeat(3, 1fr); } }
/* Tolv modulkort står 3 × 4 på bred skærm (samme regel som forsidens #moduler). */
@media (min-width: 900px) { .kortgitter[data-antal="12"], .kortgitter[data-antal="9"], .kortgitter[data-antal="6"] { grid-template-columns: repeat(3, 1fr); }
  .kortgitter[data-antal="4"] { grid-template-columns: repeat(4, 1fr); } }

/* ── Tjeklisten: tekst med et link i SAMME linje (spor weboverloeb, 01-11-2026) ──
 * aabning.css:165 gør `.tjek li` til flex. Står der et link midt i teksten, bliver løs tekst og <a> til HVER SIT
 * flex-item side om side, og ingen af dem kan krympe under deres længste ord. Målt på #248 («Læs mere
 * i privatlivspolitikken»): 20 + 10 + 237 + 10 + 141 + 10 + 5 ≈ 434 px min-content, så `.stor`s mobilspor
 * (`1fr` = minmax(auto, 1fr), aabning.css:181) blev 434 px i en 358 px kasse — 60 px vandret overløb ved 390 px.
 * Formen her er en almindelig blok med ikonet absolut i venstre side: samme indryk (20 px + .65rem) og samme
 * 2 px top som flex-formen, så rene tekstpunkter står pixel for pixel som før. Forsiden indlæser ikke denne fil. */
.tjek li { display: block; position: relative; padding-left: calc(20px + .65rem); }
.tjek li > svg { position: absolute; left: 0; top: 0; }

/* ── Brødtekst i en smal spalte (historien på Om Forta) ── */
.prosa { max-width: 68ch; }
.prosa p { color: var(--tekst-2); font-size: 1.075rem; margin: 1rem 0 0; }
.prosa p:first-of-type { margin-top: 1.5rem; }
.to-spalter { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 4rem; align-items: start; }
@media (max-width: 899px) { .to-spalter { grid-template-columns: 1fr; gap: 2rem; } }

/* ── Citat ── */
.citat { margin: 0; border-radius: var(--r-2xl); padding: clamp(1.75rem, 4vw, 2.75rem); background: var(--flade); border: 1px solid var(--kant);
  box-shadow: var(--skygge-1); border-left: 5px solid var(--primaer); }
.citat p { margin: 0; font-size: clamp(1.2rem, 2.2vw, 1.5rem); line-height: 1.35; letter-spacing: -.01em; font-weight: 650; color: var(--tekst); }
.citat footer { margin-top: 1rem; color: var(--tekst-svag); font-size: .95rem; }
.citat footer b { color: var(--tekst); }

/* ── Fakta i tal-båndets form, men uden tal: et ord og en forklaring ── */
.baand.fakta .ramme { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 899px) { .baand.fakta .ramme { grid-template-columns: 1fr 1fr; } }
@media (max-width: 380px) { .baand.fakta .ramme { grid-template-columns: 1fr; } }

/* ── Familien som en liste (Om Forta) ── */
.familieliste { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 2rem; }
.familieliste li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: .9rem; align-items: start; padding: 1rem 0; border-bottom: 1px solid var(--kant); }
.familieliste .kort-ikon { width: 40px; height: 40px; border-radius: 11px; }
.familieliste .kort-ikon svg { width: 20px; height: 20px; }
.familieliste .kort-ikon { display: grid; color: #fff; }
.familieliste b { display: block; font-size: 1.05rem; }
.familieliste a { text-decoration: none; color: var(--tekst); }
.familieliste a:hover b { color: var(--primaer); }
.familieliste a span { display: block; color: var(--tekst-2); font-size: .95rem; margin-top: .15rem; }
@media (max-width: 699px) { .familieliste { grid-template-columns: minmax(0, 1fr); } }

/* ── Sammenligningen: to spalter pr. række; på en telefon står hver række som et lille kort ── */
.sammen { margin-top: 2.5rem; border: 1px solid var(--kant); border-radius: var(--r-xl); overflow: hidden; background: var(--flade); box-shadow: var(--skygge-1); }
.sammen table { width: 100%; border-collapse: collapse; }
.sammen th, .sammen td { text-align: left; vertical-align: top; padding: 1rem 1.25rem; border-top: 1px solid var(--kant); }
.sammen thead th { border-top: 0; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tekst-svag); background: var(--flade-2); }
.sammen thead th:last-child { color: var(--primaer); }
.sammen tbody th { font-weight: 700; width: 22%; }
.sammen td:nth-child(2) { color: var(--tekst-2); width: 34%; }
.sammen td:last-child { background: color-mix(in srgb, var(--primaer-flade) 60%, transparent); }
.sammen td:last-child svg { width: 18px; height: 18px; color: var(--primaer); vertical-align: -3px; margin-right: .4rem; }
@media (max-width: 699px) {
  .sammen thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sammen tr, .sammen th, .sammen td { display: block; width: auto !important; }
  .sammen tbody tr { border-top: 1px solid var(--kant); padding: .25rem 0; }
  .sammen tbody tr:first-child { border-top: 0; }
  .sammen tbody th, .sammen td { border-top: 0; padding: .45rem 1.1rem; }
  .sammen tbody th { padding-top: 1rem; }
  .sammen td::before { content: attr(data-maerkat); display: block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tekst-svag); }
  .sammen td:last-child { margin: 0 .6rem .8rem; border-radius: var(--r-md); padding: .6rem .7rem; }
  .sammen td:last-child::before { color: var(--primaer); }
}

/* ── Forta SMS: en telefon med en samtale, tegnet i HTML (ingen skærmbilleder: de har demonavne i pixels) ── */
.sms-scene { position: relative; display: grid; place-items: center; min-height: 440px; }
.sms-telefon { width: min(320px, 82%); border-radius: 38px; border: 8px solid #071a2b; background: #F3F6F9; box-shadow: var(--skygge-3);
  padding: 1.1rem .9rem 1.4rem; color: #0F1F2E; transform: rotate(-3deg); }
.sms-hoved { text-align: center; font-size: .78rem; color: #5A6D7E; padding-bottom: .8rem; border-bottom: 1px solid #DCE5EC; }
.sms-hoved b { display: block; font-size: .95rem; color: #0F1F2E; }
.sms-traad { display: grid; gap: .55rem; padding-top: .9rem; }
.boble { max-width: 84%; padding: .6rem .8rem; border-radius: 18px; font-size: .9rem; line-height: 1.4; }
.boble-ind { background: #fff; border: 1px solid #DCE5EC; border-bottom-left-radius: 6px; }
.boble-ud { justify-self: end; background: #136C82; color: #fff; border-bottom-right-radius: 6px; }
.sms-tid { justify-self: center; font-size: .72rem; color: #5A6D7E; }
.sms-scene .svaev-1 { left: 0; bottom: 36px; }
.sms-scene .svaev-2 { right: 0; top: 30px; }
/* Mobil: aabning.css giver .scene et fast højde/bredde-forhold (til skuddene) — telefonen her har sin egen højde.
 * Svævekortet står under telefonen i stedet for oven på samtalen. */
@media (max-width: 899px) { .sms-scene { min-height: 0; aspect-ratio: auto; padding: .5rem 0 0; gap: 1rem; }
  .sms-scene .svaev { position: static; justify-self: start; } .sms-scene .svaev-2 { display: none; } .sms-telefon { transform: none; } }

/* Leveringsloggen på SMS-siden: hver besked med sin status */
.logliste { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.logliste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem 1rem; align-items: center; background: rgb(255 255 255 / .96);
  color: #0F1F2E; border-radius: var(--r-lg); padding: .8rem 1rem; box-shadow: 0 10px 30px rgb(0 0 0 / .25); }
.logliste small { grid-column: 1 / -1; color: #44576A; font-size: .82rem; }
.status { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 700; padding: .15rem .6rem; border-radius: 999px; white-space: nowrap; }
.status-ok { background: #DDF5EA; color: #0E5A3A; }
.status-fejl { background: #FDE4E4; color: #8A1F1F; }
.status svg { width: 14px; height: 14px; }

/* ── Jura-siderne: #22 /privatlivspolitik/ og #195 /privatlivspolitik-app/ (spor webjuraside, 01-11-2026) ──
 * De to sider får skabelonen side-aabning (_wp_page_template), men deres post_content er jura og må ikke røres
 * (regel 2), og #195 skrives om af et andet spor samtidig. Derfor rammes de på FORMEN, ikke på teksten eller en md5:
 * post-content hvis direkte barn er en <h1> (#195: klassisk indhold, h1 + wpautop-afsnit) eller en <section
 * class="legal"> (#22: den gamle sides markup). Ingen underside har nogen af delene som direkte barn — de har alle
 * én <div class="side">, <div class="pd">, <script> eller section.page-hero først (målt i sider-spejl.json 01-11).
 * Uden :has() (browsere før 2022-23) står siden i side-aabning uden læseramme: læsbar, men bred. */
.entry-content:has(> h1, > .legal) {
  --jura-maal: 46rem; --jura-g: 16px;
  padding: 0 var(--jura-g) 5rem; color: var(--tekst-2); font-size: 1.0625rem; line-height: 1.75;
}
@media (min-width: 560px) { .entry-content:has(> h1, > .legal) { --jura-g: 24px; } }
/* Læsebredden: hvert barn (og #22's .legal-body) er højst 46rem og centreret. */
.entry-content:has(> h1, > .legal) > :not(h1:first-child, .legal),
.entry-content:has(> .legal) .legal-body { max-width: var(--jura-maal); margin: 0 auto 1.1em; }
.entry-content:has(> .legal) .legal-body > * { margin-block: 0 1.1em; }
/* Titlen i et mørkt bånd, som undersidernes hero: headeren (.top) er hvid og ligger ABSOLUT øverst, så den skal have
 * mørk bund under sig (kontrol/moerk_kontrast.py vogter netop det). Båndet er en ÆGTE baggrund, ikke border-image —
 * et værn der læser baggrunde, kan ikke se en border-image, og det ville have ret i at klage. Fuld bredde uden at gøre
 * siden bredere: negativ margin lig spaltens gutter, og padding så teksten flugter med brødtekstens venstrekant
 * (100% her = indholdets bredde, som er viewport − 2 × gutter). */
.entry-content:has(> h1) > h1:first-child,
.entry-content:has(> .legal) .legal .sec-h {
  margin: 0 calc(-1 * var(--jura-g)) 2.5rem; padding: 136px max(var(--jura-g), calc((100% - var(--jura-maal)) / 2 + var(--jura-g))) 56px;
  max-width: none; color: #fff;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 55%, var(--teal) 100%);
}
.entry-content:has(> h1) > h1:first-child,
.entry-content:has(> .legal) .legal .sec-h h1 {
  font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.08; letter-spacing: -.03em; font-weight: 780; color: #fff;
}
.entry-content:has(> .legal) .legal .sec-h h1 { margin: .75rem 0 0; }
.entry-content:has(> .legal) .legal .eyebrow { display: inline-flex; gap: .5rem; align-items: center; color: var(--hero-tekst);
  font-size: .82rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.entry-content:has(> .legal) .legal .eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--mint); }
@media (max-width: 899px) { .entry-content:has(> h1) > h1:first-child, .entry-content:has(> .legal) .legal .sec-h { padding-top: 100px; padding-bottom: 40px; } }
/* #22's gamle klasser (.legal, .wrap.narrow, .rv) kendes ikke af aabning.css; de får kun det nødvendige. */
.entry-content:has(> .legal) .legal, .entry-content:has(> .legal) .wrap { margin: 0; padding: 0; max-width: none; background: none; }
.entry-content:has(> .legal) .rv { opacity: 1; transform: none; }
/* Overskrifterne: tydelige afsnitsskel, så «Dine rettigheder» / «Hvor længe» (sletning) kan findes ved at skimme. */
.entry-content:has(> h1, > .legal) h2 {
  margin-top: 2.6rem; margin-bottom: .8rem; padding-top: 1.6rem; border-top: 1px solid var(--kant);
  font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.25; letter-spacing: -.012em; font-weight: 720; color: var(--tekst);
  scroll-margin-top: 1.5rem; overflow-wrap: anywhere;
}
.entry-content:has(> h1, > .legal) h3 { margin-top: 1.8rem; margin-bottom: .5rem; font-size: 1.1rem; font-weight: 700; color: var(--tekst); }
.entry-content:has(> h1, > .legal) :is(p, li) { overflow-wrap: break-word; }
.entry-content:has(> h1, > .legal) :is(strong, b) { color: var(--tekst); }
.entry-content:has(> h1, > .legal) :is(ul, ol) { padding-left: 1.35em; }
.entry-content:has(> h1, > .legal) li { margin: .35em 0; }
.entry-content:has(> h1, > .legal) a { color: var(--primaer); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.entry-content:has(> h1, > .legal) a:hover { color: var(--primaer-hover); }