/* ---------------------------------------------- Kjokkenbenken ------------ */
:root{
  --papir:#faf7f0; --kritt:#fffdf8; --blekk:#1f2420; --blekk-svak:#5c625a;
  --furu:#2d4a3e; --furu-lys:#3d6353; --kobber:#b5623a; --kobber-lys:#c9784f;
  --salvie:#8fa392; --salvie-blek:#e6ebe4; --kant:#ddd6c8;
  --skygge:0 1px 2px rgba(31,36,32,.06), 0 4px 14px rgba(31,36,32,.05);
  --r:4px; --maks:1180px; --lesebredde:44rem;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --papir:#221f1b; --kritt:#2b2723; --blekk:#ece7dd; --blekk-svak:#a8a196;
    --furu:#7fae98; --furu-lys:#98c4ae; --kobber:#d98b5f; --kobber-lys:#e8a179;
    --salvie:#8fa392; --salvie-blek:#32302a; --kant:#3d3831;
    --skygge:0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
  }
}
:root[data-theme="dark"]{
  --papir:#221f1b; --kritt:#2b2723; --blekk:#ece7dd; --blekk-svak:#a8a196;
  --furu:#7fae98; --furu-lys:#98c4ae; --kobber:#d98b5f; --kobber-lys:#e8a179;
  --salvie:#8fa392; --salvie-blek:#32302a; --kant:#3d3831;
  --skygge:0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
}
:root[data-theme="light"]{
  --papir:#faf7f0; --kritt:#fffdf8; --blekk:#1f2420; --blekk-svak:#5c625a;
  --furu:#2d4a3e; --furu-lys:#3d6353; --kobber:#b5623a; --kobber-lys:#c9784f;
  --salvie:#8fa392; --salvie-blek:#e6ebe4; --kant:#ddd6c8;
  --skygge:0 1px 2px rgba(31,36,32,.06), 0 4px 14px rgba(31,36,32,.05);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papir); color:var(--blekk);
  font:400 1.0625rem/1.7 var(--sans);
  /* papirstruktur som SVG-stoy, aldri som bildefil */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}
img{max-width:100%;height:auto;display:block}
a{color:var(--kobber);text-underline-offset:.16em;text-decoration-thickness:.07em}
a:hover{color:var(--kobber-lys)}
h1,h2,h3,h4{font-family:var(--serif);line-height:1.22;color:var(--furu);
  font-weight:600;letter-spacing:-.005em}
h1{font-size:clamp(1.95rem,1.3rem + 2.4vw,2.9rem);margin:0 0 .5rem}
h2{font-size:clamp(1.4rem,1.1rem + 1.1vw,1.85rem);margin:2.4rem 0 .7rem}
h3{font-size:1.22rem;margin:1.9rem 0 .5rem}
p,ul,ol{margin:0 0 1.05rem}
ul,ol{padding-left:1.3rem}
li{margin:.3rem 0}
.rammer{max-width:var(--maks);margin:0 auto;padding:0 1.25rem}
.hopp{position:absolute;left:-9999px}
.hopp:focus{left:1rem;top:1rem;z-index:99;background:var(--kritt);
  padding:.6rem 1rem;border:2px solid var(--kobber);border-radius:var(--r)}

/* ------------------------------------------------------------- topplinje */
.topp{background:var(--furu);color:#f3efe6;position:sticky;top:0;z-index:50;
  box-shadow:0 1px 0 rgba(0,0,0,.12)}
