/* Novax – base styles. Everything visual is inline in the
   app; this file only scopes the prototype's global rules and neutralises
   theme/admin styles that would otherwise leak into the app. The doubled
   class raises specificity above typical theme selectors. */

@keyframes nxbFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes nxbSpin { to { transform: rotate(360deg); } }

.nxb-mount { width: 100%; }

/* Size unit: 1/16 rem, so everything follows the visitor's text size. --nxb-rf
   corrects themes that shrink the root font size (html { font-size: 62.5% })
   and applies the "basisgrootte" setting; it is set by app.js on the root. */
.nxb-root { --nxu: calc(0.0625rem * var(--nxb-rf, 1)); }

/* Public forms: WCAG AA versions of the two light greys (hint text, field borders).
   Brand tokens from Instellingen → Huisstijl are set inline on the root and win. */
.nxb-root.nxb-pub { --nxb-hint: #6B6E72; --nxb-input-border: #878A8F; }

.nxb-root.nxb-root, .nxb-root.nxb-root * { box-sizing: content-box; }
/* Browser defaults: form controls size as border-box. */
.nxb-root.nxb-root select, .nxb-root.nxb-root button, .nxb-root.nxb-root input[type=checkbox], .nxb-root.nxb-root input[type=radio] { box-sizing: border-box; }
.nxb-root.nxb-root { -webkit-font-smoothing: antialiased; text-align: left; letter-spacing: normal; }
.nxb-root.nxb-root :where(*) { letter-spacing: inherit; }

.nxb-root.nxb-root h1, .nxb-root.nxb-root h2, .nxb-root.nxb-root h3,
.nxb-root.nxb-root h4 { font-family: var(--nxb-font-heading, inherit); color: inherit; font-weight: bold; line-height: inherit; letter-spacing: normal; text-transform: none; padding: 0; border: 0; background: none; clear: none; }
.nxb-root.nxb-root h1 { font-size: 2em; margin: .67em 0; }
.nxb-root.nxb-root h2 { font-size: 1.5em; margin: .83em 0; }
.nxb-root.nxb-root h3 { font-size: 1.17em; margin: 1em 0; }
.nxb-root.nxb-root h1::before, .nxb-root.nxb-root h2::before, .nxb-root.nxb-root h3::before,
.nxb-root.nxb-root h1::after, .nxb-root.nxb-root h2::after, .nxb-root.nxb-root h3::after { content: none; display: none; }
.nxb-root.nxb-root p { margin: 1em 0; padding: 0; font-size: inherit; line-height: inherit; color: inherit; }
.nxb-root.nxb-root dl { margin: 1em 0; padding: 0; }
.nxb-root.nxb-root dt { font-weight: normal; margin: 0; padding: 0; }
.nxb-root.nxb-root dd { margin: 0 0 0 40px; padding: 0; }
.nxb-root.nxb-root ol, .nxb-root.nxb-root ul { margin: 1em 0; padding: 0 0 0 40px; }
.nxb-root.nxb-root li { margin: 0; padding: 0; }
.nxb-root.nxb-root li::before, .nxb-root.nxb-root li::marker { font-family: inherit; }
.nxb-root.nxb-root section, .nxb-root.nxb-root header, .nxb-root.nxb-root footer,
.nxb-root.nxb-root main, .nxb-root.nxb-root nav, .nxb-root.nxb-root aside { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; max-width: none; width: auto; position: static; }
.nxb-root.nxb-root strong, .nxb-root.nxb-root b { font-weight: var(--nxb-bold-weight, bold); color: inherit; }
.nxb-root.nxb-root img { max-width: none; border: 0; border-radius: 0; box-shadow: none; margin: 0; }
.nxb-root.nxb-root details summary { list-style: revert; }

.nxb-root.nxb-root a { color: var(--nxb-link, #235FB7); text-decoration: underline; box-shadow: none; border: 0; }
.nxb-root.nxb-root a:hover { color: var(--nxb-link-hover, #203861); }

.nxb-root.nxb-root button, .nxb-root.nxb-root input, .nxb-root.nxb-root select, .nxb-root.nxb-root textarea {
  font-family: inherit; font-size: inherit; line-height: normal; letter-spacing: normal; text-transform: none; text-shadow: none;
  box-shadow: none; margin: 0; width: auto; max-width: none; height: auto; min-width: 0; outline-offset: 0; transition: none;
  color: inherit; vertical-align: baseline;
}
.nxb-root.nxb-root button { cursor: pointer; background-image: none; padding: 1px 6px; border-radius: 0; font-weight: normal; text-decoration: none; display: inline-block; text-align: center; white-space: normal; }
.nxb-root.nxb-root button:hover, .nxb-root.nxb-root button:focus { background-image: none; box-shadow: none; text-decoration: none; }
.nxb-root.nxb-root button:disabled { cursor: not-allowed; }
.nxb-root.nxb-root select { -webkit-appearance: auto; appearance: auto; background-image: none; cursor: pointer; }
.nxb-root.nxb-root input[type=checkbox], .nxb-root.nxb-root input[type=radio] {
  -webkit-appearance: auto; appearance: auto; width: 20px; height: 20px; min-height: 0; accent-color: var(--nxb-primary, #235FB7); margin: 0; padding: 0; border: 0; background: none; flex: none;
}
.nxb-root.nxb-root input[type=checkbox]::before, .nxb-root.nxb-root input[type=radio]::before,
.nxb-root.nxb-root input[type=checkbox]::after, .nxb-root.nxb-root input[type=radio]::after { content: none; display: none; }
.nxb-root.nxb-root input::placeholder, .nxb-root.nxb-root textarea::placeholder { color: var(--nxb-hint, #8A8C8E); opacity: 1; }
.nxb-root.nxb-root input:focus, .nxb-root.nxb-root select:focus, .nxb-root.nxb-root textarea:focus { box-shadow: none; }
.nxb-root.nxb-root *:focus { outline: none; }
.nxb-root.nxb-root *:focus-visible { outline: 3px solid var(--nxb-focus, var(--nxb-primary, #235FB7)); outline-offset: 2px; }

/* Full-screen staff app on the front end: stop the page behind it scrolling. */
html.nxb-fullscreen, html.nxb-fullscreen body { overflow: hidden; }

/* wp-admin page */
.nxb-admin-wrap { margin: 0 20px 0 0; }
.nxb-admin-wrap .notice, .nxb-admin-wrap .update-nag { display: none; }
@media (max-width: 782px) { .nxb-admin-wrap { margin-right: 10px; } }

/* Page template "Novax – volle breedte" */
.nxb-page { width: 100%; }
.nxb-page__inner { max-width: 1280px; margin: 0 auto; padding: clamp(40px, 6vw, 88px) 24px clamp(48px, 7vw, 96px); box-sizing: border-box; }
.nxb-page__inner > * { max-width: none; }
.nxb-page__title { margin: 0 0 32px; }

/* Themes that force button colours with !important: re-apply the app's own colours. */
.nxb-root.nxb-root button[style*="--nxb-bg"] { background: var(--nxb-bg) !important; }
.nxb-root.nxb-root button[style*="--nxb-fg"] { color: var(--nxb-fg) !important; }
.nxb-root.nxb-root button { text-transform: none !important; letter-spacing: normal !important; }
.nxb-root.nxb-root button[data-nxb-btn="primary"]:hover:not(:disabled) { background: var(--nxb-primary-hover, var(--nxb-primary, #235FB7)) !important; }

/* Visible focus on any background: brand-coloured ring with a white inner ring. */
.nxb-root.nxb-pub *:focus-visible { outline: 3px solid var(--nxb-focus, var(--nxb-primary, #235FB7)); outline-offset: 2px; box-shadow: 0 0 0 2px #fff; }

/* Very large text on a narrow screen: break long words instead of scrolling sideways. */
.nxb-root.nxb-pub :where(button, label, legend, span, p, a, strong, h1, h2, h3, li, dd, dt) { overflow-wrap: anywhere; }

/* Grid columns in the forms may shrink below their content (320 px with 200 % text). */
.nxb-root.nxb-pub form, .nxb-root.nxb-pub form > div { grid-template-columns: minmax(0, 1fr); }
.nxb-root.nxb-pub form > div > div { min-width: 0; }

/* Screen-reader-only text. */
.nxb-root .nxb-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .nxb-root.nxb-root, .nxb-root.nxb-root * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}