/* Gedeelde opmaak voor alle pagina's */
html { scroll-behavior: smooth; scroll-padding-top: calc(80px + env(safe-area-inset-top, 0px)); }
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
body { background: #FBFCFD; color: #14213D; -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 3px solid #0E7C7B; outline-offset: 2px; border-radius: 6px; }

.bar { transition: width 900ms cubic-bezier(.2,.8,.2,1), height 900ms cubic-bezier(.2,.8,.2,1); }
.msg-in { animation: msgIn 260ms ease-out both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.dot { width: 6px; height: 6px; border-radius: 9999px; background: #56657D; animation: blink 1s infinite; }
.dot:nth-child(2) { animation-delay: .15s; } .dot:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.chev { transition: transform 200ms ease; }
details[open] .chev { transform: rotate(180deg); }

dialog::backdrop { background: rgba(20, 33, 61, .55); }
input[type="range"] { accent-color: #0E7C7B; }

/* Lopende tekst op juridische pagina's */
.doc h2 { font-size: 1.5rem; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; margin-top: 3.5rem; scroll-margin-top: 90px; }
.doc h2:first-child { margin-top: 0; }
.doc h3 { font-weight: 700; margin-top: 1.75rem; }
.doc p, .doc li, .doc td { color: #56657D; line-height: 1.7; }
.doc p { margin-top: 1rem; max-width: 68ch; }
.doc ul { margin-top: 1rem; padding-left: 1.25rem; list-style: disc; max-width: 68ch; }
.doc li { margin-top: .4rem; }
.doc a { color: #14213D; text-decoration: underline; text-underline-offset: 2px; }
.doc table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.doc th { text-align: left; font-weight: 600; padding: .75rem 1rem; background: #EEF3F7; white-space: nowrap; }
.doc td { padding: .75rem 1rem; border-top: 1px solid #DCE3EC; vertical-align: top; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bar, .msg-in, .dot, .chev { transition: none !important; animation: none !important; }
}