/* /gacs-drempel-check page sheet. Load last on this URL.
   Cache-bust: ?v=20260829-drempel
   Do not change navbar height (60px bar lives in chrome.css). */

/* WAVE 1: white box over the hero photo (KENNISBANK / Interactieve drempel-check).
   Universal *{padding:0} flush the text to the fill. Navy on white, ≥12px 16px. */
html body .sb-hero__visual-card,
html body.page-category-kennisbank .sb-hero__visual-card,
html body main .sb-hero__visual.dg-article-hero-media .sb-hero__visual-card,
html body.page-category-kennisbank .sb-hero__visual.dg-article-hero-media .sb-hero__visual-card {
  box-sizing: border-box !important;
  padding: 12px 16px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #0a2540 !important;
  border: 1px solid #dbe4df !important;
  border-radius: 12px !important;
}

html body .sb-hero__visual-kicker,
html body.page-category-kennisbank .sb-hero__visual-kicker,
html body .sb-hero__visual-note,
html body.page-category-kennisbank .sb-hero__visual-note {
  color: #0a2540 !important;
  background: transparent !important;
}

html body .sb-hero__visual-tag,
html body.page-category-kennisbank .sb-hero__visual-tag {
  background: #0a2540 !important;
  color: #ffffff !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
}

/* Hero/H1 sit below the fixed 64px bar — match /gacs-verplichting-2026.
   Kill the extra 6.25–8rem kennisbank offset (that reads as a 136px header). */
html body.page-category-kennisbank main > section.sb-hero:first-of-type,
html body.page-category-kennisbank .sb-hero[data-sb-section="hero"],
html body main > section.sb-hero.sb-hero--split:first-of-type {
  padding-top: 0 !important;
}

html {
  scroll-padding-top: var(--sb-navbar-height, 64px) !important;
}

html body.page-category-kennisbank main h1,
html body.page-category-kennisbank main h2,
html body.page-category-kennisbank main h3,
html body.page-category-kennisbank [id] {
  scroll-margin-top: calc(var(--sb-navbar-height, 64px) + 12px) !important;
}

/* Body copy: dark on light. No mint-on-navy / grey-on-navy / green-on-green. */
html body main,
html body main p,
html body main li,
html body .dg-article-brief p,
html body .dg-article-brief li,
html body #drempel-check,
html body #drempel-check p,
html body #drempel-check li,
html body #drempel-check legend,
html body #drempel-check .dg-check-label {
  color: #0a2540 !important;
}

html body main .sb-hero__subtitle,
html body main .sb-section__intro,
html body #drempel-check .dg-check-help,
html body #drempel-check .dg-check-math strong,
html body .dg-check-quote cite {
  color: #334155 !important;
}

html body main .sb-section--dark,
html body main .sb-section--dark p,
html body main .sb-section--dark h2,
html body main .sb-cta.sb-section--dark,
html body main .sb-cta.sb-section--dark p,
html body main .sb-cta.sb-section--dark h2 {
  color: #ffffff !important;
}

html body main .sb-section--dark a.sb-card__link,
html body main .sb-section--dark .sb-card__link,
html body main .sb-section--dark a:not(.sb-btn) {
  color: #ffffff !important;
  text-decoration: underline !important;
  text-underline-offset: 0.16em !important;
}

html body main .sb-section--dark a:not(.sb-btn):hover {
  color: #ffffff !important;
}

/* Buttons: white on Degero green, or navy on white. */
html body main .sb-btn--primary,
html body main .sb-hero__actions .sb-btn--primary,
html body #drempel-check .sb-btn--primary,
html body #drempel-check button[type="submit"],
html body main .sb-section--dark .sb-btn--primary,
html body main .sb-cta .sb-btn--primary {
  background: #147a40 !important;
  background-color: #147a40 !important;
  color: #ffffff !important;
  border: 1.5px solid #147a40 !important;
}

html body main .sb-btn--ghost,
html body main .sb-hero__actions .sb-btn--ghost,
html body #drempel-check .sb-btn--ghost,
html body.page-category-kennisbank .sb-hero__actions .sb-btn--ghost {
  background: #ffffff !important;
  color: #0a2540 !important;
  border: 1.5px solid #0a2540 !important;
}

