/*
Theme Name: Findinternet
Description: Tema til Findinternet.dk — mørk hero med adressesøgning, tillidssektioner og affiliate-footer. Bygget til Findinternet-pluginnet.
Version: 1.0.0
Author: Findinternet.dk
Text Domain: findinternet-tema
*/

:root{
  --nat:#06222B; --nat2:#0C3D4A; --cyan:#27E0D8; --cyan-dyb:#0FA8A0;
  --koral:#FF6A45; --lys:#F2F7F8; --blaek:#0B2630; --dis:#5E7780;
  --linje:#DDE9EC; --gron:#19C37D; --r:18px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Instrument Sans',system-ui,sans-serif;
  background:var(--lys);color:var(--blaek);line-height:1.55;
}
h1,h2,h3{font-family:'Bricolage Grotesque',system-ui,sans-serif;letter-spacing:-0.02em}
img{max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;border-radius:6px}

/* ============ Mørk topzone ============ */
.fit-top{
  background:
    radial-gradient(800px 420px at 85% -10%, rgba(39,224,216,.22), transparent 60%),
    radial-gradient(700px 420px at 8% 110%, rgba(255,106,69,.16), transparent 55%),
    linear-gradient(160deg, var(--nat) 30%, var(--nat2));
  color:#E9F6F7;position:relative;overflow:hidden;
}
.fit-top::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(70% 80% at 50% 30%, #000 30%, transparent 100%);
  -webkit-mask-image:radial-gradient(70% 80% at 50% 30%, #000 30%, transparent 100%);
}
.fit-top > *{position:relative;z-index:1}

/* ---------- Header ---------- */
.fit-header{display:flex;justify-content:space-between;align-items:center;max-width:1180px;margin:0 auto;padding:20px clamp(16px,4vw,40px)}
.fit-logo{display:flex;align-items:center;gap:11px;text-decoration:none}
.fit-wordmark{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.42rem;letter-spacing:-0.03em;color:#fff}
.fit-wordmark span{color:var(--cyan)}
.fit-wordmark small{display:block;font-family:'Instrument Sans',sans-serif;font-weight:500;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:#8FB7BC;margin-top:1px}
.fit-nav{display:flex;gap:24px;font-size:.92rem;font-weight:500}
.fit-nav a{text-decoration:none;color:#B7D2D5;transition:color .15s}
.fit-nav a:hover{color:#fff}
.fit-nav ul{display:flex;gap:24px;list-style:none}
@media(max-width:680px){.fit-nav{display:none}}

/* ---------- Hero ---------- */
.fit-hero{max-width:860px;margin:0 auto;text-align:center;padding:clamp(30px,6vh,64px) 16px 20px}
.fit-pill{
  display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:6px 16px;margin-bottom:20px;color:#CFEDEE;
}
.fit-pill .fit-puls{width:8px;height:8px;border-radius:50%;background:var(--gron);box-shadow:0 0 0 0 rgba(25,195,125,.6);animation:fit-puls 2s infinite}
@keyframes fit-puls{70%{box-shadow:0 0 0 9px rgba(25,195,125,0)}100%{box-shadow:0 0 0 0 rgba(25,195,125,0)}}
.fit-hero h1{font-size:clamp(2.1rem,6vw,3.7rem);font-weight:800;line-height:1.04;color:#fff}
.fit-hero h1 .fit-grad{background:linear-gradient(92deg,var(--cyan),#8CF5E4);-webkit-background-clip:text;background-clip:text;color:transparent}
.fit-hero .fit-sub{margin:18px auto 0;max-width:520px;color:#A9CDD1;font-size:1.07rem}

/* Søgeapp (fra pluginnet) lever i den mørke zone */
.fit-soegezone{max-width:700px;margin:30px auto 0;padding:0 16px 56px}
.fit-soegezone .fi-panel{ /* glas-effekt ovenpå pluginnets panel */
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.fit-soegezone .fi-resultater{text-align:left}

/* ---------- Logostrip ---------- */
.fit-logostrip{max-width:980px;margin:0 auto;padding:0 16px 46px;text-align:center}
.fit-logostrip .fit-label{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#7FA9AE;font-weight:600;margin-bottom:14px}
.fit-logostrip .fit-raekke{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.fit-lchip{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:.92rem;color:#CFE9EA;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:8px 16px}

/* ============ Lyse sektioner ============ */
.fit-sektion{max-width:920px;margin:0 auto;padding:54px 16px}
.fit-sektion h2{font-size:clamp(1.4rem,3vw,1.85rem);font-weight:800;text-align:center;margin-bottom:34px}
.fit-stepgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:680px){.fit-stepgrid{grid-template-columns:1fr}}
.fit-step{background:#fff;border:1px solid var(--linje);border-radius:var(--r);padding:24px}
.fit-step .fit-nr{font-family:'IBM Plex Mono',monospace;font-weight:600;color:var(--cyan-dyb);font-size:.85rem;margin-bottom:10px}
.fit-step h3{font-size:1.05rem;margin-bottom:7px}
.fit-step p{font-size:.92rem;color:var(--dis)}

.fit-faq{max-width:760px;margin:0 auto;padding:10px 16px 64px}
.fit-faq h2{font-size:clamp(1.4rem,3vw,1.85rem);font-weight:800;text-align:center;margin-bottom:28px}
.fit-faq details{background:#fff;border:1px solid var(--linje);border-radius:14px;margin-bottom:10px;padding:0 20px}
.fit-faq summary{cursor:pointer;font-weight:700;padding:17px 0;list-style:none;display:flex;justify-content:space-between;align-items:center}
.fit-faq summary::after{content:"+";font-family:'IBM Plex Mono',monospace;color:var(--cyan-dyb);font-size:1.2rem}
.fit-faq details[open] summary::after{content:"–"}
.fit-faq details p{padding:0 0 17px;color:var(--dis);font-size:.93rem}

/* ---------- Alm. sider/indlæg ---------- */
.fit-indhold{max-width:760px;margin:0 auto;padding:44px 16px 64px}
.fit-indhold h1{font-size:clamp(1.7rem,4vw,2.4rem);margin-bottom:18px}
.fit-indhold h2{font-size:1.4rem;margin:28px 0 10px}
.fit-indhold p{margin-bottom:14px}
.fit-indhold ul,.fit-indhold ol{margin:0 0 14px 22px}
.fit-indhold a{color:var(--cyan-dyb)}

/* ---------- Footer ---------- */
.fit-footer{background:var(--nat);color:#9FC2C6;font-size:.85rem;padding:40px clamp(16px,4vw,40px)}
.fit-footer .fit-inner{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap}
.fit-footer .fit-disc{max-width:560px;line-height:1.65}
.fit-footer strong{color:#fff}
.fit-footer a{color:#CFE9EA}
.fit-footer .fit-meta{text-align:right}
@media(max-width:680px){.fit-footer .fit-meta{text-align:left}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}