/* tannino.dk — designsystem "opslagsværket" (fase 3, 18/8-2026)
   Mekanik før farve: rækker frem for kort, sæsontavle frem for hero, tabeltal frem for pynt.
   Alle farvepar er målt (scripts/kontrast.mjs) — ratio står i kommentaren.
   Præfiks: tnn- . Lav specificitet med :where(), så komponentregler vinder. */


:root {
  /* flader (areal-logik: hvid er sitets farve, sage er båndet, blæk er footer/mørkt bånd) */
  --tnn-hvid: #FFFFFF;
  --tnn-sage: #EEF0E4;        /* blæk på sage 13,80:1 */
  --tnn-sage2: #E3E7D3;       /* blæk på sage2 12,61:1 */
  --tnn-blaek: #1B2420;       /* tekst + footer; sage-tekst på blæk 13,80:1 */
  --tnn-blaek2: #26312C;
  --tnn-meta: #4F5A54;        /* på hvid 7,18 · sage 6,23 · sage2 5,69 */
  --tnn-linje: #CFD5C4;
  --tnn-link: #3F5A2A;        /* på hvid 7,76 · sage 6,73 */
  /* accent A: oliven (standard) — på hvid 6,43 · sage 5,58 · sage2 5,10 · hvid tekst på accent 6,43 */
  --tnn-accent: #55651C;
  --tnn-accent-moerk: #4A5817;
  --tnn-accent-lys: #B7C46A;  /* KUN som tekst/streg på blæk: 8,42 */
  --tnn-accent-tint: #EDF0DA;
  --tnn-radius: 2px;
  --tnn-pill: 999px;
  --tnn-maal: 720px;          /* læsebredde (65-72 tegn ved 17 px) */
  --tnn-bred: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--tnn-hvid); color: var(--tnn-blaek); font: 400 17px/1.6 "Plex Sans tnn", system-ui, sans-serif; font-feature-settings: "tnum" 1; }
:where(h1,h2,h3,h4) { margin: 0 0 .5rem; line-height: 1.2; letter-spacing: 0; text-transform: none; font-weight: 600; }
h1 { font-size: 26px; font-weight: 500; }
h2 { font-size: 21px; margin-top: 2rem; }
h3 { font-size: 17px; }
@media (min-width: 900px) { h1 { font-size: 30px; } h2 { font-size: 22px; } }
p { margin: 0 0 1rem; }
:where(a) { color: var(--tnn-link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
:where(a):hover { color: var(--tnn-blaek); }
:focus-visible { outline: 3px solid var(--tnn-accent); outline-offset: 2px; }
img { max-width: 100%; height: auto; display: block; }
table { border-collapse: collapse; width: 100%; font-size: 15.5px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--tnn-linje); vertical-align: top; }
th { font-weight: 600; background: var(--tnn-sage); }
td.tal, th.tal { text-align: right; font-family: "Plex Mono tnn", ui-monospace, monospace; white-space: nowrap; }
.tnn-tal { font-family: "Plex Mono tnn", ui-monospace, monospace; font-weight: 500; }
.tnn-vis { visibility: hidden; position: absolute; }
.tnn-skip { position: absolute; left: -999px; } .tnn-skip:focus { left: 8px; top: 8px; background: var(--tnn-hvid); padding: 8px; z-index: 9; }

/* ── layout ── */
.tnn-wrap { width: min(100% - 32px, var(--tnn-bred)); margin: 0 auto; }
.tnn-maal { max-width: var(--tnn-maal); }
.tnn-baand { padding: 28px 0; }
.tnn-baand--sage { background: var(--tnn-sage); }
.tnn-baand--blaek { background: var(--tnn-blaek); color: var(--tnn-sage); }
.tnn-baand--blaek :where(a) { color: var(--tnn-accent-lys); }
.tnn-baand--blaek h2 { color: var(--tnn-hvid); }
.tnn-2kol { display: grid; gap: 28px; } @media (min-width: 900px) { .tnn-2kol { grid-template-columns: minmax(0, 1fr) 320px; } }
.tnn-3kol { display: grid; gap: 16px; } @media (min-width: 720px) { .tnn-3kol { grid-template-columns: repeat(3, 1fr); } }

/* ── header: tonet lys (sage), lav, én linje ── */
.tnn-header { background: var(--tnn-sage); border-bottom: 1px solid var(--tnn-linje); }
.tnn-header .tnn-wrap { display: flex; align-items: center; gap: 20px; min-height: 60px; }
.tnn-logo { font-weight: 600; font-size: 20px; letter-spacing: -.01em; color: var(--tnn-blaek); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.tnn-logo::before { content: ""; width: 10px; height: 18px; border-radius: 0 0 6px 6px; background: var(--tnn-accent); }
.tnn-nav { display: flex; gap: 4px; margin-left: auto; overflow-x: auto; }
.tnn-nav a { color: var(--tnn-blaek); text-decoration: none; padding: 8px 10px; border-radius: var(--tnn-radius); white-space: nowrap; font-size: 15.5px; }
.tnn-nav a:hover, .tnn-nav a[aria-current] { background: var(--tnn-hvid); }
.tnn-nav a[aria-current] { box-shadow: inset 0 -2px 0 var(--tnn-accent); }

/* ── kicker: accent som BLOK foran, aldrig som tekst ── */
.tnn-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--tnn-meta); }
.tnn-kicker::before { content: ""; width: 3px; height: 14px; background: var(--tnn-accent); }
.tnn-dato { font-family: "Plex Mono tnn", ui-monospace, monospace; font-size: 13px; color: var(--tnn-meta); }

