/* =========================================================
   Shared filter controls for every Views exposed form
   ---------------------------------------------------------
   Checkbox groups (Better Exposed Filters "Checkboxes/Radio
   Buttons" widget) and the Advanced options panel, styled to
   match the Plant Finder on every filter page.

   Load after style.css and plant-finder.css, before
   filter-sidebar.css.
   ========================================================= */

/* ---------- Filters toggle (phones, tablets, narrow windows) ---------- */
/* filter-sidebar.js adds a "Filters" button to each filter panel.
   Except on desktop (wide screen + mouse/trackpad), the panel starts
   collapsed behind it. The media query matches everything that is
   NOT the desktop query in filter-sidebar.css/.js. */

.filters-toggle {
  display: none;
}

@media not all and (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  .filters-toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.8rem 0.95rem;
    border: 1px solid #d7dfd5;
    border-radius: 12px;
    background: #f3f6f1;
    color: #223022;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 1px 2px rgb(0 0 0 / 3%);
  }

  .filters-toggle:hover {
    background: #e9efe6;
  }

  .filters-toggle:focus-visible {
    outline: 2px solid #6f876d;
    outline-offset: 2px;
  }

  .filters-toggle__count:not(:empty) {
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: #486b48;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
  }

  /* Chevron, matching Advanced options */
  .filters-toggle::after {
    content: "";
    flex: 0 0 auto;
    width: 0.9rem;
    height: 0.9rem;
    margin-left: auto;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23486b48' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e") center / contain no-repeat;
    transition: transform 140ms ease;
  }

  .view-filters.is-open > .filters-toggle::after {
    transform: rotate(-180deg);
  }

  /* Collapsed: the panel shrinks to just the button. filter-sidebar.js
     adds .has-filters-toggle when it inserts the button, so if the
     script is missing or fails, the filters simply stay visible. */
  .view-filters.has-filters-toggle:not(.is-open) > form {
    display: none;
  }

  .view-filters.has-filters-toggle:not(.is-open) {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .view-filters.is-open > .filters-toggle {
    margin-bottom: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .filters-toggle::after {
    transition: none;
  }
}

/* ---------- Grouped fields (e.g. Deep Dig Max Height) ---------- */

/* Operator + value fieldsets: legend matches the other field
   labels, and the inner controls fill the width. */
.view-filters fieldset:not(.form-composite) {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.view-filters fieldset:not(.form-composite) > legend {
  float: none;
  width: auto;
  margin: 0 0 0.4rem;
  padding: 0;
  color: #435043;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
}

.view-filters fieldset:not(.form-composite) > .fieldset-wrapper {
  display: grid;
  gap: 0.5rem;
  padding: 0;
}

.view-filters fieldset:not(.form-composite) > .fieldset-wrapper > .form-item {
  width: 100%;
  margin: 0;
}

/* ---------- Checkbox groups ---------- */

/* Drupal wraps each checkbox group in a borderless fieldset. */
.view-filters fieldset.form-composite {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.view-filters fieldset.form-composite > legend {
  float: none;
  width: auto;
  margin: 0 0 0.4rem;
  padding: 0;
  color: #223022;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.view-filters fieldset.form-composite > .fieldset-wrapper {
  padding: 0;
}

.view-filters .bef-checkboxes,
.view-filters .bef-radios {
  display: grid;
  gap: 0.45rem;
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1px solid #d5ddd2;
  border-radius: 12px;
  background: #fff;
  overflow: auto;
}

/* Long lists (9 or more choices, such as County or
   Recommended for) scroll inside their box. */
.view-filters .bef-checkboxes:has(> .form-item:nth-child(9)),
.view-filters .bef-radios:has(> .form-item:nth-child(9)) {
  max-height: 15rem;
}

.view-filters .bef-checkboxes .form-check,
.view-filters .bef-radios .form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding-left: 0;
}

.view-filters .bef-checkboxes .form-check-input,
.view-filters .bef-radios .form-check-input {
  flex: 0 0 auto;
  float: none;
  width: 1rem;
  height: 1rem;
  margin: 0.18rem 0 0;
}

.view-filters .bef-checkboxes .form-check-input:checked,
.view-filters .bef-radios .form-check-input:checked {
  border-color: #486b48;
  background-color: #486b48;
}

.view-filters .bef-checkboxes .form-check-input:focus,
.view-filters .bef-radios .form-check-input:focus {
  border-color: #6f876d;
  box-shadow: 0 0 0 0.2rem rgb(72 107 72 / 25%);
}

.view-filters .bef-checkboxes .form-check-label,
.view-filters .bef-radios .form-check-label {
  display: block;
  margin: 0;
  color: #223022;
  font-size: 0.96rem;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
  cursor: pointer;
}

/* ---------- Advanced options on Deep Dig, Keystone, term pages ---------- */
/* Phones, tablets, and narrow desktop windows. The panel spans
   the full width of the filter box, and the checkbox groups
   inside it flow into as many columns as fit. (The Plant Finder
   keeps its own layout from plant-finder.css.) */

:is(.county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) .view-filters .bef--secondary {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}

:is(.county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) .view-filters .bef--secondary .accordion-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  align-items: start;
}

/* Old hint text about holding Ctrl/Command no longer applies
   once the lists are checkboxes; remove it from the view header
   in Views UI rather than hiding it here. */

/* style.css makes both the <form> and its single .form--inline
   child into grids, so all the controls land in the form grid's
   first column and only fill part of the box on tablets. Let the
   form be a plain block so .form--inline uses the full width. */
:is(.county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) .view-filters form,
:is(.county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) .view-filters .views-exposed-form {
  display: block;
}