/* trenger-du-testament.css — minitesten. Kommer i tillegg til guider/_stil.css. Ligger i public_html/default/. */

.test-kort { background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--gold); padding: 1.6rem 1.5rem 1.4rem; box-shadow: 0 2px 12px rgba(0,0,0,0.04); margin-bottom: 1.2rem; }
.test-kort:focus { outline: none; }
.test-kort.er-resultat { background: transparent; border: none; box-shadow: none; padding: 0; }
.res-kort p { line-height: 1.6; }
.test-fremdrift { height: 4px; background: #eee6d6; margin: 0 0 0.8rem; }
.test-fremdrift span { display: block; height: 100%; background: var(--gold); }
.test-fremdrift .fr-1 { width: 20%; } .test-fremdrift .fr-2 { width: 40%; } .test-fremdrift .fr-3 { width: 60%; } .test-fremdrift .fr-4 { width: 80%; } .test-fremdrift .fr-5 { width: 92%; }
.test-teller { font-family: 'DM Mono', monospace; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; }
.test-sporsmal { font-size: 1.55rem; font-weight: 400; line-height: 1.25; margin: 0 0 1.1rem; }
.test-sporsmal:focus { outline: none; }
.test-hint { font-size: 0.98rem; color: var(--muted); font-style: italic; margin: -0.6rem 0 1rem; }
.valg { display: block; width: 100%; text-align: left; font-family: inherit; font-size: 1.15rem; line-height: 1.35; color: var(--ink); background: var(--cream); border: 1px solid var(--border); padding: 0.95rem 1rem; margin-bottom: 0.65rem; cursor: pointer; min-height: 3.4rem; }
.valg:hover, .valg:focus-visible { border-color: var(--gold); background: #fdf8ec; outline: none; }
.test-tilbake { background: none; border: none; font-family: 'DM Mono', monospace; font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); cursor: pointer; padding: 0.6rem 0; margin-top: 0.3rem; }
.test-tilbake:hover { color: var(--ink); }

.resultat-intro { color: var(--muted); font-style: italic; margin-bottom: 1.2rem; }
.res-kort { border: 1px solid var(--border); border-left: 4px solid var(--gold); background: var(--cream); padding: 1.1rem 1.2rem 1.2rem; margin-bottom: 1.1rem; }
.res-kort h3 { font-size: 1.3rem; font-weight: 600; margin: 0.3rem 0 0.5rem; }
.res-kort p { margin-bottom: 0.8rem; }
.res-merke { display: inline-block; font-family: 'DM Mono', monospace; font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; background: var(--ink); color: var(--parchment); padding: 0.25rem 0.6rem; }
.res-merke.lys { background: #eee6d6; color: var(--ink); }
.res-pris { font-weight: 600; }
.res-knapper { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.4rem; }
.res-knapper .cta-knapp { display: block; text-align: center; margin: 0; }
.res-sekundaer { display: block; text-align: center; font-size: 1rem; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; padding: 0.3rem 0; }
.res-liten { font-size: 0.92rem; color: var(--muted); margin: 0.6rem 0 0; }
.test-om { margin-top: 0.6rem; }
.test-om button { background: none; border: none; font-family: inherit; font-size: 1rem; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0.4rem 0; }
.test-merknad { font-size: 0.9rem; color: var(--muted); font-style: italic; }

@media (max-width: 600px) {
  main { margin-top: 1rem; }
  .tilbake { margin-bottom: 1rem; }
  h1 { font-size: 1.8rem; margin-bottom: 0.5rem; }
  .ingress { font-size: 1rem; line-height: 1.55; margin-bottom: 1.1rem; }
  .test-kort { padding: 1.2rem 1rem 1rem; }
  .test-sporsmal { font-size: 1.4rem; }
}