/* ── sæsontavle (forside-centerpiece, ingen foto-hero, intet søgefelt) ── */
.tnn-tavle { display: grid; gap: 1px; background: var(--tnn-linje); border: 1px solid var(--tnn-linje); }
@media (min-width: 720px) { .tnn-tavle { grid-template-columns: repeat(3, 1fr); } }
.tnn-tavle a { background: var(--tnn-hvid); color: var(--tnn-blaek); text-decoration: none; padding: 20px 20px 22px; display: grid; gap: 4px; }
.tnn-tavle a:hover { background: var(--tnn-accent-tint); }
.tnn-tavle .t { font-size: 20px; font-weight: 600; }
.tnn-tavle .u { color: var(--tnn-meta); font-size: 15px; }
.tnn-tavle .n { font-family: "Plex Mono tnn", ui-monospace, monospace; font-size: 13px; color: var(--tnn-meta); margin-top: 6px; }
.tnn-uge { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 12px 0; border-bottom: 1px solid var(--tnn-linje); }
.tnn-uge strong { font-weight: 600; }

/* ── rækker frem for kort ── */
.tnn-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tnn-linje); }
.tnn-raekke { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--tnn-linje); }
.tnn-raekke .b { width: 56px; height: 76px; background: var(--tnn-sage); border-radius: var(--tnn-radius); overflow: hidden; display: grid; place-items: center; }
.tnn-raekke .b img { width: 100%; height: 100%; object-fit: contain; }
.tnn-raekke .b[data-init]:empty::before { content: attr(data-init); font-family: "Plex Mono tnn", monospace; font-size: 18px; color: var(--tnn-meta); }
.tnn-raekke .n { font-weight: 600; margin: 0; font-size: 16.5px; }
.tnn-raekke .m { color: var(--tnn-meta); font-size: 14.5px; margin: 0; }
.tnn-raekke .p { text-align: right; display: grid; gap: 4px; justify-items: end; }
.tnn-raekke .p .kr { font-family: "Plex Mono tnn", monospace; font-weight: 500; font-size: 17px; }
.tnn-raekke .p .hos { font-size: 13px; color: var(--tnn-meta); }
.tnn-raekke a.n { color: var(--tnn-blaek); text-decoration: none; } .tnn-raekke a.n:hover { text-decoration: underline; }
.tnn-maerke { display: inline-block; font-size: 12.5px; padding: 1px 8px; border: 1px solid var(--tnn-linje); border-radius: var(--tnn-radius); color: var(--tnn-meta); }
.tnn-maerke--a { border-color: var(--tnn-accent); color: var(--tnn-accent); }

/* ── knapper: pill KUN på primær CTA (Lausts præference), ellers radius 2 ── */
.tnn-cta { display: inline-block; background: var(--tnn-accent); color: var(--tnn-hvid); text-decoration: none; font-weight: 600; font-size: 15.5px; padding: 10px 18px; border-radius: var(--tnn-pill); border: 0; cursor: pointer; }
.tnn-cta:hover { background: var(--tnn-accent-moerk); color: var(--tnn-hvid); }
.tnn-knap { display: inline-block; background: var(--tnn-hvid); color: var(--tnn-blaek); border: 1px solid var(--tnn-blaek); text-decoration: none; font-size: 15px; padding: 7px 12px; border-radius: var(--tnn-radius); }
.tnn-knap:hover { background: var(--tnn-sage); color: var(--tnn-blaek); }

