/* =========================================================================
   Arbeidsglede - hovedstilark
   Design: DESIGN_grunnmal.md, oversatt i DESIGN.md
   Innhold og struktur: ANALYSE.md
   ========================================================================= */

/* ── 1. Fonter (selvhostet, ingen eksterne kall) ───────────────────────── */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── 2. Design tokens ──────────────────────────────────────────────────── */

:root {
  /* ── Merkevarefarger, hentet direkte fra arbeidsglede.net ──────────────
     Oransje  #F5A800  logoen
     Gull     #DDB456  båndseksjonen
     Gul      #FFE27C  sitatblokken
     Grønn    #758650  knappene                                           */
  --ag-orange: #f5a800;            /* flate med mørk tekst - 8,16:1 */
  --ag-orange-rgb: 245, 168, 0;
  --ag-orange-ink: #9b6500;        /* oransje som tekst/strek - 4,61:1 mot krem */
  --ag-gold: #ddb456;              /* flate med mørk tekst - 8,36:1 */
  --ag-yellow: #ffe27c;            /* lys seksjonsflate - 12,79:1 med mørk tekst */
  --ag-green: #758650;             /* kildegrønn - flater og dekor */
  --ag-green-deep: #5f6c40;        /* knappeflate med hvit tekst - 5,67:1 */
  --ag-green-deep-hover: #4a5531;  /* - 7,97:1 */

  /* ── Nøytraler: varme, ingen grå ── */
  --ag-ink: #241f18;               /* overskrifter - 15,28:1 mot krem */
  --ag-body: #3a3327;              /* brødtekst - 11,66:1 mot krem */
  --ag-white: #ffffff;
  --ag-cream: #fbf7ec;             /* sideflate */
  --ag-tint: #f3ecda;              /* dempet flate der hvite kort skal skille seg ut */
  --ag-border: #ece2cc;            /* dekorative skiller */
  --ag-border-strong: #7e6f52;     /* kanter på kontroller - 4,58:1 */
  --ag-dark: #2a3d1e;              /* mørke seksjoner - dyp oliven */
  --ag-darkest: #241f18;           /* dypeste flate */
  --ag-olive: #2a3d1d;             /* om meg-helten - hvit tekst 11,77:1 */
  --ag-sand: #d9cfc0;              /* sidebunn - 1,64:1 mot krem, tydelig brudd */
  --ag-black: #000000;             /* sidebunnens tekst - 15,32:1 mot sand */

  /* ── Kategorifarger (3 tjenester) ── */
  /* Etikettfarger. Oransje og gul er flatefarger og duger ikke som tekst,
     så kategoriene bruker tre mørke toner som skiller seg fra hverandre. */
  --ag-tag-foredrag: #9b6500;      /* oransje ink */
  --ag-tag-ledelse: #5f6c40;       /* grønn */
  --ag-tag-kurs: #2a3d1e;          /* mørk oliven */

  /* Typografi */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;

  --text-hero: 3.2vw;
  --text-h2-large: 56px;
  --text-h2: 48px;
  --text-h3: 20px;
  --text-body: 18px;
  --text-base: 16px;
  --text-tag: 13px;
  --text-small: 12px;

  --weight-black: 800;
  --weight-bold: 700;
  --weight-semibold: 600;
  --weight-medium: 500;
  --weight-regular: 400;

  --leading-tight: 1.15;
  --leading-body: 1.5;
  --leading-compact: 1;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;
  --space-section: 96px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-card: 16px;
  --radius-feature: 20px;

  /* Skygger */
  --shadow-whisper: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-natural: 6px 6px 9px rgba(0, 0, 0, 0.2);

  /* Layout */
  --container-content: 800px;
  --container-wide: 1290px;
  --header-height: 84px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;
}

