/* Guides: /guides (oversigt som liste) og /guides/<guide> (artikel med
   indholdsfortegnelse i siden). Bygger på tokens fra style.css. */

main.g-main { max-width: 900px; display: block; text-align: left; padding: 48px 32px 110px; }
main.g-main.bred { max-width: 1120px; }

.g-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--text-faint); font-size: 0.85rem; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.g-meta .dot { color: var(--border-strong); }

/* Brødtekst */
.g-prosa { max-width: 68ch; color: var(--text-muted); font-size: 1.04rem; line-height: 1.75; }
.g-prosa h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); margin: 56px 0 14px; text-align: left; scroll-margin-top: 24px; }
.g-prosa h3 { font-family: 'Inter', system-ui, sans-serif; font-size: 1.04rem; font-weight: 600; color: var(--text); margin: 28px 0 6px; }
.g-prosa p + p { margin-top: 14px; }
.g-prosa strong { color: var(--text); font-weight: 500; }
.g-prosa a { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }

/* Kort svar øverst */
.g-kort-svar { margin-top: 32px; padding: 22px 24px; border: 1px solid var(--border-strong); border-left: 3px solid var(--accent); border-radius: 14px; background: var(--surface); color: var(--text-muted); line-height: 1.7; }
.g-kort-svar .g-etiket { display: block; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; }
.g-kort-svar strong { color: var(--text); font-weight: 500; }
.g-kort-svar ul { list-style: none; padding: 0; margin: 16px 0 0; border-top: 1px solid var(--border); }
.g-kort-svar li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 0.95rem; }
.g-kort-svar li b { color: var(--text); font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Tabel og tjekliste */
.g-tabel-wrap { overflow-x: auto; margin: 20px 0 0; border: 1px solid var(--border); border-radius: 14px; }
.g-tabel { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 520px; font-variant-numeric: tabular-nums; }
.g-tabel th, .g-tabel td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.g-tabel thead th { color: var(--text-faint); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.04em; }
.g-tabel tbody th { color: var(--text); font-weight: 500; }
.g-tabel tr.i-alt > * { color: var(--text); font-weight: 500; }
.g-tabel tr:last-child > * { border-bottom: 0; }

.g-tjek { list-style: none; padding: 0; margin: 18px 0 0; }
.g-tjek li { position: relative; padding: 8px 0 8px 30px; border-bottom: 1px solid var(--border); }
.g-tjek li::before { content: ''; position: absolute; left: 4px; top: 15px; width: 12px; height: 7px; border-left: 2px solid var(--groen); border-bottom: 2px solid var(--groen); transform: rotate(-45deg); }

.g-faq { margin-top: 56px; max-width: 68ch; }
.g-faq h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); text-align: left; scroll-margin-top: 24px; }

.g-cta { margin-top: 64px; padding: 28px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); }
.g-cta h2 { font-size: 1.5rem; text-align: left; margin-bottom: 8px; }
.g-cta p { color: var(--text-muted); line-height: 1.65; max-width: 56ch; }
.g-cta .forside-knapper { margin-top: 20px; justify-content: flex-start; }

.g-note { margin-top: 28px; color: var(--text-faint); font-size: 0.84rem; line-height: 1.6; max-width: 68ch; }
.g-note a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }

/* Indholdsfortegnelse i siden */
.g-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; margin-top: 40px; align-items: start; }
.g-toc { position: sticky; top: 24px; font-size: 0.9rem; }
.g-toc p { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 10px; }
.g-toc ol { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--border-strong); }
.g-toc a { display: block; padding: 7px 0 7px 14px; color: var(--text-muted); text-decoration: none; margin-left: -1px; border-left: 2px solid transparent; }
.g-toc a:hover, .g-toc a[aria-current="true"] { color: var(--text); border-left-color: var(--accent); }
.g-toc-cta { margin-top: 28px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.g-toc-cta span { display: block; color: var(--text-muted); line-height: 1.5; margin-bottom: 10px; }
.g-toc-cta a { color: var(--accent); text-decoration: none; }
.g-layout .g-prosa > section:first-child > h2 { margin-top: 48px; }
.g-toc-mobil { display: none; }

@media (max-width: 860px) {
    .g-layout { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 0; }
    .g-toc { display: none; }
    .g-toc-mobil { display: block; margin-top: 28px; border: 1px solid var(--border); border-radius: 14px; padding: 14px 18px; background: var(--surface); }
    .g-toc-mobil summary { cursor: pointer; color: var(--text); }
    .g-toc-mobil ol { margin: 10px 0 0; padding-left: 20px; color: var(--text-muted); line-height: 2; }
    .g-toc-mobil a { color: var(--text-muted); }
}

/* Oversigten: nummereret liste */
.g-liste { list-style: none; padding: 0; margin: 48px 0 0; border-top: 1px solid var(--border); }
.g-liste li { border-bottom: 1px solid var(--border); }
.g-liste a { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 8px 20px; align-items: baseline; padding: 26px 4px; text-decoration: none; color: inherit; }
.g-liste a:hover h2, .g-liste a:focus-visible h2 { color: var(--accent); }
.g-liste .nr { font-family: 'Lora', Georgia, serif; color: var(--text-faint); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.g-liste h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); text-align: left; margin: 0 0 6px; transition: color .2s var(--ease); }
.g-liste p { color: var(--text-muted); line-height: 1.6; }
.g-liste .side { color: var(--text-faint); font-size: 0.84rem; white-space: nowrap; }

@media (max-width: 600px) {
    main.g-main { padding: 36px 20px 80px; }
    .g-liste a { grid-template-columns: 36px minmax(0, 1fr); }
    .g-liste .side { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
    .g-liste h2 { transition: none; }
}