html body main .sb-section--dark .sb-btn--ghost,
html body main .sb-cta .sb-btn--ghost {
  background: transparent !important;
  color: #ffffff !important;
  border: 1.5px solid #ffffff !important;
}

/* Spacing: cards ≥20px inner, grids ≥16px, fields ≥12px, no flush text. */
html body main .sb-card,
html body main .sb-card__body,
html body main .dg-article-brief__answer,
html body main .dg-article-brief__route,
html body main .dg-internal-links__card,
html body main .dg-quality-step,
html body main .dg-trust-card,
html body main .sb-faq details,
html body main .sb-cta__card {
  box-sizing: border-box !important;
  padding: 20px !important;
}

html body main .sb-grid,
html body main .dg-internal-links__grid,
html body main .dg-article-brief__shell,
html body main .dg-eeat-strip__grid,
html body main .sb-hero__actions,
html body main .dg-article-brief__chips {
  gap: 16px !important;
}

html body main .sb-section,
html body main .dg-article-brief,
html body main .dg-eeat-strip {
  margin-block: 0 !important;
}

html body main .sb-section .sb-container,
html body main .dg-article-brief__shell {
  padding-block: 28px !important;
}

html body main .sb-hero--split .sb-container {
  gap: 16px !important;
}

html body main p,
html body main li,
html body main h1,
html body main h2,
html body main h3 {
  overflow-wrap: break-word !important;
}

html body main .sb-hero__title,
html body main .sb-hero__subtitle,
html body main .sb-section__header,
html body main .dg-article-brief__answer p,
html body main .dg-article-brief__route,
html body #drempel-check .sb-section__header {
  max-width: 100% !important;
}

/* Check UI: full-width live panel, aligned heat/cool, readable verdict. */
#drempel-check,
#drempel-check.sb-container {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: var(--sb-container, 1200px) !important;
}

#drempel-check .dg-check-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

#drempel-check .dg-check-shell > * {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

#drempel-check .dg-check-form,
#drempel-check .dg-check-live,
#drempel-check .dg-check-verdict,
#drempel-check .dg-check-card {
  box-sizing: border-box !important;
  padding: 20px !important;
  border-radius: 1rem !important;
}

#drempel-check .dg-check-form,
#drempel-check .dg-check-live:not([hidden]),
#drempel-check .dg-check-card {
  background: #ffffff !important;
}

#drempel-check .dg-check-form {
  display: grid !important;
  gap: 16px !important;
  border: 1px solid #dbe4df !important;
}

#drempel-check fieldset {
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  gap: 12px !important;
}

#drempel-check .dg-check-opt {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 4px 0 !important;
  min-height: 44px !important;
  color: #0a2540 !important;
}

#drempel-check .dg-check-opt input {
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  flex: 0 0 20px !important;
}

#drempel-check .sb-grid.sb-grid--2 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: start !important;
  width: 100% !important;
}

#drempel-check .sb-grid.sb-grid--2 > div {
  min-width: 0 !important;
  width: 100% !important;
  display: grid !important;
  gap: 12px !important;
  align-content: start !important;
}

#drempel-check .dg-check-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 7.5rem auto !important;
  gap: 12px !important;
  align-items: center !important;
  margin: 0 !important;
  width: 100% !important;
}

#drempel-check .dg-check-row input[type="text"],
#drempel-check .dg-check-row input[type="number"],
#drempel-check .dg-check-select,
#drempel-check input.dg-check-input {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 0.625rem !important;
  background: #ffffff !important;
  color: #0a2540 !important;
  flex: none !important;
}

#drempel-check .dg-check-row input[data-kw],
#drempel-check .dg-check-row input[type="number"] {
  width: 100% !important;
}

#drempel-check .dg-check-add,
#drempel-check .dg-check-remove,
#drempel-check .dg-check-presets button,
#drempel-check .dg-check-actions .sb-btn,
#drempel-check button[type="submit"] {
  box-sizing: border-box !important;
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 10px 14px !important;
}

#drempel-check .dg-check-add,
#drempel-check .dg-check-remove,
#drempel-check .dg-check-presets button {
  background: #ffffff !important;
  color: #0a2540 !important;
  border: 1.5px solid #0a2540 !important;
  border-radius: 0.625rem !important;
}

