/* =========================================================
   Left-hand filter column on desktop
   ---------------------------------------------------------
   Applies to the views listed in the :is() wrapper below:
     .plant-finder               Plant Finder (home and /plants)
     .county-native-plants-view  Deep Dig
     .view-id-for_wildlife       Keystone Species
     .view-id-taxonomy_term      Term pages (Good for, Tolerates,
                                 County, Scientific Name)
   To add another view, add its wrapper class to every :is()
   list here and to FILTER_SIDEBAR_VIEWS in js/filter-sidebar.js.

   "Desktop" means a wide screen driven by a mouse or
   trackpad. The hover/pointer tests keep every iPad and
   iPhone on the existing layout, including a 12.9" iPad Pro
   in landscape (1366px wide), because touch screens report
   hover: none and pointer: coarse. Keep this media query in
   sync with DESKTOP_QUERY in js/filter-sidebar.js.

   The filter column scrolls with the page. Apply and Reset stay
   pinned to the bottom of the window, and filter-sidebar.js
   collapses checkbox groups until the column fits the window.

   Load last: after plant-finder.css, details-accordion.css,
   and filter-controls.css.
   ========================================================= */

@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {

  /* ---------- Page grid: filters left, results right ---------- */

  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    /* Header, results, pager, footer, more link. The results row
       (1fr) absorbs extra height when the filter column is taller
       than the results, so no gaps open up between the others. */
    grid-template-rows: auto 1fr auto auto auto;
    column-gap: 2rem;
    align-items: start;
  }

  /* Header, results, pager, footer: right-hand column. */
  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) > :not(.view-filters) {
    grid-column: 2;
    min-width: 0;
  }

  /* Wide tables scroll sideways instead of overflowing. */
  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) > .view-content {
    overflow-x: auto;
  }

  /* Filters: left-hand column, from the top row down. The column
     scrolls with the page (no inner scroll area), so the mouse wheel
     never gets caught inside it. Apply and Reset stay in view at the
     bottom of the window (see .form-actions below), and long filter
     groups collapse (see "Collapsible filter groups"). */
  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) > .view-filters {
    grid-column: 1;
    grid-row: 1 / -1;
    margin-bottom: 2rem;
  }

  /* ---------- Stack the form controls in one column ---------- */

  /* The form holds a single .form--inline wrapper, so only that
     wrapper becomes the grid. */
  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) .view-filters form,
  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) .view-filters .views-exposed-form,
  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) .view-filters .bef-exposed-form {
    display: block;
  }

  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) .view-filters .form--inline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr);
    gap: 0.9rem 0.75rem;
    align-items: end;
  }

  /* Every control spans both columns... */
  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) .view-filters .form--inline > *,
  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) .view-filters .form--inline > .form-item,
  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) .view-filters .form--inline > .js-form-item,
  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) .view-filters .bef--secondary,
  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) .view-filters .form-actions {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    margin-top: 0;
    justify-self: stretch;
  }

  /* ...except Sort by and Order, which share a row. */
  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) .view-filters .form--inline > .form-item-sort-by {
    grid-column: 1 / 2;
    min-width: 0;
  }

  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) .view-filters .form--inline > .form-item-sort-order {
    grid-column: 2 / 3;
    min-width: 0;
  }

  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) .view-filters .form-control,
  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) .view-filters .form-select {
    width: 100%;
  }

  /* Apply and Reset side by side, filling the column. */
  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) .view-filters .form-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    width: 100%;
    min-width: 0;
    padding-top: 0.25rem;
  }

  /* Keep Apply and Reset pinned to the bottom of the browser window
     whenever the filter column is on screen. The negative margins and
     padding match the .view-filters padding (16px 20px) so the bar
     runs edge to edge. */
  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) .view-filters .form-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    width: auto;
    margin: 0 -20px -16px;
    padding: 0.75rem 20px 16px;
    background: rgb(248 250 247);
    border-top: 1px solid #e4e9e1;
    border-radius: 0 0 13px 13px;
    box-shadow: 0 -6px 12px -8px rgb(31 46 32 / 18%);
  }

  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) .view-filters .form-actions .form-submit,
  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) .view-filters .form-actions .button,
  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) .view-filters .form-actions input[type="submit"] {
    width: 100%;
    margin: 0;
    padding: 0.65rem 0.5rem;
  }

  /* ---------- Advanced options always expanded ---------- */
  /* filter-sidebar.js opens the panel on desktop and adds
     .filters-expanded. Until it runs (or if it fails), the
     normal collapsible toggle stays usable. */

  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term).filters-expanded .bef--secondary details.accordion-item {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term).filters-expanded .bef--secondary details.accordion-item > summary {
    display: none;
  }

  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term).filters-expanded .bef--secondary .accordion-body {
    display: grid;
    gap: 0.9rem;
    padding: 0;
  }

  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term).filters-expanded .bef--secondary fieldset {
    margin: 0;
  }

  /* Show every checkbox list in full instead of a scroll box, so
     there is only one scrollbar (the page). Long lists such as County
     collapse instead (filter-sidebar.js). The :has() selectors match
     the long-list rule in filter-controls.css so this one wins. */
  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) .view-filters .bef-checkboxes,
  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) .view-filters .bef-checkboxes:has(> .form-item:nth-child(9)),
  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) .view-filters .bef-radios:has(> .form-item:nth-child(9)) {
    max-height: none;
    overflow: visible;
  }

  /* ---------- Compact Yes/No dropdowns in Advanced options ---------- */
  /* Label and dropdown share one row (e.g. "Evergreen?  - Any -"),
     which roughly halves their height on Deep Dig. */

  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) .view-filters .bef--secondary .js-form-type-select {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7.5rem;
    align-items: center;
    gap: 0.6rem;
    padding-bottom: 0.15rem;
    border-bottom: 1px solid #e4e9e1;
  }

  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) .view-filters .bef--secondary .js-form-type-select > label {
    margin: 0;
    color: #223022;
    font-weight: 700;
    line-height: 1.3;
  }

  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) .view-filters .bef--secondary .js-form-type-select > .form-select {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
  }

  /* Max Height's operator and value fields belong to a fieldset;
     leave those stacked. */
  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) .view-filters .bef--secondary fieldset .js-form-type-select {
    display: block;
    padding-bottom: 0;
    border-bottom: 0;
  }

  /* ---------- Collapsible filter groups ---------- */
  /* filter-sidebar.js puts a button inside each checkbox group's
     legend. Click it to show or hide the choices; the badge shows
     how many are ticked. */

  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) .view-filters fieldset.filter-group {
    padding-bottom: 0.15rem;
    border-bottom: 1px solid #e4e9e1;
  }

  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) .view-filters fieldset.filter-group > legend {
    width: 100%;
    margin-bottom: 0;
  }

  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) .view-filters .filter-group__toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin: 0;
    padding: 0.3rem 0.1rem 0.45rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #223022;
    font: inherit;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
  }

  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) .view-filters .filter-group__toggle:hover {
    color: #2f623a;
  }

  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) .view-filters .filter-group__toggle:focus-visible {
    outline: 2px solid #6f876d;
    outline-offset: 2px;
  }

  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) .view-filters .filter-group__count:not(:empty) {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: #486b48;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
  }

  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) .view-filters .filter-group__toggle::after {
    content: "";
    flex: 0 0 auto;
    width: 0.85rem;
    height: 0.85rem;
    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;
  }

  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) .view-filters .filter-group__toggle[aria-expanded="true"]::after {
    transform: rotate(-180deg);
  }

  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) .view-filters fieldset.filter-group > .fieldset-wrapper {
    padding-top: 0.35rem;
    padding-bottom: 0.6rem;
  }

  :is(.plant-finder, .county-native-plants-view, .view-id-for_wildlife, .view-id-taxonomy_term) .view-filters fieldset.filter-group.is-collapsed > .fieldset-wrapper {
    display: none;
  }

  /* ---------- Results grid inside the narrower column ---------- */

  .plant-finder .view-content {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

/* Phones, tablets, and narrow windows: groups are never collapsed,
   and the legend button looks and acts like a plain heading. */
@media not all and (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  .view-filters .filter-group__toggle {
    all: unset;
    display: inline;
  }

  .view-filters .filter-group__count {
    display: none;
  }
}

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