/* ==========================================================================
   parts/accordion.css — parts/accordion.php (live S4 Bricks nested accordion, skin .wlp-accordion).
   Live rules: docs/scout/used-css.css (.brxe-accordion-nested, .wlp-accordion*, #brxe-gmtivx…),
   measurements: docs/scout/SECTIONS-B.md §3.3–3.4, BEHAVIOUR.md §2.4.
   The title <button> (DI-D14) is reset so the row renders exactly like live's div[role=button]:
     row = 10px + max(icon line box 32.25px, h4 line) + 10px = 52.25px (+1px top border ≤767).
   Mobile-first; the skin's borders exist only below 768px (live max-width: 767px).
   ========================================================================== */

.accordion {
  --accordion-border: var(--wfx-border);            /* Bricks --bricks-border-color #dddedf */
  width: 100%;
}

.accordion__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
}

.accordion__heading {
  width: 100%;
  margin: 0;
  text-align: left;
}

/* The row: live .accordion-title-wrapper (flex row, centred, --content-gap, 10px block padding). */
.accordion__title {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--content-gap);
  width: 100%;
  min-height: 51.42px;                 /* live .wlp-accordion .accordion-title-wrapper (measured one-off) */
  margin: 0;
  padding: 1rem 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;                       /* the h4's Nimbus 700 / --h4 / calc(4px + 2ex) */
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.accordion__label {
  min-width: 0;
}

/* Icon box: live div.brxe-div holding the themify <i> (26px, line-height 1) in a body-font line box
   (Inter 16px / 27.25px). The <i> sits 2px below the baseline, which grows that line box to live's
   32.25px (measured); the icon's top stays on the box top, as live. */
.accordion__icon {
  display: block;
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: var(--text-m);
  font-weight: 400;
  line-height: var(--text-line-height);
}
.accordion__icon .icon {
  font-size: 2.6rem;
  vertical-align: -2px;                /* measured: gives live's 32.25px icon line box */
}
.accordion__icon .accordion__icon-opened { display: none; }
.accordion__title[aria-expanded="true"] .accordion__icon-closed { display: none; }
.accordion__title[aria-expanded="true"] .accordion__icon-opened { display: block; }   /* live: display:block when open */

/* Panel: live .accordion-content-wrapper (display block when open, --space-s bottom margin). The JS tweens
   height + margin over 200 ms and leaves no inline style behind. */
.accordion__panel {
  width: 100%;
  margin-bottom: var(--space-s);
  padding: 0;
}

.accordion__text {
  font-size: var(--text-s);
  text-align: left;
}

/* No JS: every panel stays open (content is never locked behind a script). */
.no-js .accordion__panel[hidden] { display: block !important; }
.no-js .accordion__icon .accordion__icon-closed { display: none; }
.no-js .accordion__icon .accordion__icon-opened { display: block; }

/* ---- Skin: wlp (live .wlp-accordion) --------------------------------------------------------- */
.accordion--wlp .accordion__label { color: var(--secondary); }   /* the icon keeps the heading/text colour (#042E4A), as live */

/* live @media (max-width: 767px): a hairline above every title and below the list */
.accordion--wlp { border-bottom: 1px solid var(--accordion-border); }
.accordion--wlp .accordion__title { border-top: 1px solid var(--accordion-border); }

@media (min-width: 768px) {
  .accordion--wlp { border-bottom: 0; }
  .accordion--wlp .accordion__title { border-top: 0; }
}

/* ---- Skin: faq (live .wlp-faq-accordion, /intro-to-racehorse-ownership/ #brxe-pdhvwv) -----------------
   docs/scout/r2/preview/COMPONENTS.md §1.6 (validated to 0.01 px against live at 768 / 1440). Used by blocks/faq
   (heading_level h3). Scoped to .accordion--faq: the homepage's .accordion--wlp is untouched. The row order
   (arrow, label, icon) comes from the button's ::before + `order` on the icon; the DOM stays icon → label. */
.accordion--faq .accordion__item {
  align-items: center;                          /* title + panel max 112rem, centred; the border spans the item */
  gap: 0;
  border-top: 1px solid var(--secondary);       /* every item, every width; nothing under the last one */
}
.accordion--faq .accordion__heading { max-width: 112rem; }   /* the h3; font = Nimbus 700 --h3 from base.css */
.accordion--faq .accordion__title {
  min-height: 72.42px;                          /* live #brxe-pdhvwv (measured one-off) */
  padding: 2.4rem 0;                            /* live ≤478 */
  text-transform: uppercase;
}
.accordion--faq .accordion__title::before {     /* live .wlp-faq-accordion__title:before */
  content: "";
  flex: 0 0 40px;
  height: 20px;
  background: url("../../media/icons/arrow-right.svg") center / contain no-repeat;
}
.accordion--faq .accordion__label { flex: 1 1 auto; color: var(--secondary); }   /* h3 text #0F202D; icon keeps #042E4A */
.accordion--faq .accordion__icon {                         /* icon right, top-aligned with the heading's first line */
  order: 2;
  align-self: flex-start;
  margin-left: auto;
}
.accordion--faq .accordion__panel { max-width: 112rem; }   /* width 100% + margin-bottom --space-s from the base rule */
.accordion--faq .accordion__text {                         /* padding lives here, not on the tweened panel, so the  */
  padding: 0 7rem 2rem;                                    /* existing height + margin-bottom tween needs no change  */
  font-size: var(--text-m);
}
.accordion--faq .accordion__text > * + * { margin-top: var(--paragraph-spacing); }   /* live .brxe-text > * + p: 1em = 16px */
.accordion--faq .accordion__text a { --link-color: var(--base); --link-color-hover: var(--primary); text-decoration: underline; }
@media (min-width: 479px) {
  .accordion--faq .accordion__title { padding-block: 3.6rem; }
  .accordion--faq .accordion__text { padding-right: 10rem; }
}