/* ── 3. Reset ──────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Vannrette kortrader utvider dokumentets rulleflate selv om de selv har
     overflow-x:auto. clip pa html stopper det ikke i Chromium, sa her ma
     hidden til. Sticky-headeren tar ikke skade: den er sticky mot nettopp
     denne rulleboksen. Rutenettenes minstebredder er uansett rettet med
     minmax(min(...)), sa dette er belte og bukseseler - ikke eneste vern. */
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  color: var(--ag-body);
  background-color: var(--ag-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* clip, ikke hidden: hidden lager en rulleboks som bade odelegger
     position:sticky og skjuler reell overflyt for testverktoy. */
  overflow-x: clip;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

ul,
ol {
  list-style: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

/* Ankermål må klare den klebrige headeren */
[id] {
  scroll-margin-top: calc(var(--header-height) + var(--space-lg));
}

/* ── 4. Typografi ──────────────────────────────────────────────────────── */

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  color: var(--ag-ink);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-hero);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.015em;
}

h3 {
  font-size: 28px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
}

h4 {
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
}

p {
  text-wrap: pretty;
}

strong,
b {
  font-weight: var(--weight-semibold);
  color: var(--ag-ink);
}

/* Lenker: aldri farge alene som signal - oransje understrek, ikke tekstfarge */
a {
  color: var(--ag-ink);
  text-decoration: underline;
  text-decoration-color: var(--ag-orange-ink);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--transition-fast), text-decoration-thickness var(--transition-fast);
}

a:hover {
  color: var(--ag-green-deep);
  text-decoration-thickness: 3px;
}

/* Alle mørke kontekster samlet ett sted - ellers blir en enkelt flate glemt
   og teksten blir svart på svart. */
.section--dark a,
.section--ink a,
.hero--image a,
.hero--split a {
  color: var(--ag-white);
  text-decoration-color: var(--ag-yellow);
}

.section--dark a:hover,
.section--ink a:hover,
.hero--image a:hover,
.hero--split a:hover {
  color: var(--ag-yellow);
}

/* Ingress under overskrift */
.lead {
  max-width: var(--container-content);
  font-size: var(--text-body);
  color: var(--ag-body);
}

.section--dark .lead,
.section--dark p,
.section--ink p {
  color: rgba(255, 255, 255, 0.82);
}

/* Løpende tekstblokk */
.prose {
  max-width: var(--container-content);
}

.prose > * + * {
  margin-top: var(--space-lg);
}

