/* ==========================================================================
   onebrand-pagebuilder.css
   Eén globaal stylesheet voor alle contentblokken van de OneBrand pagebuilder.

   Alles is geprefixt met `obpb-`: classes, custom properties (`--obpb-`) en
   data-attributen (`data-obpb-`). Bewust een lange, lelijke prefix. De shops
   laden veel CSS van veel herkomst, en `pb-` is een prefix die iedere andere
   pagebuilder ook zou kiezen. Deze niet.

   Één uitzondering, en die is opzettelijk: de merkkleur komt uit `--color-primary`
   van de shop zelf. Die definiëren we hier niet, we gebruiken hem alleen.

   LET OP bij wijzigen: gepubliceerde pagina's staan als vaste HTML in het CMS en
   updaten niet mee. Een class hernoemen of weghalen breekt elke pagina die al
   live staat. Toevoegen mag altijd, hernoemen niet.
   ========================================================================== */

:root {
  --obpb-space-sm: 1.5rem;
  --obpb-space-md: 3rem;
  --obpb-space-lg: 4.5rem;
  --obpb-space-xl: 6rem;

  --obpb-gap: 1.5rem;
  --obpb-radius: 10px;
  --obpb-radius-pill: 999px;

  --obpb-text: #1d1d1f;
  --obpb-text-muted: #5f6368;
  --obpb-surface-light: #f6f5f3;
  --obpb-surface-accent: #f9eff3;
  --obpb-surface-dark: #1d1d1f;
  --obpb-border: rgba(0, 0, 0, 0.1);
  --obpb-accent: var(--color-primary, #cb5796);

  --obpb-title-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  --obpb-lead-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
}

/* --------------------------------------------------------------------------
   Sectie-ritme
   -------------------------------------------------------------------------- */

.obpb-section {
  position: relative;
}

.obpb-section--none { padding-block: 0; }
.obpb-section--sm { padding-block: var(--obpb-space-sm); }
.obpb-section--md { padding-block: var(--obpb-space-md); }
.obpb-section--lg { padding-block: var(--obpb-space-lg); }
.obpb-section--xl { padding-block: var(--obpb-space-xl); }

/* Twee secties met dezelfde achtergrond achter elkaar: geen dubbele witruimte
   in het midden, anders lijkt het één blok met een gat erin. */
.obpb-bg--light + .obpb-bg--light,
.obpb-bg--accent + .obpb-bg--accent,
.obpb-bg--dark + .obpb-bg--dark {
  padding-block-start: 0;
}

.obpb-bg--light { background-color: var(--obpb-surface-light); }
.obpb-bg--accent { background-color: var(--obpb-surface-accent); }

.obpb-bg--dark {
  background-color: var(--obpb-surface-dark);
  color: #fff;
}

.obpb-bg--dark .obpb-intro,
.obpb-bg--dark .obpb-eyebrow,
.obpb-bg--dark .text-body-secondary {
  color: rgba(255, 255, 255, 0.75) !important;
}

.obpb-narrow {
  max-width: 46rem;
}

/* Leesbare maximumbreedte voor gecentreerde tekstkolommen. Als class en niet als
   inline style, want CMS'en strippen `style`-attributen graag. */
.obpb-measure {
  max-width: 46rem;
}

.obpb-measure--sm {
  max-width: 40rem;
}

/* --------------------------------------------------------------------------
   Paginakop
   -------------------------------------------------------------------------- */

.obpb-hero__title {
  font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3rem);
}

.obpb-hero__content {
  max-width: 44rem;
}

.obpb-hero--background {
  display: flex;
  align-items: center;
  min-height: clamp(20rem, 45vh, 32rem);
  color: #fff;
  overflow: hidden;
}

.obpb-hero--background .obpb-eyebrow,
.obpb-hero--background .obpb-intro {
  color: rgba(255, 255, 255, 0.85);
}

.obpb-hero__bg {
  position: absolute;
  inset: 0;
}

.obpb-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.obpb-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.15));
}

/* --------------------------------------------------------------------------
   Typografie
   -------------------------------------------------------------------------- */

.obpb-eyebrow {
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--obpb-text-muted);
}

.obpb-title {
  margin-bottom: 0.75rem;
  font-size: var(--obpb-title-size);
  line-height: 1.2;
  text-wrap: balance;
}

.obpb-intro {
  margin-bottom: 0;
  font-size: var(--obpb-lead-size);
  color: var(--obpb-text-muted);
  text-wrap: pretty;
}

.obpb-header {
  margin-bottom: 2rem;
}

.obpb-header:last-child {
  margin-bottom: 0;
}

.obpb-prose > *:last-child {
  margin-bottom: 0;
}

