/* ============================================================
   FOA designsystem — token-base (kontrakt for alle sider)
   Behold navy + gull + Playfair. Kun ÉN verdi av hver token.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Source+Sans+3:wght@400;500;600;700&display=swap");

:root {
  /* --- Farger (én av hver — ingen varianter) --- */
  --navy:       #16213e;
  --navy-deep:  #0f1830;   /* dyp navy til seksjons-gradient */
  --gold:       #c9a227;
  --gold-light: #e8d48b;   /* knapp-hover, aksent-tekst på navy */
  --gold-deep:  #b8860b;   /* lenke-hover på lys flate */
  --cream:      #faf8f5;   /* sidebakgrunn */
  --surface:    #f0ece4;   /* sekundær flate */
  --ink:        #1a1a2e;   /* brødtekst */
  --slate:      #3a3a55;   /* sekundær tekst */
  --warm-gray:  #6a6a7a;   /* metadata */
  --white:      #ffffff;
  --line:       #ece6da;   /* varm skillelinje */
  --gold-soft:  rgba(201,162,39,.14);  /* pill/chip-bakgrunn */
  --gold-ring:  rgba(201,162,39,.25);  /* focus-ring */
  --danger:     #c0392b;               /* destruktiv handling / valideringsfeil / live-indikator */
  --danger-soft: rgba(192,57,43,.1);
  --warning:     #b5621a;              /* status: middels risiko / advarsel (screenere) */
  --warning-soft: rgba(181,98,26,.12);

  /* --- Radius-skala (ingen verdi utenfor) --- */
  --r-sm:   8px;
  --r-md:   12px;   /* knapper, små kort */
  --r-lg:   16px;   /* seksjonskort */
  --r-xl:   20px;   /* CTA-band, store blokker */
  --r-pill: 999px;

  /* --- Skygge: 3 nivå, ALLE navy-tonet --- */
  --e1: 0 1px 3px rgba(22,33,62,.08), 0 1px 2px rgba(22,33,62,.06);
  --e2: 0 8px 24px rgba(22,33,62,.10);
  --e3: 0 18px 44px rgba(22,33,62,.16);

  /* --- Typografi --- */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:    'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-eyebrow: 0.8rem;
  --fs-body:    1.0625rem;
  --fs-lead:    1.2rem;
  --fs-h3:      1.4rem;
  --fs-h2:      2rem;
  --fs-h1:      clamp(2.4rem, 5vw, 3.4rem);
  --lh-body:    1.65;

  /* --- Gull-finish (knapper + store gull-flater) --- */
  --gold-grad: linear-gradient(180deg, #d4af37 0%, #c9a227 100%);

  --t: .25s ease;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

/* --- Typografi-klasser --- */
.foa-display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }
.foa-h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: 1.1;  letter-spacing: -0.01em; margin: 0 0 .6em; }
.foa-h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: 1.2;  margin: 0 0 .6em; }
.foa-h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.25; margin: 0 0 .4em; }
.foa-lead { font-size: var(--fs-lead); color: var(--slate); line-height: 1.55; }
.foa-accent { color: var(--gold); }

/* Eyebrow — liten gull-etikett over overskrift (ÉN størrelse overalt) */
.foa-eyebrow {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
  margin: 0 0 .8rem;
}

/* --- Knapper --- */
.foa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-sans); font-size: 1rem; font-weight: 700;
  padding: .7rem 1.5rem; border-radius: var(--r-md);
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  transition: background var(--t), box-shadow var(--t), color var(--t), border-color var(--t);
}
.foa-btn--primary {
  background: var(--gold-grad); color: var(--navy);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}
.foa-btn--primary:hover { box-shadow: var(--e2), inset 0 1px 0 rgba(255,255,255,.28); }
.foa-btn--secondary { background: transparent; color: var(--navy); border-color: var(--navy); }
.foa-btn--secondary:hover { background: var(--navy); color: var(--white); }
/* På navy bakgrunn */
.foa-on-navy .foa-btn--secondary { color: var(--white); border-color: var(--white); }
.foa-on-navy .foa-btn--secondary:hover { background: rgba(255,255,255,.1); }

/* --- Kort --- */
.foa-card {
  background: var(--white);
  border-top: 3px solid var(--gold);
  border-radius: var(--r-lg);
  box-shadow: var(--e1);
  padding: 1.5rem 1.6rem;
  transition: box-shadow var(--t), transform var(--t);
}
.foa-card:hover { box-shadow: var(--e2); }

/* --- Pill / badge (gull — aldri grønn) --- */
.foa-pill {
  display: inline-block;
  background: var(--gold-soft);
  border: 1px solid rgba(201,162,39,.5);
  color: var(--gold-deep);
  font-size: .8rem; font-weight: 700;
  padding: .25rem .75rem; border-radius: var(--r-pill);
}

/* --- Ikon-chip (monokromt navy ikon på gull-tonet flate) --- */
.foa-chip {
  width: 46px; height: 46px; border-radius: var(--r-md);
  background: var(--gold-soft);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--navy);
}
.foa-chip svg { width: 22px; height: 22px; }

/* --- Inputs (gull focus-ring) --- */
.foa-input {
  width: 100%; font: inherit; color: var(--ink);
  padding: .65rem .9rem; border: 1.5px solid var(--line);
  border-radius: var(--r-sm); background: var(--white);
  transition: border-color var(--t), box-shadow var(--t);
}
.foa-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-ring); }

/* --- Layout-hjelpere --- */
.foa-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.foa-section { padding: 4rem 0; }

/* --- Navy seksjon / hero --- */
.foa-navy { background: var(--navy); color: var(--white); }
.foa-navy .foa-h1, .foa-navy .foa-h2, .foa-navy .foa-h3 { color: var(--white); }

/* --- Shell: slankt navy tittel-felt for undersider --- */
.foa-page-band { background: var(--navy); color: var(--white); padding: 1.6rem 0 1.9rem; }
.foa-page-band .foa-container { max-width: 1000px; }
.foa-page-crumb { font-size: .85rem; color: rgba(255,255,255,.6); margin: 0 0 .5rem; }
.foa-page-crumb a { color: rgba(255,255,255,.72); text-decoration: none; }
.foa-page-crumb a:hover { color: var(--gold); }
.foa-page-band .foa-eyebrow { display: block; margin-bottom: .35rem; }
.foa-page-title { font-family: var(--font-display); font-weight: 700; color: var(--white); font-size: clamp(1.6rem, 3.5vw, 2.2rem); line-height: 1.12; letter-spacing: -.01em; margin: 0; }
.foa-page-title .acc { color: var(--gold); }
.foa-page-lead { color: rgba(255,255,255,.85); font-size: 1.05rem; line-height: 1.5; margin: .6rem 0 0; max-width: 620px; }

/* Innhold ALLTID synlig — ingen app-aktig scroll-fade som etterlater tomme felt.
   Overstyrer per-side .fade-in (opacity:0) globalt. */
.fade-in { opacity: 1 !important; animation: none !important; transform: none !important; }