/* =========================================================================
   pixelpand.nl

   Palet afgeleid van Vlaardingen als havenstad, niet van een sfeerpalet:
   kalk = gepleisterde gevel, inkt = havennacht, menie = de roodoranje
   grondverf op staal en scheepsrompen. Een accent, van hero tot footer.
   Een thema (licht), gekozen op de gebruiksscene: dit wordt gelezen op een
   telefoon in een winkel of aan een keukentafel, overdag.
   ========================================================================= */

@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/newsreader-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --kalk: #edeae3;
  --kalk-licht: #f6f4ef;
  --inkt: #151719;
  --menie: #d14310;
  --menie-tekst: #b33a0c;
  --menie-diep: #8f2e09;
  --zand: #c9c4b8;
  --grijs: #5c5b55;
  --veldrand: #8f8a7d;   /* 3,4:1 op wit: WCAG 1.4.11 voor invoervelden */

  --lijn: rgba(21, 23, 25, 0.14);
  --lijn-zacht: rgba(21, 23, 25, 0.08);

  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Newsreader', Georgia, 'Times New Roman', serif;

  --maat-1: 0.5rem;
  --maat-2: 1rem;
  --maat-3: 1.5rem;
  --maat-4: 2rem;
  --maat-5: 3rem;
  --maat-6: 4.5rem;
  --maat-7: 7rem;

  --sectie: clamp(4.5rem, 9vw, 8.5rem);
  --rand: clamp(1.25rem, 5vw, 4rem);
  --breed: 1240px;

  --radius: 2px;
  --uit: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- reset ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

/* Vangnet: als de bezoeker minder beweging wil, dan geldt dat overal.
   Per onderdeel staat het verderop ook nog eens expliciet, maar dit vangt
   alles af wat we vergeten. Betekenis blijft, beweging gaat eruit. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  background: var(--kalk);
  color: var(--inkt);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-variation-settings: 'opsz' 16;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }

/* ---------- browservlakken: de stukken die je niet tekent ---------- */

::selection { background: var(--menie); color: #fff; }
:root { caret-color: var(--menie); accent-color: var(--menie); }

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

@supports (scrollbar-color: red blue) {
  html { scrollbar-color: var(--zand) var(--kalk); scrollbar-width: thin; }
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--kalk); }
::-webkit-scrollbar-thumb { background: var(--zand); border: 3px solid var(--kalk); }
::-webkit-scrollbar-thumb:hover { background: var(--grijs); }

/* ---------- typografie ---------- */

h1, h2, h3, h4, .display {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.028em;
  text-wrap: balance;
  font-variation-settings: 'wdth' 112;
}

h1 {
  font-size: clamp(2.6rem, 8.2vw, 5.1rem);
  font-weight: 800;
  letter-spacing: -0.038em;
}
h2 {
  font-size: clamp(1.95rem, 5vw, 3.1rem);
  letter-spacing: -0.032em;
}
h3 {
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  line-height: 1.15;
  font-variation-settings: 'wdth' 106;
  letter-spacing: -0.018em;
}

p { text-wrap: pretty; }
.lood {
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  line-height: 1.5;
  font-variation-settings: 'opsz' 28;
}
.prose { max-width: 34em; }
.prose p + p { margin-top: var(--maat-3); }
.klein {
  font-family: var(--display);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--grijs);
  font-variation-settings: 'wdth' 100;
  letter-spacing: 0.005em;
}

a { color: var(--menie-tekst); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

strong { font-weight: 700; }

/* ---------- raamwerk ---------- */

.wrap {
  width: 100%;
  max-width: var(--breed);
  margin-inline: auto;
  padding-inline: var(--rand);
}

section { padding-block: var(--sectie); }

/* De voeg: haarlijn tussen secties, het metselwerk-motief */
.voeg { border-top: 1px solid var(--lijn); }

.kop-blok { max-width: 21ch; }
.kop-blok + .lood { margin-top: var(--maat-3); max-width: 46ch; }

/* ---------- knoppen ---------- */

.knop {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  font-variation-settings: 'wdth' 104;
  letter-spacing: -0.005em;
  line-height: 1;
  padding: 1.05rem 1.6rem;
  min-height: 52px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s var(--uit), color 0.25s var(--uit),
              border-color 0.25s var(--uit), transform 0.25s var(--uit);
}
.knop--primair {
  background: var(--menie);
  color: #fff;
  border-color: var(--menie);
}
.knop--primair:hover { background: var(--menie-diep); border-color: var(--menie-diep); }
.knop--primair:active { transform: translateY(1px); }

.knop--stil {
  background: transparent;
  color: var(--inkt);
  border-color: var(--lijn);
}
.knop--stil:hover { border-color: var(--inkt); background: var(--kalk-licht); }

.knop[disabled], .knop[aria-disabled='true'] {
  background: var(--zand);
  border-color: var(--zand);
  color: var(--grijs);
  cursor: not-allowed;
  transform: none;
}

/* De pijl loopt mee op hover */
.knop .pijl { transition: transform 0.3s var(--uit); }
.knop:hover .pijl { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .knop, .knop .pijl { transition: none; }
}

/* ---------- kop van de pagina ---------- */

.balk {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--kalk) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--uit);
}
.balk[data-gescrold='ja'] { border-bottom-color: var(--lijn); }

