@charset "UTF-8";

/* =========================
   MENNESKERETTIGHETSKURS
   Lastes etter styles.css og bruker variablene derfra.
   ========================= */

.kurs{
  --kurs-gul:#ffc23d;
  --kurs-gul-hover:#ffb20f;
  --kurs-lys:#e8edf5;
  --kurs-lenke:#1d4f91;
  --kurs-overskrift:"Bricolage Grotesque", "Manrope", system-ui, sans-serif;
  --kurs-haand:"Caveat Brush", cursive;

  font-size:1.0625rem;
  line-height:1.6;
  padding-bottom:24px;
}

.kurs h1,
.kurs h2,
.kurs h3{
  font-family:var(--kurs-overskrift);
  color:var(--brand);
  line-height:1.1;
  letter-spacing:-.5px;
  margin:0 0 .5em;
}

.kurs h1{ font-size:clamp(36px, 5.6vw, 64px); font-weight:800; }
.kurs h2{ font-size:clamp(28px, 3.4vw, 40px); font-weight:800; }
.kurs h3{ font-size:22px; font-weight:700; }

.kurs p{ margin:0 0 1em; }

.kurs a{
  color:var(--kurs-lenke);
  text-decoration:underline;
  text-underline-offset:3px;
}

.kurs a:hover{ color:var(--brand); }

.kurs :focus-visible{
  outline:3px solid var(--brand);
  outline-offset:2px;
}

.kurs-haand{
  font-family:var(--kurs-haand);
  font-weight:400;
  letter-spacing:0;
}

.kurs-seksjon{ padding:48px 0; }

.kurs-ingress{
  font-size:1.25rem;
  color:var(--text);
  max-width:56ch;
}

.kurs-svak{ color:var(--muted); }

/* KNAPPER */

.kurs .kurs-knapp{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:52px;
  padding:10px 24px;
  border:2px solid transparent;
  border-radius:12px;
  font-size:18px;
  font-weight:700;
  text-decoration:none;
}

