/* Hvit flate (body er cream); headeren er hvit og i flyt, så seksjonen starter
   rett under den. Ingen margin under: den oliven boksen skal gå helt ned til
   footeren. */
.nx-skjema {
  margin-bottom: 0;
  background: var(--wp--preset--color--white);
}

.nx-skjema__ramme {
  box-sizing: border-box;
}

/* Oliven boks inset i .nx-container (1640px innhold på 1920, x=140). Ingen
   fast høyde: boksen omslutter innholdet og vokser med tekstzoom (WCAG 1.4.4).
   Alt er sentrert i én kolonne. */
.nx-skjema__boks {
  box-sizing: border-box;
  /* Luftmengdene er målt i designet (430 og 1920) og interpolert lineært:
     topp 54px → 210px, bunn 76px → 246px (under siste tekstlinje) */
  padding: clamp(3.375rem, calc(0.5625rem + 10.47vw), 13.5rem) var(--nx-gutter)
    clamp(4.75rem, calc(1.7rem + 11.4vw), 15.5rem);
  background: var(--wp--preset--color--olive);
  color: var(--wp--preset--color--white);
  text-align: center;
}

.nx-skjema__overskrift {
  margin: 0;
  font-size: var(--wp--preset--font-size--x-large);
}

/* rem + vw (ikke bare vw) så teksten følger nettleserens tekstzoom; gir 25px
   ved 1920 (0,5rem + 0,885vw), gulv 18px (mobil) */
.nx-skjema__ingress {
  /* ~810px ved 25px tekst: designets første linje er 808px bred og slutter på
     «…Norge ut» */
  max-width: min(100%, 32.5em);
  margin: clamp(0.9375rem, calc(0.74rem + 0.738vw), 1.625rem) auto 0;
  font-size: clamp(1.125rem, calc(0.5rem + 0.885vw), 1.5625rem);
  line-height: 1.2;
  /* Lange ord brytes heller enn å flyte ut; ingen automatisk orddeling, siden
     designets linjebrudd er hele ord */
  overflow-wrap: break-word;
}

.nx-skjema__form {
  box-sizing: border-box;
  width: 100%;
  max-width: 674px;
  margin: clamp(3rem, calc(2.45rem + 2.75vw), 5.75rem) auto 0;
  text-align: left;
}

/* Første element i boksen (skjema eller info når overskrift/ingress mangler)
   skal ikke ha topp-margin */
.nx-skjema__boks > :first-child {
  margin-top: 0;
}

/* Lenkene arver ellers elements.link sin ink-farge: 1,88:1 på oliven */
.nx-skjema__info a {
  color: inherit;
}

.nx-skjema__info {
  max-width: 800px;
  margin: clamp(4rem, 4.2vw, 5rem) auto 0;
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1.28;
  overflow-wrap: break-word;
  /* Ingen enslige ord på siste linje (e-postadressen er lengre enn i designet) */
  text-wrap: pretty;
}

.nx-skjema__info > * {
  margin: 0;
}

.nx-skjema__info > * + * {
  margin-top: 1.3em;
}

.nx-skjema__info > :is(h2, h3) + * {
  margin-top: 0;
}

/* Mellomtitlene er ekte <h2>/<h3> (WCAG 1.3.1) men ser ut som fet brødtekst.
   theme.json gir Playfair på alle overskrifter, så Roboto settes eksplisitt. */
.nx-skjema__info :is(h2, h3) {
  font-family: var(--wp--preset--font-family--roboto);
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
  letter-spacing: normal;
  text-transform: none;
}

@media (max-width: 600px) {
  /* .nx-skjema foran: .nx-container i global.css har lik spesifisitet */
  .nx-skjema .nx-skjema__ramme {
    padding-inline: 0;
  }

  /* Mobildesignet: boksen går kant i kant, innholdet står 37px inn på 430px */
  .nx-skjema__boks {
    padding-inline: clamp(1.25rem, 8.6vw, 2.3125rem);
  }

  .nx-skjema__info {
    margin-top: 6.125rem;
  }

  /* Designets mobiltittel er 35px, ikke den fluide mellomverdien presetet gir */
  .nx-skjema__overskrift {
    font-size: 2.1875rem;
  }
}

/* --- Hypersys-skjema (iframe) ---------------------------------------------
   Skjemaet ligger på norexit.hypersys.no og kan ikke styles fra temaet
   (annet domene). Det har gjennomsiktig bakgrunn og svart Verdana-tekst,
   som får for lav kontrast rett på oliven – derfor et hvitt kort. Siden
   sender ingen høydemelding (postMessage), så høyden er fast: innholdet er
   529px (målt 2026-10-22 ved 674 og 356px), resten gir rom for
   valideringsmeldinger før iframen selv begynner å rulle. */
.nx-skjema__iframe {
  display: block;
  box-sizing: border-box;
  /* Hypersys tegner skjemaet i Verdana 12px. zoom forstørrer hele innholdet
     (tekst, felter, knapp) – det eneste vi kan påvirke utenfra. 1,4 gir ca.
     17px tekst, nær designets 18px. Prosentbredden regnes mot forelderen
     (ikke ganget med zoom), så 100 % fyller skjemakolonnen (674px); høyden i
     px ganges med zoom. Innholdet er 529px (målt 2026-10-22), resten er luft
     for valideringsmeldinger. Nettlesere uten zoom viser skjemaet i 100 %. */
  --nx-hs-zoom: 1.4;
  zoom: var(--nx-hs-zoom);
  width: 100%;
  height: 570px;
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: 3px;
  background: var(--wp--preset--color--white);
  color-scheme: light;
}

.nx-skjema__reserve {
  margin: 0.875rem 0 0;
  font-size: var(--wp--preset--font-size--small);
  text-align: center;
}

.nx-skjema__reserve a {
  color: inherit;
}

/* Mobil: skjemaets innhold (med Hypersys sin ramme og overskrift) er ca.
   320px bredt, skjemakolonnen 356px på 430 – 1,08 gir ca. 13px tekst uten
   at rammen går ut over kanten */
@media (max-width: 600px) {
  .nx-skjema__iframe {
    --nx-hs-zoom: 1.08;
    height: 600px;
    padding: 0.25rem;
  }
}

@media (forced-colors: active) {
  .nx-skjema__iframe {
    border: 1px solid CanvasText;
  }
}