.obpb-prose p {
  margin-bottom: 1rem;
  text-wrap: pretty;
}

/* Tussenkopje en bijtekst. De tegel-varianten delen dezelfde regels, zodat een
   kaart en een losse sectie er hetzelfde uitzien. */
.obpb-subtitle,
.obpb-tile__title {
  margin-bottom: 0.25rem;
  font-size: 1.0625rem;
  line-height: 1.35;
}

.obpb-note,
.obpb-tile__caption {
  margin-bottom: 0;
  font-size: 0.9375rem;
  color: var(--obpb-text-muted);
}

.obpb-list {
  margin-bottom: 1rem;
  padding-left: 1.25rem;
}

.obpb-list li + li {
  margin-top: 0.35rem;
}

.obpb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.obpb-actions:empty {
  display: none;
}

.obpb-actions--tight {
  margin-top: 0;
}

/* Knoppen zijn altijd pill-vormig. De kleur komt uit de shop-CSS, niet hier. */
.obpb-section .btn {
  border-radius: var(--obpb-radius-pill);
}

@media (min-width: 768px) {
  .obpb-columns-2 {
    column-count: 2;
    column-gap: 2.5rem;
  }
}

/* --------------------------------------------------------------------------
   Beeld

   Eigen implementatie van beeldverhoudingen en object-fit. Niet via Bootstrap's
   `.ratio` en `.object-fit-cover`, want de Bootstrap-builds van de shops zijn
   uitgekleed en bevatten die utilities niet allemaal. Dit werkt overal.
   -------------------------------------------------------------------------- */

.obpb-media {
  position: relative;
  border-radius: var(--obpb-radius);
  overflow: hidden;
}

.obpb-media--ratio {
  aspect-ratio: var(--obpb-ar, 4 / 3);
}

.obpb-media--ratio > img,
.obpb-media--ratio > iframe,
.obpb-media--ratio > video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

/* Beeld dat strak tegen de rand van een kaart aan zit. */
.obpb-media--flush { border-radius: 0; }

.obpb-ar-1x1 { --obpb-ar: 1 / 1; }
.obpb-ar-4x3 { --obpb-ar: 4 / 3; }
.obpb-ar-3x4 { --obpb-ar: 3 / 4; }
.obpb-ar-16x9 { --obpb-ar: 16 / 9; }
.obpb-ar-3x2 { --obpb-ar: 3 / 2; }
.obpb-ar-2x3 { --obpb-ar: 2 / 3; }

/* Vervanger van .img-fluid, zodat we niet van de shop-build afhankelijk zijn. */
.obpb-img {
  display: block;
  max-width: 100%;
  height: auto;
}

.obpb-focus--center { object-position: center; }
.obpb-focus--top { object-position: center top; }
.obpb-focus--bottom { object-position: center bottom; }
.obpb-focus--left { object-position: left center; }
.obpb-focus--right { object-position: right center; }

/* Vervanger van Bootstrap's .stretched-link: maakt de hele kaart klikbaar.
   Vereist een voorouder met position: relative — dat is .obpb-tile. */
.obpb-stretch::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Vervanger van .visually-hidden, voor labels die alleen voor screenreaders zijn. */
.obpb-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* --------------------------------------------------------------------------
   Tegels en kaarten
   -------------------------------------------------------------------------- */

.obpb-tile {
  position: relative;
  height: 100%;
}

.obpb-tile__body {
  padding-top: 0.875rem;
}

.obpb-tile__title a {
  color: inherit;
  text-decoration: none;
}

.obpb-tile--linked .obpb-media img {
  transition: transform 0.35s ease;
}

.obpb-tile--linked:hover .obpb-media img,
.obpb-tile--linked:focus-within .obpb-media img {
  transform: scale(1.03);
}

.obpb-tile--linked:focus-within {
  outline: 2px solid var(--obpb-accent);
  outline-offset: 4px;
  border-radius: var(--obpb-radius);
}

.obpb-tile__label {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  padding: 0.25rem 0.625rem;
  border-radius: var(--obpb-radius);
  background: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}

.obpb-card {
  height: 100%;
  padding: 1.5rem;
  border: 1px solid var(--obpb-border);
  border-radius: var(--obpb-radius);
  background: #fff;
}

/* --------------------------------------------------------------------------
   USP-rij
   -------------------------------------------------------------------------- */

.obpb-usp__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.75rem;
  border-radius: var(--obpb-radius-pill);
  background: var(--obpb-surface-accent);
  font-size: 1.25rem;
  line-height: 1;
}

.obpb-usp__title {
  margin-bottom: 0.25rem;
  font-size: 1rem;
  font-weight: 600;
}

