/* ══════════════════════════════════════════════════════════
   KLEUREN — alleen dit blok aanpassen om de pagina om te kleuren
   ══════════════════════════════════════════════════════════ */

:root{
  --primair:      #6B4FD0;   /* tekst, knop, icoontjes           */
  --secundair:    #EFE7FC;   /* achtergrondverloop               */
  --knop-tekst:   #FFFFFF;   /* tekst ín de knop                 */

  /* Andere combinaties uit jullie grid — knip en plak hierboven:

     violet   --primair:#6B4FD0;  --secundair:#EFE7FC;
     blauw    --primair:#2C5F94;  --secundair:#E2ECF4;   (logokleur)
     lucht    --primair:#6C8FD1;  --secundair:#E4EEF6;
     rood     --primair:#C4514B;  --secundair:#FBE7E4;
     groen    --primair:#4C8F52;  --secundair:#E7F2E4;
     oranje   --primair:#D9773C;  --secundair:#FBEDDC;
     geel     --primair:#B99525;  --secundair:#FBF4DA;
  */

  /* ── verder afstellen (zelden nodig) ── */
  --grain:        .45;       /* korrel: 0 = uit, 1 = grof        */
  --cover-breed:  330px;     /* max breedte van de kalenderfoto  */
}

/* ══════════════════════════════════════════════════════════
   Vanaf hier hoef je niets meer te wijzigen
   ══════════════════════════════════════════════════════════ */

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

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

body{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  justify-content:safe center;   /* voorkomt dat de cover bovenaan wegvalt
                                    zodra het scherm korter is dan de pagina */
  gap:clamp(22px,4vw,38px);
  padding:clamp(36px,7vw,72px) 22px
          calc(clamp(36px,7vw,72px) + env(safe-area-inset-bottom));
  text-align:center;
  color:var(--primair);
  font-family:'Fraunces',Georgia,'Times New Roman',serif;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  background:radial-gradient(125% 95% at 50% 0%,
             #FFFFFF 0%, var(--secundair) 58%, var(--secundair) 100%);
  background-attachment:fixed;
  overflow-x:hidden;
}

/* korrel, net als in de Instagramposts */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
}

body > *{position:relative;z-index:1}

/* main draagt de onderlinge ruimte van de inhoud;
   body regelt alleen de verhouding tussen main en de voet */
main{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(22px,4vw,38px);
  width:100%;
}

/* ── kalender ─────────────────────────────────────────── */

.cover{
  width:min(var(--cover-breed),82vw);
  height:auto;
  filter:drop-shadow(0 26px 40px rgba(40,30,70,.22));
}

/* ── kop ──────────────────────────────────────────────── */

.kop{
  font-weight:400;
  font-size:clamp(25px,5.2vw,40px);
  line-height:1.2;
  letter-spacing:-.005em;
  max-width:18ch;
  text-wrap:balance;
}

.sub{
  font-family:'Poppins',system-ui,-apple-system,sans-serif;
  font-size:clamp(14px,2.4vw,16px);
  font-weight:500;
  opacity:.72;
  margin-top:-.5em;
  max-width:32ch;
}

/* ── bestelknoppen ────────────────────────────────────── */

.knoppen{
  display:flex;
  justify-content:center;
  align-items:stretch;
  gap:clamp(16px,2.4vw,26px);
  width:100%;
  max-width:820px;
  margin-top:4px;
}

.knop{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  text-align:center;
  font-family:'Poppins',system-ui,-apple-system,sans-serif;
  font-size:clamp(14px,1.5vw,15px);
  font-weight:600;
  line-height:1.25;
  text-decoration:none;
  white-space:nowrap;
  color:var(--primair);
  background:rgba(255,255,255,.82);
  border:1px solid color-mix(in srgb, var(--primair) 20%, transparent);
  padding:17px clamp(20px,2.6vw,30px);
  border-radius:999px;
  min-height:54px;
  box-shadow:0 1px 2px rgba(40,30,70,.05),
             0 14px 24px -16px rgba(40,30,70,.4);
  transition:transform .2s ease, background-color .2s ease,
             color .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.knop .pijl{
  transition:transform .2s ease;
  opacity:.65;
}

.knop:hover{
  transform:translateY(-3px);
  background:var(--primair);
  border-color:var(--primair);
  color:var(--knop-tekst);
  box-shadow:0 1px 2px rgba(40,30,70,.05),
             0 18px 28px -16px rgba(40,30,70,.55);
}

.knop:hover .pijl{transform:translateX(3px);opacity:1}
.knop:active{transform:translateY(-1px)}

/* Wil je er één laten opvallen? Zet class="knop nadruk" op die link. */
.knop.nadruk{
  background:var(--primair);
  border-color:var(--primair);
  color:var(--knop-tekst);
}
.knop.nadruk:hover{filter:brightness(1.12)}

/* onder elkaar zodra ze niet meer comfortabel naast elkaar passen */
@media (max-width:760px){
  .knoppen{
    flex-direction:column;
    width:min(330px,100%);
    gap:11px;
  }
  .knop{width:100%}
}

/* ── voet: handle + icoontjes ─────────────────────────── */

.voet{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  margin-top:clamp(4px,2vw,14px);
}

.handle{
  font-family:'Poppins',system-ui,-apple-system,sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.32em;
  text-indent:.32em;
  text-decoration:none;
  color:inherit;
  opacity:.6;
  transition:opacity .18s ease;
}

.handle:hover{opacity:1}

.socials{
  display:flex;
  gap:10px;
}

.social{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:50%;
  color:inherit;
  border:1.5px solid currentColor;
  opacity:.55;
  transition:opacity .18s ease, background-color .18s ease, color .18s ease;
}

.social svg{width:19px;height:19px;display:block}

.social:hover{
  opacity:1;
  background:var(--primair);
  color:var(--knop-tekst);
}

/* ── toegankelijkheid ─────────────────────────────────── */

a:focus-visible{
  outline:3px solid var(--primair);
  outline-offset:4px;
}

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

/* ── liggende telefoon: niet klemmen, gewoon scrollen ─── */

@media (max-height:520px) and (orientation:landscape){
  body{justify-content:flex-start;gap:20px}
  .cover{width:min(190px,40vw)}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
  .knop:hover{transform:none}
}