/* =========================================================
   Cars & Care · juridisk.css
   Fælles for de tre juridiske sider: privatlivspolitik.html,
   handelsbetingelser.html og lejebetingelser.html.
   Bygger på .doc, .toc og .prose i site.css (afsnit 25).
   Kun tokens og temavariabler. Kandidat til site.css.
   ========================================================= */

/* Afsnit: hårstreg øverst med en kort blå streg, som trinene på forsiden */
.legal__section { position: relative; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.legal__section::before { content: ""; position: absolute; top: -1px; left: 0; width: 2.5rem; height: 2px; background: var(--link); }
.legal__section + .legal__section { margin-top: var(--space-7); }
.prose .legal__section > h2 { margin-top: 0; }

/* Virksomhedsoplysninger som hårstregsrækker (dl.facts) i brødteksten */
.legal__facts { font-style: normal; }
.legal__facts .facts { margin-top: var(--space-2); }
.legal__facts .facts__row { display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.legal__facts .facts dt { padding-top: .28rem; }
.legal__facts .facts dd { font-weight: 600; text-align: left; }
/* Linkene i rækkerne får et klikfelt på 44 px uden at ændre rækkens højde */
.legal__facts .facts dd a { display: inline-block; padding-block: .6rem; margin-block: -.6rem; }

/* Lister med flueben i brødteksten: ingen ekstra prik fra .prose */
.prose .list-check > li { padding-left: 1.75rem; }
.prose .list-check > li::before { content: none; }
.prose .list-check { gap: .8rem; }

/* Notits i brødteksten: samme luft som resten af afsnittet */
.prose .legal__section .notice { margin-block: var(--space-5) 0; }

/* "Kort fortalt" øverst i betingelserne (lejebetingelser): .summary-kort med dl.facts */
.legal__summary { max-width: 40rem; }
.legal__summary .facts { margin-top: var(--space-4); }
.prose > .legal__summary + * { margin-top: var(--space-8); }

/* Tabel med oplysninger (privatlivspolitik): stables som rækker på mobil */
.data-table th[scope="row"] { width: 30%; }
.data-table td { color: var(--fg); }
.data-table td.data-table__purpose { width: 26%; }

@media (max-width: 640px) {
  .legal__section + .legal__section { margin-top: var(--space-6); }
  .data-table thead { display: none; }
  .data-table, .data-table tbody { display: block; }
  .data-table tr { display: block; padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
  .data-table th, .data-table td { display: block; width: auto; padding: 0; border: 0; }
  .data-table th[scope="row"], .data-table td.data-table__purpose { width: auto; }
  .data-table td { margin-top: var(--space-3); }
  .data-table td::before { content: attr(data-label); display: block; margin-bottom: .15rem; font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); }
}