.obpb-usp__text {
  margin-bottom: 0;
  font-size: 0.9375rem;
  color: var(--obpb-text-muted);
}

/* --------------------------------------------------------------------------
   Stappen en tijdlijn
   -------------------------------------------------------------------------- */

.obpb-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 0.875rem;
  border-radius: var(--obpb-radius-pill);
  background: var(--obpb-surface-dark);
  color: #fff;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.obpb-timeline {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.obpb-timeline__item {
  position: relative;
  padding-left: 2.5rem;
  padding-bottom: 1.75rem;
}

.obpb-timeline__item:last-child {
  padding-bottom: 0;
}

.obpb-timeline__item::before {
  content: '';
  position: absolute;
  top: 0.45rem;
  left: 0.4rem;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: var(--obpb-radius-pill);
  background: var(--obpb-accent);
}

.obpb-timeline__item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 1.35rem;
  bottom: 0;
  left: 0.7rem;
  width: 1px;
  background: var(--obpb-border);
}

.obpb-timeline__when {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--obpb-text-muted);
}

.obpb-timeline__title {
  margin-bottom: 0.25rem;
  font-size: 1.0625rem;
}

/* --------------------------------------------------------------------------
   FAQ zonder JavaScript: native <details>/<summary>
   -------------------------------------------------------------------------- */

.obpb-faq {
  border-top: 1px solid var(--obpb-border);
}

.obpb-faq__item {
  border-bottom: 1px solid var(--obpb-border);
}

.obpb-faq__question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 0;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.obpb-faq__question::-webkit-details-marker {
  display: none;
}

.obpb-faq__question:focus-visible {
  outline: 2px solid var(--obpb-accent);
  outline-offset: 2px;
}

.obpb-faq__question::after {
  content: '';
  flex: 0 0 auto;
  width: 0.6rem;
  height: 0.6rem;
  margin-top: 0.35rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.obpb-faq__item[open] .obpb-faq__question::after {
  transform: rotate(-135deg);
}

.obpb-faq__answer {
  padding-bottom: 1.25rem;
}

.obpb-faq__answer > *:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Checklist, callout, quote
   -------------------------------------------------------------------------- */

.obpb-checks {
  margin: 0;
  padding: 0;
  list-style: none;
}

.obpb-checks li {
  position: relative;
  padding-left: 1.875rem;
}

.obpb-checks li + li {
  margin-top: 0.625rem;
}

.obpb-checks li::before {
  position: absolute;
  top: -0.05rem;
  left: 0;
  width: 1.25rem;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--obpb-radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
}

.obpb-checks--do li::before {
  content: '\2713';
  background: #dff0e4;
  color: #17663a;
}

.obpb-checks--dont li::before {
  content: '\2715';
  background: #fbe2e2;
  color: #93231f;
}

.obpb-callout {
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--obpb-accent);
  border-radius: var(--obpb-radius);
  background: var(--obpb-surface-light);
}

.obpb-callout--tip {
  border-left-color: var(--obpb-accent);
  background: var(--obpb-surface-accent);
}

.obpb-callout--info {
  border-left-color: #2a6ebb;
  background: #eef4fb;
}

.obpb-callout--warning {
  border-left-color: #b8801a;
  background: #fdf5e6;
}

.obpb-callout__title {
  margin-bottom: 0.35rem;
  font-size: 1rem;
  font-weight: 600;
}

.obpb-callout > *:last-child {
  margin-bottom: 0;
}

.obpb-quote {
  margin: 0;
}

.obpb-quote__text {
  font-size: clamp(1.125rem, 1rem + 0.8vw, 1.5rem);
  line-height: 1.45;
  text-wrap: pretty;
}

.obpb-quote__text::before {
  content: '\201C';
}

.obpb-quote__text::after {
  content: '\201D';
}

.obpb-quote__source {
  margin-top: 1rem;
  font-size: 0.9375rem;
  color: var(--obpb-text-muted);
}

.obpb-stars {
  color: #e0a300;
  letter-spacing: 0.1em;
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   Cijfers
   -------------------------------------------------------------------------- */

.obpb-stat__value {
  display: block;
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.obpb-stat__label {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.9375rem;
  color: var(--obpb-text-muted);
}

/* --------------------------------------------------------------------------
   Horizontale rail: het alternatief voor een carousel, zonder JavaScript
   -------------------------------------------------------------------------- */

.obpb-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 1fr);
  gap: var(--obpb-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
}

.obpb-rail > * {
  scroll-snap-align: start;
}

.obpb-rail--2 { --obpb-rail-columns: 2; }
.obpb-rail--3 { --obpb-rail-columns: 3; }
.obpb-rail--4 { --obpb-rail-columns: 4; }

@media (min-width: 992px) {
  .obpb-rail {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(var(--obpb-rail-columns, 4), 1fr);
    overflow-x: visible;
  }
}

/* --------------------------------------------------------------------------
   Inhoudsopgave en interne links
   -------------------------------------------------------------------------- */

.obpb-toc {
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--obpb-border);
  border-radius: var(--obpb-radius);
}

