/* Twee banden: bovenin het woordmerk en de zin op de grondkleur, daaronder een
   oranje vlak met het formulier. De oranje band blijft in beide kleurstanden
   oranje; alleen de bovenband draait mee met dag en nacht. */

@font-face {
  font-family: Plex;
  src: url('letters/plex-mono-400.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
}

@font-face {
  font-family: Newsreader;
  src: url('letters/newsreader.woff2') format('woff2');
  font-display: swap;
  font-weight: 100 900;
}

:root {
  --grond: #fff;
  --inkt: #1b1f2e;
  --oranje: #ff5a36;
  --lijn: #767d8d;
  --ruimte: clamp(1.5rem, 5vw, 5rem);
  color-scheme: light dark;
}

/* Normaal beslist het stelsel over dag of nacht. Alleen de beoordelingspagina
   zet met ?stand= een van beide vast, zodat je ze naast elkaar kunt zien. */
:root[data-stand="dag"] { color-scheme: light; }

:root[data-stand="nacht"] {
  --grond: #1b1f2e;
  --inkt: #edeef2;
  color-scheme: dark;
}

* { box-sizing: border-box }

body {
  margin: 0;
  background: var(--grond);
  color: var(--inkt);
  font-family: Arial, sans-serif;
  font-size: 1rem;
}

main {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* ------------------------------------------------------- de bovenste band */

.intro { padding: clamp(2rem, 4vw, 3.5rem) var(--ruimte) clamp(2.6rem, 4.6vw, 4rem) }

.merk { margin-bottom: clamp(3rem, 5vw, 5rem) }

/* Twee bestanden in plaats van <picture>: zo kan de kleurstand ook met
   data-stand omgezet worden, en niet alleen door de voorkeur van het stelsel. */
.logo {
  display: block;
  width: clamp(10rem, 16vw, 14rem);
  height: auto;
}

.logo-nacht { display: none }

h1 {
  font: 400 clamp(2.3rem, 6.05vw, 6.2rem)/1.17 Plex, monospace;
  letter-spacing: -.07em;
  margin: 0;
  max-width: 90rem;
}

h1 span {
  font-family: Newsreader, Georgia, serif;
  font-style: italic;
  letter-spacing: -.055em;
  font-size: 1.17em;
  line-height: .8;
}

/* --------------------------------------------------------- de oranje band */

.contact {
  background: var(--oranje);
  color: #1b1f2e;
  padding: clamp(2rem, 3vw, 3rem) var(--ruimte) 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-top: 1px solid #1b1f2e;
}

form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 3rem;
  max-width: 90rem;
  width: 100%;
}

.veld { min-width: 0 }

label {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  margin-bottom: .375rem;
}

input, textarea {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #1b1f2ea6;
  border-radius: 0;
  background: transparent;
  color: #1b1f2e;
  font: 400 1.4rem/1.45 Newsreader, Georgia, serif;
  padding: .45rem 0 .7rem;
  outline-offset: 5px;
  box-shadow: none;
}

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

.bericht { grid-column: 1/-1 }

/* De foutregel staat er altijd, ook leeg. Dan kan aria-describedby vast naar
   het vak wijzen en springt de indeling niet op bij de eerste melding. */
.fout {
  margin: 0;
  font-size: .875rem;
  line-height: 1.5;
}

.fout:not(:empty) { padding-top: .5rem }

input[aria-invalid=true], textarea[aria-invalid=true] { border-bottom: 2px solid #1b1f2e }

input:focus-visible, textarea:focus-visible { outline: 2px solid #1b1f2e }

button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  min-height: 3.5rem;
  padding: 1rem 1.3rem;
  background: #1b1f2e;
  border: 1px solid #1b1f2e;
  color: #fff;
  border-radius: 0;
  font: 500 .9375rem/1.2 Arial, sans-serif;
  cursor: pointer;
  transition: background .18s, color .18s;
}

button:hover {
  background: transparent;
  color: #1b1f2e;
}

button:focus-visible {
  outline: 2px solid #1b1f2e;
  outline-offset: 5px;
}

button:disabled { cursor: wait }

/* Een knop die uit staat hoort niet meer op de muis te reageren. Zonder deze
   regel wisselt "Verzonden" van gevuld naar omlijnd zodra de wijzer er nog
   overheen staat, en dat leest als iets waar je weer op kunt drukken. */
button:disabled:hover {
  background: #1b1f2e;
  color: #fff;
}

/* Na een geslaagde verzending blijft de knop uit staan, maar dan is er niets
   meer gaande: het wachtwijzertje hoort daar dan niet meer bij. */
button[data-klaar] { cursor: default }

.verzenden {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

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

.lokvink { display: none }

footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  max-width: 90rem;
  margin-top: 2.5rem;
  font-size: .8125rem;
  line-height: 1.5;
}

/* ----------------------------------------- bedankpagina en de meldpagina's

   Dezelfde twee banden, maar waar het formulier stond staat nu het antwoord.
   Die pagina's komen deels uit de dienst zelf, dus de opmaak hoort hier en
   niet in een <style> per pagina. */

.antwoord {
  max-width: 44ch;
  font-family: Newsreader, Georgia, serif;
  /* Even zwaar als wat de bezoeker in de velden typt: op deze pagina's is dit
     de inhoud van de oranje band, en met de maat van een bijschrift verdrinkt
     het in het vlak. */
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  line-height: 1.5;
}

.antwoord p { margin: 0 0 .75rem }

.terug {
  display: inline-block;
  margin-top: .75rem;
  font-family: Arial, sans-serif;
  font-size: .875rem;
  font-weight: 600;
  color: #1b1f2e;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.terug:focus-visible {
  outline: 2px solid #1b1f2e;
  outline-offset: 4px;
}

/* ------------------------------------------------------------ kleurstanden */

@media (prefers-color-scheme: dark) {
  :root:not([data-stand="dag"]) {
    --grond: #1b1f2e;
    --inkt: #edeef2;
  }
  :root:not([data-stand="dag"]) .logo-dag { display: none }
  :root:not([data-stand="dag"]) .logo-nacht { display: block }
  :root:not([data-stand="dag"]) .contact { border-top-color: #ff5a36 }
}

:root[data-stand="nacht"] .logo-dag { display: none }
:root[data-stand="nacht"] .logo-nacht { display: block }
:root[data-stand="nacht"] .contact { border-top-color: #ff5a36 }

/* --------------------------------------------------------------- maatwerk */

/* Voorbij 1440 px groeit de tekst niet mee maar wordt de band gecentreerd. */
@media (min-width: 1600px) {
  .intro, .contact {
    padding-left: max(5rem, calc((100vw - 1440px)/2));
    padding-right: max(5rem, calc((100vw - 1440px)/2));
  }
}

@media (max-width: 600px) {
  .intro {
    padding-top: 2rem;
    padding-bottom: 2.5rem;
  }
  .merk { margin-bottom: 3.5rem }
  h1 {
    font-size: clamp(1.7rem, 7.3vw, 2.75rem);
    line-height: 1.35;
    letter-spacing: -.065em;
  }
  h1 span {
    display: block;
    font-size: 2.25em;
    line-height: 1.05;
    margin-top: .05em;
  }
  .contact { padding-top: 1.8rem }
  form {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .bericht, .verzenden { grid-column: auto }
  textarea { min-height: 6rem }
  .verzenden { display: block }
  button { width: 100% }
  .status:not(:empty) { margin-top: 1rem }
  footer { margin-top: 2rem }
}

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