/* =========================================================
   Site-wide collapsible sections (Drupal <details> elements)
   ---------------------------------------------------------
   The Bootstrap 5 base theme renders every Drupal "details"
   element as:
     <details class="accordion-item">
       <summary class="accordion-header accordion-button">
   Bootstrap styles .accordion-button as "open" (blue fill,
   caret pointing up) unless it also has a .collapsed class.
   Native <details> never gets that class, so the button
   always looked open. These rules use the [open] attribute
   instead and apply the site's green palette.
   ========================================================= */

.accordion {
  --bs-accordion-color: #223022;
  --bs-accordion-bg: #fff;
  --bs-accordion-border-color: #d7dfd5;
  --bs-accordion-border-width: 1px;
  --bs-accordion-border-radius: 12px;
  --bs-accordion-inner-border-radius: 11px;
  --bs-accordion-btn-padding-x: 0.95rem;
  --bs-accordion-btn-padding-y: 0.8rem;
  --bs-accordion-btn-color: #223022;
  --bs-accordion-btn-bg: #f3f6f1;
  --bs-accordion-active-color: #223022;
  --bs-accordion-active-bg: #f3f6f1;
  --bs-accordion-btn-icon: 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");
  --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
  --bs-accordion-btn-icon-width: 0.9rem;
  --bs-accordion-btn-icon-transition: transform 140ms ease;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgb(72 107 72 / 25%);
  --bs-accordion-body-padding-x: 0.95rem;
  --bs-accordion-body-padding-y: 0.75rem;
}

details.accordion-item {
  overflow: hidden;
  border-radius: var(--bs-accordion-border-radius);
  box-shadow: 0 1px 2px rgb(0 0 0 / 3%);
}

details.accordion-item > summary.accordion-button {
  gap: 0.75rem;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  list-style: none;
  box-shadow: none;
}

/* Hide the browser's own disclosure triangle (Safari) */
details.accordion-item > summary.accordion-button::-webkit-details-marker {
  display: none;
}

/* Closed: caret points down */
details.accordion-item:not([open]) > summary.accordion-button::after {
  background-image: var(--bs-accordion-btn-icon);
  transform: none;
}

/* Open: caret points up, divider under the header */
details.accordion-item[open] > summary.accordion-button {
  border-bottom: 1px solid #e4e9e1;
}

details.accordion-item[open] > summary.accordion-button::after {
  transform: rotate(-180deg);
}

details.accordion-item > summary.accordion-button:hover {
  background-color: #e9efe6;
}

details.accordion-item > summary.accordion-button:focus {
  box-shadow: none;
}

details.accordion-item > summary.accordion-button:focus-visible {
  outline: 2px solid #6f876d;
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  details.accordion-item > summary.accordion-button::after {
    transition: none;
  }
}

/* The Bootstrap wrapper <div class="accordion"> around a BEF
   "Advanced options" panel should not draw a second box;
   the <details> element above already carries the frame. */
.view-filters .bef--secondary.accordion {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  align-self: end;
}

/* Bootstrap's .form-wrapper.accordion .accordion-item adds
   margin: 1rem !important, which knocks the toggle out of line
   with the other filter controls. */
.view-filters .form-wrapper.accordion > details.accordion-item {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}