/* JIP Bouwplaats: basis voor app en website */
:root {
  --geel: #FFC72C;
  --geel-licht: #FFDE7A;
  --oranje: #F28A1E;
  --blauw: #2F5FA8;
  --denim: #1D3B6E;
  --asfalt: #1B2433;
  --rood: #D7392B;
  --groen: #2E7D32;
  --groen-donker: #1F5E23;
  --zon: #FFF8E6;
  --zand: #F3E3BF;
  --zand-rand: #F3C46A;
  --lichtblauw: #DCE7F7;
  --lichtgroen: #E3F2DF;

  /* semantisch */
  --bg: var(--zon);
  --kaart: #FFFFFF;
  --tekst: var(--asfalt);
  --tekst-2: #4A5263;
  --kop: var(--denim);
  --lijn: var(--asfalt);
  --schaduw: var(--asfalt);
  --chip-bg: #FFFFFF;
  --chip-tekst: var(--denim);
  --raster: rgba(29, 59, 110, 0.08);
  --veld: var(--zon);

  --r-s: 10px;
  --r-m: 16px;
  --r-l: 22px;
  --rand: 2.5px;

  --f-kop: 'Fredoka', 'Nunito Sans', system-ui, sans-serif;
  --f-tekst: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --veer: cubic-bezier(.34, 1.56, .64, 1);
  --uit: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f-tekst); color: var(--tekst); background: var(--bg); line-height: 1.45; }
