/* Varden, delt stilark. Én kilde for palett, typografi og komponenter.
   Alle stier er relative: malen serveres under /nettsidemaler/varden/. */

/* ---------- Tokens ---------- */
:root{
  --lilla:#471d7c;
  --lilla-mork:#33135a;
  --magenta:#c6007e;
  --grad:linear-gradient(125deg,#471d7c 0%,#7b1877 48%,#c6007e 100%);
  --blekk:#303030;
  --brod:#5f5f68;
  --meta:#6d6d6d;
  --lys:#f6f5f8;
  --kant:#e6e4ea;
  --hvit:#ffffff;
  --ramme:1200px;
  --radius:18px;
  --skygge:0 2px 4px rgba(0,0,0,.04),0 12px 32px rgba(48,32,72,.07);
  --overgang:.25s ease;
  /* Bunnlinja i footeren, mot --morko. 8b8892 ga 3,79:1, under kravet. */
  --footer-meta:#9b98a1;
}

/* ---------- Grunn ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:1.0625rem;line-height:1.65;font-weight:400;
  color:var(--brod);background:var(--hvit);
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--lilla);text-decoration:none;transition:color var(--overgang),opacity var(--overgang)}
/* Lenker i lopende tekst skal skille seg fra teksten med mer enn farge (WCAG 1.4.1). */
p a:not(.knapp){text-decoration:underline}
a:hover{color:var(--magenta)}
:focus-visible{outline:3px solid var(--magenta);outline-offset:3px;border-radius:4px}

h1,h2,h3,h4{color:var(--blekk);font-weight:700;line-height:1.18;letter-spacing:-.02em;margin:0 0 .6em}
h1{font-size:clamp(2.1rem,5.2vw,3.35rem);font-weight:800}
h2{font-size:clamp(1.7rem,3.6vw,2.4rem)}
h3{font-size:clamp(1.2rem,2.2vw,1.5rem)}
h4{font-size:1.0625rem}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.ramme{width:100%;max-width:var(--ramme);margin:0 auto;padding:0 24px}
.seksjon{padding:72px 0}
.seksjon-tett{padding:48px 0}
.baand-lys{background:var(--lys)}
.baand-mork{background:var(--blekk);color:#d6d4da}
.baand-mork h2,.baand-mork h3,.baand-mork h4{color:var(--hvit)}
/* Ankere må klarere den sticky toppen, ellers lander seksjonen under den. */
section[id],div[id]{scroll-margin-top:124px}

.midtstilt{text-align:center;max-width:720px;margin:0 auto 44px}
.midtstilt p{color:var(--meta)}
/* Kort magenta strek over overskriften, referansens signaturgrep. */
.strek::before{content:"";display:block;width:38px;height:3px;border-radius:2px;background:var(--magenta);margin:0 0 20px}
.midtstilt.strek::before{margin-left:auto;margin-right:auto}

/* ---------- Knapper ---------- */
.knapp{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;border-radius:999px;border:1.5px solid transparent;
  font-size:.95rem;font-weight:600;letter-spacing:.01em;line-height:1.2;
  cursor:pointer;text-align:center;
  transition:transform var(--overgang),box-shadow var(--overgang),background var(--overgang),color var(--overgang),border-color var(--overgang);
}
.knapp:hover{transform:translateY(-2px)}
.knapp-magenta{background:var(--magenta);color:var(--hvit);box-shadow:0 6px 18px rgba(198,0,126,.25)}
.knapp-magenta:hover{background:#a90069;color:var(--hvit);box-shadow:0 10px 26px rgba(198,0,126,.32)}
.knapp-lilla{background:var(--lilla);color:var(--hvit)}
.knapp-lilla:hover{background:var(--lilla-mork);color:var(--hvit)}
.knapp-linje{background:transparent;color:var(--lilla);border-color:#cfc6dd}
.knapp-linje:hover{background:var(--lilla);color:var(--hvit);border-color:var(--lilla)}
.knapp-hvit{background:var(--hvit);color:var(--lilla)}
.knapp-hvit:hover{background:#f2edf7;color:var(--lilla-mork)}
/* Mørk bunn er noen ganger en egen bakgrunn og ikke klassen, derfor begge selektorene. */
.baand-mork .knapp-linje,footer .knapp-linje{color:var(--hvit);border-color:rgba(255,255,255,.45)}
.baand-mork .knapp-linje:hover,footer .knapp-linje:hover{background:var(--hvit);color:var(--blekk);border-color:var(--hvit)}

/* ---------- Topp ---------- */
.topp{position:sticky;top:0;z-index:60;background:var(--hvit);box-shadow:0 1px 0 var(--kant)}
.topplinje{background:var(--lys);border-bottom:1px solid var(--kant);font-size:.82rem}
.topplinje .ramme{display:flex;justify-content:flex-end;gap:26px;align-items:center;height:38px}
.topplinje a{color:var(--meta);font-weight:500}
.topplinje a:hover{color:var(--magenta)}
.topp-inner{display:flex;flex-wrap:wrap;align-items:center;gap:20px;min-height:76px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.3rem;color:var(--blekk);letter-spacing:-.03em;flex:none}
.logo:hover{color:var(--blekk)}
.logo .merke{width:30px;height:30px;flex:none}
.logo b{color:var(--magenta);font-weight:800}

.menybryter{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.hamburger{display:none;flex:none;width:44px;height:44px;margin-left:auto;
  align-items:center;justify-content:center;cursor:pointer;border-radius:10px}
.hamburger span,.hamburger span::before,.hamburger span::after{
  content:"";display:block;width:22px;height:2px;background:var(--blekk);border-radius:2px;transition:transform var(--overgang),opacity var(--overgang)}
.hamburger span{position:relative}
.hamburger span::before{position:absolute;top:-7px}
.hamburger span::after{position:absolute;top:7px}

nav{margin-left:auto}
nav ul{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0}
nav a{color:var(--blekk);font-size:.95rem;font-weight:600}
nav a:hover{color:var(--magenta)}
nav .mobil-cta{display:none}
.topp-cta{display:flex;align-items:center;gap:10px;flex:none}
.topp-cta .knapp{padding:11px 20px;font-size:.9rem}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:78px 0 84px}
.hero::after{content:"";position:absolute;top:-180px;right:-160px;width:620px;height:620px;border-radius:50%;
  background:radial-gradient(circle,rgba(198,0,126,.10),rgba(71,29,124,0) 68%);pointer-events:none}
.hero .ramme{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.hero-tekst{width:100%;min-width:0}
.hero-tekst p{font-size:1.075rem;max-width:35em}
.hero-knapper{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 0}

/* Vurderingsmerket under heroen */
.vurdering{display:inline-flex;align-items:center;gap:14px;margin-top:38px;padding:14px 20px;
  background:var(--hvit);border:1px solid var(--kant);border-radius:14px;box-shadow:var(--skygge)}
.stjerner{display:flex;gap:3px}
.stjerner span{width:19px;height:19px;background:#00a99d;border-radius:3px;display:grid;place-items:center;color:#fff;font-size:11px;line-height:1}
.vurdering b{color:var(--blekk);font-size:.95rem}
.vurdering small{color:var(--meta);font-size:.85rem;display:block}

/* Dråpeformen: sirkel med ett skarpt hjørne. Referansens signatur. */
.draape{position:relative;width:100%;aspect-ratio:1/1;border-radius:0 999px 999px 999px;overflow:hidden;background:var(--lys)}
.draape img{width:100%;height:100%;object-fit:cover}
.draape-ned{border-radius:999px 999px 999px 0}
.draape-opp{border-radius:999px 0 999px 999px}
.hero-bilde{position:relative}
/* Lilla kartnål som overlapper bildet */
.hero-bilde::before{content:"";position:absolute;left:-14px;top:2%;width:23%;aspect-ratio:1/1;z-index:2;
  background:linear-gradient(150deg,#5d2394,#3d1568);border-radius:50% 50% 50% 4px;transform:rotate(45deg);
  box-shadow:0 14px 30px rgba(61,21,104,.28)}

/* ---------- Rullebånd (fasit: .claude/skills/nettside/rullebaand.md) ---------- */
.rullebaand{overflow:hidden}
.rulle-spor{display:flex;width:max-content;will-change:transform}
.rulle-gruppe{display:flex;align-items:center;flex:none}
.rulle-gruppe > *{flex:none;margin-right:64px}
.rulle-tekst{white-space:nowrap;font-size:1.35rem;font-weight:800;letter-spacing:-.02em;color:#7d7a88}
.rullebaand[data-rulle-klar] .rulle-spor{animation:rulle var(--rulle-varighet) linear infinite}
.rullebaand[data-rulle-klar]:hover .rulle-spor{animation-play-state:paused}
.rullebaand[data-rulle-retning="hoyre"] .rulle-spor{animation-direction:reverse}
@keyframes rulle{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .rullebaand[data-rulle-klar] .rulle-spor{animation:none}
  .rulle-spor > [data-rulle-gruppe][aria-hidden="true"]{display:none}
}
.rulle-tittel{text-align:center;font-size:.85rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blekk);margin:0 0 26px}

/* ---------- Kort ---------- */
.kortgrid{display:grid;gap:24px}
.kortgrid-2{grid-template-columns:repeat(2,1fr)}
.kortgrid-3{grid-template-columns:repeat(3,1fr)}
.kortgrid-4{grid-template-columns:repeat(4,1fr)}
.kort{background:var(--hvit);border:1px solid var(--kant);border-radius:var(--radius);padding:30px}
.kort-lys{background:var(--lys);border-color:transparent}
.kort-grad{background:var(--grad);border-color:transparent;color:rgba(255,255,255,.9)}
.kort-grad h3,.kort-grad h2{color:var(--hvit)}
.kort-heve{transition:transform var(--overgang),box-shadow var(--overgang)}
.kort-heve:hover{transform:translateY(-4px);box-shadow:var(--skygge)}

.punkter{list-style:none;margin:18px 0 0;padding:0}
.punkter li{position:relative;padding-left:22px;margin-bottom:11px;font-size:.98rem}
.punkter li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--magenta)}
.kort-grad .punkter li::before{background:var(--hvit)}
.punkter li:last-child{margin-bottom:0}
.knapp-rad{margin:22px 0 0}
.footer-merke{width:28px;height:28px}

/* Ikonkort */
.ikon{width:46px;height:46px;border-radius:13px;background:rgba(71,29,124,.08);display:grid;place-items:center;margin-bottom:18px}
.ikon svg{width:23px;height:23px;stroke:var(--lilla);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Tall ---------- */
.tall{position:relative;background:var(--hvit);border-radius:var(--radius);padding:34px 28px 28px;overflow:hidden;text-align:left}
.tall .spok{position:absolute;left:14px;top:-18px;font-size:6.2rem;font-weight:800;color:rgba(198,0,126,.07);line-height:1;pointer-events:none;letter-spacing:-.04em}
.tall .verdi{position:relative;font-size:clamp(2.2rem,4.4vw,3rem);font-weight:700;color:var(--magenta);line-height:1;letter-spacing:-.03em}
.tall .merkelapp{position:relative;display:block;margin-top:14px;font-size:.8rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--blekk)}

/* ---------- Sikksakk ---------- */
.sikksakk{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.sikksakk + .sikksakk{margin-top:84px}
.sikksakk .bilde{width:100%;min-width:0}
.sikksakk .tekst{width:100%;min-width:0}
.sikksakk.speil .bilde{order:2}
.sikksakk.speil .tekst{order:1}

/* Bildetekst-kort som henger utenfor bildet */
.bildekort{position:relative;margin:-64px 0 0 -8px;max-width:330px;background:var(--lys);border-radius:14px;padding:20px 22px;font-size:.92rem;z-index:3}

/* ---------- Trekkspill ---------- */
.trekkspill{border-top:1px solid var(--kant)}
.trekkspill details{border-bottom:1px solid var(--kant)}
.trekkspill summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font-weight:700;font-size:1.08rem;color:var(--blekk);transition:color var(--overgang)}
.trekkspill summary::-webkit-details-marker{display:none}
.trekkspill summary:hover{color:var(--magenta)}
.trekkspill details[open] summary{color:var(--magenta)}
.trekkspill summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-70%) rotate(45deg);transition:transform var(--overgang)}
.trekkspill details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.trekkspill .innhold{padding:0 20px 22px 0;font-size:.98rem;color:var(--brod)}

/* ---------- Skjema ---------- */
.felt{margin-bottom:16px}
.felt label{display:block;font-size:.87rem;font-weight:600;color:var(--blekk);margin-bottom:6px}
.felt .krav{color:var(--magenta)}
.felt input,.felt select,.felt textarea{
  width:100%;padding:12px 14px;font:inherit;font-size:.97rem;color:var(--blekk);
  background:var(--hvit);border:1px solid var(--kant);border-radius:10px;
  transition:border-color var(--overgang),box-shadow var(--overgang)}
.felt textarea{min-height:118px;resize:vertical}
.felt input:focus,.felt select:focus,.felt textarea:focus{
  outline:none;border-color:var(--lilla);box-shadow:0 0 0 3px rgba(71,29,124,.12)}
.felt-rad{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.skjemanote{font-size:.82rem;color:var(--meta);margin-top:14px}
.takk{display:none;text-align:center;padding:26px 10px}
.takk .hake{width:56px;height:56px;border-radius:50%;background:rgba(0,169,157,.12);color:#00a99d;
  display:grid;place-items:center;margin:0 auto 16px;font-size:1.6rem}
.takk h3{margin-bottom:8px}
form.sendt .skjemainnhold{display:none}
form.sendt .takk{display:block}

/* Skjemakort som henger ned i footeren */
.skjemakort{background:var(--hvit);border-radius:var(--radius);padding:32px;box-shadow:var(--skygge);
  position:relative;z-index:4;margin-bottom:-96px}
.skjemakort h3{margin-bottom:18px}

/* ---------- Footer ---------- */
footer{background:var(--blekk);color:#b9b7c0;font-size:.94rem;position:relative;z-index:1}
footer .topp-pad{padding-top:96px}
footer a{color:#b9b7c0}
footer a:hover{color:var(--hvit)}
/* UU (WCAG 1.3.1): fotspaltene var h4 rett etter h2. Nivå er semantikk, stilen følger taggen. */
footer h3{font-size:.8rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--hvit);margin-bottom:16px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding:56px 0 44px}
.footer-logo{font-size:1.45rem;font-weight:800;color:var(--hvit);letter-spacing:-.03em;display:flex;align-items:center;gap:10px}
.footer-logo b{color:#e055ab;font-weight:800}
.footer-slag{margin-top:14px;max-width:26em;color:#b9b7c0}
.footer-lenker{list-style:none;margin:0;padding:0}
.footer-lenker li{margin-bottom:10px}
.footer-bunn{border-top:1px solid rgba(255,255,255,.12);padding:20px 0;display:flex;flex-wrap:wrap;
  gap:8px 26px;align-items:center;font-size:.85rem;color:var(--footer-meta)}
.footer-bunn a{color:var(--footer-meta)}
.footer-bunn .hoyre{margin-left:auto}
.kontaktlinje{display:flex;flex-direction:column;gap:8px;margin-top:22px}
.kontaktlinje a{color:var(--hvit);font-weight:600}

/* ---------- Enkle innholdssider ---------- */
.sidetopp{background:var(--lys);padding:56px 0;border-bottom:1px solid var(--kant)}
.sidetopp h1{margin-bottom:10px}
.sidetopp p{color:var(--meta);max-width:46em;margin:0}
.tekstside{max-width:760px}
.tekstside h2{margin-top:44px;font-size:1.45rem}
.tekstside h2:first-child{margin-top:0}
.tekstside ul{padding-left:20px}
.tekstside li{margin-bottom:8px}
.tekstside table{width:100%;border-collapse:collapse;margin:18px 0;font-size:.95rem}
.tekstside th,.tekstside td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--kant);vertical-align:top}
.tekstside th{color:var(--blekk);font-weight:700}

/* ---------- Nyheter: listemal og artikkelmal ---------- */
/* Kortene får sin naturlige høyde. Uten dette strekkes et kort uten bilde like høyt som naboen
   med bilde, og det ser ødelagt ut i stedet for kortere. */
[data-kws-innleggsliste] { align-items: start }
/* Kortet er et .kort uten padding, fordi bildet skal gå helt ut i kanten. */
.innlegg{padding:0;overflow:hidden;display:flex;flex-direction:column}
.innlegg-bilde{aspect-ratio:16/10;background:var(--lys)}
.innlegg-bilde img{width:100%;height:100%;object-fit:cover}
.innlegg-tekst{padding:24px 26px 28px}
.innlegg-dato{color:var(--meta);font-size:.88rem;margin:0 0 9px}
.innlegg h3{font-size:1.16rem;margin-bottom:9px}
.innlegg h3 a{color:var(--blekk)}
.innlegg h3 a:hover{color:var(--magenta)}
.innlegg-tom{color:var(--meta);text-align:center;margin:0}
.artikkel-topp{aspect-ratio:16/7;background:var(--lys);border-radius:var(--radius);overflow:hidden;margin-bottom:34px}
.artikkel-topp img{width:100%;height:100%;object-fit:cover}
.tekstside .knapp-rad{margin-top:36px}

/* ---------- Mobil ---------- */
@media (max-width:980px){
  .hero .ramme{grid-template-columns:1fr;gap:44px}
  .sikksakk{grid-template-columns:1fr;gap:32px}
  .sikksakk.speil .bilde,.sikksakk.speil .tekst{order:0}
  .sikksakk + .sikksakk{margin-top:56px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  /* Tre og fire kolonner blir for trange på nettbrett, de går til to før de kollapser helt. */
  .kortgrid-3,.kortgrid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .topplinje{display:none}
  section[id],div[id]{scroll-margin-top:84px}
  .topp-inner{min-height:64px;gap:12px}
  .hamburger{display:flex}
  .topp-cta{display:none}
  nav{position:absolute;top:100%;left:0;right:0;margin:0;background:var(--hvit);
    max-height:0;overflow:hidden;transition:max-height .3s ease;box-shadow:0 14px 24px rgba(0,0,0,.09)}
  #menyknapp:checked ~ nav{max-height:520px}
  nav ul{flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 20px}
  nav li{border-bottom:1px solid var(--kant)}
  nav li:last-child{border-bottom:none}
  nav a{display:block;padding:15px 0;font-size:1rem}
  nav .mobil-cta{display:block;padding-top:16px}
  nav .mobil-cta a{display:flex;padding:13px 22px}
  #menyknapp:checked ~ .hamburger span{background:transparent}
  #menyknapp:checked ~ .hamburger span::before{transform:translateY(7px) rotate(45deg)}
  #menyknapp:checked ~ .hamburger span::after{transform:translateY(-7px) rotate(-45deg)}
}
@media (max-width:760px){
  .seksjon{padding:52px 0}
  .kortgrid-2,.kortgrid-3,.kortgrid-4{grid-template-columns:1fr}
  .felt-rad{grid-template-columns:1fr}
  .hero{padding:48px 0 58px}
  .hero-knapper .knapp{flex:1 1 auto}
  /* Begge retningsvariantene nevnes eksplisitt, ellers vinner desktop-regelen på margin. */
  .bildekort,.sikksakk .bildekort,.sikksakk.speil .bildekort{margin:-42px auto 0;max-width:100%}
  .footer-grid{grid-template-columns:1fr;gap:28px;padding:44px 0 34px}
  .skjemakort{padding:24px;margin-bottom:-72px}
  footer .topp-pad{padding-top:80px}
  .footer-bunn .hoyre{margin-left:0}
  .vurdering{width:100%}
}
@media (max-width:430px){
  .ramme{padding:0 18px}
  .kort{padding:24px}
  .tall .spok{font-size:5rem}
}
.avstand{margin-top:24px}