/* Noonaa — homepage
   Kleuren, typografie en golfvormen komen uit 20261030_website mock-up.svg
   en 20261030_website mock-up_mobile.svg. */

:root {
  --donker:     #354a59;
  --inkt:       #19425b;
  --zand:       #deae8f;
  --terracotta: #a94218;
  --terra-diep: #8c3b1d;
  --cream:      #fdf7ef;
  --licht:      #fdf9f6;
  --wit:        #ffffff;
  --grijs:      #5c6670;

  --binnen: 1240px;
  --gutter: clamp(1.25rem, 5vw, 3rem);

  --kop-font:  Quicksand, ui-rounded, "Segoe UI", system-ui, sans-serif;
  --tekst-font: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--wit);
  color: var(--donker);
  font-family: var(--tekst-font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-family: var(--kop-font); font-weight: 700; line-height: 1.2; }
ul { margin: 0; padding: 0; list-style: none; }

.verborgen {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.overslaan {
  position: absolute; left: 0; top: -4rem; z-index: 10;
  padding: 0.75rem 1.25rem;
  background: var(--donker); color: var(--wit);
  text-decoration: none;
}
.overslaan:focus { top: 0; }

/* ---------- Knoppen ---------- */

.knop {
  display: inline-block;
  padding: 0.72em 1.7em;
  border-radius: 999px;
  background: var(--terracotta);
  color: var(--licht);
  font-family: var(--kop-font);
  font-weight: 700;
  font-size: clamp(1rem, 1.55vw, 1.15rem);
  line-height: 1.15;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.knop:hover, .knop:focus-visible { background: var(--terra-diep); }
.knop--klein { font-size: clamp(0.9375rem, 1.3vw, 1rem); padding: 0.65em 1.5em; }

a:focus-visible, button:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Kop ---------- */

.kop { background: var(--wit); }

.kop__binnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--binnen);
  margin-inline: auto;
  padding: clamp(0.9rem, 2.2vw, 1.4rem) var(--gutter);
}

.kop__logo { display: inline-flex; flex: none; }
.kop__logo img { width: auto; height: clamp(1.6rem, 3.4vw, 2.1rem); }

.kop__menu {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.1rem);
}

.kop__link {
  color: var(--donker);
  font-family: var(--kop-font);
  font-weight: 600;
  font-size: clamp(0.9375rem, 1.3vw, 1rem);
  white-space: nowrap;
  text-decoration: none;
}
.kop__link:hover, .kop__link:focus-visible { color: var(--terracotta); }

.kop__schakelaar {
  display: none;
  flex: none;
  width: 3rem; height: 2.5rem;
  padding: 0;
  background: none; border: none; cursor: pointer;
}
.kop__streepjes,
.kop__streepjes::before,
.kop__streepjes::after {
  display: block;
  width: 2rem; height: 3px;
  margin-inline: auto;
  border-radius: 2px;
  background: var(--donker);
  content: "";
}
.kop__streepjes::before { transform: translateY(-0.6rem); }
.kop__streepjes::after  { transform: translateY(0.45rem); }

/* ---------- Hero ---------- */

.hero { position: relative; background: var(--wit); }

.hero__beeld {
  width: 100%;
  /* height:auto is nodig: het height-attribuut op <img> wint anders van aspect-ratio */
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: left center;
}

/* Zelfde kolom als de kop: boven 1240 px schuift de tekst niet verder naar rechts mee,
   maar blijft hij binnen de breedte van het menu staan. */
