/*
 * indfsr.css  ---  faelles stil for alle quizmoduler paa indfoedsretsproeve.dk
 *
 * Alt ligger under .indfsr. Det betyder to ting:
 *   1. Kadence og temaets egne regler kan ikke overskrive quizzen.
 *   2. Quizzen kan ikke laekke stil ud i resten af siden.
 * Ingen regel her maa staa uden .indfsr foran.
 *
 * Ingen Google Fonts. Lora og Inter bruges hvis temaet har indlaest dem,
 * ellers falder vi tilbage paa systemets egne skrifter.
 */

.indfsr {
  /* Brandfarver */
  --rust: #c84b2f;
  --rust-moerk: #a83c23;
  --orange: #d4923a;
  --sand: #f5f0e8;
  --sand-dyb: #ebe3d6;
  --blaek: #1a1510;
  --blaek-daemp: #5c5248;

  /* Tilbagemelding. Aldrig farve alene: der foelger altid tegn og tekst med. */
  --rigtig: #1f6b4d;
  --rigtig-flade: #e6f0ea;
  --forkert: #8a2b1c;
  --forkert-flade: #f6e6e2;

  --kant: #ded3c2;
  --radius: 10px;
  --skygge: 0 1px 2px rgba(26, 21, 16, .06), 0 8px 24px rgba(26, 21, 16, .05);

  --skrift-brud: Lora, Georgia, "Times New Roman", serif;
  --skrift-brod: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  box-sizing: border-box;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 16px;
  font-family: var(--skrift-brod);
  font-size: 17px;
  line-height: 1.6;
  color: var(--blaek);
  -webkit-font-smoothing: antialiased;
}

.indfsr *,
.indfsr *::before,
.indfsr *::after { box-sizing: inherit; }

.indfsr h1,
.indfsr h2,
.indfsr h3 {
  font-family: var(--skrift-brud);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 .4em;
  color: var(--blaek);
}

.indfsr h1 { font-size: 1.75rem; }
.indfsr h2 { font-size: 1.3rem; }
.indfsr h3 { font-size: 1.05rem; }
.indfsr p  { margin: 0 0 1em; }
.indfsr p:last-child { margin-bottom: 0; }

/* Synligt fokus. Maa ikke fjernes. */
.indfsr :focus-visible {
  outline: 3px solid var(--rust);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------------------------------------ kort og flader */

.indfsr__kort {
  background: #fff;
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  box-shadow: var(--skygge);
  padding: 28px;
}

@media (max-width: 560px) {
  .indfsr { font-size: 16px; padding: 0 12px; }
  .indfsr__kort { padding: 20px 16px; }
  .indfsr h1 { font-size: 1.45rem; }
}

.indfsr__stoej {
  font-size: .82rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rust);
  margin: 0 0 .5em;
}

.indfsr__hjaelp {
  color: var(--blaek-daemp);
  font-size: .93rem;
}


/* ------------------------------------------------- forsvar mod temaets knapper
 * Kadence og de fleste andre temaer styler alle button-elementer i indholdet:
 * farve, baggrund, ramme, versaler, skygge og hover. Selektoren
 * .entry-content button har specificitet 0,1,1 og vinder derfor over et enkelt
 * klassenavn som .indfsr .indfsr__mulighed (0,1,0). Resultatet var rustfarvede
 * svarknapper med hvid versaltekst.
 *
 * To ting loeser det. Her nulstilles alt det formmaessige paa .indfsr button
 * (0,1,1), og nedenfor er alle knapregler skrevet som .indfsr .indfsr__xxx
 * (0,2,0), saa de altid vinder over temaet.
 *
 * Roer ikke specificiteten i disse regler. Det er ikke pyntekode.
 */
.indfsr button {
  font-family: var(--skrift-brod);
  font-size: inherit;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  text-shadow: none;
  box-shadow: none;
  transform: none;
  min-height: 0;
  min-width: 0;
  width: auto;
  margin: 0;
  outline-offset: 2px;
}

.indfsr button:hover,
.indfsr button:focus,
.indfsr button:active {
  box-shadow: none;
  text-decoration: none;
}

.indfsr button span,
.indfsr button strong,
.indfsr button b,
.indfsr button em {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: none;
}

/* ------------------------------------------------------------ knapper */

