/* seo.css — indexable guide pages (/dorozhnye-znaki, /kak-sdat-teoriyu, …). ds v1.0.1
   Sits ON TOP of tokens.css + marketing.css: same rhythm (--mk-*), same depth language,
   accent as punctuation. Pages are STATIC per-language HTML (no site.js), so nothing here
   depends on runtime i18n. Light+dark via the ds tokens; no raw colours except hairlines
   that marketing.css itself already uses. */

/* ── Breadcrumbs ── */
[data-theme="prava"] .seo-crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:7px;
  padding:18px 0 0; font-size:13px; color:var(--ds-hint); }
[data-theme="prava"] .seo-crumbs a{ color:var(--ds-text-soft); font-weight:600; }
[data-theme="prava"] .seo-crumbs svg{ width:13px; height:13px; color:var(--ds-hint); flex:0 0 auto; }
[data-theme="prava"] .seo-crumbs [aria-current]{ color:var(--ds-hint); font-weight:600; }

/* ── Article header ── */
[data-theme="prava"] .seo-hero{ padding:26px 0 8px; }
[data-theme="prava"] .seo-hero .mk-kicker{ margin-bottom:10px; }
[data-theme="prava"] .seo-hero h1{ font-size:clamp(27px,4.6vw,40px); font-weight:900;
  letter-spacing:-.025em; line-height:1.12; margin:0; text-wrap:balance; }
[data-theme="prava"] .seo-hero .seo-lead{ margin:14px 0 0; font-size:16.5px; line-height:1.6;
  color:var(--ds-text-soft); max-width:62ch; text-wrap:pretty; }
[data-theme="prava"] .seo-hero .seo-lead b{ color:var(--ds-text); }

/* Fact strip: the exam numbers people actually search for (45 · 38 · 90 min). */
[data-theme="prava"] .seo-facts{ display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 4px; }
[data-theme="prava"] .seo-facts__i{ display:flex; flex-direction:column; gap:1px; min-width:96px;
  padding:10px 16px; border:var(--mk-hairline); border-radius:14px; background:var(--ds-surface); }
[data-theme="prava"] .seo-facts__n{ font-size:20px; font-weight:900; letter-spacing:-.02em; }
[data-theme="prava"] .seo-facts__n small{ font-size:12px; font-weight:700; color:var(--ds-text-soft); }
[data-theme="prava"] .seo-facts__l{ font-size:12px; color:var(--ds-text-soft); }

/* ── Prose body ── */
[data-theme="prava"] .seo-art{ padding:10px 0 26px; }
[data-theme="prava"] .seo-art h2{ font-size:clamp(19px,2.6vw,23px); font-weight:800;
  letter-spacing:-.015em; margin:38px 0 10px; scroll-margin-top:78px; text-wrap:balance; }
[data-theme="prava"] .seo-art h3{ font-size:16.5px; font-weight:800; margin:24px 0 6px; scroll-margin-top:78px; }
[data-theme="prava"] .seo-art p{ color:var(--ds-text-soft); line-height:1.66; font-size:15.5px;
  margin:0 0 12px; max-width:66ch; text-wrap:pretty; }
[data-theme="prava"] .seo-art p b, [data-theme="prava"] .seo-art li b{ color:var(--ds-text); }
[data-theme="prava"] .seo-art ul, [data-theme="prava"] .seo-art ol{ margin:0 0 12px; padding-left:22px;
  color:var(--ds-text-soft); line-height:1.62; font-size:15.5px; max-width:64ch; }
[data-theme="prava"] .seo-art li{ margin:5px 0; }
[data-theme="prava"] .seo-art li::marker{ color:var(--ds-accent); font-weight:800; }
/* Norwegian exam terms stay Norwegian (product rule): give the inline original a quiet pill. */
[data-theme="prava"] .seo-art i[lang="no"], [data-theme="prava"] .seo-hero i[lang="no"]{
  font-style:normal; font-weight:650; color:var(--ds-text); }

/* Steps (numbered path) — the «как сдать» spine. */
[data-theme="prava"] .seo-steps{ display:flex; flex-direction:column; gap:12px; margin:16px 0 6px;
  padding:0; list-style:none; counter-reset:seostep; max-width:720px; }
[data-theme="prava"] .seo-steps > li{ counter-increment:seostep; display:grid;
  grid-template-columns:40px 1fr; gap:14px; padding:16px 18px; margin:0;
  border:var(--mk-hairline); border-radius:var(--mk-r-card); background:var(--ds-surface); }
[data-theme="prava"] .seo-steps > li::before{ content:counter(seostep); width:34px; height:34px;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:var(--ds-accent-soft); color:var(--ds-text); font-weight:900; font-size:15px; }
[data-theme="prava"] .seo-steps h3{ margin:4px 0 4px; font-size:16px; }
[data-theme="prava"] .seo-steps p{ margin:0 0 4px; font-size:14.5px; }
[data-theme="prava"] .seo-steps p:last-child{ margin-bottom:0; }

