/* =========================================================
   Hollandse Heisa — gedeelde stijl
   Kleuren en fonts volgens de HH-brandguide.
   Zubilo Black komt via Adobe Fonts (Typekit); lukt dat niet,
   dan valt alles terug op de lokale HH Display-font.
   ========================================================= */

@font-face{font-family:'HH Display';src:url(../fonts/hh-display.woff2) format('woff2');font-display:swap;}
@font-face{font-family:'HH Stencil';src:url(../fonts/hh-stencil.woff2) format('woff2');font-display:swap;}
@font-face{font-family:'Archivo';src:url(../fonts/archivo.woff2) format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap;}

:root{
  --creme:#faf0b7;
  --rood:#b30000;
  --oranje:#ff3c00;
  --geel:#ffb300;
  --rood-diep:#8c0000;
  --gradient:linear-gradient(45deg,#b30000 0%,#ff3c00 50%,#ffb300 100%);
  --gradient-op:linear-gradient(200deg,#ffb300 0%,#ff3c00 55%,#b30000 100%);
  --f-display:'zubilo-black','HH Display',Impact,sans-serif;
  --f-stencil:'HH Stencil','Big Shoulders Stencil Display',serif;
  --f-body:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --maxw:1180px;
  --nav-h:64px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px);-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--rood);color:var(--creme);font-family:var(--f-body);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img,video{max-width:100%;display:block;}
a{color:inherit;}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative;z-index:2;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}


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

/* ---------- typografie ---------- */
.kop{font-family:var(--f-display);font-weight:900;text-transform:uppercase;line-height:.88;margin:0;
  color:var(--creme);-webkit-text-stroke:3px var(--rood);paint-order:stroke fill;
  text-shadow:0 6px 0 rgba(140,0,0,.45);letter-spacing:.5px;}
.kop.op-licht{color:var(--rood);-webkit-text-stroke:0;text-shadow:0 5px 0 rgba(255,60,0,.25);}
.stencil{font-family:var(--f-stencil);text-transform:uppercase;letter-spacing:.06em;line-height:1.05;}
h2.kop{font-size:clamp(42px,7.4vw,92px);}
.intro{font-family:var(--f-stencil);text-transform:uppercase;font-size:clamp(18px,2.2vw,26px);margin:16px 0 0;letter-spacing:.04em;}

/* ---------- mededeling (calamiteiten/updates, geen grapjes) ---------- */
.mededeling{background:var(--creme);color:#3a0000;font-weight:700;font-size:16px;padding:12px 0;border-bottom:4px solid var(--rood);position:relative;z-index:60;}
.mededeling .wrap{display:flex;gap:12px;align-items:flex-start;}
.mededeling strong{color:var(--rood);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;}
.mededeling[hidden]{display:none;}

/* ---------- lint ---------- */
.lint{background:var(--rood-diep);color:var(--creme);overflow:hidden;white-space:nowrap;border-bottom:3px solid var(--geel);position:relative;z-index:3;}
.lint .track{display:inline-flex;gap:30px;padding:8px 0;font-family:var(--f-stencil);font-size:16px;text-transform:uppercase;letter-spacing:.08em;animation:lint 32s linear infinite;}
.lint .track span{display:inline-flex;align-items:center;gap:30px;}
.lint .track span::after{content:"";width:16px;height:12px;background:url(../img/kroon.png) center/contain no-repeat;}
@keyframes lint{to{transform:translateX(-50%);}}

/* ---------- navigatie ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(140,0,0,.94);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-bottom:1px solid rgba(250,240,183,.15);}
.nav .wrap{display:flex;align-items:center;gap:24px;height:var(--nav-h);}
.merk{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-display);font-size:24px;text-transform:uppercase;letter-spacing:.5px;}
.merk img{height:32px;width:auto;}
.nav nav{margin-left:auto;display:flex;align-items:center;gap:26px;}
.nav nav a:not(.knop){font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;opacity:.85;}
.nav nav a:not(.knop):hover{opacity:1;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px;}

/* ---------- knoppen ---------- */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--f-display);text-transform:uppercase;letter-spacing:.5px;
  text-decoration:none;cursor:pointer;border:3px solid var(--rood);border-radius:10px;padding:11px 20px;font-size:17px;line-height:1;
  background:var(--creme);color:var(--rood);box-shadow:0 5px 0 var(--rood-diep);transition:transform .12s ease,box-shadow .12s ease;}
