/* B8 FAQ open/close interaction (live fix, 9 Oct). Scoped to the Brands FAQ; layered over brands.css, which owns the layout.
   + draws into x with a settle, the answer opens with a grid-rows height animation, a gold hairline draws under the open question. */
#side-advertise .bd-faq .bd-fq summary { position: relative; color: var(--ink-2); transition: color var(--d-base) var(--ease-out); }
#side-advertise .bd-faq .bd-fq summary:hover, #side-advertise .bd-faq .bd-fq.is-open summary { color: var(--ink); }
#side-advertise .bd-faq .bd-fq summary::after { content: none; }
#side-advertise .bd-faq .bd-fq summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
/* the gold hairline under the open question, drawn left to right */
#side-advertise .bd-faq .bd-fq summary::before { content: ""; position: absolute; left: 4px; right: 56px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform 260ms var(--ease-out); }
#side-advertise .bd-faq .bd-fq.is-open summary::before { transform: scaleX(1); transition-duration: 460ms; transition-delay: 80ms; }
/* the + icon: one drawn SVG in a circle; rotates 45deg into x with a settle */
.fq-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--ink); background: var(--white); transition: background-color var(--d-quick) var(--ease-out); }
.fq-ic svg { width: 16px; height: 16px; display: block; transition: transform 420ms var(--ease-settle); }
#side-advertise .bd-faq .bd-fq summary:hover .fq-ic { background: color-mix(in srgb, var(--gold-soft) 55%, var(--white)); }
#side-advertise .bd-faq .bd-fq.is-open .fq-ic { background: var(--gold-soft); }
#side-advertise .bd-faq .bd-fq.is-open .fq-ic svg { transform: rotate(45deg); }
/* the answer: 0fr -> 1fr height, text fades and rises 6px a beat later; closing is a little faster */
.fq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms var(--ease-out); }
.fq-body > .fq-in { min-height: 0; overflow: hidden; }
.fq-body p { opacity: 0; translate: 0 6px; transition: opacity 200ms var(--ease-out), translate 200ms var(--ease-out); }
.bd-fq.is-open .fq-body { grid-template-rows: 1fr; transition-duration: 420ms; }
.bd-fq.is-open .fq-body p { opacity: 1; translate: 0 0; transition-duration: 360ms; transition-delay: 60ms; }
#side-advertise .bd-faq__list { overflow-anchor: none; }
@media (prefers-reduced-motion: reduce) {
  .fq-body, .fq-body p, .fq-ic, .fq-ic svg, #side-advertise .bd-faq .bd-fq summary::before { transition: none !important; }
}
.reduce-motion .fq-body, .reduce-motion .fq-body p, .reduce-motion .fq-ic, .reduce-motion .fq-ic svg, .reduce-motion #side-advertise .bd-faq .bd-fq summary::before { transition: none !important; }