.indfsr .indfsr__knap {
  font: inherit;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: var(--rust);
  color: #fff;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}

.indfsr .indfsr__knap:hover {
  color: #fff;
  background: var(--rust-moerk);
}

.indfsr .indfsr__knap:focus {
  color: #fff;
  background: var(--rust);
}
.indfsr .indfsr__knap:active { transform: translateY(1px); }

.indfsr .indfsr__knap--rolig {
  background: transparent;
  color: var(--blaek-daemp);
  border-color: var(--kant);
}

.indfsr .indfsr__knap--rolig:hover {
  background: var(--sand);
  color: var(--blaek);
  border-color: var(--kant);
}

.indfsr .indfsr__knap--rolig:focus {
  background: transparent;
  color: var(--blaek-daemp);
  border-color: var(--kant);
}

.indfsr .indfsr__knap[disabled] { opacity: .45; cursor: not-allowed; }
.indfsr__knaprad { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* ------------------------------------------------------------ startskaerm */

.indfsr__tilstande { display: grid; gap: 12px; margin: 22px 0 0; }

.indfsr .indfsr__tilstand {
  color: var(--blaek);
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  padding: 16px 18px;
  background: var(--sand);
  border: 1px solid var(--kant);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-left-color .15s ease, background .15s ease;
}

.indfsr .indfsr__tilstand:hover {
  color: var(--blaek);
  background: var(--sand-dyb);
  border-left-color: var(--rust);
}

.indfsr .indfsr__tilstand:focus {
  color: var(--blaek);
}

.indfsr .indfsr__tilstand-navn {
  color: var(--blaek);
  font-weight: 600;
  display: block;
}

.indfsr .indfsr__tilstand-tekst {
  display: block;
  color: var(--blaek-daemp);
  font-size: .93rem;
  margin-top: 3px;
}

/* ------------------------------------------------------------ toplinje */

.indfsr__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.indfsr__taeller {
  font-size: .88rem;
  font-weight: 600;
  color: var(--blaek-daemp);
  font-variant-numeric: tabular-nums;
}

.indfsr__ur {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1rem;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--sand);
  border: 1px solid var(--kant);
}

.indfsr__ur--knap { background: var(--forkert-flade); border-color: var(--forkert); color: var(--forkert); }

.indfsr__bjaelke {
  height: 5px;
  background: var(--sand-dyb);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 22px;
}

.indfsr__bjaelke-fyld {
  height: 100%;
  width: 0;
  background: var(--rust);
  transition: width .3s ease;
}

/* ------------------------------------------------------------ spoergsmaal */

.indfsr__emne {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 6px;
}

.indfsr__spm {
  font-family: var(--skrift-brud);
  font-size: 1.28rem;
  line-height: 1.4;
  margin: 0 0 20px;
}

.indfsr__valg { display: grid; gap: 10px; }

.indfsr .indfsr__mulighed {
  color: var(--blaek);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  font: inherit;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.indfsr .indfsr__mulighed:hover:not([disabled]) {
  color: var(--blaek);
  border-color: var(--rust);
  background: var(--sand);
}

.indfsr .indfsr__mulighed:focus {
  color: var(--blaek);
}

/* Efter besvarelse er knapperne slået fra, men teksten skal stadig kunne
   læses. Det er netop nu, man sammenholder svarene med forklaringen. */
.indfsr .indfsr__mulighed[disabled] {
  cursor: default;
  opacity: 1;
  color: var(--blaek);
}

.indfsr .indfsr__mulighed[disabled]:not(.indfsr__mulighed--rigtig):not(.indfsr__mulighed--forkert),
.indfsr .indfsr__mulighed[disabled]:not(.indfsr__mulighed--rigtig):not(.indfsr__mulighed--forkert):hover {
  color: var(--blaek-daemp);
  background: #fff;
  border-color: var(--kant);
}

.indfsr .indfsr__bogstav {
  flex: 0 0 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sand-dyb);
  color: var(--blaek-daemp);
  font-size: .82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.indfsr .indfsr__mulighed--rigtig,
.indfsr .indfsr__mulighed--rigtig:hover,
.indfsr .indfsr__mulighed--rigtig:focus,
.indfsr .indfsr__mulighed--rigtig:active {
  border-color: var(--rigtig);
  background: var(--rigtig-flade);
  color: var(--blaek);
}

.indfsr .indfsr__mulighed--rigtig .indfsr__bogstav { background: var(--rigtig); color: #fff; }

.indfsr .indfsr__mulighed--forkert,
.indfsr .indfsr__mulighed--forkert:hover,
.indfsr .indfsr__mulighed--forkert:focus,
.indfsr .indfsr__mulighed--forkert:active {
  border-color: var(--forkert);
  background: var(--forkert-flade);
  color: var(--blaek);
}

.indfsr .indfsr__mulighed--forkert .indfsr__bogstav { background: var(--forkert); color: #fff; }

.indfsr .indfsr__mulighed--valgt,
.indfsr .indfsr__mulighed--valgt:hover,
.indfsr .indfsr__mulighed--valgt:focus {
  border-width: 2px;
  border-color: var(--rust);
}

/* ------------------------------------------------------------ forklaring */

.indfsr__forklaring {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: var(--radius);
  border-left: 4px solid var(--kant);
  background: var(--sand);
}

.indfsr__forklaring--rigtig { border-left-color: var(--rigtig); background: var(--rigtig-flade); }
.indfsr__forklaring--forkert { border-left-color: var(--forkert); background: var(--forkert-flade); }

.indfsr__dom { font-weight: 700; margin: 0 0 6px; }
.indfsr__forklaring--rigtig .indfsr__dom { color: var(--rigtig); }
.indfsr__forklaring--forkert .indfsr__dom { color: var(--forkert); }

.indfsr__tip {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(26, 21, 16, .1);
  font-size: .93rem;
  color: var(--blaek-daemp);
}

/* ------------------------------------------------------------ resultat */

.indfsr__score {
  font-family: var(--skrift-brud);
  font-size: 3rem;
  font-weight: 600;
  line-height: 1;
  color: var(--rust);
  font-variant-numeric: tabular-nums;
}

.indfsr__noegletal {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin: 18px 0 4px;
  padding: 18px 0;
  border-top: 1px solid var(--kant);
  border-bottom: 1px solid var(--kant);
}

.indfsr__noegletal div { font-size: .88rem; color: var(--blaek-daemp); }
.indfsr__noegletal b { display: block; font-size: 1.35rem; color: var(--blaek); font-variant-numeric: tabular-nums; }

.indfsr__liste { list-style: none; margin: 16px 0 0; padding: 0; }

.indfsr__liste li {
  padding: 12px 0;
  border-bottom: 1px solid var(--kant);
  font-size: .95rem;
}

.indfsr__liste li:last-child { border-bottom: 0; }
.indfsr__liste .indfsr__emne { margin-bottom: 3px; }
.indfsr__facit { color: var(--rigtig); font-weight: 600; }

/* ------------------------------------------------------------ mestring */

.indfsr__mestring {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--kant);
}

.indfsr__prikker { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }

.indfsr__prik {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: var(--sand-dyb);
  border: 1px solid var(--kant);
}

.indfsr__prik--paabegyndt { background: var(--orange); border-color: var(--orange); }
.indfsr__prik--mestret { background: var(--rigtig); border-color: var(--rigtig); }

/* Kun for skaermlaesere */
.indfsr__skjult {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .indfsr *,
  .indfsr *::before,
  .indfsr *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ------------------------------------------------------------ selvstaendig side
 * Bruges kun naar filen aabnes som sin egen side. Ligger quizzen i en Custom
 * HTML-blok i WordPress, leverer Kadence baggrund og topmenu, og denne klasse
 * saettes ikke.
 */
body.indfsr-side {
  margin: 0;
  padding: 44px 0 72px;
  background: #f5f0e8;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (max-width: 560px) {
  body.indfsr-side { padding: 24px 0 48px; }
}

.indfsr__sidefod {
  max-width: 780px;
  margin: 26px auto 0;
  padding: 0 16px;
  font-size: .86rem;
  color: #5c5248;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.indfsr__sidefod a { color: #c84b2f; }

/* ------------------------------------------------------------ modulkort
 * Forsiden til det betalte område. Fire kort, ét pr. quizmodul, med
 * brugerens egen fremgang på hvert. Bruger samme tokens som resten, så der
 * ikke opstår to designsprog.
 */
.indfsr__gitter {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 24px;
}

@media (max-width: 620px) {
  .indfsr__gitter { grid-template-columns: 1fr; }
}

.indfsr .indfsr__modulkort {
  display: block;
  text-align: left;
  text-decoration: none;
  background: #fff;
  color: var(--blaek);
  border: 1px solid var(--kant);
  border-top: 3px solid var(--orange);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--skygge);
  transition: border-top-color .15s ease, transform .15s ease;
}

.indfsr .indfsr__modulkort:hover,
.indfsr .indfsr__modulkort:focus {
  color: var(--blaek);
  border-top-color: var(--rust);
  transform: translateY(-2px);
}

.indfsr__modulkort h3 {
  margin: 0 0 6px;
  font-size: 1.1rem;
}

.indfsr__modulkort p {
  margin: 0;
  font-size: .92rem;
  color: var(--blaek-daemp);
  line-height: 1.5;
}

.indfsr__fremgang {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--kant);
}

.indfsr__fremgang-tal {
  font-size: .84rem;
  font-weight: 600;
  color: var(--blaek-daemp);
  font-variant-numeric: tabular-nums;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}

.indfsr__fremgang-bjaelke {
  height: 4px;
  background: var(--sand-dyb);
  border-radius: 999px;
  overflow: hidden;
}

.indfsr__fremgang-fyld {
  height: 100%;
  width: 0;
  background: var(--rigtig);
  border-radius: 999px;
}

.indfsr__naeste {
  margin-top: 26px;
  padding: 18px 20px;
  background: var(--sand);
  border-left: 4px solid var(--rust);
  border-radius: var(--radius);
}

.indfsr__naeste p { margin: 0; font-size: .95rem; }
.indfsr__naeste b { font-weight: 600; }