/* Features - Accordion Start */
/* ------------------------------------------------*/
.db-accordion {
  position: relative;
}
@media only screen and (min-width: 1200px) and (hover) and (prefers-reduced-motion: no-preference) {
  .db-accordion > .db-accordion__item {
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
  }
  .db-accordion:hover > .db-accordion__item:not(:hover) {
    opacity: 0.2;
  }
}

.db-accordion__item {
  position: relative;
  cursor: pointer;
  margin-top: -2px;
}
.db-accordion__item:first-of-type {
  margin-top: 0;
}

.db-accordion__divider {
  position: relative;
  width: 100%;
  height: 2px;
  background-color: var(--st-bright);
}

.db-accordion__content {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
     -moz-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0 0 3.6rem 0;
  overflow: hidden;
  display: none;
}
@media only screen and (min-width: 1200px) {
  .db-accordion__content {
    padding: 0 0 3.4rem 0;
  }
}

.db-accordion__title {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
     -moz-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 3rem 0;
}
@media only screen and (min-width: 1200px) {
  .db-accordion__title {
    padding: 3rem 0 3.4rem 0;
  }
}

.db-accordion__arrow {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 2.2rem;
  line-height: 1.2;
  color: var(--t-bright);
  -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
  will-change: transform;
  -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
  transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
  -moz-transition: transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
  transition: transform var(--_animspeed-medium) var(--_animbezier);
  transition: transform var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium) var(--_animbezier), -moz-transform var(--_animspeed-medium) var(--_animbezier);
}
@media only screen and (min-width: 1200px) {
  .db-accordion__arrow {
    font-size: 3rem;
  }
}

.accordion-rotate {
  -webkit-transform: rotate(135deg);
     -moz-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
          transform: rotate(135deg);
}

/* ─────────────────────────────────────────────────────────────────────
 * FAQ page alignment
 * ---------------------------------------------------------------------
 * The FAQ view lives in `.db-container.grid-container` (inset clamp, max
 * 7.5rem). The site header (.db-header `left`) and footer both use a fixed
 * 3 / 6 / 9rem inset. Left alone, the FAQ title and accordion sat ~1.5rem
 * off the header logo and the accordion stopped short of the footer's right
 * edge. `.db-faq-page` (wrapper in modules/FAQ/views/index.php) scopes these
 * overrides so the title + accordion snap onto the same 3/6/9rem grid — left
 * edge aligned with the header logo and footer-left column, right edge aligned
 * with the footer-right column. Columns are full-width (col-12) in the view.
 * ───────────────────────────────────────────────────────────────────── */
.db-faq-page .db-container.grid-container {
  padding-inline: 3rem;
}
@media only screen and (min-width: 768px) {
  .db-faq-page .db-container.grid-container {
    padding-inline: 6rem;
  }
}
@media only screen and (min-width: 1600px) {
  .db-faq-page .db-container.grid-container {
    padding-inline: 9rem;
  }
}

/* The inner-headline title carries a built-in `position:relative; left:10px`
   indent (basic-styles.css). Remove it here so the FAQ title sits flush with
   the header logo and the accordion's left edge. */
.db-faq-page .inner-headline__title {
  left: 0;
}

/* ------------------------------------------------*/
/* Features - Accordion End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/

/* ─────────────────────────────────────────────────────────────────────
 * Accessible accordion trigger (v9.0+)
 *
 * The FAQ markup wraps the question text in a real <button> inside the
 * <h3 class="db-accordion__title"> so screen readers announce expanded
 * state correctly. This resets the browser button chrome and re-applies
 * the flex layout that used to live on .db-accordion__title.
 * ───────────────────────────────────────────────────────────────────── */
.db-accordion__trigger {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.db-accordion__trigger:focus { outline: none; }
.db-accordion__trigger:focus-visible {
  outline: 2px solid var(--t-bright, currentColor);
  outline-offset: 4px;
}

/* Title is now a layout passthrough — the <button> child handles flex. */
.db-accordion__title:has(.db-accordion__trigger) {
  display: block;
}