/* Hjemmesidesjekken / SEO-sjekken — bruker nettstedets egne designtokens
   (--s-*, --ink, --djup-1, --linje, --r-*) så temaet matcher automatisk. */

/* Intro */
.sjekk-intro { padding-block: clamp(var(--s-7), 8vw, var(--s-9)) clamp(var(--s-4), 3vw, var(--s-6)); }
.sjekk-intro .kart { color: var(--ink-soft); font-family: var(--font-mono, monospace); font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase; margin: 0 0 var(--s-4); }
.sjekk-intro h1 { font-size: clamp(2.4rem, 1.2rem + 5vw, 5rem); font-weight: 430; line-height: 1;
  letter-spacing: -.025em; margin: 0; max-width: 16ch; }
.sjekk-intro h1 em { font-style: italic; color: var(--accent); }
.sjekk-intro__lede { margin-top: var(--s-5); font-size: var(--t-lede); color: var(--ink-soft); max-width: 56ch; }

.sjekk { padding-block: var(--s-5) var(--s-8); }
.sjekk__grid { display: grid; gap: clamp(var(--s-6), 5vw, var(--s-8)); }

/* --- Skjema --- */
.sjekk-form {
  display: grid; gap: var(--s-4);
  padding: clamp(var(--s-5), 4vw, var(--s-7));
  background: var(--djup-1); border: 1px solid var(--linje); border-radius: var(--r-lg);
}
.sjekk-form__rad { display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); align-items: end; }
.sjekk-felt { display: grid; gap: var(--s-2); }
.sjekk-felt label { font-weight: 600; font-size: var(--t-small); }
.sjekk-felt input {
  width: 100%; min-height: 52px; padding: var(--s-3) var(--s-4);
  background: var(--paper-3); border: 1px solid var(--linje); border-radius: var(--r-sm);
  color: var(--ink); font-size: 1rem; transition: border-color .2s var(--lett, ease);
}
.sjekk-felt input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.sjekk-form__valgfri { display: grid; gap: var(--s-2); }
.sjekk-form__send { min-height: 52px; padding-inline: var(--s-7); white-space: nowrap; }
.sjekk-form__krav { font-size: .78rem; color: var(--ink-soft); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Laster / status --- */
.sjekk-status { display: none; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5);
  border-radius: var(--r); background: var(--djup-1); border: 1px solid var(--linje); color: var(--ink-soft); }
.sjekk-status.vis { display: flex; }
.sjekk-status--feil { color: var(--signal, #b14a23); border-color: color-mix(in srgb, var(--signal, #b14a23) 45%, transparent); }
.spinner { width: 22px; height: 22px; border: 3px solid var(--linje); border-top-color: var(--accent);
  border-radius: 50%; animation: snurr .8s linear infinite; flex: none; }
@keyframes snurr { to { transform: rotate(360deg); } }

/* --- Resultat --- */
.resultat { display: none; }
.resultat.vis { display: block; animation: tonInn .5s ease; }
@keyframes tonInn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.score-topp { display: grid; grid-template-columns: auto 1fr; gap: clamp(var(--s-5), 4vw, var(--s-7));
  align-items: center; padding: clamp(var(--s-5), 4vw, var(--s-7));
  background: var(--djup-1); border: 1px solid var(--linje-sterk, var(--linje)); border-radius: var(--r-lg); }
.score-ring { --p: 0; width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: radial-gradient(closest-side, var(--djup-1) 79%, transparent 80% 100%),
              conic-gradient(var(--ring-farge, var(--accent)) calc(var(--p) * 1%), var(--linje) 0); }
.score-ring__tall { font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--ink); }
.score-ring__av { font-size: .8rem; color: var(--ink-soft); }
.score-topp__tekst h2 { font-size: clamp(1.4rem, 1rem + 1.5vw, 2rem); margin: 0 0 var(--s-2); }
.score-topp__url { font-family: var(--font-mono, monospace); font-size: .82rem; color: var(--ink-soft); word-break: break-all; }
.score-topp__verdikt { margin: var(--s-3) 0 0; color: var(--ink-soft); }
.score-topp__meta { margin-top: var(--s-3); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  font-size: .76rem; color: var(--ink-soft); font-family: var(--font-mono, monospace); }

/* --- Kategorier --- */
.kategorier { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
.kat { background: var(--djup-1); border: 1px solid var(--linje); border-radius: var(--r-lg); overflow: hidden; }
.kat__hode { width: 100%; display: flex; align-items: center; gap: var(--s-4); padding: var(--s-5);
  background: none; border: 0; cursor: pointer; text-align: left; color: var(--ink); }
.kat__navn { flex: 1; font-size: 1.05rem; font-weight: 650; }
.kat__score { font-weight: 800; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.kat__bar { height: 6px; border-radius: 99px; background: var(--linje); overflow: hidden; width: 90px; flex: none; }
.kat__bar i { display: block; height: 100%; border-radius: 99px; background: var(--bar, var(--accent)); }
.kat__pil { transition: transform .25s ease; flex: none; color: var(--ink-soft); }
.kat[open] .kat__pil { transform: rotate(180deg); }
.kat__liste { list-style: none; margin: 0; padding: 0 var(--s-5) var(--s-5); display: grid; gap: var(--s-3); }
.punkt { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--linje); }
.punkt__merke { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 800; flex: none; color: #fff; }
.punkt__tittel { font-weight: 600; font-size: .95rem; }
.punkt__detalj { color: var(--ink-soft); font-size: .88rem; margin-top: 2px; }
.punkt__forslag { color: var(--ink-soft); font-size: .82rem; margin-top: 4px; padding-left: var(--s-3);
  border-left: 2px solid var(--accent); }

/* statusfarger */
.er-bra      .punkt__merke, .merke--bra      { background: var(--gron, #2e7d57); }
.er-advarsel .punkt__merke, .merke--advarsel { background: #b8860b; }
.er-feil     .punkt__merke, .merke--feil     { background: var(--signal, #b14a23); }
.er-info     .punkt__merke, .merke--info     { background: var(--ink-soft, #5d6677); }

/* --- E-post-fangst + CTA --- */
.rapport-boks { margin-top: var(--s-6); padding: clamp(var(--s-5), 4vw, var(--s-7));
  background: var(--djup-1); border: 1px solid var(--linje-sterk, var(--linje)); border-radius: var(--r-lg); }
.rapport-boks h3 { margin: 0 0 var(--s-2); font-size: 1.2rem; }
.rapport-boks p { color: var(--ink-soft); margin: 0 0 var(--s-4); font-size: .95rem; }
.rapport-form { display: grid; grid-template-columns: 1fr auto; gap: var(--s-3); }
.rapport-svar { margin-top: var(--s-3); font-size: .9rem; }
.rapport-svar--ok { color: var(--gron, #2e7d57); }
.rapport-svar--feil { color: var(--signal, #b14a23); }

@media (max-width: 720px) {
  .sjekk-form__rad, .score-topp, .rapport-form { grid-template-columns: 1fr; }
  .score-topp { justify-items: center; text-align: center; }
}