/* widgets/kontakt/kontakt.css
   Kontakt — formular + info. Genbruger delte .form-field / .form-check / .btn / .card /
   .split / .section-header (+ §0's .form-field--invalid-fejltilstand). Kun var(--token);
   0 !important. @media kun ved .split-brudpunktet (1→2 kolonner: delt .split +
   info-kolonnens flugtning med kortet). */

.kontakt-graesmarken__layout.split { align-items: start; }

/* Side om side: info-kolonnen flugter med kortets indhold — kompensér for kortets
   padding, så info- og formular-overskriften står på samme linje. Kun ved 2 kolonner
   (samme brudpunkt som delt .split ejer). */
@media (min-width: 768px) {
  .kontakt-graesmarken__layout.split > .kontakt-graesmarken__info {
    padding-block-start: var(--space-lg);
  }
}

/* WYSIWYG-introtekst: lead'en er en <div> med editor-afsnit — nulstil afsnits-margin
   og lad lead'ens eget measure-loft styre (global p-measure er bredere). */
.kontakt-graesmarken .section-header__lead p { margin: 0; max-width: none; }
.kontakt-graesmarken .section-header__lead p + p { margin-top: var(--space-xs); }

/* Form til venstre: byt kolonnerne (info står først i DOM for læserækkefølge). */
.kontakt-graesmarken--form-left .kontakt-graesmarken__info { order: 2; }

/* ---- Info-kolonne ---- */
.kontakt-graesmarken__info-heading {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--color-heading);
  margin: 0 0 var(--space-sm) 0;
}
.kontakt-graesmarken__info-list {
  list-style: none;
  margin: 0 0 var(--space-md) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  color: var(--color-text-soft);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.kontakt-graesmarken__info-list a {
  color: var(--color-link);
  text-decoration: none;
}
.kontakt-graesmarken__info-list a:hover { color: var(--color-link-hover); }
.kontakt-graesmarken__info-extra {
  color: var(--color-text-soft);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* ---- Formular-kort ---- */
/* Dobbelt-klasse slår .card's egen padding uanset enqueue-rækkefølge. */
.kontakt-graesmarken .kontakt-graesmarken__form-wrap {
  padding: var(--space-lg);
}

/* ---- Formular-kortets flade (form_bg-controllen) ----
   Accent/inverse genbruger §7's is-variant-* direkte på kortet (CTA-precedens):
   varianten leverer flade + h-tag/link-farver; her kun det formular-specifikke. */
.kontakt-graesmarken__form-wrap.is-variant-accent,
.kontakt-graesmarken__form-wrap.is-variant-inverse { border-color: transparent; }

/* Custom-farve — dobbelt klasse-led vinder over §7's variant-baggrund. */
.kontakt-graesmarken .kontakt-graesmarken__form-wrap--custom {
  background-color: var(--gm-form-bg, var(--color-bg-card));
}

/* Lys tekst på mørk flade: §7 dækker overskrift + links; felternes detaljer her.
   Inputfelterne forbliver hvide — det giver størst læsbarhed på den mørke flade. */
.kontakt-graesmarken__form-wrap.is-variant-inverse .form-field__label { color: var(--color-paper); }
.kontakt-graesmarken__form-wrap.is-variant-inverse .form-field__hint,
.kontakt-graesmarken__form-wrap.is-variant-inverse .kontakt-graesmarken__consent { color: var(--color-green-300); }
.kontakt-graesmarken__form-wrap.is-variant-inverse .form-check__input { border-color: var(--color-green-300); }

/* Fejltekster: error-tokenet er kalibreret til lyse flader — lysn det mod paper
   (token-mix, hero-overlay-mønsteret), så det består kontrast på green-900. */
.kontakt-graesmarken__form-wrap.is-variant-inverse .form-field__error,
.kontakt-graesmarken__form-wrap.is-variant-inverse .kontakt-graesmarken__errors {
  color: color-mix(in oklab, var(--color-error) 45%, var(--color-paper));
}

/* Send-knappen på mørk flade: byttet-rundt-opskriften (design-stil §3) — paper
   flade, mørk tekst — så knappen ikke drukner i green-700-på-green-900. */
.kontakt-graesmarken__form-wrap.is-variant-inverse .kontakt-graesmarken__submit {
  background-color: var(--color-paper);
  color: var(--color-green-900);
}
.kontakt-graesmarken__form-wrap.is-variant-inverse .kontakt-graesmarken__submit:hover {
  background-color: var(--color-green-100);
  color: var(--color-green-900);
}
.kontakt-graesmarken__form-heading {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--color-heading);
  margin: 0 0 var(--space-md) 0;
}
.kontakt-graesmarken__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Honeypot — skjult for mennesker, "synlig" for simple bots (ikke display:none). */
.kontakt-graesmarken__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: 0;
}

/* Fejloversigt (role=alert) */
.kontakt-graesmarken__errors {
  padding: var(--space-sm) var(--space-md);
  border: var(--border-width-hairline) var(--border-style-solid) var(--color-error);
  border-radius: var(--radius-md);
  background-color: var(--color-error-light);
  color: var(--color-error);
  font-size: var(--fs-body);
}

/* Status efter submit (succes / fejl) */
.kontakt-graesmarken__status:empty { display: none; }
.kontakt-graesmarken__status {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.kontakt-graesmarken__status.is-success {
  background-color: var(--color-success-light);
  color: var(--color-success);
}
.kontakt-graesmarken__status.is-error {
  background-color: var(--color-error-light);
  color: var(--color-error);
}

/* Samtykke + privatlivs-note */
.kontakt-graesmarken__consent {
  font-size: var(--fs-body);
  color: var(--color-text-soft);
}
.kontakt-graesmarken__privacy { margin: 0; }

/* Submit */
.kontakt-graesmarken__submit { align-self: flex-start; }
.kontakt-graesmarken__submit[disabled] {
  opacity: 0.7;
  cursor: progress;
}