.elementor-4821 .elementor-element.elementor-element-131233b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-a286e3b *//*
 * ============================================================
 * COVE OF EDUCATION — BLUE → WHITE TEXT FIX
 * ============================================================
 * Paste this into: WordPress Admin → Appearance → Customize
 *   → Additional CSS  (or into your theme's custom CSS field)
 *
 * This override targets every way Elementor, Hello theme, and
 * WordPress core could be applying blue to headings and text.
 * It forces all blue typography to #ffffff on the site.
 * Gold / cream accent colours are deliberately left untouched.
 * ============================================================
 */

/* ── 1. CATCH ALL COMMON BLUE HEX VALUES ───────────────────
   These are the most common blues used by Elementor defaults
   and Hello theme. All overridden to white.                  */

[style*="color:#4472C4"],
[style*="color: #4472C4"],
[style*="color:#2563EB"],
[style*="color: #2563EB"],
[style*="color:#3B82F6"],
[style*="color: #3B82F6"],
[style*="color:#1D4ED8"],
[style*="color: #1D4ED8"],
[style*="color:#2271b1"],
[style*="color: #2271b1"],
[style*="color:#0073aa"],
[style*="color: #0073aa"],
[style*="color:#006994"],
[style*="color: #006994"],
[style*="color:#0070C0"],
[style*="color: #0070C0"],
[style*="color:#3A86FF"],
[style*="color: #3A86FF"],
[style*="color:#335EEA"],
[style*="color: #335EEA"],
[style*="color:#4A6CF7"],
[style*="color: #4A6CF7"] {
  color: #ffffff !important;
}

/* ── 2. ELEMENTOR WIDGET HEADINGS ──────────────────────────
   Targets Elementor heading widgets that may have blue set
   at the widget level or through the Elementor color system. */

.elementor-widget-heading .elementor-heading-title,
.elementor-widget-heading h1,
.elementor-widget-heading h2,
.elementor-widget-heading h3,
.elementor-widget-heading h4,
.elementor-widget-heading h5,
.elementor-widget-heading h6 {
  color: #ffffff !important;
}

/* ── 3. ALL PAGE HEADINGS ON GREEN/DARK BACKGROUNDS ───────
   Broad catch for h1–h4 across the site. Preserves gold and
   cream elements since those use different .elementor-4821 .elementor-element.elementor-element-a286e3bs.        */

h1, h2, h3, h4 {
  color: #ffffff !important;
}

/* ── 4. ELEMENTOR INLINE TEXT COLOUR CLASSES ───────────────
   Elementor sometimes injects colour via these classes.      */

.elementor-inline-editing,
.e-con-inner h1,
.e-con-inner h2,
.e-con-inner h3,
.e-con-inner h4,
.e-con h1,
.e-con h2,
.e-con h3,
.e-con h4 {
  color: #ffffff !important;
}

/* ── 5. ELEMENTOR GLOBAL COLOUR VARIABLE OVERRIDE ─────────
   If the site uses Elementor's global colour system with a
   blue defined as a global colour, this overrides the CSS
   variable it generates.                                     */

:root {
  --e-global-color-primary: #ffffff !important;
  --e-global-color-secondary: #ffffff !important;
  --e-global-color-text: #f5e6c8 !important;
  --e-global-color-accent: #D4A84C !important;
}

/* ── 6. WORDPRESS BLOCK EDITOR BLUE ────────────────────────
   Catches any blue applied through the block editor's
   built-in colour palette.                                   */

.has-blue-color,
.has-vivid-blue-color,
.has-strong-blue-color,
.has-pale-blue-color,
.has-luminous-vivid-blue-color {
  color: #ffffff !important;
}

/* ── 7. LINKS — KEEP READABLE BUT NOT BLUE ─────────────────
   Turns blue links to gold so they remain distinguishable
   without being the problematic blue-on-green combination.  */

a {
  color: #D4A84C;
}

a:hover {
  color: #FFD166;
}

/* ── 8. SPECIFIC SECTION HEADINGS (EXTRA SAFETY NET) ───────
   Targets the teaching numbers, section titles and any
   text that may still render in a blue tone.                */

.elementor-section h2,
.elementor-section h3,
.elementor-column h2,
.elementor-column h3,
.elementor-container h2,
.elementor-container h3 {
  color: #ffffff !important;
}

/*
 * ============================================================
 * HOW TO PASTE THIS INTO YOUR WORDPRESS SITE
 * ============================================================
 *
 * Option A — Elementor Custom CSS (Recommended):
 *   1. Go to WordPress Admin → Elementor → Custom Code
 *      OR edit the page in Elementor → Site Settings
 *      → Custom CSS and paste this there.
 *
 * Option B — WordPress Customizer:
 *   1. WordPress Admin → Appearance → Customize
 *   2. Click "Additional CSS" at the bottom of the left panel
 *   3. Paste this entire block
 *   4. Click "Publish"
 *
 * Option C — Theme Custom CSS:
 *   If you have access to your child theme's style.css,
 *   append this block to the end of that file.
 *
 * ============================================================
 * WHAT THIS DOES NOT CHANGE:
 * - Gold accent colours (#C9A84C, #D4A84C, #FFD166)
 * - Cream text (#f5e6c8) used on body copy
 * - Green backgrounds or layout
 * - Any images, buttons, or icons
 * ============================================================
 *//* End custom CSS */