.balk__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--maat-3);
  min-height: 4.25rem;
}

.merk {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 0.6rem;
  color: var(--inkt);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.2rem;
  font-variation-settings: 'wdth' 108;
  letter-spacing: -0.03em;
}
.merk__mark { width: 18px; height: 25px; color: var(--menie); flex: none; }
.merk__mark svg, .merk__mark img { width: 100%; height: 100%; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 1.9rem);
  font-family: var(--display);
  font-size: 0.9375rem;
  font-weight: 500;
}
.nav a {
  color: var(--inkt);
  text-decoration: none;
  padding-block: 0.5rem;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s var(--uit);
}
.nav a:hover { border-bottom-color: var(--menie); }
/* Het menu blijft altijd op een regel. Bij elke stap breder komt er een
   onderwerp bij; op de smalste telefoon blijven Prijs en Contact staan,
   want dat zijn de twee waar men voor komt. */
.nav__weg, .nav__weg-2, .nav__weg-3, .nav__weg-4 { display: none; }
@media (min-width: 380px) { .nav__weg-2 { display: inline; } }
@media (min-width: 560px) { .nav__weg-3 { display: inline; } }
@media (min-width: 900px) { .nav__weg { display: inline; } }
/* Uitbreidingen is het langste woord in de balk en gaat er als eerste uit:
   de balk blijft altijd op één regel. */
@media (min-width: 1120px) { .nav__weg-4 { display: inline; } }

/* ---------- voet ---------- */

.voet { background: var(--inkt); color: var(--zand); padding-block: var(--maat-4); border-top: 1px solid rgba(237, 234, 227, 0.16); }
.voet__in {
  display: flex;
  flex-wrap: wrap;
  gap: var(--maat-2) var(--maat-4);
  align-items: center;
  justify-content: space-between;
}
/* .klein zet de tekst normaal op grijs; op de donkere voet is dat 2,6:1
   en dus onleesbaar. Hier wint zand. */
.voet .klein, .voet p { color: var(--zand); }
.voet a { color: var(--zand); }
.voet a:hover { color: var(--kalk-licht); }
.voet nav { display: flex; flex-wrap: wrap; gap: 0 var(--maat-3); }
.voet nav a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: 0.35rem;
}

/* ---------- kleine hulpklassen ----------
   Bewust klassen en geen style-attributen: de Content-Security-Policy
   staat geen inline styles toe. */

.ruimte-xs { margin-top: var(--maat-1); }
.ruimte-s { margin-top: var(--maat-2); }
.ruimte-m { margin-top: var(--maat-3); }
.ruimte-l { margin-top: clamp(2.5rem, 6vw, 4rem); }
.smal { max-width: 44ch; }
.pagina-kop h1 { font-size: clamp(2.1rem, 6vw, 3.4rem); }

/* ---------- alleen voor schermlezers ---------- */

