/* =========================================================================
   Sunnah — Brand overrides (standalone, live-compatible)

   Scoped to LIVE which does not yet have the
   tokens.css / base.css / components.css cascade. Uses hardcoded hex
   values (BRANDING.md palette) so it works without any child-theme vars.

   Fixes on this file:
     1. Parent-theme Charitian variable remap — kills yellow (#FFC105) /
        green (#00705D) / dark-green (#122F2B) everywhere they flow
        through --charitian-* vars (buttons, pagination, dots, etc.).
     2. sc-heading / section-heading H1–H4 sweep → magenta, transparent bg.
     3. Homepage water-well "100% Donation Policy" H4 → white + bold
        (elementor-element-6fb0e53).
     4. Homepage "Supported By" widget → magenta container + white H2
        (elementor-element-49b1dd5).
     5. Two-tier button palette (Option C, 2026-04-21):
          PRIMARY   = commit / money actions  → magenta base, teal hover.
          SECONDARY = nav / generic (default) → teal base, magenta hover.
          Hover flips to opposite brand colour. No greys, no off-palette.

   Brand colours (from BRANDING.md):
       Navy    #182844
       Magenta #E0034B
       Teal    #009191
       White   #FFFFFF
   ========================================================================= */

/* ---- 1. Charitian parent-theme variable remap --------------------------- */
:root {
    --charitian-primary-color:   #E0034B; /* magenta — was #FFC105 yellow */
    --charitian-secondary-color: #009191; /* teal    — was #00705D green  */
    --charitian-heading-color:   #182844; /* navy    — was #122F2B        */
    --charitian-base-color:      #6A8695; /* muted   — was #667470        */
    --charitian-bg-dark:         #182844; /* navy    — was #122F2B        */

    --charitian-base-font:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --charitian-primary-font:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --charitian-secondary-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --charitian-heading-font:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---- 2. Sweep for literal-yellow H4s in Charitian sc-heading widget ----- */
body .sc-heading h4,
body .section-heading h4,
body .section-heading h1,
body .section-heading h2,
body .section-heading h3 {
    color: #E0034B !important;
    background: transparent !important;
}

/* ---- 3. Homepage — water well "100% Donation Policy" ------------------- */
/* Sits on a navy widget-wrap background; needs white + bold for legibility. */
body .elementor-element-6fb0e53 .sc-heading h4,
body .elementor-element-6fb0e53 .section-heading h4 {
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

/* ---- 4. Homepage — "Supported By" widget ------------------------------- */
/* On live the widget already has a magenta container bg via Elementor data;
   this rule is defensive so staging-parity is preserved if data ever drifts. */
body .elementor-element-49b1dd5 .elementor-heading-title {
    color: #FFFFFF !important;
}

/* =========================================================================
   5. Two-tier button palette — Option C (canonical, 2026-04-21)

   Every button is PRIMARY or SECONDARY. Hover flips to the opposite brand
   colour. Font forced to Inter to sweep any `urbane`/`Quicksand` inline
   <style> blocks that legacy Elementor widgets still emit.
   See BRANDING.md §4a for policy.
   ========================================================================= */

/* -------- PRIMARY (magenta → teal on hover/focus/active) ---------------- */
body .sunnah-btn--primary,
body .sunnah-hero__cta,
body #place_order,
body button#place_order,
body .wc-block-components-checkout-place-order-button,
body .checkout-button,
body a.checkout-button,
body .single_add_to_cart_button,
body button.single_add_to_cart_button,
body .wcdp-button,
body .variations_form .button.wcdp-button,
body .wpforms-submit,
body #submitBtn,
body button#submitBtn,
body .header-btn,
body a.header-btn,
body .dl-btn-2,
body a.dl-btn-2,
body .woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:not(.cancel),
body .woocommerce-account .woocommerce-MyAccount-content input[type="submit"]:not(.cancel),
body .woocommerce-account .woocommerce-MyAccount-content .button:not(.cancel):not(.wc-forward) {
    background: #E0034B !important;
    background-color: #E0034B !important;
    color: #FFFFFF !important;
    border-color: #E0034B !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease !important;
}

body .sunnah-btn--primary:hover,  body .sunnah-btn--primary:focus,  body .sunnah-btn--primary:active,
body .sunnah-hero__cta:hover,     body .sunnah-hero__cta:focus,     body .sunnah-hero__cta:active,
body #place_order:hover,          body #place_order:focus,          body #place_order:active,
body button#place_order:hover,    body button#place_order:focus,    body button#place_order:active,
body .wc-block-components-checkout-place-order-button:hover,
body .wc-block-components-checkout-place-order-button:focus,
body .wc-block-components-checkout-place-order-button:active,
body .checkout-button:hover,      body .checkout-button:focus,      body .checkout-button:active,
body a.checkout-button:hover,     body a.checkout-button:focus,     body a.checkout-button:active,
body .single_add_to_cart_button:hover,
body .single_add_to_cart_button:focus,
body .single_add_to_cart_button:active,
body button.single_add_to_cart_button:hover,
body button.single_add_to_cart_button:focus,
body button.single_add_to_cart_button:active,
body .wcdp-button:hover,          body .wcdp-button:focus,          body .wcdp-button:active,
body .variations_form .button.wcdp-button:hover,
body .variations_form .button.wcdp-button:focus,
body .variations_form .button.wcdp-button:active,
body .wpforms-submit:hover,       body .wpforms-submit:focus,       body .wpforms-submit:active,
body #submitBtn:hover,            body #submitBtn:focus,            body #submitBtn:active,
body button#submitBtn:hover,      body button#submitBtn:focus,      body button#submitBtn:active,
body .header-btn:hover,           body .header-btn:focus,           body .header-btn:active,
body a.header-btn:hover,          body a.header-btn:focus,          body a.header-btn:active,
body .dl-btn-2:hover,             body .dl-btn-2:focus,             body .dl-btn-2:active,
body a.dl-btn-2:hover,            body a.dl-btn-2:focus,            body a.dl-btn-2:active,
body .woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:not(.cancel):hover,
body .woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:not(.cancel):focus,
body .woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:not(.cancel):active,
body .woocommerce-account .woocommerce-MyAccount-content input[type="submit"]:not(.cancel):hover,
body .woocommerce-account .woocommerce-MyAccount-content input[type="submit"]:not(.cancel):focus,
body .woocommerce-account .woocommerce-MyAccount-content input[type="submit"]:not(.cancel):active,
body .woocommerce-account .woocommerce-MyAccount-content .button:not(.cancel):not(.wc-forward):hover,
body .woocommerce-account .woocommerce-MyAccount-content .button:not(.cancel):not(.wc-forward):focus,
body .woocommerce-account .woocommerce-MyAccount-content .button:not(.cancel):not(.wc-forward):active {
    background: #009191 !important;
    background-color: #009191 !important;
    color: #FFFFFF !important;
    border-color: #009191 !important;
}

/* -------- SECONDARY (teal → magenta on hover/focus/active) — DEFAULT --- */
body .wt-btn,
body .elementor-button,
body .elementor-button-link,
body .button:not(.added_to_cart):not(.remove):not(.single_add_to_cart_button):not(.checkout-button):not(.wcdp-button),
body a.button:not(.single_add_to_cart_button):not(.checkout-button):not(.wcdp-button),
body input[type="submit"]:not(#place_order):not(#submitBtn):not(.wpforms-submit):not(.single_add_to_cart_button):not(.wcdp-button),
body button[type="submit"]:not(#place_order):not(#submitBtn):not(.wpforms-submit):not(.single_add_to_cart_button):not(.wcdp-button):not(.wp-block-search__button):not([class*="toggle"]):not([class*="close"]):not([class*="menu"]),
body .wc-block-components-button:not(.wc-block-components-checkout-place-order-button),
body .wc-forward:not(.added_to_cart):not(.checkout-button),
body .btn-primary,
body .wp-block-button__link,
body .sdm-donate-btn,
body #sdmDonateBtn,
body button#sdmDonateBtn,
body .sunnah-btn:not(.sunnah-btn--primary),
body .sunnah-btn--secondary {
    background: #009191 !important;
    background-color: #009191 !important;
    color: #FFFFFF !important;
    border-color: #009191 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease !important;
}

body .wt-btn:hover,       body .wt-btn:focus,       body .wt-btn:active,
body .elementor-button:hover, body .elementor-button:focus, body .elementor-button:active,
body .elementor-button-link:hover, body .elementor-button-link:focus, body .elementor-button-link:active,
body .button:not(.added_to_cart):not(.remove):not(.single_add_to_cart_button):not(.checkout-button):not(.wcdp-button):hover,
body .button:not(.added_to_cart):not(.remove):not(.single_add_to_cart_button):not(.checkout-button):not(.wcdp-button):focus,
body .button:not(.added_to_cart):not(.remove):not(.single_add_to_cart_button):not(.checkout-button):not(.wcdp-button):active,
body a.button:not(.single_add_to_cart_button):not(.checkout-button):not(.wcdp-button):hover,
body a.button:not(.single_add_to_cart_button):not(.checkout-button):not(.wcdp-button):focus,
body a.button:not(.single_add_to_cart_button):not(.checkout-button):not(.wcdp-button):active,
body input[type="submit"]:not(#place_order):not(#submitBtn):not(.wpforms-submit):not(.single_add_to_cart_button):not(.wcdp-button):hover,
body input[type="submit"]:not(#place_order):not(#submitBtn):not(.wpforms-submit):not(.single_add_to_cart_button):not(.wcdp-button):focus,
body input[type="submit"]:not(#place_order):not(#submitBtn):not(.wpforms-submit):not(.single_add_to_cart_button):not(.wcdp-button):active,
body button[type="submit"]:not(#place_order):not(#submitBtn):not(.wpforms-submit):not(.single_add_to_cart_button):not(.wcdp-button):not(.wp-block-search__button):not([class*="toggle"]):not([class*="close"]):not([class*="menu"]):hover,
body button[type="submit"]:not(#place_order):not(#submitBtn):not(.wpforms-submit):not(.single_add_to_cart_button):not(.wcdp-button):not(.wp-block-search__button):not([class*="toggle"]):not([class*="close"]):not([class*="menu"]):focus,
body button[type="submit"]:not(#place_order):not(#submitBtn):not(.wpforms-submit):not(.single_add_to_cart_button):not(.wcdp-button):not(.wp-block-search__button):not([class*="toggle"]):not([class*="close"]):not([class*="menu"]):active,
body .wc-block-components-button:not(.wc-block-components-checkout-place-order-button):hover,
body .wc-block-components-button:not(.wc-block-components-checkout-place-order-button):focus,
body .wc-block-components-button:not(.wc-block-components-checkout-place-order-button):active,
body .wc-forward:not(.added_to_cart):not(.checkout-button):hover,
body .wc-forward:not(.added_to_cart):not(.checkout-button):focus,
body .wc-forward:not(.added_to_cart):not(.checkout-button):active,
body .btn-primary:hover, body .btn-primary:focus, body .btn-primary:active,
body .wp-block-button__link:hover, body .wp-block-button__link:focus, body .wp-block-button__link:active,
body .sdm-donate-btn:hover, body .sdm-donate-btn:focus, body .sdm-donate-btn:active,
body #sdmDonateBtn:hover, body #sdmDonateBtn:focus, body #sdmDonateBtn:active,
body button#sdmDonateBtn:hover, body button#sdmDonateBtn:focus, body button#sdmDonateBtn:active,
body .sunnah-btn:not(.sunnah-btn--primary):hover,
body .sunnah-btn:not(.sunnah-btn--primary):focus,
body .sunnah-btn:not(.sunnah-btn--primary):active,
body .sunnah-btn--secondary:hover,
body .sunnah-btn--secondary:focus,
body .sunnah-btn--secondary:active {
    background: #E0034B !important;
    background-color: #E0034B !important;
    color: #FFFFFF !important;
    border-color: #E0034B !important;
}

/* =========================================================================
   6. Site-wide typography sweep (2026-05-01)

   Lifts the /100-donation-policy/ pre-v2 baseline (19/17 body, 32/24 H2,
   #20212B ink, 1.6 line-height) and applies it across the whole live site.
   Inter family is forced everywhere (catches widgets that bypass the
   --charitian-* variables in section 1). Size + colour rules are scoped to
   content contexts (.entry-content, .post-content, .elementor-widget-text-
   editor) so hero/CTA widgets keep their per-widget sizing decisions.

   Sources:
     web.dev/articles/font-size — minimum 16-18px body
     Nielsen Norman Group — 18-20px on content pages
     WCAG 1.4.3 — 4.5:1 minimum (we hit ~14:1 AAA)

   Modular scale (~1.25):
     Desktop  body 19  H6 17  H5 19  H4 22  H3 26  H2 32  H1 44
     Mobile   body 17  H6 16  H5 17  H4 19  H3 22  H2 26  H1 32

   Why scoped, not blanket: Elementor "Heading" widget bakes per-element
   typography (e.g. hero displays at 60-80px) into per-element CSS. A
   blanket `body h1` rule would demolish hero designs across the site.
   ========================================================================= */

/* ---- 6a. Inter family — force across every text-bearing surface --------- */
body,
body input,
body textarea,
body select,
body button,
body .elementor-element,
body .elementor-widget-container,
body .elementor-heading-title,
body .elementor-button,
body .sc-heading h1,
body .sc-heading h2,
body .sc-heading h3,
body .sc-heading h4,
body .sc-heading h5,
body .sc-heading h6,
body .section-heading h1,
body .section-heading h2,
body .section-heading h3,
body .section-heading h4,
body .section-heading h5,
body .section-heading h6,
body .menu-item,
body .menu-item a,
body .main-menu a,
body .footer-menu a,
body .nav-menu a,
body h1, body h2, body h3, body h4, body h5, body h6 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* ---- 6b. Content body copy — desktop default --------------------------- */
body .entry-content p,
body .post-content p,
body .entry-content li,
body .post-content li,
body .elementor-widget-text-editor p,
body .elementor-widget-text-editor li,
body .elementor-widget-text-editor {
    font-size: 19px !important;
    line-height: 1.6 !important;
    color: #20212B !important;
}

body .entry-content strong,
body .post-content strong,
body .elementor-widget-text-editor strong {
    color: #20212B !important;
    font-weight: 600 !important;
}

body .entry-content em,
body .post-content em,
body .elementor-widget-text-editor em {
    color: #2A3A48 !important;
}

/* Inline links inside body copy — visible underline (WCAG 1.4.1). */
body .entry-content p a,
body .post-content p a,
body .elementor-widget-text-editor p a,
body .entry-content li a,
body .post-content li a,
body .elementor-widget-text-editor li a {
    color: #E0034B !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

body .entry-content p a:hover,
body .post-content p a:hover,
body .elementor-widget-text-editor p a:hover,
body .entry-content li a:hover,
body .post-content li a:hover,
body .elementor-widget-text-editor li a:hover {
    text-decoration-thickness: 2px !important;
}

/* ---- 6c. Content heading scale — desktop ------------------------------- */
/* Scoped to content scopes only. Hero/CTA Elementor widgets keep their own
   per-widget sizes via higher-specificity Elementor stylesheets. */
body .entry-content h1,
body .post-content h1,
body .elementor-widget-text-editor h1 {
    font-size: 44px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: #182844 !important;
    margin-top: 48px;
    margin-bottom: 20px;
}

body .entry-content h2,
body .post-content h2,
body .elementor-widget-text-editor h2 {
    font-size: 32px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #182844 !important;
    margin-top: 40px;
    margin-bottom: 16px;
}

body .entry-content h3,
body .post-content h3,
body .elementor-widget-text-editor h3 {
    font-size: 26px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    color: #182844 !important;
    margin-top: 32px;
    margin-bottom: 12px;
}

body .entry-content h4,
body .post-content h4,
body .elementor-widget-text-editor h4 {
    font-size: 22px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    color: #182844 !important;
    margin-top: 28px;
    margin-bottom: 10px;
}

body .entry-content h5,
body .post-content h5,
body .elementor-widget-text-editor h5 {
    font-size: 19px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    color: #182844 !important;
    margin-top: 24px;
    margin-bottom: 8px;
}

body .entry-content h6,
body .post-content h6,
body .elementor-widget-text-editor h6 {
    font-size: 17px !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
    color: #182844 !important;
    margin-top: 20px;
    margin-bottom: 8px;
}

/* ---- 6d. Mobile breakpoint (≤ 768px) ----------------------------------- */
@media (max-width: 768px) {
    body .entry-content p,
    body .post-content p,
    body .entry-content li,
    body .post-content li,
    body .elementor-widget-text-editor p,
    body .elementor-widget-text-editor li,
    body .elementor-widget-text-editor {
        font-size: 17px !important;
        line-height: 1.6 !important;
    }

    body .entry-content h1,
    body .post-content h1,
    body .elementor-widget-text-editor h1 {
        font-size: 32px !important;
        margin-top: 36px;
    }

    body .entry-content h2,
    body .post-content h2,
    body .elementor-widget-text-editor h2 {
        font-size: 26px !important;
        margin-top: 32px;
    }

    body .entry-content h3,
    body .post-content h3,
    body .elementor-widget-text-editor h3 {
        font-size: 22px !important;
        margin-top: 28px;
    }

    body .entry-content h4,
    body .post-content h4,
    body .elementor-widget-text-editor h4 {
        font-size: 19px !important;
        margin-top: 24px;
    }

    body .entry-content h5,
    body .post-content h5,
    body .elementor-widget-text-editor h5 {
        font-size: 17px !important;
        margin-top: 20px;
    }

    body .entry-content h6,
    body .post-content h6,
    body .elementor-widget-text-editor h6 {
        font-size: 16px !important;
        margin-top: 18px;
    }
}

/* ---- 6e. Footer reset — exclude footer from sections 6b/6c/6d ---------- */
/* Live's footer (`<footer id="colophon">`) is built from `.elementor-widget-
   text-editor` widgets (copyright, contact, links, social icons). Without
   this reset, section 6b would force dark #20212B body copy onto the dark
   footer background and rewrite every footer link to magenta + underline.
   `inherit` rolls back to the parent footer column's intended cascade
   (Elementor sets the footer's text colour on the column wrapper). */
body footer .elementor-widget-text-editor,
body footer .elementor-widget-text-editor p,
body footer .elementor-widget-text-editor li,
body #colophon .elementor-widget-text-editor,
body #colophon .elementor-widget-text-editor p,
body #colophon .elementor-widget-text-editor li,
body .footer-section .elementor-widget-text-editor,
body .footer-section .elementor-widget-text-editor p,
body .footer-section .elementor-widget-text-editor li,
body .site-footer .elementor-widget-text-editor,
body .site-footer .elementor-widget-text-editor p,
body .site-footer .elementor-widget-text-editor li {
    font-size: inherit !important;
    color: inherit !important;
    line-height: inherit !important;
}

body footer .elementor-widget-text-editor strong,
body #colophon .elementor-widget-text-editor strong,
body .footer-section .elementor-widget-text-editor strong,
body .site-footer .elementor-widget-text-editor strong {
    color: inherit !important;
    font-weight: inherit !important;
}

body footer .elementor-widget-text-editor em,
body #colophon .elementor-widget-text-editor em,
body .footer-section .elementor-widget-text-editor em,
body .site-footer .elementor-widget-text-editor em {
    color: inherit !important;
}

body footer .elementor-widget-text-editor a,
body footer .elementor-widget-text-editor p a,
body footer .elementor-widget-text-editor li a,
body #colophon .elementor-widget-text-editor a,
body #colophon .elementor-widget-text-editor p a,
body #colophon .elementor-widget-text-editor li a,
body .footer-section .elementor-widget-text-editor a,
body .footer-section .elementor-widget-text-editor p a,
body .footer-section .elementor-widget-text-editor li a,
body .site-footer .elementor-widget-text-editor a,
body .site-footer .elementor-widget-text-editor p a,
body .site-footer .elementor-widget-text-editor li a {
    color: inherit !important;
    text-decoration: inherit !important;
    text-underline-offset: 0 !important;
}