/**
 * FAQ Markdown Accordion — Bootstrap 5 Style
 *
 * Mirrors Bootstrap 5's .accordion component visual language using
 * Bootstrap 5 CSS custom properties so it integrates seamlessly whether
 * or not Bootstrap's own accordion JS is present.
 *
 * Uses native <details>/<summary> — no JavaScript required.
 * Supports Bootstrap 5 dark mode via [data-bs-theme="dark"] and
 * prefers-color-scheme as a fallback.
 *
 * Bootstrap 5 variable reference:
 * https://getbootstrap.com/docs/5.3/components/accordion/#css
 */

/* ─── Light mode tokens (Bootstrap 5 defaults) ──────────────────────────── */
:root {
  --faq-bg:                    var(--bs-accordion-bg, #ffffff);
  --faq-color:                 var(--bs-accordion-color, var(--bs-body-color, #212529));
  --faq-border-color:          var(--bs-accordion-border-color, rgba(0,0,0,.125));
  --faq-border-radius:         var(--bs-accordion-border-radius, var(--bs-border-radius, 0.375rem));
  --faq-border-width:          var(--bs-accordion-border-width, var(--bs-border-width, 1px));
  --faq-btn-bg:                var(--bs-accordion-btn-bg, var(--bs-accordion-bg, #ffffff));
  --faq-btn-color:             var(--bs-accordion-btn-color, var(--bs-body-color, #212529));
  --faq-btn-focus-box-shadow:  var(--bs-accordion-btn-focus-box-shadow, 0 0 0 0.25rem rgba(13,110,253,.25));
  --faq-btn-padding-x:         var(--bs-accordion-btn-padding-x, 1.25rem);
  --faq-btn-padding-y:         var(--bs-accordion-btn-padding-y, 1rem);
  --faq-btn-icon:              url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --faq-btn-icon-active:       url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230d6efd'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --faq-btn-icon-width:        var(--bs-accordion-btn-icon-width, 1.25rem);
  --faq-active-bg:             var(--bs-accordion-active-bg, #e7f1ff);
  --faq-active-color:          var(--bs-accordion-active-color, #0c63e4);
  --faq-body-padding-x:        var(--bs-accordion-body-padding-x, 1.25rem);
  --faq-body-padding-y:        var(--bs-accordion-body-padding-y, 1rem);
  --faq-body-color:            var(--bs-body-color, #212529);
  --faq-transition:            var(--bs-transition-base, all .2s ease-in-out);
  --faq-flush-border-color:    var(--bs-accordion-flush-border-color, var(--faq-border-color));
}

/* ─── Dark mode tokens — Bootstrap 5.3 [data-bs-theme="dark"] ───────────── */
[data-bs-theme="dark"] {
  --faq-bg:                    var(--bs-accordion-bg, #212529);
  --faq-color:                 var(--bs-accordion-color, var(--bs-body-color, #dee2e6));
  --faq-border-color:          var(--bs-accordion-border-color, rgba(255,255,255,.125));
  --faq-btn-bg:                var(--bs-accordion-btn-bg, #212529);
  --faq-btn-color:             var(--bs-accordion-btn-color, var(--bs-body-color, #dee2e6));
  --faq-btn-focus-box-shadow:  0 0 0 0.25rem rgba(110,168,254,.25);
  --faq-btn-icon:              url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dee2e6'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --faq-btn-icon-active:       url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236ea8fe'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --faq-active-bg:             var(--bs-accordion-active-bg, #031633);
  --faq-active-color:          var(--bs-accordion-active-color, #6ea8fe);
  --faq-body-color:            var(--bs-body-color, #dee2e6);
}

/* ─── prefers-color-scheme fallback (when data-bs-theme is not set) ──────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme]) {
    --faq-bg:              #212529;
    --faq-color:           #dee2e6;
    --faq-border-color:    rgba(255,255,255,.125);
    --faq-btn-bg:          #212529;
    --faq-btn-color:       #dee2e6;
    --faq-btn-icon:        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dee2e6'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --faq-btn-icon-active: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236ea8fe'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --faq-active-bg:       #031633;
    --faq-active-color:    #6ea8fe;
    --faq-body-color:      #dee2e6;
  }
}

/* ─── Accordion wrapper ──────────────────────────────────────────────────── */
.faq-list {
  --bs-accordion-color:         var(--faq-color);
  --bs-accordion-bg:            var(--faq-bg);
  --bs-accordion-border-color:  var(--faq-border-color);

  display: block;
  margin-block: 1.5rem;
  /* Match Bootstrap's .accordion border-radius wrapping */
  border-radius: var(--faq-border-radius);
}

/* ─── Individual item (.accordion-item equivalent) ───────────────────────── */
.faq-item {
  color:            var(--faq-color);
  background-color: var(--faq-bg);
  border:           var(--faq-border-width) solid var(--faq-border-color);
  /* Stack items flush like Bootstrap accordion */
  margin-bottom: -1px; /* collapse adjacent borders */
  transition:       var(--faq-transition);
}

/* Round top of first item */
.faq-item:first-of-type {
  border-top-left-radius:  var(--faq-border-radius);
  border-top-right-radius: var(--faq-border-radius);
}

/* Round bottom of last item */
.faq-item:last-of-type {
  border-bottom-left-radius:  var(--faq-border-radius);
  border-bottom-right-radius: var(--faq-border-radius);
  margin-bottom: 0;
}

/* Open item gets full rounded bottom */
.faq-item[open] {
  border-bottom-left-radius:  var(--faq-border-radius);
  border-bottom-right-radius: var(--faq-border-radius);
  margin-bottom: 0;
  /* Separate from the next item to show radius cleanly */
  margin-bottom: calc(var(--faq-border-width) * 2);
  box-shadow: 0 0 0 1px var(--faq-border-color);
}

/* ─── Summary / button (.accordion-button equivalent) ───────────────────── */
.faq-question {
  /* Layout */
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  width:           100%;
  padding:         var(--faq-btn-padding-y) var(--faq-btn-padding-x);

  /* Typography */
  font-size:   1rem;
  font-weight: 400;
  line-height: 1.5;
  color:       var(--faq-btn-color);
  text-align:  left;

  /* Surface */
  background-color: var(--faq-btn-bg);
  border: 0;
  border-radius: 0;

  /* Remove native marker */
  list-style: none;
  cursor: pointer;
  user-select: none;

  /* Chevron icon — right side, matches Bootstrap's ::after icon */
  background-image:    var(--faq-btn-icon);
  background-repeat:   no-repeat;
  background-size:     var(--faq-btn-icon-width);
  background-position: right var(--faq-btn-padding-x) center;
  padding-right:       calc(var(--faq-btn-padding-x) * 2.5);

  transition: color .15s ease-in-out,
              background-color .15s ease-in-out,
              box-shadow .15s ease-in-out,
              border-radius .15s ease;
}

/* Remove WebKit default marker */
.faq-question::-webkit-details-marker {
  display: none;
}

/* Focus ring — matches Bootstrap's button focus */
.faq-question:focus-visible {
  z-index: 3;
  outline: 0;
  box-shadow: var(--faq-btn-focus-box-shadow);
}

/* Hover */
.faq-question:hover {
  z-index: 2;
  color: var(--faq-btn-color);
  background-color: var(--faq-bg);
  /* Slightly tinted — same as Bootstrap's hover via filter */
  filter: brightness(0.96);
}

/* Active / open state — mirrors Bootstrap's .accordion-button:not(.collapsed) */
.faq-item[open] > .faq-question {
  color:               var(--faq-active-color);
  background-color:    var(--faq-active-bg);
  background-image:    var(--faq-btn-icon-active);
  /* Rotate chevron 180° when open */
  background-image:    var(--faq-btn-icon-active);
  box-shadow:          inset 0 calc(var(--faq-border-width) * -1) 0 var(--faq-border-color);

  /* Flatten bottom corners when open and body is visible below */
  border-bottom-left-radius:  0;
  border-bottom-right-radius: 0;
}

/* Rotate the chevron SVG when open */
.faq-item[open] > .faq-question {
  /* Override background with rotated chevron by re-applying as transform via wrapper */
  transform: none; /* rotation handled via icon swap above */
}

/* ─── Answer body (.accordion-body equivalent) ───────────────────────────── */
.faq-answer {
  padding: var(--faq-body-padding-y) var(--faq-body-padding-x);
  color:   var(--faq-body-color);
}

.faq-answer p {
  margin: 0;
  font-size:   1rem;
  line-height: 1.5;
  color:       inherit;
  max-width:   72ch;
}

/* ─── Flush variant — add .faq-list--flush to remove outer border/radius ── */
.faq-list--flush > .faq-item {
  border-right:  0;
  border-left:   0;
  border-radius: 0;
}

.faq-list--flush > .faq-item:first-of-type {
  border-top: 0;
}

.faq-list--flush > .faq-item:last-of-type {
  border-bottom: 0;
  margin-bottom: 0;
}

.faq-list--flush > .faq-item[open] {
  box-shadow: none;
  margin-bottom: 0;
}

/* ─── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .faq-item,
  .faq-question {
    transition: none;
  }
}