/* ============================================================================
   FAQ accordion - render_faq_accordion()  →  .faq_accordion
   ----------------------------------------------------------------------------
   Self-contained assets for the FAQ component. Printed ON DEMAND (inline, once
   per request) by render_faq_accordion(), so this CSS/JS loads ONLY on pages
   that actually render an FAQ accordion - never globally.

   Collapsible FAQ. Answers are hidden by default and revealed via slideToggle
   from faq_accordion.js, which also toggles .faq_open on the item (drives the
   open-state accent border below).

   OVERRIDING PER TEAM: this file is printed AFTER the per-team styles.css, so
   redefine the --faq_* tokens from a team's styles.css using a selector at least
   as specific as the ones here (the component uses the bare .faq_accordion for
   tokens and .faq_accordion .faq_* for rules). e.g.:

       .faq #faq_section { --faq_bg: #101820; --faq_fg: #ffffff; }
       body .faq_accordion { --faq_arrow_color: #e8a838; }
   ============================================================================ */
.faq_accordion {
  /* ---- Overridable tokens (defaults: white "accordion container" look) ---- */
  --faq_bg:               #ffffff;
  --faq_fg:               #14141e;
  --faq_padding_block:    64px;
  --faq_padding_inline:   20px;   /* side padding so content never touches the edge */
  --faq_max_width:        960px;  /* centred content width; shrinks fluidly below this */

  --faq_title_font:       var(--font_family_b, inherit);
  --faq_title_size:       clamp(1.5rem, 4vw, 2rem);
  --faq_title_color:      var(--color_2, currentColor);
  --faq_title_mt:         40px;   /* space above each category after the first */

  --faq_item_bg:          #ffffff;
  --faq_item_border:       1px solid rgba(20, 20, 30, 0.18);
  --faq_item_border_open_color: var(--color_3, #e8a838); /* only the colour changes on hover/open - width stays constant so there is no layout shift */
  --faq_item_radius:      8px;
  --faq_item_gap:         16px;   /* gap between accordion containers */

  --faq_q_font:           var(--font_family_semibold, inherit);
  --faq_q_size:           1.1rem;
  --faq_q_padding:        20px 24px;

  --faq_a_padding:        0 24px 22px;
  --faq_a_size:           1rem;
  --faq_a_line:           1.6;

  --faq_arrow_color:      var(--color_3, #e8a838);
  --faq_arrow_size:       1.1rem;

  /* ---- Layout ---- */
  background-color: var(--faq_bg);
  color: var(--faq_fg);
  padding: var(--faq_padding_block) var(--faq_padding_inline);
}

/* Centred, responsive content wrapper - replaces the fixed-width theme grid
   (.cui_small_container / .col-940) so the accordion never overflows below
   960px the way that grid does. */
.faq_accordion .faq_container {
  width: 100%;
  max-width: var(--faq_max_width);
  margin: 0 auto;
  box-sizing: border-box;
}

/* Category group */
.faq_accordion .faq_section {
  margin-top: var(--faq_title_mt);
}
.faq_accordion .faq_section:first-child {
  margin-top: 0;
}
.faq_accordion .faq_section_title {
  margin: 0 0 20px;
  font-family: var(--faq_title_font);
  font-size: var(--faq_title_size);
  color: var(--faq_title_color);
  text-transform: uppercase;
}

/* Item = the accordion container */
.faq_accordion .faq_item {
  background: var(--faq_item_bg);
  border: var(--faq_item_border);
  border-radius: var(--faq_item_radius);
  margin-bottom: var(--faq_item_gap);
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
/* Accent on hover/open: the border-colour turns to the accent (still 1px, no
   reflow) and a 1px box-shadow ring adds the second pixel - reading as a 2px
   border. box-shadow isn't part of layout, so nothing shifts (same technique as
   the other SuitePro FAQ pages). */
.faq_accordion .faq_item.faq_open,
.faq_accordion .faq_item:hover {
  border-color: var(--faq_item_border_open_color);
  box-shadow: 0 0 0 1px var(--faq_item_border_open_color);
}

/* Question row (clickable header) */
.faq_accordion .faq_question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: var(--faq_q_padding);
  font-family: var(--faq_q_font);
  font-size: var(--faq_q_size);
  color: var(--faq_fg);
  text-transform: none;
  cursor: pointer;
}
.faq_accordion .faq_question > div {
  flex: 1 1 auto;
  /* Inherit the question's token-driven font/colour so generic div/h3 rules
     (page `div` colour, base `h3` sizing, etc.) can't override the question text. */
  font: inherit;
  color: inherit;
}

/* Arrow - the chevron glyph is swapped (…-down <-> …-up) by faq_accordion.js on
   toggle. The theme's seg-icons font ignores CSS transforms, so there is no
   rotation here. */
.faq_accordion .faq_question i {
  flex: 0 0 auto;
  color: var(--faq_arrow_color);
  font-size: var(--faq_arrow_size);
}

/* Answer - collapsed by default; faq_accordion.js slideToggles it open */
.faq_accordion .faq_answer {
  display: none;
  padding: var(--faq_a_padding);
  font-size: var(--faq_a_size);
  line-height: var(--faq_a_line);
  color: var(--faq_fg);
}
.faq_accordion .faq_answer p {
  margin: 0 0 1em;
}
.faq_accordion .faq_answer p:last-child {
  margin-bottom: 0;
}
.faq_accordion .faq_answer a {
  text-decoration: underline;
}