.prose h3 {
  margin-top: var(--space-2xl);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── 5. Fokus og hopp-lenke ────────────────────────────────────────────── */

:focus-visible {
  outline: 3px solid var(--ag-dark);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Slate mot near-black er 1,64:1 - på mørke flater må ringen være hvit */
.section--dark :focus-visible,
.section--ink :focus-visible,
.hero--image :focus-visible,
.hero--split :focus-visible {
  outline-color: var(--ag-white);
}

/* Sidebunnen er lys sand - der må ringen være svart for å synes */
.site-footer :focus-visible {
  outline-color: var(--ag-black);
}

.skip-link {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 200;
  padding: 12px 20px;
  background: var(--ag-green-deep);
  color: var(--ag-white);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  border-radius: var(--radius-md);
  transform: translateY(-200%);
  transition: transform var(--transition-fast);
}

.skip-link:focus {
  transform: translateY(0);
  color: var(--ag-white);
}

/* ── 6. Layout ─────────────────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

.container--narrow {
  max-width: var(--container-content);
}

.section {
  padding-block: var(--space-section);
}

.section--tight {
  padding-block: var(--space-3xl);
}

.section--blush {
  background-color: var(--ag-yellow);
}

.section--white {
  background-color: var(--ag-white);
}

/* Hvite kort forsvinner mot hvit flate nå som kantlinjene er borte.
   Kortseksjoner bruker derfor krem eller denne dempede tonen - aldri hvit. */
.section--tint {
  background-color: var(--ag-tint);
}

.section--dark {
  background-color: var(--ag-dark);
  color: rgba(255, 255, 255, 0.82);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--ag-white);
}

.section--ink {
  background-color: var(--ag-darkest);
  color: rgba(255, 255, 255, 0.82);
}

.section--ink h2,
.section--ink h3,
.section--ink h4 {
  color: var(--ag-white);
}

.section__head {
  max-width: var(--container-content);
  margin-bottom: var(--space-2xl);
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.section__head > h2 + p {
  margin-top: var(--space-md);
}

.grid {
  display: grid;
  gap: var(--space-lg);
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

/* auto-fit gir tre spalter paa brede skjermer. Med fire kort blir det 3+1,
   som leser ragget. --duo laaser til to spalter, sa fire kort blir 2x2. */
.grid--duo {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 760px) {
  .grid--duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

/* ── 7. Knapper ────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 14px 28px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-compact);
  text-align: center;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base),
    color var(--transition-base), transform var(--transition-fast);
}

.btn:active {
  transform: scale(0.98);
}

/* Primær: grønn #5F6C40 med hvit tekst (5,67:1). Kildegrønnen #758650 gir
   kun 3,98:1 mot hvit og brukes derfor ikke bak knappetekst. */
.btn--primary {
  background-color: var(--ag-green-deep);
  color: var(--ag-white);
}

.btn--primary:hover {
  background-color: var(--ag-green-deep-hover);
  color: var(--ag-white);
}

.btn--ghost {
  background-color: transparent;
  color: var(--ag-ink);
  border-color: var(--ag-border-strong);
}

.btn--ghost:hover {
  background-color: rgba(0, 0, 0, 0.04);
  border-color: var(--ag-ink);
  color: var(--ag-ink);
}

.section--dark .btn--ghost,
.section--ink .btn--ghost,
.hero--image .btn--ghost,
.hero--split .btn--ghost {
  color: var(--ag-white);
  border-color: rgba(255, 255, 255, 0.45);
}

.section--dark .btn--ghost:hover,
.section--ink .btn--ghost:hover,
.hero--image .btn--ghost:hover,
.hero--split .btn--ghost:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--ag-white);
  color: var(--ag-white);
}

.btn--nav {
  padding: 10px 20px;
  font-size: 15px;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

/* Tekstlenke med pil */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  border-bottom: 2px solid var(--ag-orange);
  padding-bottom: 2px;
}

.link-arrow svg {
  transition: transform var(--transition-fast);
}

.link-arrow:hover svg {
  transform: translateX(4px);
}

/* ── 8. Header ─────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--ag-cream);
  transition: box-shadow var(--transition-base), background-color var(--transition-base);
}

.site-header.is-scrolled {
  background-color: rgba(241, 240, 238, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-whisper);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--header-height);
  padding-block: var(--space-md);
}

.site-logo {
  flex: none;
  text-decoration: none;
  line-height: 0;
}

.site-logo img {
  width: 160px;
  height: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav__link {
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  color: var(--ag-ink);
  text-decoration: none;
  padding-block: var(--space-xs);
  border-bottom: 2px solid transparent;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.nav__link:hover {
  color: var(--ag-green-deep);
  border-bottom-color: var(--ag-orange);
}

.nav__link[aria-current='page'] {
  border-bottom-color: var(--ag-gold);
  font-weight: var(--weight-semibold);
}

/* flex-direction: column er nødvendig. Uten den legger de tre strekene seg
   på rad, og hamburgeren rendres som én enkelt strek. */
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  color: var(--ag-ink);
}

.nav-toggle:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.nav-toggle__bar {
  display: block;
  width: 24px;
  height: 2px;
  background-color: currentColor;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.nav-toggle__bar + .nav-toggle__bar {
  margin-top: 6px;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

@media (max-width: 1024px) {
  .nav-toggle {
    display: flex;
  }

  .nav {
    position: fixed;
    inset: var(--header-height) 0 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: var(--space-xl) var(--space-lg) var(--space-3xl);
    background-color: var(--ag-cream);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--transition-base), visibility var(--transition-base);
  }

  .nav.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__link {
    display: block;
    padding: var(--space-md) 0;
    font-size: 22px;
    border-bottom: 1px solid var(--ag-border);
  }

  .nav__link[aria-current='page'] {
    border-bottom-color: var(--ag-gold);
  }

  .nav .btn--nav {
    margin-top: var(--space-xl);
    align-self: flex-start;
    padding: 14px 28px;
    font-size: var(--text-base);
  }
}

html.nav-open,
body.nav-open {
  overflow: hidden;
}

/* aria-disabled erstatter disabled pa rulleknappene, sa utseendet ma folge */
.scroll-btn[aria-disabled='true'] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── 9. Hero ───────────────────────────────────────────────────────────── */

.hero {
  position: relative;
}

.hero--image {
  display: flex;
  align-items: center;
  min-height: min(88vh, 760px);
  padding-block: var(--space-4xl);
  background-color: var(--ag-darkest);
  color: rgba(255, 255, 255, 0.86);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Standard er object-position 50% 50%, som beskjaerer like mye oppe og nede.
   Naar motivet staar hoyt i bildet kapper det hodet. --top forankrer bildets
   overkant i seksjonens overkant, sa hele beskjaeringen tas nedenfra. */
.hero__bg--top {
  object-position: 50% 0;
}

/* Overlegg som sikrer minst 4,5:1 for hvit tekst over fotoet */
.hero--image::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(36, 31, 24, 0.94) 0%, rgba(36, 31, 24, 0.86) 42%, rgba(36, 31, 24, 0.45) 100%);
}

.hero > .container {
  position: relative;
  z-index: 2;
}

.hero__content {
  max-width: 780px;
}

.hero--image h1 {
  color: var(--ag-white);
}

.hero--image .lead {
  margin-top: var(--space-lg);
  color: rgba(255, 255, 255, 0.86);
  max-width: 620px;
}

/* Delt hero: tekst + bilde */
.hero--split {
  background-color: var(--ag-darkest);
  color: rgba(255, 255, 255, 0.82);
  padding-block: var(--space-section);
}

/* Om meg-helten staar i dyp oliven i stedet for naer-svart, sa siden aapner
   i merkevarens gronne framfor den morkeste flaten. */
.hero--olive {
  background-color: var(--ag-olive);
}

.hero--split h1 {
  color: var(--ag-white);
}

.hero--split .lead {
  color: rgba(255, 255, 255, 0.82);
}

.hero__split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

.hero__media img {
  width: 100%;
  border-radius: var(--radius-feature);
}

@media (max-width: 900px) {
  .hero__split-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
}

/* ── 10. Kort ──────────────────────────────────────────────────────────── */

.card {
  display: flex;
  flex-direction: column;
  background-color: var(--ag-white);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.card__media {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  flex: 1;
}

.card__title {
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  color: var(--ag-ink);
}

.card__text {
  font-size: var(--text-base);
  color: var(--ag-body);
  flex: 1;
}

.card__body > .btn,
.card__body > .link-arrow {
  align-self: flex-start;
  margin-top: var(--space-sm);
}

/* Tjenestekort med bilde og hover-løft */
.cta-card {
  text-decoration: none;
}

.cta-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.cta-card:hover .card__title {
  color: var(--ag-green-deep);
}

.cta-card .card__media {
  transition: transform var(--transition-slow);
}

/* Funksjonskort uten bilde */
.feature-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-xl);
  background-color: var(--ag-white);
  border-radius: var(--radius-card);
}