/* Callout — honest caveats («суммы меняются, сверяй на vegvesen.no»). */
[data-theme="prava"] .seo-note{ display:flex; gap:12px; align-items:flex-start; max-width:720px;
  margin:16px 0; padding:14px 16px; border-radius:var(--mk-r-card);
  background:var(--ds-accent-soft); border:1px solid color-mix(in srgb, var(--ds-accent) 34%, var(--ds-border)); }
[data-theme="prava"] .seo-note svg{ width:20px; height:20px; flex:0 0 auto; margin-top:2px; color:var(--ds-text); }
[data-theme="prava"] .seo-note p{ margin:0; font-size:14.5px; line-height:1.55; color:var(--ds-text); }

/* Comparison / data table (speeds, fees). Scrolls inside itself, never the page. */
[data-theme="prava"] .seo-tblwrap{ overflow-x:auto; margin:14px 0; max-width:720px;
  border:var(--mk-hairline); border-radius:var(--mk-r-card); background:var(--ds-surface); }
[data-theme="prava"] .seo-tbl{ border-collapse:collapse; width:100%; min-width:420px; font-size:14.5px; }
[data-theme="prava"] .seo-tbl th{ text-align:left; font-weight:800; font-size:13px; color:var(--ds-text-soft);
  padding:12px 16px 8px; border-bottom:var(--mk-hairline); white-space:nowrap; }
[data-theme="prava"] .seo-tbl td{ padding:10px 16px; border-bottom:var(--mk-hairline); color:var(--ds-text-soft); vertical-align:top; }
[data-theme="prava"] .seo-tbl tr:last-child td{ border-bottom:none; }
[data-theme="prava"] .seo-tbl td:first-child{ color:var(--ds-text); font-weight:650; }

/* ── Sign catalogue ── */
[data-theme="prava"] .sg-groupintro{ margin-bottom:14px; }
[data-theme="prava"] .sg-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:12px; margin:16px 0 8px; }
[data-theme="prava"] .sg-card{ display:grid; grid-template-columns:74px 1fr; gap:13px;
  padding:13px 14px; border:var(--mk-hairline); border-radius:var(--mk-r-card);
  background:var(--ds-surface); align-items:start; }
/* Sign artwork sits on a constant light plate: several signs are white-bordered and would
   dissolve into the dark surface (same reason the app plates its signs). */
[data-theme="prava"] .sg-card__art{ width:74px; height:74px; display:flex; align-items:center;
  justify-content:center; border-radius:12px; background:#fff; border:1px solid rgba(16,24,32,.10); }
[data-theme="prava"] .sg-card__art img{ max-width:58px; max-height:58px; width:auto; height:auto; display:block; }
[data-theme="prava"] .sg-card__code{ font-size:11.5px; font-weight:800; color:var(--ds-hint); letter-spacing:.04em; }
[data-theme="prava"] .sg-card__no{ font-size:14.5px; font-weight:800; line-height:1.25; margin-top:1px; }
[data-theme="prava"] .sg-card__tr{ font-size:13.5px; font-weight:650; color:var(--ds-text); margin-top:2px; }
[data-theme="prava"] .sg-card__d{ font-size:13px; line-height:1.5; color:var(--ds-text-soft); margin-top:6px; }
@media (max-width:420px){
  [data-theme="prava"] .sg-grid{ grid-template-columns:1fr; }
}

/* TOC chips for the catalogue groups. */
[data-theme="prava"] .seo-toc{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 4px; padding:0; list-style:none; }
[data-theme="prava"] .seo-toc a{ display:inline-flex; align-items:center; gap:7px; padding:8px 13px;
  border:var(--mk-hairline); border-radius:var(--r-pill, 999px); background:var(--ds-surface);
  font-size:13.5px; font-weight:700; color:var(--ds-text); }
[data-theme="prava"] .seo-toc a:hover{ text-decoration:none; border-color:color-mix(in srgb, var(--ds-accent) 55%, var(--ds-border)); }
[data-theme="prava"] .seo-toc a small{ color:var(--ds-hint); font-weight:700; }

/* ── Sources / licence block ── */
[data-theme="prava"] .seo-src{ margin:34px 0 0; padding:16px 18px; border:var(--mk-hairline);
  border-radius:var(--mk-r-card); background:var(--ds-surface); max-width:720px; }
[data-theme="prava"] .seo-src h2{ margin:0 0 8px; font-size:15px; }
[data-theme="prava"] .seo-src ul{ margin:0; padding-left:20px; font-size:13.5px; }
[data-theme="prava"] .seo-src li{ margin:4px 0; }
[data-theme="prava"] .seo-src p{ font-size:12.5px; color:var(--ds-hint); margin:10px 0 0; }

/* ── Related guides + language counterpart ── */
[data-theme="prava"] .seo-rel{ padding:8px 0 30px; }
[data-theme="prava"] .seo-rel h2{ font-size:19px; font-weight:800; margin:0 0 14px; }
[data-theme="prava"] .seo-rel .mk-card{ min-height:0; }
[data-theme="prava"] .seo-lang{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; }
[data-theme="prava"] .seo-lang svg{ width:15px; height:15px; }

/* Header on guide pages carries only counterpart-language + CTA (no burger). Keep them
   from crowding the wordmark on narrow screens. */
@media (max-width:560px){
  [data-theme="prava"] .seo-nav-cta{ display:none; }
}