/* ==========================================================================
   1881 Annonsepakker – all CSS for siden.
   Designtokens under :root er ENESTE kilde for fargene. tailwind.config i
   index.html peker på de samme variablene, så en farge endres kun her.
   ========================================================================== */

:root{
  /* Merkevare */
  --color-brand:#0077cc;
  --color-link:#0065ae;

  /* Primær */
  --color-primary-700:#003a66;
  --color-primary-600:#0065ad;
  --color-primary-500:#0077cc;
  --color-primary-400:#8ac0ff;
  --color-primary-300:#bddcff;
  --color-primary-200:#e0eeff;

  /* Sekundær */
  --color-secondary-700:#c85000;
  --color-secondary-600:#ff5e1f;
  --color-secondary-500:#ffa785;
  --color-secondary-400:#ffded1;
  --color-secondary-300:#fff4f0;

  /* Nøytral */
  --color-neutral-900:#252931;
  --color-neutral-800:#424242;
  --color-neutral-700:#636363;
  --color-neutral-600:#adadad;
  --color-neutral-500:#d8d9d9;
  --color-neutral-400:#e3e3e3;
  --color-neutral-300:#f0f0f0;
  --color-neutral-200:#f7f7f7;
  --color-neutral-100:#fcfcfc;
  --color-neutral-0:#ffffff;

  /* Status */
  --color-success:#198f5e;
  --color-error:#d33149;

  --ease-out: cubic-bezier(.22,1,.36,1);
}