/* ── svaret først + smagsprofil (glyffer via CSS) ── */
.tnn-svar { font-size: 19px; line-height: 1.5; margin: 0 0 1.25rem; }
@media (min-width: 900px) { .tnn-svar { font-size: 20px; } }
.tnn-profil { display: grid; gap: 8px; margin: 1rem 0 1.5rem; max-width: 420px; }
.tnn-profil > div { display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 12px; font-size: 15px; }
.tnn-profil i { display: block; height: 8px; background: var(--tnn-sage2); border-radius: var(--tnn-radius); position: relative; }
.tnn-profil i::before { content: ""; position: absolute; inset: 0; width: calc(var(--v) * 20%); background: var(--tnn-accent); border-radius: var(--tnn-radius); }
.tnn-profil b { font-family: "Plex Mono tnn", monospace; font-weight: 500; font-size: 13px; color: var(--tnn-meta); }
.tnn-fakta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--tnn-linje); border: 1px solid var(--tnn-linje); margin: 1rem 0 1.5rem; }
.tnn-fakta div { background: var(--tnn-hvid); padding: 10px 12px; }
.tnn-fakta dt { font-size: 13px; color: var(--tnn-meta); } .tnn-fakta dd { margin: 0; font-weight: 600; }

/* ── produktmodul "3 flasker i 3 prisklasser" — ét blokelement ── */
.tnn-flasker { border: 1px solid var(--tnn-linje); border-radius: var(--tnn-radius); margin: 1.5rem 0; }
.tnn-flasker > header { padding: 12px 16px; background: var(--tnn-sage); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tnn-flasker > header h2, .tnn-flasker > header h3 { margin: 0; font-size: 17px; }
.tnn-flasker .tnn-liste { border-top: 0; padding: 0 16px; }
.tnn-flasker .tnn-raekke:last-child { border-bottom: 0; }
.tnn-disclosure { font-size: 13.5px; color: var(--tnn-meta); padding: 8px 0; border-bottom: 1px solid var(--tnn-linje); }

/* ── sammenligningstabel (udstyr) ── */
.tnn-sml { overflow-x: auto; margin: 1rem 0 1.5rem; }
.tnn-sml table { min-width: 640px; }
.tnn-sml .bedst td { background: var(--tnn-accent-tint); }
.tnn-sml td:first-child { font-weight: 600; }

/* ── værktøj ── */
.tnn-vaerktoej { background: var(--tnn-sage); border: 1px solid var(--tnn-linje); border-radius: var(--tnn-radius); padding: 20px; margin: 1rem 0 1.5rem; }
.tnn-vaerktoej label { display: block; font-size: 14.5px; font-weight: 500; margin: 8px 0 4px; }
.tnn-vaerktoej input, .tnn-vaerktoej select { font: inherit; padding: 8px 10px; border: 1px solid var(--tnn-blaek); border-radius: var(--tnn-radius); background: var(--tnn-hvid); width: 100%; max-width: 260px; }
.tnn-vaerktoej output { display: block; font-family: "Plex Mono tnn", monospace; font-size: 34px; font-weight: 500; margin: 12px 0 4px; }
.tnn-vaerktoej .kilde { font-size: 13.5px; color: var(--tnn-meta); }
.tnn-vaerktoej .felter { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* ── kæde-tavle (vinkup) ── */
.tnn-kaeder { display: grid; gap: 1px; background: var(--tnn-linje); border: 1px solid var(--tnn-linje); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.tnn-kaeder a { background: var(--tnn-hvid); padding: 12px 14px; color: var(--tnn-blaek); text-decoration: none; display: grid; gap: 2px; }
.tnn-kaeder a:hover { background: var(--tnn-accent-tint); }
.tnn-kaeder .k { font-weight: 600; } .tnn-kaeder .a { font-size: 13.5px; color: var(--tnn-meta); font-family: "Plex Mono tnn", monospace; }

/* ── gaveliste: her ER billedet valget → visuel række (større billede), stadig række ── */
.tnn-gave .tnn-raekke { grid-template-columns: 96px minmax(0, 1fr) auto; }
.tnn-gave .tnn-raekke .b { width: 96px; height: 120px; }

/* ── videre-stier / relaterede ── */
.tnn-videre { display: grid; gap: 8px; margin: 1.5rem 0; padding: 0; list-style: none; }
.tnn-videre li { border-left: 3px solid var(--tnn-accent); padding: 4px 12px; }
.tnn-videre a { text-decoration: none; font-weight: 600; color: var(--tnn-blaek); } .tnn-videre a:hover { text-decoration: underline; }
.tnn-videre small { display: block; color: var(--tnn-meta); font-size: 14px; }

/* ── faq / chunks: ét blokelement, ingen accordions ── */
.tnn-faq h3 { margin-top: 1.25rem; }
.tnn-punkter li { margin-bottom: .5rem; }

/* ── afsender / metode-boks ── */
.tnn-metode { border-top: 3px solid var(--tnn-accent); padding-top: 12px; font-size: 15px; color: var(--tnn-meta); }
.tnn-metode strong { color: var(--tnn-blaek); }

/* ── nyhedsbrev (blæk-bånd) ── */
.tnn-nyhedsbrev form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.tnn-nyhedsbrev input { font: inherit; padding: 9px 12px; border: 1px solid var(--tnn-sage); border-radius: var(--tnn-radius); background: var(--tnn-blaek2); color: var(--tnn-hvid); min-width: 240px; }
.tnn-nyhedsbrev button { font: inherit; font-weight: 600; padding: 9px 18px; border-radius: var(--tnn-pill); border: 0; background: var(--tnn-accent-lys); color: var(--tnn-blaek); cursor: pointer; }

/* ── footer ── */
.tnn-footer { background: var(--tnn-blaek); color: var(--tnn-sage); padding: 32px 0 40px; font-size: 14.5px; margin-top: 48px; }
.tnn-footer a { color: var(--tnn-sage); }
.tnn-footer .kol { display: grid; gap: 24px; } @media (min-width: 720px) { .tnn-footer .kol { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.tnn-footer ul { list-style: none; margin: 0; padding: 0; } .tnn-footer li { margin: 4px 0; }
.tnn-18 { display: inline-block; border: 1px solid var(--tnn-sage); border-radius: var(--tnn-radius); padding: 2px 8px; font-family: "Plex Mono tnn", monospace; font-size: 13px; margin-top: 12px; }

/* ── mobil ── */
@media (max-width: 719px) {
  .tnn-raekke { grid-template-columns: 48px minmax(0, 1fr); }
  .tnn-raekke .p { grid-column: 2; justify-items: start; }
  .tnn-nav { gap: 0; }
  .tnn-baand { padding: 20px 0; }
}

/* ── WordPress: block-tema-tilpasninger ── */
:where(.wp-site-blocks) { padding: 0; }
:where(.wp-site-blocks) > * + * { margin-block-start: 0; }
.tnn-main { width: min(100% - 32px, var(--tnn-bred)); margin: 0 auto; }
.tnn-main :where(.wp-block-post-content) > * { margin-block-start: 0; }
.tnn-main :where(.wp-block-post-title) { font-size: 26px; font-weight: 500; }
@media (min-width: 900px) { .tnn-main :where(.wp-block-post-title) { font-size: 30px; } }
:where(.wp-block-navigation) a { color: var(--tnn-blaek); text-decoration: none; padding: 8px 10px; border-radius: var(--tnn-radius); font-size: 15.5px; white-space: nowrap; }
:where(.wp-block-navigation) a:hover, :where(.wp-block-navigation) .current-menu-item > a { background: var(--tnn-hvid); }
:where(.wp-block-navigation) .current-menu-item > a { box-shadow: inset 0 -2px 0 var(--tnn-accent); }
.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { color: var(--tnn-blaek); }
.tnn-header .wp-block-site-title a { color: var(--tnn-blaek); text-decoration: none; }
.tnn-footer .wp-block-site-title a, .tnn-footer a { color: var(--tnn-sage); }
.tnn-byline { font-size: 14.5px; color: var(--tnn-meta); display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.tnn-byline .wp-block-post-date, .tnn-byline .wp-block-post-author-name { font-family: "Plex Mono tnn", ui-monospace, monospace; font-size: 13px; }
:where(.wp-block-post-content) figure.wp-block-image img { border-radius: var(--tnn-radius); }
:where(.wp-block-post-content) figcaption { font-size: 13.5px; color: var(--tnn-meta); }
.tnn-arkiv .wp-block-post-template { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--tnn-linje); }
.tnn-arkiv .wp-block-post { display: grid; grid-template-columns: 56px minmax(0,1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--tnn-linje); align-items: center; }
.tnn-arkiv .wp-block-post-featured-image { width: 56px; height: 76px; margin: 0; background: var(--tnn-sage); border-radius: var(--tnn-radius); overflow: hidden; }
.tnn-arkiv .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.tnn-arkiv .wp-block-post-title { font-size: 16.5px; font-weight: 600; margin: 0; }
.tnn-arkiv .wp-block-post-title a { color: var(--tnn-blaek); text-decoration: none; }
.tnn-arkiv .wp-block-post-excerpt { font-size: 14.5px; color: var(--tnn-meta); margin: 0; }
.tnn-arkiv .wp-block-post-excerpt__excerpt { margin: 0; }