/* Kortvarianten uten fyll: ingen kantlinje, bare en dempet varm flate.
   Fargede kantlinjer på infobokser er fjernet på forespørsel. */
.feature-card--outline {
  background-color: rgba(245, 168, 0, 0.07);
}

.feature-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: var(--radius-md);
  background-color: rgba(var(--ag-orange-rgb), 0.16);
  color: var(--ag-orange-ink);
}

.feature-card h3,
.feature-card h4 {
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
}

.feature-card p {
  font-size: var(--text-base);
}

.feature-card__num {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--weight-bold);
  color: var(--ag-orange-ink);
  letter-spacing: 0.04em;
}

/* ── 11. Kategorietiketter ─────────────────────────────────────────────── */

/* Ingen kapsler: kategorien staar som en typografisk etikett med luft under,
   ikke som en farget pille. Fargen ligger i teksten, og hver kategori har
   derfor en tone som holder kontrastkravet mot lys flate. */
.tag {
  display: block;
  align-self: flex-start;
  margin-bottom: var(--space-md);
  font-size: var(--text-tag);
  font-weight: var(--weight-bold);
  line-height: var(--leading-compact);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tag--foredrag {
  color: var(--ag-tag-foredrag);
}

.tag--ledelse {
  color: var(--ag-tag-ledelse);
}

.tag--kurs {
  color: var(--ag-tag-kurs);
}

/* ── 12. Tellere ───────────────────────────────────────────────────────── */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--space-2xl);
}