.visueel-verborgen {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- paginaovergangen ----------
   Van de startpagina naar de voorwaarden of het akkoord hoort geen witte
   flits te zitten. De nieuwe pagina komt binnen als een rolluik dat
   opengaat: van boven naar beneden, want zo gaat een winkel open.

   Deze regel staat in de gedeelde stylesheet omdat een overgang tussen
   documenten alleen werkt als beide pagina's hem hebben. */

@view-transition { navigation: auto; }

.balk { view-transition-name: pp-balk; }
.voet { view-transition-name: pp-voet; }

::view-transition-old(root) {
  animation: pp-blad-uit 0.24s cubic-bezier(0.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: pp-rolluik 0.44s cubic-bezier(0.16, 1, 0.3, 1) both;
}
::view-transition-old(pp-balk),
::view-transition-new(pp-balk),
::view-transition-old(pp-voet),
::view-transition-new(pp-voet) {
  animation: none;
  mix-blend-mode: normal;
}

@keyframes pp-blad-uit {
  to { opacity: 0; transform: translateY(-1.5%); }
}
@keyframes pp-rolluik {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* ---------- overslaan-link ---------- */

.overslaan {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--menie);
  color: #fff;
  padding: 0.85rem 1.25rem;
  z-index: 100;
  font-family: var(--display);
  font-weight: 600;
}
.overslaan:focus { left: 0.5rem; top: 0.5rem; position: fixed; }

/* =========================================================================
   Formulier: /akkoord
   ========================================================================= */

.pagina-kop { padding-block: clamp(3rem, 7vw, 5rem) clamp(2rem, 4vw, 3rem); }
.pagina-kop .lood { margin-top: var(--maat-3); max-width: 46ch; }

.blad {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
  padding-bottom: var(--sectie);
}
@media (min-width: 980px) {
  .blad { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: clamp(2rem, 5vw, 4rem); }
}

.formulier { display: grid; gap: var(--maat-5); max-width: 40rem; }

.veldgroep { border: 0; padding: 0; margin: 0; }
.veldgroep legend {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  font-variation-settings: 'wdth' 108;
  letter-spacing: -0.02em;
  padding: 0 0 var(--maat-2);
  border-bottom: 2px solid var(--inkt);
  width: 100%;
  margin-bottom: var(--maat-3);
}
.veldgroep > p { margin-bottom: var(--maat-3); color: var(--grijs); }

.velden { display: grid; gap: var(--maat-3); }
@media (min-width: 620px) { .velden--twee { grid-template-columns: 1fr 1fr; } }

.veld { display: grid; gap: 0.4rem; }
.veld label {
  font-family: var(--display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--inkt);
}
.veld .hint { font-family: var(--display); font-size: 0.8125rem; color: var(--grijs); }
.veld .nodig { color: var(--menie-tekst); }

.veld input[type='text'],
.veld input[type='email'],
.veld input[type='tel'],
.veld input[type='number'],
.veld textarea {
  width: 100%;
  font-family: var(--display);
  font-size: 1rem;
  color: var(--inkt);
  background: #fff;
  border: 1px solid var(--veldrand);
  border-radius: var(--radius);
  padding: 0.8rem 0.9rem;
  min-height: 50px;
  transition: border-color 0.2s var(--uit);
}
.veld textarea { min-height: 6.5rem; resize: vertical; line-height: 1.5; }
.veld input:hover, .veld textarea:hover { border-color: var(--grijs); }
.veld input:focus-visible, .veld textarea:focus-visible { border-color: var(--menie); }
.veld input::placeholder, .veld textarea::placeholder { color: #72716b; opacity: 1; }
.veld input[aria-invalid='true'], .veld textarea[aria-invalid='true'] { border-color: var(--menie-tekst); border-width: 2px; }

.fout {
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--menie-tekst);
  min-height: 0;
}
.fout:empty { display: none; }

/* bedragen: het euroteken staat vast voor het invoerveld.
   De selector heeft .veld nodig, anders wint .veld input[type='number']
   qua specificiteit en valt het teken over het cijfer heen. */
.bedrag-veld { position: relative; display: block; }
.veld .bedrag-veld input[type='number'] {
  padding-left: 2.2rem;
  font-variant-numeric: tabular-nums;
}
.bedrag-veld::before {
  content: '\20AC';
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--display);
  font-size: 1rem;
  color: var(--grijs);
  pointer-events: none;
}

/* afspraken-blok */
.afspraken { list-style: none; padding: 0; margin: 0; }
.afspraken li {
  position: relative;
  padding-left: 1.65rem;
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--lijn);
}
.afspraken li:first-child { border-top: 1px solid var(--lijn); }
.afspraken li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 9px; height: 9px;
  background: var(--menie);
}

/* akkoord-vinkje */
.vink {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
  padding: var(--maat-3);
  background: var(--kalk-licht);
  border: 1px solid var(--veldrand);
  border-radius: var(--radius);
  cursor: pointer;
}
.vink:hover { border-color: var(--grijs); }
.vink input[type='checkbox'] {
  width: 24px; height: 24px;
  margin: 0.15rem 0 0;
  flex: none;
  cursor: pointer;
}
.vink span { font-size: 1rem; }
.vink--fout { border-color: var(--menie-tekst); border-width: 2px; }

.verzend { display: grid; gap: var(--maat-3); justify-items: start; }