.knop:hover{transform:translateY(-2px) rotate(-1.2deg);box-shadow:0 7px 0 var(--rood-diep);}
.knop:active{transform:translateY(3px);box-shadow:0 2px 0 var(--rood-diep);}
.knop.groot{font-size:clamp(19px,2.2vw,24px);padding:16px 28px;}
.knop.geel{background:var(--geel);}
.knop.rand{background:transparent;color:var(--creme);border-color:var(--creme);box-shadow:0 5px 0 rgba(0,0,0,.25);}
.knop.rand:hover{background:var(--creme);color:var(--rood);}
.knop[aria-disabled="true"]{opacity:.55;pointer-events:none;}

/* ---------- secties ---------- */
section{position:relative;padding:96px 0;}
.verloop{background:var(--gradient);}
.creme-vlak{background:var(--creme);color:var(--rood);}
.kop-blok{margin-bottom:48px;max-width:900px;}

/* gluurders */
.gluurder{position:absolute;bottom:0;z-index:1;pointer-events:none;user-select:none;height:auto;filter:drop-shadow(0 10px 24px rgba(90,0,0,.3));}

/* ---------- footer ---------- */
.voet{background:var(--rood-diep);border-top:6px solid var(--geel);padding:64px 0 30px;position:relative;}
.voet-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(250,240,183,.2);}
.voet .logo{width:230px;max-width:70%;margin-bottom:18px;}
.voet p{margin:0;max-width:34ch;opacity:.9;font-size:16px;}
.voet h3{font-family:var(--f-stencil);font-size:20px;text-transform:uppercase;letter-spacing:.06em;color:var(--geel);margin:0 0 14px;}
.voet ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:16px;}
.voet ul a{text-decoration:none;}
.voet ul a:hover{text-decoration:underline;}
.socials{display:flex;gap:12px;margin-top:22px;}
.socials a{width:44px;height:44px;border:2px solid var(--creme);border-radius:50%;display:grid;place-items:center;transition:background .15s,color .15s;}
.socials a:hover{background:var(--geel);border-color:var(--geel);color:var(--rood);}
.handkus{display:flex;align-items:center;gap:16px;padding-top:34px;flex-wrap:wrap;}
.handkus img{height:54px;width:auto;}
.handkus span{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(30px,5vw,58px);color:var(--geel);line-height:1;transform:rotate(-2deg);display:inline-block;}
.klein{margin-top:26px;font-size:13px;opacity:.65;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.klein a{text-decoration:none;}
.klein a:hover{text-decoration:underline;}

@media (max-width:860px){
  .nav nav a:not(.knop){display:none;}
  .voet-grid{grid-template-columns:1fr 1fr;}
  .voet-grid > :first-child{grid-column:1/-1;}
}
@media (max-width:600px){
  body{font-size:17px;}
  .wrap{padding:0 20px;}
  section{padding:68px 0;}
  .voet-grid{grid-template-columns:1fr;}
  .merk span{display:none;}
  .kop{-webkit-text-stroke-width:2px;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}

/* ---------- tekstballon ---------- */
.ballon{position:absolute;z-index:5;background:var(--creme);color:var(--rood);font-family:var(--f-display);text-transform:uppercase;font-size:17px;line-height:1.05;
  padding:10px 14px;border:3px solid var(--rood);border-radius:14px;box-shadow:0 4px 0 var(--rood-diep);max-width:240px;pointer-events:none;
  opacity:0;transform:translateY(8px) rotate(-3deg);transition:opacity .2s ease,transform .25s cubic-bezier(.2,1.6,.4,1);}
.ballon.aan{opacity:1;transform:translateY(0) rotate(-3deg);}
.ballon::after{content:"";position:absolute;left:22px;bottom:-12px;border:9px solid transparent;border-top-color:var(--rood);border-bottom:0;}