.stat__number {
  display: block;
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: var(--weight-bold);
  line-height: var(--leading-compact);
  letter-spacing: -0.03em;
  color: var(--ag-ink);
}

.stat__label {
  display: block;
  margin-top: var(--space-sm);
  font-size: var(--text-base);
  color: var(--ag-body);
}

/* ── 13. Verdikjede ────────────────────────────────────────────────────── */

.flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: var(--space-lg);
  counter-reset: flow;
}

.flow__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background-color: var(--ag-white);
  border-radius: var(--radius-card);
}

.flow__step h3 {
  font-size: var(--text-h3);
}

.flow__step p {
  font-size: var(--text-base);
}

.flow__num {
  font-family: var(--font-display);
  font-size: var(--text-tag);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  color: var(--ag-orange-ink);
}

/* ── 14. Sitatbånd ─────────────────────────────────────────────────────── */

.quote-band {
  text-align: center;
}

.quote-band blockquote {
  max-width: 940px;
  margin-inline: auto;
}

/* Sitattegnet ligger på den gule flaten. Gull mot gult gir 1,53:1 og
   forsvinner - mørk grønn gir 6,23:1 og leser som et bevisst ornament. */
.quote-band__mark {
  display: block;
  font-family: var(--font-display);
  font-size: 96px;
  font-weight: var(--weight-bold);
  line-height: 0.7;
  color: var(--ag-green-deep-hover);
  margin-bottom: var(--space-md);
}

.quote-band__text {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--ag-ink);
  letter-spacing: -0.015em;
}

.quote-band__cite {
  display: block;
  margin-top: var(--space-lg);
  font-size: var(--text-base);
  font-style: normal;
  color: var(--ag-body);
}

/* ── 15. Testimonials ──────────────────────────────────────────────────── */

.testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-xl);
  background-color: var(--ag-white);
  border-radius: var(--radius-card);
  height: 100%;
}

.testimonial blockquote {
  flex: 1;
  font-size: var(--text-body);
  color: var(--ag-body);
}

.testimonial__cite {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  font-style: normal;
  color: var(--ag-ink);
}

.stars {
  display: flex;
  gap: 2px;
  color: var(--ag-gold);
}

/* Portrett-testimonial (om meg) */
.portrait-quote {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

.portrait-quote img {
  width: 100%;
  border-radius: var(--radius-feature);
}

.portrait-quote__text {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: var(--weight-medium);
  line-height: 1.35;
  color: var(--ag-ink);
}

@media (max-width: 800px) {
  .portrait-quote {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .portrait-quote img {
    max-width: 280px;
  }
}

/* ── 16. Marquee ───────────────────────────────────────────────────────── */

.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  width: max-content;
  animation: marquee-scroll 40s linear infinite;
}

.marquee--slow .marquee__track {
  animation-duration: 55s;
}

.marquee--reverse .marquee__track {
  animation-direction: reverse;
}

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track,
.marquee.is-paused .marquee__track {
  animation-play-state: paused;
}

/* WCAG 2.2.2 krever en mekanisme brukeren kan betjene for bevegelse som
   varer over fem sekunder. Hover alene holder ikke for tastatur og touch. */
.marquee-pause {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: var(--space-md) auto 0;
  padding: 8px 16px;
  font-size: var(--text-tag);
  font-weight: var(--weight-semibold);
  color: var(--ag-ink);
  background-color: transparent;
  border: 1.5px solid var(--ag-border-strong);
  border-radius: var(--radius-md);
}

.marquee-pause:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.marquee__item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex: none;
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  color: var(--ag-ink);
  white-space: nowrap;
}

.marquee__item::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--ag-gold);
}

.marquee__logo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  padding-inline: var(--space-md);
}

.marquee__logo img {
  max-height: 72px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter var(--transition-base), opacity var(--transition-base);
}

.marquee:hover .marquee__logo img {
  filter: grayscale(0);
  opacity: 1;
}