/* samenvatting naast het formulier */
.kaartje {
  border: 1px solid var(--lijn);
  background: var(--kalk-licht);
  padding: var(--maat-3);
  border-radius: var(--radius);
}
@media (min-width: 980px) { .kaartje { position: sticky; top: 6rem; } }
.kaartje h2 {
  font-size: 1.05rem;
  font-variation-settings: 'wdth' 106;
  letter-spacing: -0.02em;
  padding-bottom: var(--maat-2);
  margin-bottom: var(--maat-2);
  border-bottom: 2px solid var(--inkt);
}
.kaartje dl { display: grid; gap: 0; margin: 0; }
.kaartje .rij {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--maat-2);
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--lijn);
  font-family: var(--display);
  font-size: 0.9375rem;
}
.kaartje .rij dt { color: var(--grijs); }
.kaartje .rij dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.kaartje .rij:last-of-type { border-bottom: 0; }
.kaartje p { margin-top: var(--maat-2); }

/* meldingen */
.melding {
  padding: var(--maat-3);
  border-radius: var(--radius);
  border: 1px solid var(--zand);
  background: var(--kalk-licht);
  margin-bottom: var(--maat-4);
}
.melding--fout { border-color: var(--menie-tekst); border-width: 2px; background: #fbeee8; }
.melding--goed { border-color: var(--inkt); }
.bon h2 { padding-bottom: var(--maat-2); border-bottom: 2px solid var(--inkt); }
.melding h2 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.melding:empty { display: none; }

/* laadstand van de knop */
.knop[data-bezig='ja'] { pointer-events: none; opacity: 0.75; }
.knop[data-bezig='ja'] .pijl { display: none; }
.tol {
  width: 15px; height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: draai 0.7s linear infinite;
}
@keyframes draai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tol { animation-duration: 2s; } }

/* handtekening */
.handtekening { display: grid; gap: 0.5rem; }
.doek-wrap {
  position: relative;
  background: #fff;
  border: 1px solid var(--veldrand);
  border-radius: var(--radius);
  overflow: hidden;
}
.doek-wrap canvas {
  display: block;
  width: 100%;
  height: 150px;
  touch-action: none;
  cursor: crosshair;
}
.doek-wrap::after {
  content: '';
  position: absolute;
  left: 1.25rem; right: 1.25rem;
  bottom: 2.4rem;
  border-bottom: 1px dashed var(--zand);
  pointer-events: none;
}
.doek-hint {
  position: absolute;
  inset: auto 0 0.75rem 0;
  text-align: center;
  font-family: var(--display);
  font-size: 0.8125rem;
  color: var(--grijs);
  pointer-events: none;
  transition: opacity 0.2s var(--uit);
}
.doek-wrap[data-getekend='ja'] .doek-hint { opacity: 0; }
.handtekening__voet { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.wis {
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--menie-tekst);
  background: none;
  border: 0;
  padding: 0.5rem 0;
  min-height: 44px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.wis[disabled] { color: var(--grijs); cursor: not-allowed; text-decoration: none; }

/* geslaagde inzending */
.bon {
  border: 1px solid var(--lijn);
  background: var(--kalk-licht);
  padding: var(--maat-4);
  border-radius: var(--radius);
  max-width: 34rem;
}
.bon__ref {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 800;
  font-variation-settings: 'wdth' 114;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  margin-block: var(--maat-2) var(--maat-3);
}
.bon dl { margin-top: var(--maat-3); }

/* ---------- 404 ---------- */

.leegstand { padding-bottom: var(--sectie); }
.leegstand__actie { margin-top: var(--maat-4); }

/* =========================================================================
   Leespagina: /privacy
   ========================================================================= */

.lees { padding-bottom: var(--sectie); max-width: 38rem; }
.lees h2 {
  font-size: clamp(1.35rem, 3vw, 1.7rem);
  margin-top: var(--maat-5);
  margin-bottom: var(--maat-2);
  padding-top: var(--maat-3);
  border-top: 1px solid var(--lijn);
}
.lees h2:first-of-type { margin-top: var(--maat-4); }
.lees p + p, .lees ul + p, .lees p + ul { margin-top: var(--maat-3); }
.lees ul { padding-left: 1.2rem; }
.lees li + li { margin-top: 0.5rem; }
.lees .klein { margin-top: var(--maat-5); }

/* ---------- printen: het akkoord moet op papier kunnen ---------- */

@media print {
  .balk, .voet, .kaartje, .overslaan, .contact { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .blad { display: block; }
  a { color: #000; text-decoration: none; }
}