/* Footerfarge bak siden: overscroll (strikk-effekten) viser blått, ikke lyseblått */
html{ scroll-behavior:smooth; background-color:#083F97; }
/* Kolonne på minst én skjermhøyde – hovedflaten fyller resten på korte sider */
body{
  display:flex; flex-direction:column; min-height:100vh;
  background-color:var(--color-primary-200);
  color:var(--color-neutral-900);
  font-family:'Open Sans',system-ui,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}
h1,h2,h3,h4,h5,h6{ font-family:Rubik,'Open Sans',sans-serif; font-weight:500; }
h1{ letter-spacing:-.03em; }

a{ color:var(--color-link); text-decoration:none; }
a:hover{ text-decoration:underline; }

:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:3px solid var(--color-primary-500);
  outline-offset:2px;
  border-radius:2px;
}
.on-dark:focus-visible{ outline-color:#fff; }

.vh{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:16px; top:-100px; z-index:60;
  background:var(--color-neutral-0); color:var(--color-neutral-900);
  padding:8px 16px; border-radius:999px; box-shadow:0 4px 12px 0 rgba(0,0,0,.25);
  transition:top .2s var(--ease-out);
}
.skip-link:focus{ top:16px; text-decoration:none; }

/* Hero: profilgradient + lagvise radial-lys + fin korntekstur */
.hero{
  background-image:
    radial-gradient(120% 90% at 82% 8%, rgba(138,192,255,.34) 0%, rgba(138,192,255,0) 58%),
    radial-gradient(90% 70% at 4% 96%, rgba(255,94,31,.20) 0%, rgba(255,94,31,0) 60%),
    linear-gradient(165.94deg, #0261A5 6.63%, #054A92 59.84%, #083F97 89.98%);
}
.grain{
  position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

/* Flater: hver seksjon legger seg avrundet 24px over den forrige.
   Rekkefølgen i DOM-en gir stablingen – ingen z-index nødvendig. */
.band{
  position:relative;
  display:flow-root;      /* hindrer at barnas toppmargin kollapser med flatens egen */
  margin-top:-24px;
  border-radius:24px 24px 0 0;
}
/* Mørk flate over mørk flate: en tynn lyskant langs overkanten gjør at
   overlappen leses selv når fargene ligger tett på hverandre. */
.band-lip{ box-shadow:inset 0 1px 0 rgba(255,255,255,.14); }

/* Footer: samme merkevaregradient og lyseblå tekst som på www.1881.no,
   der footeren arver nøyaktig denne gradienten (samme som heroen vår). */
main{ flex-grow:1; }
.site-footer{
  background-image:linear-gradient(165.94deg, #0261A5 6.63%, #054A92 59.84%, #083F97 89.98%);
  color:#cce0ff;
}
.site-footer a{ color:inherit; }
.site-footer a:hover{ color:#fff; }

/* Burgermeny – vises under 768px (hovedbreakpoint i designguiden) */
.burger{
  display:inline-flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:44px; height:44px; border:0; border-radius:999px; background:rgba(255,255,255,.15);
  cursor:pointer; transition:background .2s var(--ease-out);
}
.burger:hover{ background:rgba(255,255,255,.25); }
.burger span{
  display:block; width:20px; height:2px; border-radius:2px; background:#fff;
  transition:transform .3s var(--ease-out), opacity .2s var(--ease-out);
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mnav{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .3s var(--ease-out);
}
.mnav > div{ overflow:hidden; }
.mnav[data-open="true"]{ grid-template-rows:1fr; }
.mnav a{
  display:flex; align-items:center; min-height:44px;
  padding:8px 16px; border-radius:999px;
  color:rgba(255,255,255,.85); text-decoration:none;
}
.mnav a:hover{ background:rgba(255,255,255,.1); color:#fff; text-decoration:none; }
.mnav a[aria-current="page"]{ background:rgba(255,255,255,.15); color:#fff; font-weight:600; }

@media (min-width:768px){
  .burger, .mnav{ display:none; }
}

/* Knapper – pill, hover via brightness (jf. design guide) */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:40px; padding:8px 16px; border-radius:999px;
  font-weight:600; white-space:nowrap; cursor:pointer; border:0;
  transition:transform .25s var(--ease-out), filter .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.btn:hover{ filter:brightness(95%); text-decoration:none; }
.btn:active{ transform:translateY(1px) scale(.99); }
.btn:disabled{ cursor:progress; opacity:.65; }
.btn:disabled:hover{ filter:none; transform:none; }
.btn-cta{ background:var(--color-secondary-600); color:#fff; }
.btn-cta:hover{ transform:translateY(-2px); }
.btn-ft{ background:var(--color-primary-500); color:#fff; }
.btn-alt{ background:#fff; color:var(--color-neutral-900); }
.btn-tag{ background:var(--color-neutral-200); color:var(--color-neutral-700); border-radius:1em; white-space:normal; }

/* Pakkekort */
.pkg{ transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
@media (prefers-reduced-motion:no-preference){
  .pkg:hover{ transform:translateY(-4px); }
}
.pkg-list{ display:none; }
body.show-ul .pkg-list{ display:block; }
body.show-ul .show-more{ display:none; }

/* Tallkort som lenker (Best i test, Originalen) */
.stat-link{ transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.stat-pil{ transition:transform .3s var(--ease-out); }
@media (prefers-reduced-motion:no-preference){
  .stat-link:hover{ transform:translateY(-4px); }
  .stat-link:hover .stat-pil{ transform:translateX(3px); }
}
.stat-link:active{ transform:translateY(-1px) scale(.99); }
.stat-link:focus-visible{ outline-offset:4px; }

/* ROI-lenke under pakkene – sekundær handling, bevisst dempet */
.roi-cta{
  border:0; cursor:pointer;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.roi-pil{ transition:transform .3s var(--ease-out); }
@media (prefers-reduced-motion:no-preference){
  .roi-cta:hover{ transform:translateY(-2px); }
  .roi-cta:hover .roi-pil{ transform:translateX(4px); }
}
.roi-cta:active{ transform:scale(.99); }
.roi-cta:focus-visible{ outline-offset:4px; }

.feat li{ position:relative; padding-left:26px; }
.feat li::before{
  content:""; position:absolute; left:0; top:9px; width:14px; height:8px;
  border-left:2px solid var(--color-primary-500); border-bottom:2px solid var(--color-primary-500);
  transform:rotate(-45deg);
}

/* Skjemafelt – radius 8px på alle hjørner */
.fld{
  width:100%; padding:8px 12px; min-height:40px;
  border:1px solid var(--color-neutral-500); border-radius:8px;
  background:#fff; color:var(--color-neutral-900); font:inherit;
  transition:border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.fld::placeholder{ color:#757575; opacity:1; }
.fld:hover{ border-color:var(--color-primary-400); }

/* Modal */
.cc-modal{ display:none; position:fixed; inset:0; z-index:50; background:rgba(0,58,102,.72); padding:16px; }
.cc-modal.is-open{ display:flex; align-items:center; justify-content:center; }
.cc-modal-content{
  background:#fff; width:100%; max-width:600px; max-height:calc(100dvh - 32px);
  display:flex; flex-direction:column; border-radius:24px; overflow:hidden;
  box-shadow:0 4px 12px 0 rgba(0,0,0,.25);
}
@media (prefers-reduced-motion:no-preference){
  .cc-modal.is-open .cc-modal-content{ animation:pop .25s var(--ease-out); }
  @keyframes pop{ from{ opacity:0; transform:scale(.96) } to{ opacity:1; transform:scale(1) } }
}

/* Statusmodal – kvittering etter innsendt skjema */
.status-modal{ position:relative; max-width:680px; text-align:center; }
.status-modal::before{ content:""; display:block; height:6px; flex:none; }
.is-ok .status-modal::before{ background:var(--color-success); }
.is-feil .status-modal::before{ background:var(--color-error); }

.status-lukk{
  position:absolute; top:14px; right:14px;
  display:flex; align-items:center; justify-content:center;
  height:40px; width:40px; border:0; border-radius:999px;
  background:transparent; color:var(--color-neutral-600);
  font-size:24px; line-height:1; cursor:pointer;
  transition:background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.status-lukk:hover{ background:var(--color-neutral-200); color:var(--color-neutral-900); }
.status-lukk:active{ transform:scale(.94); }

.status-ikon{
  display:inline-flex; align-items:center; justify-content:center;
  height:80px; width:80px; border-radius:999px;
}
.is-ok .status-ikon{ background:rgba(25,143,94,.12); color:var(--color-success); }
.is-feil .status-ikon{ background:rgba(211,49,73,.12); color:var(--color-error); }
.status-ikon svg{ display:none; height:40px; width:40px; }
.is-ok .status-ikon .ikon-ok{ display:block; }
.is-feil .status-ikon .ikon-feil{ display:block; }
.roi-row{ display:flex; flex-direction:column; gap:8px; }
@media (min-width:576px){
  .roi-row{ flex-direction:row; justify-content:space-between; align-items:center; }
  .roi-row .fld{ width:180px; }
}
input[type=number]{ -moz-appearance:textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
input[type=range]{ accent-color:var(--color-primary-500); }
.roi-total{ border:2px solid var(--color-secondary-600); font-weight:600; }

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