/* ── 17. Vannrett kortrad med scroll-snap ──────────────────────────────── */

.scroll-row__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

/* Uten min-width:0 nekter overskriftsblokken å krympe, og pilknappene
   presses utenfor skjermen på smale mobiler. */
.scroll-row__head > .section__head {
  flex: 1 1 240px;
  min-width: 0;
}

.scroll-row__viewport {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 340px);
  gap: var(--space-lg);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-lg);
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* eldre Edge */
}

/* Rullefeltet er skjult fordi det er stygt, ikke fordi rullingen er borte.
   Da må affordansen finnes et annet sted: pilknappene i hodet, tastatur via
   tabindex på selve raden, og sveip på touch. Uten dem ville innhold utenfor
   kanten vært umulig å nå. */
.scroll-row__viewport::-webkit-scrollbar {
  display: none;
}

.scroll-row__viewport > * {
  scroll-snap-align: start;
}

.scroll-row__nav {
  display: flex;
  gap: var(--space-sm);
  flex: none;
}

.scroll-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--ag-border-strong);
  border-radius: var(--radius-md);
  color: var(--ag-ink);
  background-color: transparent;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.scroll-btn:hover {
  background-color: var(--ag-white);
  border-color: var(--ag-ink);
}

.section--ink .scroll-btn {
  color: var(--ag-white);
  border-color: rgba(255, 255, 255, 0.45);
}

/* ── 18. Bok- og artikkelkort ──────────────────────────────────────────── */

.book-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-xl);
  background-color: var(--ag-white);
  border-radius: var(--radius-card);
}

.book-card img {
  width: 180px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-natural);
}

.book-card h3 {
  font-size: var(--text-h3);
}

.book-card p {
  font-size: var(--text-base);
  flex: 1;
}

.book-card .btn {
  align-self: flex-start;
}

.article-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-xl);
  background-color: var(--ag-white);
  border-radius: var(--radius-card);
  text-decoration: none;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.article-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.article-card__source {
  font-size: var(--text-tag);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ag-orange-ink);
}

.article-card__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  color: var(--ag-ink);
  flex: 1;
}

.article-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--ag-green-deep);
}

/* ── 19. Ikonliste ─────────────────────────────────────────────────────── */

.icon-list {
  display: grid;
  gap: var(--space-md);
}

.icon-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.icon-list svg {
  flex: none;
  margin-top: 4px;
  color: var(--ag-green-deep);
}

/* Punktlista som erstattet den animerte rullen paa forsiden. To spalter
   fra 720px, ellers en - med rikelig luft mellom punktene. */
.icon-list--split {
  gap: var(--space-lg) var(--space-2xl);
}

