/* ============================================================================
   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);
  }