/* FAKTIVE artiklerne 2026 (de 20 artikler i viden/).
   Bygges af .arbejde/undersider/byg-artikel.py; bygger oven på assets/regelsaet-2026.css (farver, skrift, toppen,
   faktabåndet, kapitlerne, indholdsfortegnelsen, artikellisten) og assets/krav-2026.css (kravkortenes rækker).

   En artikel er til at læse, så den er rolig og uden fotos. Fladerne skifter, så to naboer aldrig har samme baggrund:
     toppen (creme) med titlen, indledningen og faktabåndet · teksten (lys) i én læsespalte ·
     regelsæt og kravkort (creme) · flere artikler (lys) · kontakt og footer (aubergine)
   Her står kun det, der er særligt for artiklerne: titlens størrelse, lister i teksten, noter, kilder og
   rækkerne med regelsæt. */

/* ---------- toppen: titlen og faktabåndet, hvor hvert faktum brydes afbalanceret ---------- */
section.hero.ar-top h1{max-width:15em;font-size:clamp(40px,5.2vw,78px) !important;line-height:1.02 !important;text-wrap:balance;hyphens:manual;-webkit-hyphens:manual}
.ar-top .rg-top-tekst > p.rg-svar{max-width:36em}
.ar-top .rg-svar strong{font-weight:500}
.ar-fakta dd{text-wrap:balance}

/* ---------- teksten ---------- */
.ar-tekst .rg-kapitel p{font-weight:300}
.ar-tekst .rg-kapitel strong{font-weight:500}
.ar-tekst .rg-kapitel p.rg-ref{font-weight:500}
/* trinlister og oversigter: navnet til venstre, forklaringen til højre, på hårlinjer */
.ar-tekst .xmap{list-style:none;margin:28px 0 30px;padding:0;border-top:1px solid var(--rg-streg)}
.ar-tekst .xmap li{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:6px 28px;align-items:baseline;
  padding:16px 0 17px;border-bottom:1px solid var(--rg-streg)}
.ar-tekst .xmap b{font-weight:600;font-size:16.5px;line-height:1.4;color:var(--rg-aub)}
.ar-tekst .xmap span{font-size:16.5px;line-height:1.6;font-weight:300;color:var(--rg-tekst)}
.ar-tekst .xmap a{color:var(--rg-aub)}
/* noten: en oplysning fra den gamle margen, der ikke står i teksten (fx en lovhenvisning) */
.ar-tekst .rg-kapitel p.ar-note{margin-top:22px;padding-left:16px;border-left:2px solid var(--rg-kobber);font-size:15px;line-height:1.55;
  font-weight:400;color:var(--rg-daemp)}
.ar-go{margin-top:24px !important}
.ar-go a{font-family:var(--font-display);font-stretch:125%;font-weight:500;font-size:17px;text-decoration:none;
  border-bottom:1px solid rgba(60,42,68,.3);padding-bottom:3px}
.ar-go a:hover{border-color:var(--rg-aub)}
/* kilderne: samme spalte, mindre tekst */
.ar-kilder h2{font-size:clamp(24px,2.2vw,30px) !important}
.ar-tekst .ar-kilder p{font-size:15.5px;line-height:1.6}
.ar-tekst .ar-kilder p strong{font-weight:600;color:var(--rg-aub)}

/* ---------- regelsæt og kravkort: én spalte, listerne i fuld bredde ----------
   Regelsættenes navne står i samme kolonne som kravkortenes navne, og forklaringerne under hinanden */
.ar-videre{background:var(--rg-creme)}
/* uden regelsæt og kravkort ligger artiklerne direkte under teksten og får derfor den anden flade */
.rg-artikler.ar-artikler-creme{background:var(--rg-creme)}
.ar-blok + .ar-blok{margin-top:clamp(44px,5vw,64px)}
.ar-blok-hoved{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:14px}
.ar-blok-hoved .rg-ref{margin:0}
.ar-rs{display:grid;grid-template-columns:78px minmax(0,.85fr) minmax(0,1.3fr) 20px;gap:4px clamp(20px,2.5vw,36px);align-items:baseline;
  padding:17px 0 18px;color:inherit;text-decoration:none}
.ar-rs b{grid-column:1 / 3}
.ar-rs::after{content:"→";color:var(--rg-kobber);opacity:0;transform:translateX(-6px);transition:opacity .25s ease,transform .35s var(--rg-ud)}
.ar-rs:hover::after,.ar-rs:focus-visible::after{opacity:1;transform:none}
.ar-rs:focus-visible{outline:2px solid var(--rg-kobber);outline-offset:4px;border-radius:4px}
.ar-rs b{font-family:var(--font-display);font-stretch:125%;font-weight:500;font-size:18px;line-height:1.3;color:var(--rg-aub);
  justify-self:start;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .45s var(--rg-ud)}
.ar-rs:hover b{background-size:100% 1px}
.ar-rs span{font-size:15.5px;line-height:1.5;font-weight:300;color:var(--rg-tekst)}

@media (max-width:900px){
  .ar-rs{grid-template-columns:62px minmax(0,1fr)}
  .ar-rs span{grid-column:2}
  .ar-rs::after{display:none}
}
@media (max-width:760px){
  .ar-tekst .xmap li{grid-template-columns:1fr;gap:4px}
}