/*
Theme Name: BigHearts Child
Author: WebGeniusLab
Author URI: http://webgeniuslab.net
Description: Child theme for Kitambaa. Self-hosted Fraunces + Manrope fonts and CSS variable overrides on top of BigHearts.
Version: 1.1.0
Template: bighearts
Text Domain: bighearts-child
*/

/* =========================================================================
   1. SELF-HOSTED WEBFONTS (GDPR-friendly, no external request)
   Files live in: wp-content/themes/bighearts-child/fonts/
   ========================================================================= */

/* ---- Fraunces (serif, used for headings) ---- */
@font-face {
    font-family: 'Fraunces';
    src: url('fonts/Fraunces-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fraunces';
    src: url('fonts/Fraunces-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Fraunces';
    src: url('fonts/Fraunces-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fraunces';
    src: url('fonts/Fraunces-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ---- Manrope (sans-serif, used for body / UI) ---- */
@font-face {
    font-family: 'Manrope';
    src: url('fonts/Manrope-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('fonts/Manrope-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('fonts/Manrope-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* =========================================================================
   2. BIGHEARTS CSS VARIABLE OVERRIDES
   The parent theme exposes its typography via custom properties injected on
   :root through wp_add_inline_style() on the 'bighearts-theme-info' handle.
   Because this child stylesheet is enqueued AFTER that handle (see
   functions.php), redeclaring the variables here wins the cascade with no
   need for !important.
   ========================================================================= */

:root {
    /* Body & general content */
    --bighearts-content-font-family: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

    /* Headings (h1-h6, post titles, section titles…) */
    --bighearts-header-font-family: 'Fraunces', Georgia, 'Times New Roman', serif;

    /* Primary navigation menu */
    --bighearts-menu-font-family: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

    /* Dropdown / sub menu */
    --bighearts-submenu-font-family: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

    /* "Additional" font slot (used by BigHearts for accents / quotes) */
    --bighearts-additional-font-family: 'Fraunces', Georgia, 'Times New Roman', serif;

    /* Buttons */
    --bighearts-button-font-family: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

    /* Tighter body line-height (parent default coming from Redux is ~1.8,
       which feels too airy at this font-size). 1.55 keeps it readable
       without wasting vertical space. Lists inherit this variable, so the
       change cascades to UL/OL automatically. */
    --bighearts-content-line-height: 1.55;
}

/* =========================================================================
   3. SAFETY NET
   A handful of BigHearts rules hard-code font-family directly instead of
   using the variable. Keep the same family stack here so the override is
   total. Add more selectors below if you spot any leak in the front-end.
   ========================================================================= */

body,
button,
input,
select,
optgroup,
textarea {
    font-family: var(--bighearts-content-font-family);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--bighearts-header-font-family);
}

/* =========================================================================
   4. ELEMENTOR / BIGHEARTS WIDGET OVERRIDES
   These widgets store their typography settings in Elementor and output
   them as inline CSS, which beats :root variables in the cascade. The only
   reliable way to force the brand font is to target their classes directly
   with !important.
   ========================================================================= */

/* BigHearts custom counter widget — big stat numbers like "+50%" */
.wgl-counter_value-wrap,
.wgl-counter__value,
.wgl-counter__prefix,
.wgl-counter__suffix,
.wgl-counter__placeholder {
    font-family: var(--bighearts-header-font-family) !important;
    font-weight: 900 !important;
}

/* The label under the number (e.g. "des écoles en Afrique...") stays in body font */
.wgl-counter_title {
    font-family: var(--bighearts-content-font-family) !important;
}

/* Elementor's built-in counter widget — same treatment in case it's used elsewhere */
.elementor-counter .elementor-counter-number-wrapper,
.elementor-counter .elementor-counter-number,
.elementor-counter .elementor-counter-number-prefix,
.elementor-counter .elementor-counter-number-suffix {
    font-family: var(--bighearts-header-font-family) !important;
    font-weight: 900 !important;
}

.elementor-counter .elementor-counter-title {
    font-family: var(--bighearts-content-font-family) !important;
}

/* =========================================================================
   5. CONTENT LISTS (UL/OL) — TIGHTER LINE-HEIGHT, SITE-WIDE
   By default BigHearts (and Elementor's text-editor widget) gives <li>
   tags a much looser line-height than paragraphs. We align them on the
   same --bighearts-content-line-height variable used by <p>, and tighten
   the vertical rhythm between items.
   ========================================================================= */

.elementor-widget-text-editor ul li,
.elementor-widget-text-editor ol li,
.elementor-widget-theme-post-content ul li,
.elementor-widget-theme-post-content ol li,
.entry-content ul li,
.entry-content ol li,
.wgl-accordion_content ul li,
.wgl-accordion_content ol li {
    line-height: var(--bighearts-content-line-height, 1.6);
    margin-bottom: 0.35em;
}

.elementor-widget-text-editor ul li:last-child,
.elementor-widget-text-editor ol li:last-child,
.elementor-widget-theme-post-content ul li:last-child,
.elementor-widget-theme-post-content ol li:last-child,
.entry-content ul li:last-child,
.entry-content ol li:last-child,
.wgl-accordion_content ul li:last-child,
.wgl-accordion_content ol li:last-child {
    margin-bottom: 0;
}

/* Inline elements inside list items (strong, span, em…) should not break
   the rhythm by adding their own line-height. */
.elementor-widget-text-editor li > span,
.elementor-widget-text-editor li > strong,
.elementor-widget-text-editor li > em,
.entry-content li > span,
.entry-content li > strong,
.entry-content li > em {
    line-height: inherit;
}