.hero__inhoud {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  max-width: var(--binnen);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.hero__blok {
  width: min(52%, 620px);
  margin-right: 5%;
  text-align: center;
  /* de golf dekt de onderkant af; tekst iets omhoog zodat hij vrij blijft */
  margin-bottom: 9%;
}

.hero__titel {
  font-size: clamp(1.625rem, 3.25vw, 2.875rem);
  letter-spacing: -0.005em;
}

.hero__onder {
  margin: clamp(0.9rem, 2vw, 1.6rem) auto 0;
  max-width: 24ch;
  font-family: var(--kop-font);
  font-weight: 600;
  font-size: clamp(1rem, 1.95vw, 1.6rem);
  line-height: 1.35;
}

.hero__actie { margin: clamp(1.1rem, 2.4vw, 1.9rem) 0 0; }

/* ---------- Golfvormen ---------- */

.golf { width: 100%; height: auto; }

/* Overlapt de onderkant van de herofoto. De bovenrand van de twee golven zakt op
   zijn diepste punt 7,8% van de breedte weg; de overlap moet groter zijn, anders
   kijk je daar langs de foto heen tegen de witte pagina aan. */
.golf--boven { position: relative; margin-top: -8.6%; margin-bottom: -1px; }

.golf--onder { background: var(--cream); margin-bottom: -1px; }

.golf--kop {
  position: absolute;
  top: 0; left: 0;
  z-index: 1;
}

/* ---------- Donkere band ---------- */

/* flow-root: anders valt de negatieve marge van .band__binnen hiermee samen en
   schuift de hele band omhoog in plaats van alleen de inhoud. */
.band {
  display: flow-root;
  background: var(--donker);
  color: var(--licht);
}

/* De regel hoort optisch in het midden van het HELE blauwe vlak te staan, en dat
   vlak is veel meer dan deze balk: de golf erboven telt mee en die is ruim twee keer
   zo hoog als de golf eronder. Gemiddeld over de breedte ligt de bovenrand van het
   blauw 17,4% van de paginabreedte boven deze balk en de onderrand 7,1% eronder.
   Het optische midden ligt dus 5,13% hoger dan het midden van deze balk. Vandaar de
   negatieve marge boven en de even grote positieve marge eronder: samen verschuiven ze
   de regel omhoog zonder de hoogte van de balk te veranderen. Zo staat het ook in de
   mock-up, waar de regel over de onderkant van de golf heen loopt. */
.band__binnen {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.5rem);
  max-width: var(--binnen);
  margin: -5.13% auto 5.13%;
  padding: 0 var(--gutter);
}

.band__tekst {
  margin: 0;
  font-family: var(--kop-font);
  font-weight: 700;
  font-size: clamp(1.375rem, 3.15vw, 2.25rem);
  line-height: 1.2;
}

.band__actie { margin: 0; }

/* ---------- Kenmerkbalk ---------- */

.kenmerkbalk { background: var(--cream); }

.kenmerkbalk__lijst {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2rem);
  max-width: var(--binnen);
  margin-inline: auto;
  /* Zelfde rekensom als bij de band, maar andersom: boven deze balk ligt maar 1,3%
     creme (de smalle strook onder de blauwe golf) en eronder 4,8% (de golf over de
     foto). De regel moet daarom 3,5% lager staan dan het midden van de balk. */
  padding: 4% var(--gutter) 0.5%;
}

.kenmerkbalk__lijst li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--tekst-font);
  font-weight: 700;
  font-size: clamp(1rem, 1.9vw, 1.35rem);
  color: var(--donker);
}

.kenmerkbalk__lijst img { width: auto; height: clamp(1.5rem, 2.6vw, 2rem); }

/* ---------- Wat is Noonaa ---------- */

/* De golf ligt over de bovenkant van de foto. Dat kan nu zonder strook ertussen:
   de master van 3 november heeft lucht boven het knoopje van de Noonaa. Op zijn
   hoogste punt dekt de golf 4,3% van de foto af en het knoopje begint pas op 14%. */
.uitleg { position: relative; background: var(--cream); }

/* De hele master, niet bijgesneden: de Noonaa moet volledig in beeld blijven en de
   lucht erboven is precies waar de golf overheen valt. */
.uitleg__beeld {
  width: 100%;
  height: auto;
  aspect-ratio: 3000 / 2562;
  object-fit: cover;
  object-position: left center;
}

