/* VGL Events - globale basis-CSS. Bron: code/vgl-global.css in de projectmap. Tokens komen uit CrocoBuilder-variabelen. */
html:root { --contrast: #F4F5F7; --contrast-2: #9AA0B4; --contrast-3: #5B6075; --base: #11131F; --base-2: #07080F; --base-3: #07080F; --accent: #F28C0F; }
html { scroll-behavior: smooth; }
html body { background-color: var(--color-bg, #07080F); color: var(--color-text, #F4F5F7); font-family: var(--font-body, system-ui, sans-serif); font-size: var(--fs-body, 1.0625rem); line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display, system-ui, sans-serif); color: var(--color-text, #F4F5F7); margin: 0; }
p { margin: 0; }
a { color: var(--color-accent, #F28C0F); }
a:hover { color: var(--color-accent-glow, #FFB347); }
::selection { background: var(--color-accent, #F28C0F); color: var(--color-on-accent, #07080F); }
h1 em, h2 em, h3 em, .heading-hero em, .heading-1 em, .heading-2 em, .heading-3 em { font-family: var(--font-accent, Georgia, serif); font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--color-accent-glow, #FFB347); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--color-accent-glow, #FFB347); outline-offset: 3px; }
html body .site.grid-container, html body .site-content, html body .content-area, html body .site-main { max-width: none; width: 100%; margin: 0; padding: 0; float: none; background: transparent; }
html body .site-content { display: block; }
html body .inside-article, html body.separate-containers .inside-article { padding: 0; margin: 0; background: transparent; }
html body .site-main > article { margin: 0; }
html body .entry-content { margin: 0; }
html body .widget-area, html body #right-sidebar, html body #left-sidebar { display: none; }
html body.page .entry-header, html body .page-header { display: none; }
html body .comments-area { background: transparent; }
img, video { max-width: 100%; height: auto; display: block; }
html body .pb-nav.is-collapsed .pb-nav__mobile-panel { background: var(--color-bg, #07080F); width: 100vw; padding: 6rem var(--gutter, 1.25rem) 2rem; border-right: 1px solid var(--color-border); }
html body .pb-nav.is-collapsed .pb-nav__mobile-close { display: inline-flex; position: absolute; top: 1.1rem; right: var(--gutter, 1.25rem); font-size: 2.25rem; line-height: 1; color: var(--color-text, #F4F5F7); cursor: pointer; }
html body .pb-nav__mobile-overlay { background: rgba(0, 0, 0, 0.6); }
html body .pb-nav.is-collapsed .pb-nav__indicator { display: inline-flex; color: var(--color-muted); padding: 0.5rem; }
header.cb-hd_root { transition: background-color .3s ease, padding .3s ease, backdrop-filter .3s ease; }
html body.is-scrolled header.cb-hd_root { background-color: rgba(7, 8, 15, 0.88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding-top: .7rem; padding-bottom: .7rem; }
html.js .reveal { opacity: 0; translate: 0 28px; transition: opacity .9s cubic-bezier(.2,.7,.2,1), translate .9s cubic-bezier(.2,.7,.2,1); }
html.js .reveal.is-visible { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
@media (max-width: 1024px) { html body .pb-nav[data-mobile-collapse-enabled="1"] .pb-nav__mobile-panel { position: fixed; top: 0; left: 0; height: 100vh; transform: translateX(-100%); } }
html body.admin-bar header.cb-hd_root { top: 32px; }
@media (max-width: 782px) { html body.admin-bar header.cb-hd_root { top: 46px; } }