@media (prefers-color-scheme:dark){.topp{background:#1a2b23}}
:root[data-theme="dark"] .topp{background:#1a2b23}
:root[data-theme="light"] .topp{background:#2d4a3e}
/* Topplinjen har SIN EGEN, bredere ramme. Med innholdsrammen paa 1180 px
   hadde menyen bare 1140 px aa gaa paa og brakk over to linjer. */
.topp .rammer{max-width:1360px}
.topp-rad{display:flex;align-items:center;gap:1rem;min-height:64px}
.logo{display:flex;align-items:center;gap:.6rem;color:#f3efe6;
  text-decoration:none;font-family:var(--serif);font-size:1.24rem;
  font-weight:600;white-space:nowrap;letter-spacing:-.01em}
.logo:hover{color:#fff}
.logo svg{flex:0 0 auto}
.meny{display:flex;list-style:none;margin:0;padding:0;gap:.1rem;
  margin-left:auto;align-items:center;flex-wrap:nowrap}
/* Hvert menypunkt er en LENKE til seksjonen pluss en egen pilknapp for
   nedtrekket. Bakgrunnen ved hover ligger paa <li>, slik at de to ser ut
   som ett punkt og ikke som to bokser. */
.meny>li{position:relative;display:flex;align-items:center;
  border-radius:var(--r)}
.meny>li:hover,.meny>li:focus-within{background:rgba(255,255,255,.11)}
.meny>li>a,.meny>li>.pilknapp{
  color:#e8e3d8;text-decoration:none;font-size:.92rem;background:none;border:0;
  white-space:nowrap;font-family:inherit;line-height:1.4}
.meny>li>a{display:block;padding:.55rem .2rem .55rem .55rem}
.meny>li.enkel>a{padding:.55rem .55rem}
.meny>li:hover>a,.meny>li>a:focus-visible{color:#fff}
.meny>li>.pilknapp{display:grid;place-items:center;cursor:pointer;
  padding:.55rem .5rem .55rem .1rem}
.meny>li>.pilknapp:hover{color:#fff}
.meny .pil{font-size:.62em;opacity:.75;display:inline-block;
  transition:transform .12s ease}
.meny>li>.pilknapp[aria-expanded="true"] .pil{transform:rotate(180deg);
  opacity:1}
.nedtrekk{
  position:absolute;top:100%;left:0;min-width:16rem;background:var(--kritt);
  border:1px solid var(--kant);border-radius:var(--r);box-shadow:var(--skygge);
  list-style:none;margin:.3rem 0 0;padding:.4rem;display:none;z-index:60}
.nedtrekk.apen{display:block}
.nedtrekk a{display:block;padding:.5rem .7rem;color:var(--blekk);
  text-decoration:none;border-radius:var(--r);font-size:.94rem}
.nedtrekk a:hover{background:var(--salvie-blek);color:var(--furu)}
.nedtrekk .alle{border-top:1px solid var(--kant);margin-top:.35rem;
  padding-top:.45rem;font-weight:600;color:var(--kobber)}
.topp-verktoy{display:flex;align-items:center;gap:.35rem;margin-left:.4rem}
.ikonknapp{background:none;border:0;color:#e8e3d8;cursor:pointer;padding:.45rem;
  border-radius:var(--r);display:grid;place-items:center;line-height:0}
.ikonknapp:hover{background:rgba(255,255,255,.11);color:#fff}
.menyknapp{display:none}
@media(max-width:1180px){
  .menyknapp{display:grid}
  .meny{display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--kritt);flex-direction:column;align-items:stretch;
    padding:.5rem;gap:0;border-bottom:1px solid var(--kant);
    box-shadow:var(--skygge);max-height:78vh;overflow-y:auto}
  .meny.apen{display:flex}
  .meny>li{flex-wrap:wrap;border-radius:0}
  .meny>li:hover,.meny>li:focus-within{background:none}
  .meny>li>a,.meny>li>.pilknapp{color:var(--blekk);font-size:1rem}
  .meny>li>a{flex:1 1 auto;padding:.7rem .8rem}
  .meny>li.enkel>a{padding:.7rem .8rem}
  .meny>li>.pilknapp{flex:0 0 auto;padding:.7rem 1rem;font-size:1.1rem}
  .meny>li>a:hover,.meny>li>.pilknapp:hover{background:var(--salvie-blek);
    color:var(--furu)}
  .meny>li>.nedtrekk{flex:1 0 100%}
  .nedtrekk{position:static;box-shadow:none;border:0;
    border-left:2px solid var(--kant);border-radius:0;margin:.1rem 0 .4rem .9rem}
}

/* ------------------------------------------------------------ brodsmuler */
.smuler{font-size:.855rem;color:var(--blekk-svak);padding:.9rem 0 0}
.smuler ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;
  padding:0}
.smuler li::after{content:"›";margin-left:.4rem;opacity:.5}
.smuler li:last-child::after{content:""}
.smuler a{color:var(--blekk-svak)}

/* ---------------------------------------------------------------- oppsett */
/* padding-block, IKKE kortformen: .side staar sammen med .rammer paa samme
   div, og "padding:1.5rem 0 3.5rem" nullstilte sidemargen fra .rammer. Paa
   desktop merkes det ikke (max-width holder teksten inne), men paa mobil
   gikk broedteksten helt ut i skjermkanten. */
.side{padding-block:1.5rem 3.5rem}
.spalter{display:grid;grid-template-columns:minmax(0,1fr) 19rem;gap:2.75rem;
  align-items:start}
@media(max-width:1040px){.spalter{grid-template-columns:1fr}}
.innhold{min-width:0;max-width:var(--lesebredde)}
.innhold.bred{max-width:none}

/* ------------------------------------------------------------- artikkelen */
.art-topp{margin-bottom:1.4rem}
.stikk{font:600 .78rem/1 var(--sans);letter-spacing:.09em;
  text-transform:uppercase;color:var(--kobber);margin:0 0 .55rem}
.ingress{font-size:1.16rem;color:var(--blekk-svak);margin:0 0 1.1rem;
  font-family:var(--serif);line-height:1.6}
.art-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;font-size:.85rem;
  color:var(--blekk-svak);border-top:1px solid var(--kant);
  border-bottom:1px solid var(--kant);padding:.6rem 0;margin:0 0 1.7rem}
.hero{margin:0 0 1.6rem;border-radius:var(--r);overflow:hidden;
  background:var(--salvie-blek)}
.hero img{width:100%;aspect-ratio:16/9;object-fit:cover}
.hero figcaption{font-size:.79rem;color:var(--blekk-svak);padding:.5rem .2rem 0}

/* ------------------------------------------------------- hero med tekst i */
/* Brukes paa forsiden og paa seksjons-/kategorisidene. Teksten ligger OVER
   bildet, med en mork gradient under seg slik at den er lesbar uansett
   hvor lyst motivet er. */
.hero-tekst{position:relative;margin:0 0 2rem;border-radius:var(--r);
  overflow:hidden;background:var(--furu)}
.hero-tekst img{width:100%;aspect-ratio:21/6;object-fit:cover;display:block}
/* Forsiden har et hoyere baand enn seksjonssidene. MAA staa i en
   min-width-sporring: .hero-tekst.hero-stor img er mer spesifikk enn
   .hero-tekst img, saa uten sporringen ville den slaatt mobilregelen under
   og gitt 21/7 ogsaa paa telefon. */
@media(min-width:701px){.hero-tekst.hero-stor img{aspect-ratio:21/7}}
@media(max-width:700px){.hero-tekst img{aspect-ratio:16/9}}
.hero-tekst::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(20,28,23,.86) 0%,
    rgba(20,28,23,.62) 34%,rgba(20,28,23,.16) 66%,rgba(20,28,23,.04) 100%)}
.hero-innhold{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:1.4rem 2rem 1.1rem;max-width:38rem}
@media(max-width:700px){.hero-innhold{padding:1.4rem 1.2rem 1.1rem}}
.hero-innhold .stikk{color:#e9c9b6;margin:0 0 .4rem}
.hero-innhold h1{color:#fff;margin:0 0 .5rem;
  text-shadow:0 1px 14px rgba(0,0,0,.4)}
.hero-innhold p{color:#eae5da;margin:0;font-family:var(--serif);
  font-size:1.1rem;line-height:1.5;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.hero-kreditt{position:absolute;right:.6rem;top:.5rem;z-index:3;
  font:.7rem/1 var(--sans);color:rgba(255,255,255,.72)}
.hero-kreditt a{color:inherit;text-decoration:none}
.hero-kreditt a:hover{color:#fff;text-decoration:underline}
.brodtekst>*:first-child{margin-top:0}
.brodtekst img{border-radius:var(--r);margin:1.3rem 0}
.brodtekst table{width:100%;border-collapse:collapse;margin:1.3rem 0;
  font-size:.94rem}
.brodtekst th,.brodtekst td{border:1px solid var(--kant);padding:.55rem .7rem;
  text-align:left}
.brodtekst th{background:var(--salvie-blek);font-family:var(--sans);
  font-weight:600}
.tabellramme{overflow-x:auto;margin:1.3rem 0}
.tabellramme table{margin:0}

/* ------------------------------------------------------------- raadskort */
.raad{background:var(--kritt);border:1px solid var(--kant);
  border-left:3px solid var(--kobber);border-radius:var(--r);
  padding:1.1rem 1.2rem;margin:1.1rem 0;box-shadow:var(--skygge);
  position:relative}
.raad h3{margin:0 0 .45rem;font-size:1.1rem;color:var(--blekk);
  padding-right:6.5rem}
.raad p:last-child{margin-bottom:0}
/* kommer leseren fra en dyplenke (#raad-3) i et KI-svar eller et soekeresultat,
   skal hun se HVILKET raad det gjaldt - ikke bare lande midt i artikkelen */
.raad:target{border-left-color:var(--blekk);
  box-shadow:0 0 0 3px rgba(176,124,74,.28),var(--skygge);
  scroll-margin-top:5rem}
.raad-nr{font:600 .78rem/1 var(--sans);color:var(--kobber);
  letter-spacing:.08em;text-transform:uppercase;display:block;
  margin:0 0 .35rem}
.merke{position:absolute;top:1.05rem;right:1.1rem;font:600 .7rem/1 var(--sans);
  letter-spacing:.03em;padding:.32rem .55rem;border-radius:999px;
  white-space:nowrap}
.merke-godt{background:#dbe9dd;color:#25543a}
.merke-forsok{background:#e7ecf3;color:#2f4a6b}
.merke-folketro{background:#f2e7d8;color:#7a5424}
.merke-forsiktig{background:#f7dfd7;color:#8a3418}
@media (prefers-color-scheme:dark){
  .merke-godt{background:#1e3a2a;color:#9ed3af}
  .merke-forsok{background:#22303f;color:#a9c6e2}
  .merke-folketro{background:#3a2f1f;color:#dcbb84}
  .merke-forsiktig{background:#43231a;color:#eda78e}
}
:root[data-theme="dark"] .merke-godt{background:#1e3a2a;color:#9ed3af}
:root[data-theme="dark"] .merke-forsok{background:#22303f;color:#a9c6e2}
:root[data-theme="dark"] .merke-folketro{background:#3a2f1f;color:#dcbb84}
:root[data-theme="dark"] .merke-forsiktig{background:#43231a;color:#eda78e}
@media(max-width:520px){
  .raad h3{padding-right:0}
  .merke{position:static;display:inline-block;margin:0 0 .5rem}
}

/* ----------------------------------------------------------- rammebokser */
.ramme{border:1px solid var(--kant);border-radius:var(--r);padding:1rem 1.15rem;
  margin:1.5rem 0;background:var(--kritt)}
.ramme h4{margin:0 0 .45rem;font-family:var(--sans);font-size:.82rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--blekk-svak)}
.ramme p:last-child,.ramme ul:last-child{margin-bottom:0}
.ramme-viktig{border-left:3px solid var(--kobber);background:#fdf3ed}
.ramme-kilde{border-left:3px solid var(--salvie);background:var(--salvie-blek)}
.ramme-tips{border-left:3px solid var(--furu-lys)}
@media (prefers-color-scheme:dark){.ramme-viktig{background:#38241b}}
:root[data-theme="dark"] .ramme-viktig{background:#38241b}
.ramme-viktig h4{color:var(--kobber)}

/* ------------------------------------------------------------- sidespalte */
.sidespalte{position:sticky;top:88px;font-size:.94rem}
@media(max-width:1040px){.sidespalte{position:static;margin-top:2.5rem}}
.boks{background:var(--kritt);border:1px solid var(--kant);
  border-radius:var(--r);padding:1rem 1.1rem;margin:0 0 1.2rem;
  box-shadow:var(--skygge)}
.boks h2{font-size:.82rem;font-family:var(--sans);letter-spacing:.09em;
  text-transform:uppercase;color:var(--blekk-svak);margin:0 0 .7rem}
.boks ul{list-style:none;padding:0;margin:0}
.boks li{margin:0;border-bottom:1px solid var(--kant)}
.boks li:last-child{border-bottom:0}
.boks li a{display:block;padding:.5rem 0;text-decoration:none;
  color:var(--blekk)}
.boks li a:hover{color:var(--kobber)}

/* ------------------------------------------------------------------- kort */
.rutenett{display:grid;gap:1.15rem;
  grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));margin:1.4rem 0}
.kort{background:var(--kritt);border:1px solid var(--kant);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--skygge);
  display:flex;flex-direction:column;transition:transform .13s ease,
  box-shadow .13s ease}
.kort:hover{transform:translateY(-2px);
  box-shadow:0 3px 6px rgba(31,36,32,.09),0 10px 26px rgba(31,36,32,.08)}
.kort img{width:100%;aspect-ratio:16/10;object-fit:cover}
.kort-tekst{padding:.85rem 1rem 1rem;display:flex;flex-direction:column;
  flex:1}
.kort h3{margin:0 0 .35rem;font-size:1.045rem;line-height:1.3}
.kort h3 a{color:var(--furu);text-decoration:none}
.kort h3 a:hover{color:var(--kobber)}
.kort p{font-size:.895rem;color:var(--blekk-svak);margin:0}
.kort .stikk{font-size:.7rem;margin:0 0 .3rem}

/* ------------------------------------------------------------------- sok */
.sokeboks{position:relative}
.sokefelt{width:100%;padding:.72rem .9rem .72rem 2.4rem;font:inherit;
  font-size:1rem;border:1px solid var(--kant);border-radius:var(--r);
  background:var(--kritt);color:var(--blekk)}
.sokefelt:focus{outline:2px solid var(--kobber);outline-offset:1px;
  border-color:var(--kobber)}
.sokeboks svg{position:absolute;left:.75rem;top:50%;
  transform:translateY(-50%);opacity:.45;pointer-events:none}
.sokesvar{list-style:none;padding:0;margin:1rem 0 0}
.sokesvar li{border-bottom:1px solid var(--kant);padding:.65rem 0}
.sokesvar a{font-weight:600;text-decoration:none;color:var(--furu)}
.sokesvar a:hover{color:var(--kobber)}
.sokesvar .sti{display:block;font-size:.8rem;color:var(--blekk-svak);
  margin-top:.15rem}
.ingen{color:var(--blekk-svak);font-style:italic}

/* -------------------------------------------------- forsideverktoy m.m. */
.forside-verktoy{display:flex;gap:.8rem;align-items:stretch;margin:0 0 1.2rem;
  flex-wrap:wrap}
.forside-verktoy .sokeboks{flex:1 1 22rem}
.forside-verktoy .knapp{flex:0 0 auto;white-space:nowrap}
@media(max-width:560px){.forside-verktoy .knapp{width:100%}}

.merkeforklaring{background:var(--kritt);border:1px solid var(--kant);
  border-radius:var(--r);padding:1.3rem 1.5rem;margin:2.4rem 0;
  box-shadow:var(--skygge)}
.merkeforklaring h2{margin:0 0 .6rem;font-size:1.3rem}
.merkeliste{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:.55rem;
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.merkeliste li{display:flex;align-items:center;gap:.6rem;margin:0;
  font-size:.95rem;color:var(--blekk-svak)}
.merkeliste .merke{position:static;flex:0 0 auto}

/* ----------------------------------------------------------------- footer */
.bunn{background:var(--furu);color:#d8d3c7;margin-top:3rem;
  padding:2.4rem 0 1.6rem;font-size:.92rem}
@media (prefers-color-scheme:dark){.bunn{background:#1a2b23}}
:root[data-theme="dark"] .bunn{background:#1a2b23}
:root[data-theme="light"] .bunn{background:#2d4a3e}
.bunn a{color:#f0ece2}
.bunn h2{color:#fff;font-size:.82rem;font-family:var(--sans);
  letter-spacing:.09em;text-transform:uppercase;margin:0 0 .7rem}
.bunn-rutenett{display:grid;gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.bunn ul{list-style:none;padding:0;margin:0}
.bunn li{margin:.32rem 0}
.bunn-linje{border-top:1px solid rgba(255,255,255,.16);margin-top:2rem;
  padding-top:1.1rem;font-size:.845rem;color:#b9b3a6;
  display:flex;flex-wrap:wrap;gap:.5rem 1.3rem;justify-content:space-between}

/* --------------------------------------------------------------- samtykke */
#samtykke{position:fixed;left:0;right:0;bottom:0;z-index:200;
  background:var(--kritt);border-top:2px solid var(--kobber);
  box-shadow:0 -4px 24px rgba(31,36,32,.16);padding:1.1rem 0}
#samtykke .rammer{display:flex;gap:1.1rem;align-items:center;
  flex-wrap:wrap}
#samtykke p{margin:0;flex:1 1 22rem;font-size:.92rem}
#samtykke .knapper{display:flex;gap:.6rem;flex-wrap:wrap}
.knapp{font:600 .93rem var(--sans);padding:.6rem 1.15rem;border-radius:var(--r);
  border:1px solid var(--furu);background:var(--furu);color:#fff;
  cursor:pointer;text-decoration:none;display:inline-block}
.knapp:hover{background:var(--furu-lys);color:#fff}
.knapp.sekundar{background:transparent;color:var(--furu);
  border-color:var(--kant)}
.knapp.sekundar:hover{background:var(--salvie-blek);color:var(--furu)}

@media print{.topp,.bunn,.sidespalte,#samtykke{display:none}}