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