@media (min-width: 720px) {
  .icon-list--split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.icon-list--contact li {
  align-items: center;
  font-size: var(--text-body);
}

.section--dark .icon-list svg,
.section--ink .icon-list svg,
.hero--split .icon-list svg {
  color: var(--ag-yellow);
}

/* ── 20. Delt tekst/bilde ──────────────────────────────────────────────── */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

.split--narrow-media {
  grid-template-columns: 1.1fr 0.9fr;
}

.split__media img {
  width: 100%;
  border-radius: var(--radius-feature);
}

@media (max-width: 900px) {
  .split,
  .split--narrow-media {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
}

/* Skjemakortet er hvitt, men ligger inne i den mørke heroen. Uten denne
   nullstillingen arver alt av tekst den lyse fargen og blir usynlig. */
.hero--split .form-card,
.hero--split .form-card p,
.hero--split .form-card a,
.hero--split .form-card span,
.hero--split .form-card legend {
  color: var(--ag-ink);
}

.hero--split .form-card .required {
  color: var(--ag-orange-ink);
}

.hero--split .form-card :focus-visible {
  outline-color: var(--ag-dark);
}

/* ── 21. Skjema ────────────────────────────────────────────────────────── */

.form-card {
  padding: var(--space-2xl);
  background-color: var(--ag-white);
  border-radius: var(--radius-feature);
}

.form-card h2 {
  font-size: 32px;
  margin-bottom: var(--space-lg);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.field label {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--ag-ink);
}

.field .required {
  color: var(--ag-orange-ink);
}

/* Kontroller får --ag-border-strong (3,07:1), ikke den dekorative kanten */
.form-input {
  width: 100%;
  padding: 12px 16px;
  font-size: var(--text-base);
  color: var(--ag-ink);
  background-color: var(--ag-white);
  border: 1.5px solid var(--ag-border-strong);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus {
  border-color: var(--ag-green-deep);
  box-shadow: 0 0 0 3px rgba(var(--ag-orange-rgb), 0.18);
}

/* Feltene setter outline:none over, så fokusringen må gis eksplisitt tilbake -
   ellers har tastaturbrukere kun en svak kantfargeendring å gå etter. */
.form-input:focus-visible {
  outline: 3px solid var(--ag-dark);
  outline-offset: 2px;
}

.form-input::placeholder {
  color: #6f6350;
}

textarea.form-input {
  resize: vertical;
  min-height: 120px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-lg);
}

@media (max-width: 620px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* Temavelger som chips */
.chips {
  border: none;
  margin-bottom: var(--space-lg);
}

.chips legend {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--ag-ink);
  margin-bottom: var(--space-md);
}

.chips__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.chip span {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--ag-ink);
  background-color: var(--ag-white);
  border: 1.5px solid var(--ag-border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast);
}

.chip:hover span {
  border-color: var(--ag-green-deep);
}

.chip input:checked + span {
  background-color: var(--ag-green-deep);
  border-color: var(--ag-green-deep);
  color: var(--ag-white);
}

.chip input:focus-visible + span {
  outline: 3px solid var(--ag-dark);
  outline-offset: 2px;
}

/* Honeypot mot spam */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── 22. Footer ────────────────────────────────────────────────────────── */

.site-footer {
  background-color: var(--ag-sand);
  color: var(--ag-black);
  padding-block: var(--space-3xl) var(--space-xl);
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid rgba(0, 0, 0, 0.22);
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 320px;
}

.site-footer__brand img {
  width: 160px;
  /* Sandflaten er lys, så ordmerket står i svart uten filter */
  filter: brightness(0);
}

.site-footer h2 {
  font-size: var(--text-h3);
  color: var(--ag-black);
  margin-bottom: var(--space-md);
}

.site-footer__nav ul {
  display: grid;
  gap: var(--space-sm);
}

.site-footer a {
  /* WCAG 2.2 AA 2.5.8: klikkflaten skal vaere minst 24x24 px. Ren tekst gir
     23 px paa mobil. inline-flex + min-height loefter boksen uten aa endre
     bredden, saa understrekingen fortsatt foelger teksten og ikke kolonnen. */
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--ag-black);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.site-footer a:hover {
  color: var(--ag-green-deep-hover);
  border-bottom-color: var(--ag-green-deep-hover);
}

.site-footer__contact {
  display: grid;
  gap: var(--space-sm);
  font-size: var(--text-base);
  font-style: normal;
}

.social {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

.social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
  color: var(--ag-black);
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.social a:hover {
  background-color: rgba(0, 0, 0, 0.08);
  border-color: var(--ag-black);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-top: var(--space-xl);
  font-size: var(--text-base);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

/* ── 23. Feilside og takkeside ─────────────────────────────────────────── */

.centered-page {
  display: flex;
  align-items: center;
  min-height: 70vh;
  padding-block: var(--space-section);
  text-align: center;
}

.centered-page .container {
  max-width: 680px;
}

.centered-page h1 {
  font-size: clamp(40px, 6vw, 72px);
}

.centered-page .btn-group {
  justify-content: center;
}

/* ── 24. Scroll-animasjon ──────────────────────────────────────────────── */
/* Innholdet er synlig som standard. Bare når JS faktisk kjører (html.js)
   skjules det for å fades inn - ellers ville en JS-feil gjort siden tom. */

.js [data-animate] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.js [data-animate].is-visible {
  opacity: 1;
  transform: none;
}

/* ── 25. Responsivt ────────────────────────────────────────────────────── */

@media (max-width: 1366px) {
  :root {
    --text-hero: 52px;
  }
}

@media (max-width: 1200px) {
  :root {
    --text-h2-large: 34px;
    --text-h2: 32px;
    --space-section: 80px;
  }

  h3 {
    font-size: 24px;
  }

  .stat__number {
    font-size: 52px;
  }
}

@media (max-width: 1024px) {
  :root {
    --text-hero: 46px;
    --text-body: 17px;
  }
}

@media (max-width: 640px) {
  :root {
    --text-hero: 34px;
    --text-h2: 28px;
    --text-h2-large: 30px;
    --space-section: 64px;
  }

  .quote-band__text {
    font-size: 24px;
  }

  .quote-band__mark {
    font-size: 64px;
  }

  .stat__number {
    font-size: 44px;
  }

  .portrait-quote__text {
    font-size: 22px;
  }

  .form-card {
    padding: var(--space-lg);
  }

  .btn-group .btn {
    width: 100%;
  }
}

/* ── 26. Redusert bevegelse ────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .marquee__track {
    animation: none !important;
    transform: none !important;
  }

  .card,
  .cta-card,
  .article-card {
    transition: none !important;
  }

  .cta-card:hover,
  .article-card:hover {
    transform: none !important;
  }

  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .btn,
  .nav__link,
  .form-input {
    transition: background-color 0s, border-color 0s, color 0s !important;
  }

  .btn:active {
    transform: none;
  }
}

/* ── 27. Utskrift ──────────────────────────────────────────────────────── */

@media print {
  .site-header,
  .site-footer,
  .marquee,
  .scroll-row__nav {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}

/* ── 28. Små hjelpeklasser ─────────────────────────────────────────────── */
/* Erstatter inline styles, slik at CSP kan kjøre uten 'unsafe-inline'
   og PLAN.md-regelen om ingen inline styles holdes. */

.mt-md   { margin-top: var(--space-md); }
.mt-lg   { margin-top: var(--space-lg); }
.mt-2xl  { margin-top: var(--space-2xl); }
.mt-3xl  { margin-top: var(--space-3xl); }
.mb-0    { margin-bottom: 0; }
.mb-md   { margin-bottom: var(--space-md); }
.mb-lg   { margin-bottom: var(--space-lg); }
.text-center { text-align: center; }
.center-x    { margin-inline: auto; }
.text-base   { font-size: var(--text-base); }
.btn-group--center { justify-content: center; }
.section__head--gap { margin-top: var(--space-3xl); margin-bottom: var(--space-xl); }

/* Bakgrunnsfoto som svak tekstur bak skjemaet - sterkere ville tatt
   kontrasten på hvit tekst. */
.hero__split-grid--over { position: relative; z-index: 2; }

/* Prisikon på mørk flate: gull på egen dempet gullflate */
.feature-card__icon--gold {
  background-color: rgba(245, 168, 0, 0.16);
  color: var(--ag-gold);
  margin-bottom: var(--space-lg);
}

/* ── 29. Innledningslinje over overskrift ──────────────────────────────── */
/* Tekstene som tidligere lå i eyebrow-elementene, nå som vanlige avsnitt.
   Ingen versaler, ingen sperring, ingen dekorstrek - ren brødtekst. */

.intro-line {
  margin-bottom: var(--space-sm);
}

/* ── 30. Kontaktsiden ──────────────────────────────────────────────────── */
/* Skjemaet er sidens eneste handling og får derfor midten, ikke en
   sidekolonne. Kontaktdetaljene ligger som en stripe under. */

.contact-intro {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.contact-form {
  max-width: 760px;
  margin: var(--space-3xl) auto 0;
}

/* Staar over skjemaet, sentrert, som et lavterskelalternativ til aa fylle
   ut noe. Skjemakortet har selv margin-top, sa avstanden nedover kommer
   derfra - her trengs bare luft opp mot ingressen. */
.contact-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md) var(--space-2xl);
  margin-top: var(--space-xl);
}

.contact-strip li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-base);
}

/* Opplysning om påkrevde felt. Sto tidligere etter send-knappen, altså
   etter at brukeren hadde trengt den (WCAG 3.3.2). */
.field-note {
  margin-bottom: var(--space-lg);
  font-size: var(--text-base);
}