/* Zelfde kolom als de kop en de hero: de tekst blijft boven 1240 px op zijn plek. */
.uitleg__inhoud {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  max-width: var(--binnen);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Geen marge rechts: de rechterkant van dit blok valt samen met die van de
   kenmerkbalk en de Contact-knop, en de tekst komt zo verder van de Noonaa af. */
.uitleg__blok { width: min(42%, 540px); }

.uitleg__bovenkop {
  margin: 0 0 0.5em;
  font-weight: 700;
  font-size: clamp(0.9rem, 1.6vw, 1.15rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terracotta);
}

.uitleg__titel {
  margin: 0 0 clamp(1rem, 2.4vw, 1.9rem);
  font-size: clamp(1.25rem, 2.6vw, 1.85rem);
  color: var(--donker);
}

.kenmerken { display: grid; gap: clamp(0.9rem, 2vw, 1.5rem); }

.kenmerk {
  display: grid;
  grid-template-columns: clamp(2.5rem, 4.4vw, 3.4rem) 1fr;
  align-items: center;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
}

.kenmerk__icoon { width: 100%; height: auto; }

.kenmerk__titel {
  font-family: var(--tekst-font);
  font-weight: 700;
  font-size: clamp(1.0625rem, 2.1vw, 1.5rem);
  line-height: 1.15;
  color: var(--donker);
}

.kenmerk__tekst {
  margin: 0.15em 0 0;
  font-size: clamp(0.9rem, 1.45vw, 1.0625rem);
  line-height: 1.35;
  color: var(--donker);
}

/* ---------- Contactblok (uit de tijdelijke pagina) ---------- */

.intro {
  background: var(--donker);
  color: var(--wit);
  text-align: center;
  padding: clamp(2.25rem, 5vw, 3.25rem) var(--gutter) clamp(2.5rem, 5.5vw, 3.5rem);
}

.intro__title {
  margin: 0 auto;
  max-width: 20ch;
  font-size: clamp(1.375rem, 2.8vw, 1.9rem);
  letter-spacing: -0.01em;
}

.intro__text {
  margin: clamp(0.6rem, 1.6vw, 0.9rem) auto 0;
  max-width: 46ch;
  font-size: clamp(1rem, 1.5vw, 1.0625rem);
  color: rgba(255, 255, 255, 0.92);
}

.intro__contact { margin: clamp(0.9rem, 2.2vw, 1.25rem) 0 0; }

.intro__mail {
  color: var(--zand);
  font-size: clamp(1rem, 1.5vw, 1.0625rem);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 2px;
}
.intro__mail:hover, .intro__mail:focus-visible { color: var(--wit); }
.intro a:focus-visible { outline-color: var(--zand); }

.formulier {
  max-width: 30rem;
  margin: clamp(1.25rem, 3vw, 1.75rem) auto 0;
  text-align: left;
}

.formulier__veld { margin: 0 0 0.85rem; }

.formulier__veld label,
.formulier__keuze label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--wit);
}

.formulier__veld label { display: block; margin-bottom: 0.4rem; }
.formulier__optioneel { font-weight: 400; color: rgba(255, 255, 255, 0.7); }

.formulier input[type="text"],
.formulier input[type="email"],
.formulier textarea {
  width: 100%;
  padding: 0.55em 0.85em;
  font: inherit;
  font-size: 1rem;
  color: var(--donker);
  background: var(--wit);
  border: 2px solid transparent;
  border-radius: 0.6rem;
}

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

.formulier input:focus-visible,
.formulier textarea:focus-visible {
  outline: none;
  border-color: var(--zand);
  box-shadow: 0 0 0 3px rgba(222, 174, 143, 0.45);
}

.formulier__keuze {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0 0 1.1rem;
}

.formulier__keuze input {
  flex: none;
  width: 1.15rem; height: 1.15rem;
  margin-top: 0.15rem;
  accent-color: var(--terracotta);
}

.formulier__keuze label { font-weight: 400; line-height: 1.45; }

