/*
 * "Uitgebreid zoeken op maatregelen" als boom. Zie class-maatregelenboom.php.
 *
 * ## Waar dit in moet passen
 *
 * Een kolom van zo'n 280px: de zijbalk op desktop (293px) en de FacetWP-flyout
 * op mobiel (280px). Beide hebben al eigen regels voor .facetwp-checkbox, en
 * daarmee zag de boom er rommelig uit (1 oktober 2026):
 *
 * - de flyout maakt elke regel een flexrij van minstens 44px met het vinkje
 *   verticaal in het midden, dus bij een naam over twee regels stond het
 *   vinkje ertussenin;
 * - naam en aantal waren twee losse flexitems, dus "Gebruikte materialen"
 *   brak af terwijl "(234)" erachter bleef hangen;
 * - de zijbalk zet `padding: 0 30px` met een ID-selector uit YOOtheme
 *   (`#template-… .facetwp-checkbox`), die van geen enkele klasseselector
 *   verliest. Vandaar de !important op padding en achtergrondpositie, en
 *   alleen daar.
 *
 * ## Het ontwerp
 *
 * Een compacte boom zonder iconen, naar een voorbeeld van Imre (1 oktober
 * 2026): het aantal klein en grijs direct achter de naam, het vinkje bij de
 * eerste regel, en per niveau een dunne hulplijn onder het vinkje van de
 * ouder. Zo blijft de boom leesbaar met weinig inspringing.
 */

.facetwp-facet .ndhr-maatregelenboom {
  --mb-tekst: #2b2724;
  --mb-zacht: #8a8178;
  --mb-lijn: #e4dccf;
  --mb-stap: 18px;
}

/* Kop: de hoofdcategorie, geen vinkje. */
.facetwp-facet .ndhr-maatregelenboom .ndhr-maatregel-kop.ndhr-niveau-1 {
  margin: 22px 0 4px;
  padding: 0 0 6px;
  border-bottom: 1px solid var(--mb-lijn);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5c544c;
}

.facetwp-facet .ndhr-maatregelenboom > .ndhr-maatregel-kop.ndhr-niveau-1:first-child {
  margin-top: 0;
}

/* Elke keuze: één rij, vinkje bij de eerste regel. */
.facetwp-facet .ndhr-maatregelenboom .facetwp-checkbox {
  position: relative;
  display: block;
  min-height: 0;
  margin: 0;
  padding: 5px 0 5px 24px !important;
  background-position: 0 8px !important;
  font-size: 15px;
  line-height: 20px;
  color: var(--mb-tekst);
  /* De flyout zet nowrap; zonder dit liepen lange namen buiten beeld. */
  white-space: normal;
  overflow-wrap: anywhere;
}

.facetwp-facet .ndhr-maatregelenboom .facetwp-display-value {
  display: inline;
  padding-right: 4px;
}

.facetwp-facet .ndhr-maatregelenboom .facetwp-counter {
  margin-left: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--mb-zacht);
  opacity: 1;
  font-variant-numeric: tabular-nums;
}

/* Dieper: inspringen, met een hulplijn per bovenliggend niveau. De regels
 * sluiten op elkaar aan (margin 0), dus de lijnen lopen door. */
.facetwp-facet .ndhr-maatregelenboom .ndhr-niveau-3 { margin-left: var(--mb-stap); }
.facetwp-facet .ndhr-maatregelenboom .ndhr-niveau-4 { margin-left: calc(var(--mb-stap) * 2); }
.facetwp-facet .ndhr-maatregelenboom .ndhr-niveau-5 { margin-left: calc(var(--mb-stap) * 3); }

.facetwp-facet .ndhr-maatregelenboom .ndhr-niveau-3::before,
.facetwp-facet .ndhr-maatregelenboom .ndhr-niveau-4::before,
.facetwp-facet .ndhr-maatregelenboom .ndhr-niveau-5::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--mb-stap) * -1 + 7px);
  width: 1px;
  background: var(--mb-lijn);
}

.facetwp-facet .ndhr-maatregelenboom .ndhr-niveau-4::before {
  box-shadow: calc(var(--mb-stap) * -1) 0 0 var(--mb-lijn);
}

.facetwp-facet .ndhr-maatregelenboom .ndhr-niveau-5::before {
  box-shadow:
    calc(var(--mb-stap) * -1) 0 0 var(--mb-lijn),
    calc(var(--mb-stap) * -2) 0 0 var(--mb-lijn);
}

/* Een tussenliggende term zonder eigen woningen: tekst op de plek van een vinkje. */
.facetwp-facet .ndhr-maatregelenboom .ndhr-maatregel-kop:not(.ndhr-niveau-1) {
  position: relative;
  padding: 5px 0 5px 24px;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  color: var(--mb-tekst);
}

/* Op een aanraakscherm wat ruimer, voor een vinger in plaats van een muis. */
@media (pointer: coarse) {
  .facetwp-facet .ndhr-maatregelenboom .facetwp-checkbox {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    background-position: 0 11px !important;
  }
}