/* FAQ page.
   Rules copied from the <style> block of "FAQs.dc.html"; everything else on
   the page is inline, as in the design. Scoped under .ij-faqs so the other
   Beaver Builder pages are untouched. */

.ij-faqs { font-family: var(--font-sans); font-weight: 500; color: var(--color-text); -webkit-font-smoothing: antialiased; }
/* bb-theme's skin sets Helvetica on h1-h6 directly, so the headings do not
   inherit the design's face from .ij-faqs above. */
.ij-faqs h1, .ij-faqs h2, .ij-faqs h3 { font-family: var(--font-sans); }

/* The section pill is an <h2> styled inline by the template; nothing here
   needs to reach it. */

/* FAQ disclosure. The design marks each row with a plus icon that rotates
   into a cross when the row opens, so the native marker is hidden and the
   icon in the markup does the work. */
.ij-faqs details > summary { list-style: none; cursor: pointer; }
.ij-faqs details > summary::-webkit-details-marker { display: none; }
.ij-faqs details > summary::marker { content: ''; }
.ij-faqs details[open] > summary .faq-chev { transform: rotate(45deg); }

/* The design's copy is plain text, but an answer or a question may carry a
   link an editor added, so an anchor can sit inside a summary here.
   Underlining it is what tells a reader that this one phrase does something
   different from the rest of the row — without it the link is invisible until
   hover and clicking it looks like an expand that navigated away.

   No script is needed to stop the row toggling when the link is clicked: the
   activation target of a click is the nearest element in the propagation path
   with activation behaviour, which is the <a>, so the summary's own toggle
   never runs. */
.ij-faqs a { color: var(--color-link); text-decoration: none; }
.ij-faqs summary a,
.ij-faqs details p a { text-decoration: underline; text-underline-offset: 2px; }
.ij-faqs a:hover { text-decoration: underline; }

/* The whole row is the click target, so the focus ring has to be the row's,
   not the browser's default outline around the flex child. */
.ij-faqs details > summary:focus-visible { outline: 2px solid var(--brand-green-dark); outline-offset: 4px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  .ij-faqs .faq-chev { transition: none; }
}

@media (max-width: 720px) {
  .ij-faqs h1 { font-size: 36px !important; letter-spacing: -1.6px !important; }
  /* The design reserves 52px on the right of an answer to clear the plus
     icon. On a narrow screen that gutter costs more than the icon needs. */
  .ij-faqs details > div { padding-right: 0 !important; }
  .ij-faqs details > summary { gap: 16px !important; }
}