/* spamvangnet: onzichtbaar voor bezoekers, wel aanwezig voor bots */
.formulier__vangnet {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.formulier__knop {
  display: block;
  width: 100%;
  padding: 0.7em 1.6em;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  color: var(--wit);
  background: var(--terracotta);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.formulier__knop:hover, .formulier__knop:focus-visible { background: var(--terra-diep); }
.formulier__knop:focus-visible { outline: 3px solid var(--zand); outline-offset: 3px; }

.formulier__avg {
  margin: 1rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.8);
}

.intro--kaal { padding-top: clamp(3rem, 9vw, 6rem); }

@media (min-width: 34rem) {
  .formulier__knop { width: auto; min-width: 12rem; }

  /* Naam en e-mailadres naast elkaar; dat scheelt een veldrij in de hoogte. */
  .formulier { max-width: 36rem; }
  .formulier__rij { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
}

/* ---------- Voet ---------- */

.voet { background: var(--wit); padding: clamp(1.75rem, 5vw, 2.75rem) var(--gutter); }

.voet__regel {
  margin: 0;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--grijs);
}

/* ---------- Mobiel ---------- */

@media (max-width: 47.99em) {

  .kop__schakelaar { display: block; }

  .kop__binnen { flex-wrap: wrap; }

  .kop__menu {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0 0.5rem;
  }
  .kop__menu--open { display: flex; }
  .kop__link { font-size: 1.0625rem; }

  /* Hero: de staande foto tot onder de pootjes, daarna de tekst zoals in de
     mobiele mock-up: de titel rechts naast de pootjes, de zin en de knop
     daaronder over de volle breedte. De uitsnede laat de hele Noonaa zien;
     alleen de lege deken onderin valt weg. */
  .hero__beeld { aspect-ratio: 2000 / 2140; object-position: center top; }

  /* Het blok hangt aan de ONDERKANT van de foto, niet aan de bovenkant: breekt
     de zin op een smal scherm in twee regels, dan schuift de titel omhoog in
     plaats van dat de knop in de golf zakt. Alle maten zijn procenten van de
     breedte; de hoogte van de hero is daar een vaste factor van. */
  .hero__inhoud {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    padding: 0 var(--gutter) 8%;
  }

  .hero__blok { width: 100%; margin: 0; }

  .hero__titel {
    text-align: right;
    font-size: clamp(1.0625rem, 4.9vw, 1.75rem);
  }

  .hero__onder {
    margin: 14% auto 0;
    max-width: none;
    font-size: clamp(0.9rem, 3.6vw, 1.15rem);
  }

  .hero__actie { margin-top: 2.7%; }

  .golf--boven { margin-top: -9%; }

  /* Kenmerkbalk: onder elkaar en elke regel een stuk verder naar rechts, als een
     waterval, zoals in de mobiele mock-up. De drie staan als blok in het midden van de
     balk: `width: max-content` maakt de lijst precies zo breed als de verste regel
     (de inspringing telt daarin mee) en `margin-inline: auto` zet dat blok midden.
     De inspringingen zijn daarom vaste lengtes en geen procenten; procentuele marges
     tellen niet mee bij max-content. De letter loopt mee met het scherm, anders zou
     "gemaakt om door te geven" op een telefoon van 320 px van het scherm af lopen. */
  .kenmerkbalk__lijst {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
    width: max-content;
    max-width: 100%;
  }

  .kenmerkbalk__lijst li { gap: 0.6rem; font-size: clamp(0.8125rem, 4.1vw, 1.0625rem); }
  .kenmerkbalk__lijst img { height: clamp(1.125rem, 5.4vw, 1.75rem); }

  .kenmerkbalk__lijst li:nth-child(2) { margin-left: clamp(1.5rem, 13vw, 6.5rem); }
  .kenmerkbalk__lijst li:nth-child(3) { margin-left: clamp(3rem, 26vw, 13rem); }

  /* Band: zin en knop onder elkaar en gecentreerd */
  .band__binnen {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Wat is Noonaa: foto boven, tekst eronder op cream.
     Afwijking van de mobiele mock-up, waar de tekst over de rechterhelft van de
     foto staat; op een telefoon is die kolom te smal om leesbaar te blijven. */
  .uitleg__beeld { aspect-ratio: 1 / 1; object-position: left center; }

  .uitleg__inhoud {
    position: static;
    display: block;
    padding: clamp(1.75rem, 7vw, 2.5rem) var(--gutter) clamp(2.5rem, 9vw, 3.5rem);
  }

  .uitleg__blok { width: 100%; margin-right: 0; }

  .uitleg__titel { font-size: clamp(1.25rem, 5.4vw, 1.6rem); }
  .kenmerk { grid-template-columns: 2.75rem 1fr; }
  .kenmerk__titel { font-size: clamp(1.0625rem, 4.6vw, 1.3rem); }
  .kenmerk__tekst { font-size: clamp(0.9rem, 3.7vw, 1.0625rem); }
}

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