/* Filip – påmelding (heifilip.no/meld). Same fargar og font (IBM Plex Sans) som heifilip.no.
   Mobil først, stor tekst, høg kontrast, store trykkflater. Fontane ligg lokalt (plex-*.woff2 frå build_site.py), ingenting eksternt. */
@font-face{font-family:"Plex";src:url(plex-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex";src:url(plex-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Plex";src:url(plex-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --paper:#FFFFFF; --panel:#F4F7FB;
  --line:#C9D4E2; --line-strong:#9FB0C6;
  --ink:#14213A; --ink-2:#4A5B75; --ink-3:#5A6A84;
  --blue:#1F4F8F; --blue-press:#173D70; --blue-tint:#E4ECF7;
  --green:#1E7B45; --alert:#A33A16; --alert-tint:#FBEDE7;
  --amber:#D07612; --amber-halo:rgba(208,118,18,.28);
  --r:14px; --r-sm:10px;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Plex",-apple-system,"Segoe UI",system-ui,sans-serif;font-size:19px;line-height:1.55;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--blue-press)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:var(--r-sm)}
.wrap{max-width:640px;margin:0 auto;padding:0 20px}

header{border-bottom:1px solid var(--line);background:var(--paper)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:600;font-size:1.1rem;text-decoration:none;min-height:44px}
.brand .mark{width:26px;height:26px;border-radius:50%;border:4px solid var(--amber);box-shadow:0 0 0 4px var(--amber-halo)}
header .lenkjer{display:flex;align-items:center;gap:16px}
header .back{color:var(--ink-2);text-decoration:none;font-size:1rem;min-height:44px;display:inline-flex;align-items:center}
header .back:hover{text-decoration:underline}
/* lenkja til den andre målforma (bokmål/nynorsk), som språkknappen på heifilip.no */
header .sprak{color:var(--ink);font-weight:600;font-size:1rem;min-height:44px;display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:4px}

main{padding:28px 0 48px}
h1{font-size:1.9rem;line-height:1.15;margin:0 0 12px;font-weight:600;letter-spacing:-.01em}
h2{font-size:1.3rem;line-height:1.2;margin:32px 0 10px;font-weight:600}
p{margin:0 0 14px}
.lede{font-size:1.15rem;color:var(--ink-2);margin-bottom:24px}
.small{font-size:1rem;color:var(--ink-3)}

/* skjema */
fieldset{border:0;padding:0;margin:0 0 8px;min-width:0}
legend{font-size:1.3rem;font-weight:600;padding:0;margin:28px 0 14px}
.legend-hint{margin:-8px 0 18px;color:var(--ink-2);font-size:1rem}
/* «Meg sjølv» vald: feltet for førenamnet til den andre blir borte, utan skript. Nettlesarar utan :has() viser feltet med hjelpeteksten. */
form:has(input[name="relasjon"][value="meg"]:checked) .berre-andre{display:none}
.felt{margin:0 0 22px}
label,.sp{display:block;font-weight:600;margin-bottom:8px}
.valfri{font-weight:400;color:var(--ink-2)}
.hint{display:block;font-weight:400;color:var(--ink-2);font-size:1rem;margin-top:2px}
input[type=text],input[type=email],input[type=tel]{width:100%;font:inherit;font-size:1.15rem;min-height:56px;padding:12px 14px;border:2px solid var(--line-strong);border-radius:var(--r-sm);background:#fff;color:var(--ink)}
input[type=text]:focus,input[type=email]:focus,input[type=tel]:focus{border-color:var(--blue)}
.val{display:grid;gap:8px}
.val label{display:flex;align-items:center;gap:14px;font-weight:500;min-height:56px;padding:8px 14px;border:2px solid var(--line);border-radius:var(--r-sm);margin:0;cursor:pointer;background:#fff}
.val label:has(:checked){border-color:var(--blue);background:var(--blue-tint)}
input[type=checkbox],input[type=radio]{width:28px;height:28px;margin:0;flex:0 0 auto;accent-color:var(--blue)}
.feil input[type=text],.feil input[type=email],.feil input[type=tel]{border-color:var(--alert)}
.feil .val label{border-color:var(--alert)}
.feilmelding{display:block;color:var(--alert);font-weight:600;margin-top:8px}

.varsel{border:2px solid var(--alert);background:var(--alert-tint);border-radius:var(--r);padding:16px 18px;margin:0 0 24px}
.varsel h2{margin:0 0 8px;font-size:1.15rem;color:var(--alert)}
.varsel ul{margin:0;padding-left:22px}
.varsel li{margin:4px 0}
.varsel a{color:var(--alert)}

.samtykke{background:var(--panel);border-radius:var(--r);padding:18px 18px 8px;margin:28px 0 20px}
.samtykke h2{margin-top:0}
.samtykke p{font-size:1.05rem}
.samtykke .felt{margin:14px 0 8px}
label.check{display:flex;gap:14px;align-items:flex-start;font-weight:500;background:#fff;border:2px solid var(--line);border-radius:var(--r-sm);padding:14px;margin:0;cursor:pointer}
label.check input{margin-top:4px}
.feil label.check{border-color:var(--alert)}

.btn{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:60px;padding:14px 24px;border-radius:var(--r-sm);font:inherit;font-weight:600;font-size:1.2rem;background:var(--blue);color:#fff;border:0;cursor:pointer}
.btn:hover{background:var(--blue-press)}
.btn:active{transform:translateY(1px)}

/* honningfeltet: usynleg for folk, synleg for robotar */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* takk, feil og personvern */
.takk{border-top:4px solid var(--green);padding-top:20px}
.feilside{border-top-color:var(--alert)}
.personvern h2{margin-top:28px}
.personvern p{max-width:60ch}

footer{border-top:1px solid var(--line);padding:24px 0 36px;color:var(--ink-3);font-size:.95rem;line-height:1.7}
footer a{color:var(--ink-2)}

@media (min-width:700px){
  body{font-size:20px}
  main{padding:40px 0 64px}
  h1{font-size:2.2rem}
}
@media (prefers-reduced-motion:reduce){.btn:active{transform:none}}