#drempel-check .dg-check-presets {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin: 0 !important;
}

#drempel-check .dg-check-live:not([hidden]) {
  display: grid !important;
  gap: 16px !important;
  border: 1px solid #dbe4df !important;
  width: 100% !important;
}

#drempel-check .dg-check-live[hidden] {
  display: none !important;
}

#drempel-check .dg-check-math {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin: 0 !important;
}

#drempel-check .dg-check-math p {
  margin: 0 !important;
  padding: 16px !important;
  border-radius: 0.75rem !important;
  background: #f8fafc !important;
  border: 1px solid #dbe4df !important;
  color: #0a2540 !important;
  min-width: 0 !important;
}

#drempel-check .dg-check-compare {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

#drempel-check .dg-check-card {
  min-width: 0 !important;
  background: #ffffff !important;
}

#drempel-check .dg-check-card h3,
#drempel-check .dg-check-card p {
  color: #0a2540 !important;
}

#drempel-check .dg-check-card--wrong {
  border: 2px solid #9a3412 !important;
  background: #fff7ed !important;
}

#drempel-check .dg-check-card--right {
  border: 2px solid #0a2540 !important;
  background: #ffffff !important;
}

#drempel-check .dg-check-tag {
  color: #ffffff !important;
}

#drempel-check .dg-check-card--wrong .dg-check-tag {
  background: #9a3412 !important;
}

#drempel-check .dg-check-card--right .dg-check-tag {
  background: #147a40 !important;
}

#drempel-check .dg-check-verdict:not([hidden]) {
  display: block !important;
  background: #ffffff !important;
  color: #0a2540 !important;
  border: 2px solid #0a2540 !important;
}

#drempel-check .dg-check-verdict[hidden] {
  display: none !important;
}

#drempel-check .dg-check-verdict--y2026 {
  border-color: #147a40 !important;
  background: #ffffff !important;
}

#drempel-check .dg-check-verdict--y2030 {
  border-color: #9a3412 !important;
  background: #ffffff !important;
}

#drempel-check .dg-check-verdict--out,
#drempel-check .dg-check-verdict--unknown {
  border-color: #0a2540 !important;
  background: #ffffff !important;
}

#drempel-check .dg-check-verdict p,
#drempel-check .dg-check-verdict h2 {
  color: #0a2540 !important;
}

#drempel-check .dg-check-alert {
  margin: 0 !important;
  padding: 16px 20px !important;
  color: #0a2540 !important;
  background: #fff7ed !important;
}

.dg-check-quote {
  color: #0a2540 !important;
  background: #f8fafc !important;
  padding: 16px 20px !important;
}

#drempel-check .dg-check-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin: 0 !important;
}

html body main .dg-internal-links__card {
  color: #0a2540 !important;
  background: #ffffff !important;
  border: 1px solid #dbe4df !important;
}

html body main .dg-internal-links__card strong {
  color: #0a2540 !important;
}

html body main .dg-internal-links__card span {
  color: #334155 !important;
}

html body main .dg-article-brief a,
html body main #artikel a,
html body main #faq a,
html body main #drempel-check a:not(.sb-btn) {
  color: #065f46 !important;
}

@media (max-width: 719px) {
  #drempel-check .sb-grid.sb-grid--2,
  #drempel-check .dg-check-math,
  #drempel-check .dg-check-compare {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #drempel-check .dg-check-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 390px), (max-width: 640px) {
  html body main .sb-hero--split .sb-container,
  html body main .dg-article-brief__shell,
  html body main .dg-internal-links__grid,
  html body main .sb-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  html body main .sb-container,
  html body #drempel-check.sb-container,
  html body.page-category-kennisbank main .sb-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100% !important;
  }

  html body main .sb-hero__title,
  html body.page-category-kennisbank main h1,
  html body.page-category-kennisbank main .sb-hero__title {
    max-width: 100% !important;
  }

  html body main .sb-hero__actions .sb-btn,
  html body #drempel-check .dg-check-actions .sb-btn,
  html body #drempel-check button[type="submit"],
  html body #drempel-check .dg-check-add,
  html body #drempel-check .dg-check-remove {
    width: 100% !important;
    min-height: 44px !important;
  }

  html body main,
  html body #drempel-check {
    overflow-x: clip !important;
  }
}