.obpb-toc ol {
  margin-bottom: 0;
  padding-left: 1.25rem;
}

.obpb-toc li + li {
  margin-top: 0.35rem;
}

/* Ankerlinks mogen niet onder een sticky header verdwijnen. */
.obpb-section[id] {
  scroll-margin-top: var(--obpb-anchor-offset, 5rem);
}

/* --------------------------------------------------------------------------
   Tabel

   Volledig eigen opmaak. Bootstrap's `.table` zit niet in elke shop-build,
   dus de tabel mag er niet van afhankelijk zijn.
   -------------------------------------------------------------------------- */

.obpb-table-wrap {
  overflow-x: auto;
}

.obpb-table {
  width: 100%;
  min-width: 34rem;
  margin-bottom: 0;
  border-collapse: collapse;
  vertical-align: middle;
}

.obpb-table th,
.obpb-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--obpb-border);
}

.obpb-table thead th {
  font-weight: 600;
  border-bottom-width: 2px;
}

.obpb-table tbody th {
  font-weight: 600;
}

.obpb-table tbody tr:last-child th,
.obpb-table tbody tr:last-child td {
  border-bottom: 0;
}

.obpb-table caption {
  caption-side: bottom;
  padding-top: 0.75rem;
}

.obpb-th--highlight,
.obpb-td--highlight {
  background: var(--obpb-surface-accent);
}

.obpb-th--highlight {
  border-top-left-radius: var(--obpb-radius);
  border-top-right-radius: var(--obpb-radius);
}

/* --------------------------------------------------------------------------
   Reviews, auteur, formulier
   -------------------------------------------------------------------------- */

.obpb-review-summary {
  margin-bottom: 1.75rem;
  font-size: 0.9375rem;
  color: var(--obpb-text-muted);
}

.obpb-review-summary .obpb-stars {
  margin-right: 0.4rem;
}

.obpb-author {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.obpb-author__avatar {
  flex: 0 0 auto;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: var(--obpb-radius-pill);
  object-fit: cover;
}

.obpb-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.obpb-form__row .form-control {
  flex: 1 1 14rem;
}

/* --------------------------------------------------------------------------
   Video
   -------------------------------------------------------------------------- */

.obpb-video {
  border-radius: var(--obpb-radius);
  overflow: hidden;
}

.obpb-video iframe {
  border: 0;
}

/* --------------------------------------------------------------------------
   Beeldband en spacer
   -------------------------------------------------------------------------- */

.obpb-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.obpb-band--sm img { height: clamp(9rem, 18vh, 13rem); }
.obpb-band--md img { height: clamp(12rem, 28vh, 20rem); }
.obpb-band--lg img { height: clamp(16rem, 42vh, 28rem); }

.obpb-spacer--sm { height: var(--obpb-space-sm); }
.obpb-spacer--md { height: var(--obpb-space-md); }
.obpb-spacer--lg { height: var(--obpb-space-lg); }

/* --------------------------------------------------------------------------
   Compacte CTA binnen de leesflow
   -------------------------------------------------------------------------- */

.obpb-cta-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--obpb-radius);
  background: #fff;
  box-shadow: 0 1px 0 var(--obpb-border), 0 8px 24px rgba(0, 0, 0, 0.05);
}

.obpb-cta-inline__title {
  margin-bottom: 0;
  font-size: 1.125rem;
}

.obpb-divider {
  height: 1px;
  border: 0;
  background: var(--obpb-border);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Placeholder voor dynamische content (product rails uit de shop zelf)
   -------------------------------------------------------------------------- */

.obpb-dynamic {
  padding: 2rem;
  border: 1px dashed var(--obpb-border);
  border-radius: var(--obpb-radius);
  text-align: center;
  color: var(--obpb-text-muted);
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   Beweging respecteren
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .obpb-tile--linked .obpb-media img,
  .obpb-faq__question::after {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Per shop

   Er staan hier geen shop-specifieke kleuren. De merkkleur komt uit
   `--color-primary`, die elke shop zelf al definieert, en de accentachtergrond
   is voor alle shops gelijk. Wijkt een shop af, overschrijf daar dan alleen het
   token `--obpb-surface-accent` — nooit de regels hierboven.
   -------------------------------------------------------------------------- */