/* Landingsside for domæner til salg. Typografi frem for pynt: domænenavnet er siden.
   Én skrift (Inter, lokal), to grå toner, ingen gradienter og ingen ikoner.
   Mørk udgave følger systemets indstilling. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin-wght-4.001.woff2") format("woff2");
}

:root {
  --papir: #f5f3ef;
  --felt: #ffffff;
  --tekst: #17171a;
  --daempet: #6b6862;
  --kant: #d9d5cd;
  --kant-felt: #c9c4ba;
  --fejl: #b42318;
  --ok: #1e6a43;
  --fokus: #1d4ed8;

  --luft: clamp(1.25rem, 5vw, 4rem);
  --bredde: min(100vw - 2 * var(--luft), 70rem);
  --r: 6px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papir: #121214;
    --felt: #1a1a1e;
    --tekst: #ecebe7;
    --daempet: #9c9991;
    --kant: #2e2e33;
    --kant-felt: #3d3d44;
    --fejl: #ff8a80;
    --ok: #7fd1a1;
    --fokus: #8fb3ff;

    color-scheme: dark;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--papir);
  color: var(--tekst);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  font-feature-settings: "cv05", "cv08";
  -webkit-font-smoothing: antialiased;
}

.top,
main,
.bund {
  width: var(--bredde);
  margin-inline: auto;
}

main {
  flex: 1;
}

a {
  color: inherit;
}

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

/* Sprogvalg */

.top {
  display: flex;
  justify-content: flex-end;
  padding-block: 1.5rem;
}

.sprog {
  display: flex;
  gap: 1.25rem;
  font-size: 0.875rem;
}

.sprog a {
  color: var(--daempet);
  text-decoration: none;
  padding-block: 0.25rem;
  border-bottom: 1px solid transparent;
}

.sprog a:hover {
  color: var(--tekst);
}

.sprog a[aria-current="page"] {
  color: var(--tekst);
  border-bottom-color: currentColor;
}

/* Domænet */

.helt {
  min-height: 58vh;
  min-height: 58svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--kant);
}

.maerke {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--daempet);
}

.domaene {
  margin: 0.2em 0 0.22em;
  /* Navnet fylder bredden uden at gå på to linjer: --tegn er antal tegn (sat i src/side.php).
     0.6 em pr. tegn er lidt mere end Inters gennemsnit ved denne vægt og spatiering.
     Under 2rem brydes meget lange navne i stedet (efter bindestreger, ellers hvor som helst). */
  font-size: max(2rem, min(8.5rem, calc(var(--bredde) / (var(--tegn) * 0.6))));
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: -0.045em;
  overflow-wrap: anywhere;
}

.domaene .tld {
  color: var(--daempet);
  font-weight: 450;
}

.overskrift {
  margin: 0;
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  font-weight: 450;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Kontakt */

.kontakt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: clamp(2rem, 6vw, 6rem);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.kontakt h2 {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--daempet);
}

.kontakt-tekst p {
  margin: 0;
  max-width: 28rem;
  font-size: 1.125rem;
}

.formular {
  display: grid;
  gap: 1.25rem;
}

.felt-raekke {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.felt {
  display: grid;
  gap: 0.4rem;
}

.ledetekst {
  font-size: 0.875rem;
  font-weight: 550;
}

.valgfrit,
.hjaelp {
  color: var(--daempet);
  font-weight: 400;
}

.hjaelp {
  font-size: 0.8125rem;
}

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

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 0.75rem 0.875rem;
  background: var(--felt);
  border: 1px solid var(--kant-felt);
  border-radius: var(--r);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color 0.15s;
}

textarea {
  resize: vertical;
  min-height: 8.5rem;
}

input:hover,
textarea:hover {
  border-color: var(--daempet);
}

input:focus-visible,
textarea:focus-visible {
  border-color: var(--tekst);
  outline-offset: 1px;
  border-radius: var(--r);
}

[aria-invalid="true"] {
  border-color: var(--fejl) !important;
}

.felt-fejl {
  font-size: 0.8125rem;
  color: var(--fejl);
}

.honningkrukke {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

altcha-widget {
  --altcha-color-base: var(--felt);
  --altcha-color-base-content: var(--tekst);
  --altcha-color-primary: var(--tekst);
  --altcha-color-primary-content: var(--papir);
  --altcha-color-neutral: var(--kant-felt);
  --altcha-color-error: var(--fejl);
  --altcha-color-success: var(--ok);
  --altcha-border-radius: var(--r);
  --altcha-max-width: 100%;
  font-size: 0.875rem;
}

.formular-bund {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
}

.knap {
  padding: 0.8rem 1.5rem;
  background: var(--tekst);
  color: var(--papir);
  border: 0;
  border-radius: var(--r);
  font-weight: 550;
  cursor: pointer;
  transition: opacity 0.15s;
}

.knap:hover {
  opacity: 0.86;
}

.knap:disabled {
  opacity: 0.55;
  cursor: progress;
}

.formular-status {
  margin: 0;
  font-size: 0.9375rem;
}

.formular-status:empty {
  display: none;
}

.formular-status.er-sender {
  color: var(--daempet);
}

.formular-status.er-fejl {
  color: var(--fejl);
}

.formular-status.er-ok {
  color: var(--ok);
  font-weight: 500;
  font-size: 1.0625rem;
}

.formular-info {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--daempet);
}

.formular.er-sendt > :not(.formular-bund),
.formular.er-sendt .knap {
  display: none;
}

/* Bund */

.bund {
  padding-block: 1.5rem;
  border-top: 1px solid var(--kant);
  font-size: 0.8125rem;
  color: var(--daempet);
}

/* 404 */

.side-404 .helt {
  border-bottom: 0;
  min-height: 70vh;
}

/* Smalle skærme */

@media (max-width: 760px) {
  .helt {
    min-height: 36vh;
    min-height: 36svh;
  }

  .kontakt {
    grid-template-columns: 1fr;
  }

  .felt-raekke {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}