/* ============================================================================
   Shared UI components — base styles
   ----------------------------------------------------------------------------
   Each component scopes its own --cta_* tokens on its root element. The
   defaults fall back to the ACTIVE TEAM's theme vars (--color_*, --font_*), so
   the component auto-themes per white-label site out of the box.

   To override for a single team, redefine the tokens (or the underlying
   --color_--font_* vars) in includes/custom-ui/<team>/styles.css, e.g.:

       .cta_section {
           --cta_bg:       #7A0019;
           --cta_btn_bg:   #FFCC33;
           --cta_btn_color:#7A0019;
       }

   The team styles.css loads AFTER this file, so those overrides win — no
   !important needed.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   render_cta_section()  →  .cta_section
   ---------------------------------------------------------------------------- */
.cta_section {
	/* ---- Overridable tokens (defaults -> team theme vars -> hard fallback) ---- */
	--cta_bg:              var(--color_2);
	--cta_padding_block:   64px;
	--cta_padding_inline:  20px;
	--cta_max_width:       960px;
	--cta_gap:             24px;

	--cta_fg:              var(--color_0);   /* base text colour (inherited) */
	--cta_accent:          var(--color_3);   /* the highlighted word colour  */

	--cta_heading_font:    var(--font_family_b, inherit);
	--cta_heading_size:    clamp(2.5rem, 6vw, 4.5rem);
	--cta_heading_lh:      0.9;
	--cta_heading_weight:  700;

	--cta_text_font:       var(--font_family_semibold, inherit);
	--cta_text_size:       clamp(1rem, 2.2vw, 1.5rem);
	--cta_text_weight:     700;

	--cta_btn_bg:          var(--color_3);
	--cta_btn_color:       var(--color_2);
	--cta_btn_font:        var(--font_family_b, inherit);
	--cta_btn_size:        1rem;
	--cta_btn_padding:     14px 40px;
	--cta_btn_radius:      999px;

	/* ---- Layout ---- */
	background-color: var(--cta_bg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: var(--cta_padding_block) var(--cta_padding_inline);
	color: var(--cta_fg);            /* inherited by h2/h3 so passed colour classes win */
	text-align: center;
}

.cta_section .cta_box {
	max-width: var(--cta_max_width);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--cta_gap);
}

.cta_section .text_container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Headings (heading1 / heading2) — colour is inherited so a class passed via
   heading1_class / heading2_class (the component's `.accent`, or a team's
   `.yellow` / `.white`) overrides it. */
/* Selectors qualified with .text_container so the component wins over page-level
   rules like `body.home h2 { font-size: 4rem }` (0,1,2). Team overrides still
   work through the --cta_* tokens, so the extra specificity costs nothing. */
.cta_section .text_container h2 {
	margin: 0;
	font-family: var(--cta_heading_font);
	font-size: var(--cta_heading_size);
	line-height: var(--cta_heading_lh);
	font-weight: var(--cta_heading_weight);
	text-transform: uppercase;
}

/* Sub-text (text1 / text2) */
.cta_section .text_container h3 {
	margin: 0;
	font-family: var(--cta_text_font);
	font-size: var(--cta_text_size);
	font-weight: var(--cta_text_weight);
	text-transform: uppercase;
}

/* Component-provided accent class (self-contained; pass as heading1_class etc.) */
.cta_section .accent {
	color: var(--cta_accent);
}

/* ----------------------------------------------------------------------------
   render_faq_accordion()  →  .faq_accordion
   Collapsible FAQ. Answers are hidden by default and revealed via slideToggle
   from ui-components.js, which also toggles .faq_open on the item (drives the
   open-state accent border below). Override the --faq_* tokens from a team's
   styles.css to re-theme; the team CSS loads after this file, so no !important
   is needed.
   ---------------------------------------------------------------------------- */
.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 ui-components.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; ui-components.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;
}