/* ==========================================================================
   FAQ Accordion — single collapsible panel (custom Bricks element)
   Colors reference the EuroAthlete Bricks palette vars with hex fallbacks.
   Animation: grid-template-rows 0fr<->1fr (works for any content height).
   Collapse only kicks in once the site JS layer is active (html.js-animate),
   so content stays visible in the builder and with JS disabled.
   ========================================================================== */

.faq-accordion {
  --faqacc-transition: 300ms;
  --faqacc-navy: var(--blue, #282f41);
  --faqacc-icon-bg: #dedafe;
  --faqacc-icon-hover-bg: var(--light-violet, #afa5ff);
  display: block;
  width: 100%;
  align-self: stretch; /* fill parent flex containers (Bricks section/container) */
  margin-bottom: 5rem;
}

/* --- Header / clickable bar ------------------------------------------------ */
.faq-accordion__heading {
  margin: 0; /* keep the theme heading font; just drop default spacing */
}

.faq-accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: 100%;
  margin: 0;
  padding: 0 0 1rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--faqacc-navy);
  font: inherit;
  color: var(--faqacc-navy);
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.faq-accordion__header:focus-visible {
  outline: 2px solid var(--faqacc-navy);
  outline-offset: 4px;
}

.faq-accordion__title {
  font-size: clamp(2rem, 1.2rem + 3.2vw, 3.25rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--faqacc-navy);
}

/* --- Icon circle + chevron ------------------------------------------------- */
.faq-accordion__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--faqacc-icon-bg);
  color: var(--faqacc-navy);
  font-size: 1.05rem;
  transition: background-color var(--faqacc-transition) ease;
}

.faq-accordion__header:hover .faq-accordion__icon {
  background: var(--faqacc-icon-hover-bg);
}

.faq-accordion__icon svg {
  display: block;
  transform: rotate(90deg); /* default (no JS = open) → points down */
  transition: transform var(--faqacc-transition) ease;
}

/* --- Panel animation ------------------------------------------------------- */
.faq-accordion__panel {
  display: grid;
  grid-template-rows: 1fr; /* open by default (no JS / builder) */
  /* Pin to a single full-width column — otherwise the implicit grid column is
     content-sized and the dropped content won't span the full element width. */
  grid-template-columns: minmax(0, 1fr);
  transition: grid-template-rows var(--faqacc-transition) ease;
}

.faq-accordion__content {
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}

.faq-accordion__inner {
  width: 100%;
  padding-top: 1.75rem;
}

/* --- JS-enhanced states (html.js-animate set before first paint) ----------- */
.js-animate .faq-accordion__panel {
  grid-template-rows: 0fr;
}
.js-animate .faq-accordion.is-open .faq-accordion__panel {
  grid-template-rows: 1fr;
}

.js-animate .faq-accordion__icon svg {
  transform: rotate(0deg); /* JS default = closed → points right */
}
.js-animate .faq-accordion.is-open .faq-accordion__icon svg {
  transform: rotate(90deg); /* open → points down */
}

@media (prefers-reduced-motion: reduce) {
  .faq-accordion__panel,
  .faq-accordion__icon svg {
    transition: none;
  }
}