/*
 * FFacet (vervanger van FacetWP) — afgestemd op hoe de filters er met FacetWP uitzagen.
 * Los van main.css zodat een wijziging meteen doorkomt (main.css heeft geen versienummer).
 */

/* Knop "Filter": alleen op mobiel, over de volle breedte, zoals de oude FacetWP-flyoutknop. */
.ffacet-flyout-bar {
  display: none;
}

@media (max-width: 780px) {
  .ffacet-flyout-bar {
    display: block;
    margin-bottom: 20px;
  }

  .ffacet-flyout-bar .ffacet-flyout-open {
    display: block;
    width: 100%;
    text-align: left;
  }
}

/*
 * Uitschuifpaneel op mobiel. De kolomklasse van Bootstrap (col-sm-3,
 * position: relative) wint anders van de flyout-CSS van FFacet.
 */
@media (max-width: 780px) {
  aside.ffacet-flyout {
    position: fixed;
    top: 0;
    left: 0;
    max-width: 360px;
    width: 85%;
    height: 100%;
    margin: 0;
    flex: none;
  }
}

/*
 * Op mobiel verbergt de "Extra CSS" van de site alle sidebarwidgets behalve de
 * eerste (dat was de oude FacetWP-knop). In het FFacet-paneel moeten ze zichtbaar zijn.
 */
@media (max-width: 780px) {
  .col-sm-3.ffacet-flyout .widget {
    display: block;
  }
}

/* Filters in de kleuren en maten van de oude FacetWP-weergave. */
.ffacet-flyout .ffacet-choice,
.ffacet-flyout .ffacet-choice:hover,
.ffacet-flyout .ffacet-choice:focus {
  margin-bottom: 4px;
  padding: 0;
  color: #212529;
  font-size: 15px;
  line-height: 24px;
  text-decoration: none;
}

.ffacet-flyout .ffacet-choice:hover .ffacet-label {
  text-decoration: underline;
}

.ffacet-flyout .ffacet-choice .ffacet-count {
  margin-left: 4px;
  font-size: 15px;
  opacity: 1;
}

.ffacet-flyout .ffacet-checkbox::before {
  margin: 5px 6px 0 0;
  border-color: #adb5bd;
  opacity: 1;
}

.ffacet-flyout .ffacet-checkbox.checked::before {
  border-color: #2b57a4;
  background: #2b57a4;
}

.ffacet-flyout .ffacet-toggle {
  margin-top: 4px;
  color: #212529;
  font-size: 15px;
  text-decoration: none;
}

.ffacet-flyout .ffacet-toggle:hover {
  text-decoration: underline;
}