img, svg { max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--blauw); }
:focus-visible { outline: 3px solid var(--blauw); outline-offset: 3px; border-radius: 6px; }
[tabindex="-1"]:focus { outline: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Logo ---------- */
.jip-logo { display: inline-flex; align-items: baseline; font-family: var(--f-kop); font-weight: 700; line-height: 1; color: var(--denim); letter-spacing: 0; }
.jip-i { position: relative; display: inline-block; margin: 0 .05em; }
.jip-i .jip-helm { max-width: none; position: absolute; left: 50%; top: -.27em; width: .66em; height: auto; transform: translateX(-50%); overflow: visible; transform-origin: 50% 80%; }
.jip-helm.draai { animation: helm-draai 1.1s var(--uit); }
.jip-helm.zwaai { animation: helm-zwaai 1.6s var(--uit); }
@keyframes helm-draai {
  0% { transform: translateX(-50%) rotate(0); }
  30% { transform: translateX(-50%) translateY(-1.1em) rotate(200deg); }
  60% { transform: translateX(-50%) translateY(-1.3em) rotate(540deg); }
  85% { transform: translateX(-50%) translateY(.05em) rotate(720deg) scaleY(.85); }
  100% { transform: translateX(-50%) rotate(720deg); }
}
@keyframes helm-zwaai {
  0%, 100% { transform: translateX(-50%) rotate(0); }
  20% { transform: translateX(-50%) rotate(-14deg); }
  40% { transform: translateX(-50%) rotate(10deg); }
  60% { transform: translateX(-50%) rotate(-6deg); }
  80% { transform: translateX(-50%) rotate(3deg); }
}

.dhps { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.dhps .pb { font-size: 11px; font-weight: 600; letter-spacing: .5px; color: var(--tekst-2); }

/* ---------- Afzetlint ---------- */
.lint { height: 14px; background-image: repeating-linear-gradient(-45deg, var(--geel) 0 14px, var(--asfalt) 14px 28px); }
.lint-rood { background-image: repeating-linear-gradient(-45deg, var(--rood) 0 14px, #fff 14px 28px); }

/* ---------- Knoppen ---------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 10px 20px;
  font-family: var(--f-kop); font-weight: 600; font-size: 18px; line-height: 1.1; text-decoration: none;
  background: var(--geel); color: var(--asfalt);
  border: var(--rand) solid var(--lijn); border-radius: var(--r-m);
  box-shadow: 0 4px 0 var(--schaduw);
  transition: transform .12s var(--uit), box-shadow .12s var(--uit), background-color .2s;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.knop:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--schaduw); }
.knop:active { transform: translateY(4px); box-shadow: 0 0 0 var(--schaduw); }
.knop.blauw { background: var(--blauw); color: #fff; }
.knop.denim { background: var(--denim); color: #fff; }
.knop.groen { background: var(--groen); color: #fff; }
.knop.wit { background: var(--kaart); color: var(--kop); }
.knop.oranje { background: var(--oranje); color: var(--asfalt); }
.knop.plat { box-shadow: none; background: var(--kaart); color: var(--kop); border-color: var(--kop); }
.knop.plat:hover { transform: none; background: var(--lichtblauw); }
.knop.plat:active { transform: scale(.98); }
.knop.klein { min-height: 44px; font-size: 16px; padding: 6px 14px; border-radius: 14px; }
.knop[disabled] { opacity: .5; pointer-events: none; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  font-family: var(--f-kop); font-weight: 600; font-size: 15px;
  background: var(--chip-bg); color: var(--chip-tekst);
  border: 2px solid var(--chip-tekst); border-radius: 12px;
  transition: transform .15s var(--veer), background-color .15s;
}
.chip[aria-pressed="true"] { background: var(--geel); color: var(--asfalt); border: var(--rand) solid var(--lijn); }
.chip:active { transform: scale(.95); }

/* ---------- Codeplaatje en labels ---------- */
.plaat {
  display: inline-block; font-family: var(--f-mono); font-weight: 700; letter-spacing: 1.5px; line-height: 1;
  background: var(--geel); color: var(--asfalt); border: var(--rand) solid var(--lijn); border-radius: 10px; padding: 6px 9px;
}
.ernst { display: inline-flex; align-items: center; gap: 4px; border: 2px solid var(--lijn); border-radius: 8px; padding: 1px 7px; font-size: 12px; font-weight: 800; line-height: 1.5; white-space: nowrap; }
.ernst-hoog { background: var(--rood); color: #fff; }
.ernst-middel { background: var(--oranje); color: var(--asfalt); }
.ernst-laag { background: var(--groen); color: #fff; }

.kaart { background: var(--kaart); border: var(--rand) solid var(--lijn); border-radius: var(--r-l); box-shadow: 5px 5px 0 var(--schaduw); }

.label-mono { font-family: var(--f-mono); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }

/* ---------- Waterpas ---------- */
.waterpas {
  --w: 6em; display: inline-flex; align-items: center; justify-content: center;
  width: var(--w); height: 1.15em; font-size: 28px;
  background: var(--blauw); border: .09em solid var(--asfalt); border-radius: .36em;
  position: relative; vertical-align: middle;
}
.waterpas::before, .waterpas::after { content: ''; position: absolute; top: 50%; width: .14em; height: .14em; border-radius: 50%; background: rgba(255,255,255,.55); transform: translateY(-50%); }
.waterpas::before { left: .35em; } .waterpas::after { right: .35em; }
.wp-buis { position: relative; width: 2.2em; height: .52em; background: #DCF1C9; border: .07em solid var(--asfalt); border-radius: .3em; overflow: hidden; }
.wp-streep { position: absolute; top: -.05em; bottom: -.05em; width: .07em; background: var(--asfalt); }
.wp-streep.l { left: .72em; } .wp-streep.r { right: .72em; }
.wp-bel { position: absolute; left: 50%; top: 50%; width: .52em; height: .3em; margin: -.15em 0 0 -.26em; border-radius: .2em; background: #fff; box-shadow: inset 0 -.04em 0 rgba(0,0,0,.12); }
.wp-laden { animation: wp-kantel 2.2s ease-in-out infinite; }
.wp-laden .wp-bel { animation: wp-bel-laden 2.2s ease-in-out infinite; }
@keyframes wp-kantel { 0%{transform:rotate(-7deg)} 22%{transform:rotate(6deg)} 42%{transform:rotate(-4deg)} 58%{transform:rotate(2.5deg)} 70%,100%{transform:rotate(0)} }
@keyframes wp-bel-laden { 0%{transform:translateX(.75em)} 22%{transform:translateX(-.7em)} 42%{transform:translateX(.45em)} 58%{transform:translateX(-.25em)} 70%,100%{transform:translateX(0)} }
.wp-typen { font-size: 15px; }
.wp-typen .wp-bel { animation: wp-bel-typen .95s ease-in-out infinite alternate; }
.wp-typen { animation: wp-kantel-typen .95s ease-in-out infinite alternate; }
@keyframes wp-bel-typen { from { transform: translateX(.72em); } to { transform: translateX(-.72em); } }
@keyframes wp-kantel-typen { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.wp-klaar .wp-bel { transform: translateX(0); }
.wp-klaar .wp-buis { background: #BEE8A0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .wp-typen .wp-bel { animation: none !important; }
}