.kurs .kurs-knapp--gul{ background:var(--kurs-gul); color:var(--brand); }
.kurs .kurs-knapp--gul:hover{ background:var(--kurs-gul-hover); color:var(--brand); }
.kurs .kurs-knapp--bla{ background:var(--brand); color:#fff; }
.kurs .kurs-knapp--bla:hover{ background:var(--brand2); color:#fff; }
.kurs .kurs-knapp--kant{ border-color:var(--brand); color:var(--brand); }
.kurs .kurs-knapp--kant:hover{ background:var(--brand); color:#fff; }

.kurs-knapper{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

/* TOPPMENY (bygger på AF sin .topbar) */

.topbar .desktop-nav > a{ font-size:16px; font-weight:500; }

.topbar .desktop-nav .navCta{
  background:#ffc23d;
  color:var(--brand);
  font-weight:700;
}

.topbar .desktop-nav .navCta:hover{
  background:#ffb20f;
  filter:none;
}

.topbar .mobileNav{
  padding-top:calc(var(--logo-hang) + 28px);
}

.topbar .mobileNav > a{
  padding:14px 10px;
  font-size:17px;
}

.kurs-hero .container{
  display:grid;
  gap:32px;
  padding:calc(var(--logo-hang) + 40px) 0 48px;     /* var: 40px 0 48px */
}
@media (min-width:900px){
  .kurs-hero .container{
    grid-template-columns:1.1fr 1fr;
    align-items:center;
    padding:calc(var(--logo-hang) + 56px) 0 64px;   /* var: 64px 0 */
  }
}

.kurs-smuler{
   margin:calc(var(--logo-hang) + 56px) 0 20px;
  color:var(--muted);
  font-size:15px;
}
/* FORSIDE */

.kurs-hero{
  background:#fff;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}

.kurs-hero .container{
  display:grid;
  gap:32px;
  padding:40px 0 48px;
}

.kurs-etikett{
  display:inline-block;
  padding:4px 14px;
  border-radius:99px;
  background:var(--kurs-lys);
  color:var(--brand);
  font-size:15px;
  font-weight:700;
}

.kurs-hero h1{ margin-bottom:0; }

.kurs-hero h1 .kurs-haand{
  display:block;
  margin-top:4px;
  font-size:.8em;
}

.kurs-strek{
  display:block;
  width:min(280px, 70%);
  height:auto;
  margin:2px 0 22px;
}

.kurs-hero img{
  width:100%;
  height:auto;
  aspect-ratio:5 / 4;
  object-fit:cover;
  border-radius:24px;
  background:#d9d2c5;
}

.kurs-fakta{
  display:flex;
  flex-wrap:wrap;
  gap:6px 24px;
  margin:22px 0 0;
  padding:0;
  list-style:none;
  color:var(--muted);
}

.kurs-fakta strong{
  color:var(--brand);
  font-family:var(--kurs-overskrift);
  font-size:1.4rem;
}

@media (min-width:900px){
  .kurs-hero .container{
    grid-template-columns:1.1fr 1fr;
    align-items:center;
    padding:64px 0;
  }
}

/* FREMDRIFT */

.kurs-fremdrift{ padding-top:32px; }
.kurs-fremdrift[hidden]{ display:none; }

.kurs-fremdrift__boks{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px 40px;
  padding:22px 28px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
}

.kurs-fremdrift__boks > div:first-child{ flex:1 1 260px; }
.kurs-fremdrift__linje{ flex:999 1 320px; }

.kurs-fremdrift__tittel{
  margin:0;
  color:var(--brand);
  font-size:26px;
  line-height:1.1;
}

.kurs .kurs-fremdrift__lenke{
  color:var(--brand);
  font-family:var(--kurs-overskrift);
  font-size:20px;
  font-weight:700;
}

.kurs-bar{
  height:14px;
  border-radius:99px;
  background:var(--kurs-lys);
  overflow:hidden;
}

.kurs-bar span{
  display:block;
  width:0;
  height:100%;
  border-radius:99px;
  background:var(--brand);
}

.kurs-fremdrift__linje p{
  margin:8px 0 0;
  color:var(--muted);
  font-size:16px;
}

/* KURSDELER */

.kurs-deler{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  align-items:start;
  gap:20px;
}

.kurs-del{
  display:flex;
  flex-direction:column;
  border-radius:20px;
  overflow:hidden;
  background:#f9d9c8;
}

.kurs-del--2{ background:#d8e4f2; }
.kurs-del--3{ background:#f7e6ae; }
.kurs-del--4{ background:#e6ddf5; }
.kurs-del--5{ background:#fad4df; }
.kurs-del--6{ background:#efe3d3; }

.kurs-del img{
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  object-fit:cover;
  background:#d9d2c5;
}

.kurs-del__tekst{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:20px 20px 8px;
}

.kurs-del__tekst > p:not(.kurs-del__nr){
  flex:1;
  color:var(--text);
}

.kurs-del__topp{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:6px;
}

.kurs-del__nr{
  margin:0;
  padding:3px 10px;
  border-radius:99px;
  background:var(--brand);
  color:#fff;
  font-size:13px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.kurs-del__status{
  margin:0;
  color:var(--brand);
  font-size:14px;
  font-weight:700;
}

.kurs-del details > summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:52px;
  border-top:2px solid rgba(0,43,95,.15);
  color:var(--brand);
  font-weight:700;
  cursor:pointer;
  list-style:none;
}

.kurs-del details > summary::-webkit-details-marker{ display:none; }

.kurs-del details > summary::after{
  content:"+";
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--brand);
  color:#fff;
  font-size:20px;
  font-weight:400;
}

.kurs-del details[open] > summary::after{ content:"−"; }

.kurs-del ol{
  margin:0;
  padding:0 0 12px 22px;
}

.kurs-del li a{
  display:block;
  padding:6px 0;
  color:var(--brand);
}

.kurs a.lest::after{
  content:" ✓";
  font-weight:700;
  text-decoration:none;
}

/* VISSTE DU */

.kurs-visste{
  margin-top:24px;
  background:var(--brand);
  color:#fff;
}

.kurs-visste h2{
  color:var(--kurs-gul);
  font-family:var(--kurs-haand);
  font-size:clamp(40px, 5vw, 56px);
  font-weight:400;
  letter-spacing:0;
}

.kurs-visste ul{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap:16px;
  margin:0;
  padding:0;
  list-style:none;
}

.kurs-visste li{
  padding:20px 22px;
  border:2px solid rgba(255,255,255,.2);
  border-radius:20px;
  font-size:17px;
}

.kurs-visste strong{
  display:block;
  color:var(--kurs-gul);
  font-family:var(--kurs-overskrift);
  font-size:1.8rem;
  line-height:1.2;
}

.kurs-boks{
  margin:28px 0;
  padding:20px 22px;
  border-radius:20px;
  background:#fff3d6;
}

.kurs-boks h2,
.kurs-artikkel .kurs-boks h2{
  margin:0 0 4px;
  font-family:var(--kurs-haand);
  font-size:30px;
  font-weight:400;
  letter-spacing:0;
}

.kurs-boks p{ margin:0; }

/* TEST OG LÆRER */

.kurs-panel{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:32px;
  border-radius:24px;
}

.kurs-panel > div{ flex:1 1 26rem; }
.kurs-panel p:last-child{ margin-bottom:0; }

.kurs-panel--test{ background:var(--kurs-gul); }
.kurs-panel--test a:not(.kurs-knapp){ color:var(--brand); }
.kurs-panel--laerer{ border:2px dashed #9aa3b2; }

/* KAPITTEL */

.kurs-smuler{
  margin:20px 0;
  color:var(--muted);
  font-size:15px;
}

.kurs-kapittel{
  display:grid;
  gap:32px;
  padding-bottom:40px;
}

.kurs-artikkel{ max-width:42rem; }

.kurs-artikkel .kurs-del__nr{
  display:inline-block;
  margin-bottom:12px;
}

.kurs-artikkel h1{ font-size:clamp(32px, 4.4vw, 48px); }

.kurs-artikkel h2{
  margin-top:1.6em;
  font-size:26px;
}

.kurs-bla{
  display:grid;
  gap:12px;
  margin-top:40px;
}

.kurs .kurs-bla a{
  display:block;
  padding:16px 20px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  color:var(--brand);
  font-weight:700;
  text-decoration:none;
}

.kurs .kurs-bla a:last-child{
  background:var(--kurs-gul);
  border-color:var(--kurs-gul);
}

.kurs-bla small{
  display:block;
  color:var(--muted);
  font-weight:400;
}

.kurs-bla a:last-child small{ color:var(--brand); }

.kurs-liste details{
  padding:0 20px;
  border-radius:20px;
  background:#d8e4f2;
}

.kurs-liste summary{
  padding:16px 0 4px;
  color:var(--brand);
  font-family:var(--kurs-overskrift);
  font-size:18px;
  font-weight:700;
  cursor:pointer;
}

.kurs-liste__status{
  margin:0 0 8px;
  color:var(--brand);
  font-size:14px;
  font-weight:700;
}

.kurs-liste ol{
  margin:0;
  padding:0 0 16px 22px;
}

.kurs-liste li a{
  display:block;
  padding:5px 0;
  color:var(--brand);
}

.kurs .kurs-liste a[aria-current]{
  font-weight:700;
  text-decoration:none;
}

@media (min-width:640px){
  .kurs-bla{ grid-template-columns:1fr 1fr; }
  .kurs-bla a:last-child{ text-align:right; }
}

@media (min-width:960px){
  .kurs-kapittel{
    grid-template-columns:minmax(0, 1fr) 300px;
    align-items:start;
  }

  .kurs-liste{
    position:sticky;
    top:calc(var(--nav-bar-h) + 20px);
  }
}

/* KREDITT */

.kurs-kreditt{
  border-top:1px solid var(--line);
  padding:20px 0 0;
  color:var(--muted);
  font-size:15px;
}

.kurs-kreditt p{ margin:0 0 4px; }

/* LENKE TIL HOVEDSIDEN I AF-TOPPEN */

.kurs-til-af{
  color:#fff;
  font-size:15px;
  padding:10px 0;
  text-decoration:underline;
  text-underline-offset:3px;
}

.kurs-til-af:hover{ color:#fff; opacity:.85; }

@media (max-width:640px){
  .kurs-til-af{ display:none; }
}
/* FREMDRIFT I KAPITLET */

.kurs-fremdrift-kapittel{
  margin:0 0 24px;
  padding:14px 18px;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--line);
}

.kurs-fremdrift-kapittel p{
  margin:8px 0 0;
  color:var(--brand);
  font-size:15px;
  font-weight:600;
}
/* BILDE TIL VENSTRE I TEKSTEN */
.kurs-artikkel .kurs-bilde--venstre{float:left;max-width:40%;height:auto;margin:4px 20px 12px 0;}
.kurs-artikkel::after{content:"";display:block;clear:both;}

/* BRØDSMULER – mer luft under logoen */
.kurs-smuler{margin:calc(var(--logo-hang) + 30px) 0 24px;}

/* ANDRE DELER I SIDEMENYEN */
.kurs-andre{margin-top:20px;padding-top:16px;border-top:1px solid rgba(0,43,95,.15);}
.kurs-andre__tittel{margin:0 0 10px;color:var(--brand);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
.kurs-andre ul{margin:0;padding:0;list-style:none;}
.kurs-andre li{margin:0;}
.kurs .kurs-andre__lenke{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:10px;color:var(--brand);font-size:15px;font-weight:600;text-decoration:none;}
.kurs .kurs-andre__lenke:hover{background:rgba(255,255,255,.6);}
.kurs-andre__lenke::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:#f9d9c8;box-shadow:inset 0 0 0 1px rgba(0,43,95,.2);}
.kurs-andre--2::before{background:#d8e4f2;}
.kurs-andre--3::before{background:#f7e6ae;}
.kurs-andre--4::before{background:#e6ddf5;}
.kurs-andre--5::before{background:#fad4df;}
.kurs-andre--6::before{background:#efe3d3;}
/* Test deg selv */
.kurs-quiz{margin:28px 0 8px;}
.kurs-quiz fieldset{margin:0 0 22px;padding:20px 22px;border:0;border-radius:18px;background:var(--kurs-lys);}
.kurs-quiz legend{float:left;width:100%;margin:0 0 14px;padding:0;color:var(--brand);font-weight:700;font-size:18px;line-height:1.35;}
.kurs-quiz label{clear:both;display:flex;align-items:flex-start;gap:12px;margin:0 0 8px;padding:12px 14px;border:2px solid transparent;border-radius:12px;background:#fff;cursor:pointer;line-height:1.4;}
.kurs-quiz label:hover{border-color:rgba(0,43,95,.25);}
.kurs-quiz input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--brand);}
.kurs-quiz .er-besvart label{cursor:default;}
.kurs-quiz .er-besvart label:hover{border-color:transparent;}
.kurs-quiz label.er-riktig,
.kurs-quiz .er-besvart label.er-riktig:hover{border-color:#15803d;background:#e6f4ea;font-weight:600;}
.kurs-quiz label.er-riktig::after{content:"✓";margin-left:auto;color:#15803d;font-weight:800;}
.kurs-quiz label.er-riktig::after{content:"✓";margin-left:auto;color:var(--brand);font-weight:800;}
.kurs-quiz label.er-feil,
.kurs-quiz .er-besvart label.er-feil:hover{border-color:#c2410c;background:#fde8e1;}
.kurs-quiz label.er-feil::after{content:"✗";margin-left:auto;color:#c2410c;font-weight:800;}
.kurs-quiz__svar{clear:both;margin:12px 0 0;padding:0 4px;}
.kurs-quiz__svar strong{color:var(--brand);}
.kurs-quiz__resultat{padding:22px 24px;border-radius:18px;background:var(--brand);color:#fff;}
.kurs-quiz__resultat h2{margin:0 0 6px;color:#fff;}
.kurs-quiz__resultat p{margin:0 0 16px;}

/* Punktlister i kapitteltekst */
.kurs-artikkel ul{margin:0 0 1em;padding:0;list-style:none;}
.kurs-artikkel ul li{position:relative;margin:0 0 .55em;padding-left:1.7em;}
.kurs-artikkel ul li::before{content:"";position:absolute;left:.2em;top:.42em;width:.75em;height:.75em;border-radius:50%;background:var(--kurs-gul);box-shadow:inset 0 0 0 2px var(--brand);}
/* Portrett med sitat */
.kurs-sitatblokk{display:flex;align-items:center;gap:28px;margin:32px 0;}
.kurs-sitatblokk img{flex:none;width:170px;height:auto;}
.kurs-sitatblokk blockquote{margin:0;padding:4px 0 4px 22px;border-left:4px solid var(--kurs-gul);}
.kurs-sitatblokk blockquote p{margin:0 0 10px;color:var(--brand);font-family:var(--kurs-haand);font-size:28px;line-height:1.25;}
.kurs-sitatblokk cite{color:var(--brand);font-size:15px;font-style:normal;font-weight:700;}
@media (max-width:600px){
  .kurs-sitatblokk{flex-direction:column;align-items:flex-start;gap:18px;}
  .kurs-sitatblokk img{width:130px;}
}
/* Kildesiden */
.kurs-oppdatert{color:#5a6472;font-size:15px;}
.kurs-kilder{margin:24px 0 0;}
.kurs-kilder dt{margin:28px 0 8px;color:var(--brand);font-family:var(--kurs-overskrift);font-size:20px;font-weight:700;scroll-margin-top:140px;}
.kurs-kilder dd{margin:0;padding:16px 20px;border-left:4px solid var(--kurs-gul);border-radius:0 12px 12px 0;background:#fff;line-height:1.55;}
/* Sidemenyen i samme farge som delens kort */
.kurs-liste--1 details{background:#f9d9c8;}
.kurs-liste--2 details{background:#d8e4f2;}
.kurs-liste--3 details{background:#f7e6ae;}
.kurs-liste--4 details{background:#e6ddf5;}
.kurs-liste--5 details{background:#fad4df;}
.kurs-liste--6 details{background:#efe3d3;}