/*
 * aega-root.css — AEGA Ministries Brand Palette
 * ==========================================================================
 * Purpose: Single source of truth for the AEGA color system. Defines all
 * semantic CSS custom properties, Beaver Builder variable overrides, base
 * color typography hooks, and a minimal set of utility classes.
 *
 * Where to load:
 *   Option A (recommended): enqueue as a standalone stylesheet in the child
 *   theme's functions.php BEFORE the main style.css, so all cascade layers
 *   can reference these properties:
 *
 *     wp_enqueue_style(
 *       'aega-palette',
 *       get_stylesheet_directory_uri() . '/aega-palette.css',
 *       [],
 *       '1.0.0'
 *     );
 *
 *   Option B: paste the :root block at the very top of the child theme's
 *   style.css, above all other rules.
 *
 * Cascade note:
 *   Microthemer rules are injected at a higher specificity. Any per-element
 *   overrides you apply in Microthemer will win over these custom properties
 *   without conflict — this file is intentionally a low-specificity baseline.
 *
 * Palette source: AEGA Homepage Design Guide 2026-05-12, §3 Brand System
 * (Navy-pivot revision 2026-05-13 — primary swapped from red to logo-navy).
 * Typography (font families, sizes, line-heights) is handled separately.
 * No @import or font declarations in this file.
 * ==========================================================================
 */


/* ==========================================================================
   1. ROOT PALETTE — raw named values
   ========================================================================== */

:root {

  /* --- Core brand colors --- */
  --aega-navy:        #1F3056; /* Primary brand — pulled from AEGA logo field. CTAs, links, wordmark, eyebrows */
  --aega-navy-deep:   #14223D; /* Hover / active state for AEGA Navy, deeper accents, dark sections */
  --aega-navy-light:  #2A3F6E; /* Subtle hover on dark backgrounds (~5% lighter) */
  --aega-navy-active: #0E1933; /* Active / pressed state (~8% darker) */
  --aega-navy-soft:   #E9ECF3; /* Callout tints, alert backgrounds — never body copy */

  /* --- Secondary accent --- */
  --aega-gold:       #B8924A; /* Brass Gold — accent italic, divider rules, premium CTAs */
  --aega-gold-soft:  #FBF6EC; /* Warm tint for gold callout backgrounds */

  /* --- Neutrals --- */
  --aega-ink:        #14110F; /* Body text, footer, dark sections — warmer than #000 */
  --aega-cream:      #F7F3EC; /* Alternating section background (never the hero) */
  --aega-stone:      #E8E2D6; /* Borders, dividers, subtle separators */
  --aega-quiet:      #6B6056; /* Muted text — captions, meta, helper copy */
  --aega-gray:       #5A5A5A; /* Secondary muted text, slightly cooler than --aega-quiet */
  --aega-white:      #FFFFFF;

  /* --- Type stacks (single source of truth for font families) --- */
  --font-serif: "EB Garamond", Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-sans:  "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* --- Overlays --- */
  --aega-ink-overlay:   rgba(20, 17, 15, 0.85); /* Ink at 85% — image overlays, hero scrim, modal backdrops */
  --aega-ink-overlay-2: rgba(20, 17, 15, 0.65); /* Ink at 65% — lighter image overlay variant */
  --aega-navy-overlay:  rgba(31, 48, 86, 0.85); /* Navy at 85% — image overlay with brand tint */

  /* --- Muted text on dark backgrounds --- */
  --aega-muted: #B8B0A8; /* Warm light gray. Hero subtext, footer widget/copy text, dark-section sublines */


  /* ==========================================================================
     2. SEMANTIC ALIASES — use these throughout templates and modules
     ========================================================================== */

  /* --- Brand primaries --- */
  --color-primary:        var(--aega-navy);
  --color-primary-deep:   var(--aega-navy-deep);
  --color-primary-light:  var(--aega-navy-light);
  --color-primary-active: var(--aega-navy-active);
  --color-accent:         var(--aega-gold);

  /* --- Text --- */
  --color-text:          var(--aega-ink);
  --color-text-muted:    var(--aega-quiet);
  --color-text-inverse:  var(--aega-white);

  /* --- Backgrounds --- */
  --color-bg-section:       var(--aega-white);
  --color-bg-cream-section: var(--aega-cream);
  --color-bg-dark:          var(--aega-ink);
  --color-paper:            var(--aega-white);
  --color-cream:            var(--aega-cream);

  /* --- Borders & dividers --- */
  --color-border:       var(--aega-stone);
  --color-border-soft:  rgba(232, 226, 214, 0.55); /* stone at 55% — very subtle separators */
  --color-stone:        var(--aega-stone);

  /* --- Links --- */
  --color-link:       var(--aega-navy);
  --color-link-hover: var(--aega-navy-deep);

  /* --- CTA / button defaults --- */
  --color-cta-bg:       var(--aega-navy);
  --color-cta-bg-hover: var(--aega-navy-deep);
  --color-cta-text:     var(--aega-white);

  /* --- Soft tint variants --- */
  --color-navy-soft: var(--aega-navy-soft);
  --color-gold-soft: var(--aega-gold-soft);

  /* --- Overlay semantic aliases --- */
  --color-overlay-ink:   var(--aega-ink-overlay);
  --color-overlay-ink-2: var(--aega-ink-overlay-2);
  --color-overlay-navy:  var(--aega-navy-overlay);

  /* --- Muted text on dark sections --- */
  --color-muted: var(--aega-muted);


  /* ==========================================================================
     3. BEAVER BUILDER VARIABLE OVERRIDES
     Map the AEGA palette into BB's exposed custom properties so BB native
     modules inherit the correct brand colors automatically.
     ========================================================================== */

  /* Buttons */
  --fl-button-bg:            var(--aega-navy);
  --fl-button-bg-hover:      var(--aega-navy-deep);
  --fl-button-color:         var(--aega-white);
  --fl-button-color-hover:   var(--aega-white);
  --fl-button-border-color:  var(--aega-navy);

  /* Heading color (BB heading module default) */
  --fl-heading-color:        var(--aega-ink);

  /* Rich text / body */
  --fl-body-color:           var(--aega-ink);
  --fl-link-color:           var(--aega-navy);
  --fl-link-hover-color:     var(--aega-navy-deep);

  /* Separator / divider module */
  --fl-separator-color:      var(--aega-stone);

  /* Callout module */
  --fl-callout-title-color:  var(--aega-ink);
  --fl-callout-text-color:   var(--aega-ink);

  /* Icon module */
  --fl-icon-color:           var(--aega-navy);

  /* Accordion */
  --fl-accordion-border-color: var(--aega-stone);
  --fl-accordion-label-color:  var(--aega-ink);

}


/* ==========================================================================
   4. BASE TYPOGRAPHY HOOKS
   Family + weight + color baseline. Sizes/line-heights are intentionally
   left to BB Theme customizer settings + per-section CSS so this file stays
   a low-specificity foundation.

   Per AEGA-Homepage-Design-Guide-2026-05-12 §3 Typography:
     Headings (h1–h3) → EB Garamond 500
     Subheads (h4–h6) → EB Garamond 600
     Body             → DM Sans 400
     Strong / b       → DM Sans 600
   ========================================================================== */

body {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--color-text);
}

a {
  color: var(--color-link);
  text-decoration-color: transparent;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

a:hover,
a:focus-visible {
  color: var(--color-link-hover);
  text-decoration-color: currentColor;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--color-text);
  line-height: 1.15;
}

h1 { font-weight: 500; }
h2 { font-weight: 500; }
h3 { font-weight: 500; }
h4 { font-weight: 600; }
h5 { font-weight: 600; }
h6 { font-weight: 600; }

strong, b { font-weight: 600; }

blockquote {
  border-left: 3px solid var(--color-accent);
  color: var(--color-text-muted);
}


/* ==========================================================================
   5. UTILITY CLASSES (8 total — keep minimal)
   ========================================================================== */

/* Text color */
.aega-text-navy  { color: var(--aega-navy)  !important; }
.aega-text-gold  { color: var(--aega-gold)  !important; }
.aega-text-ink   { color: var(--aega-ink)   !important; }
.aega-text-muted { color: var(--aega-quiet) !important; }

/* Background */
.aega-bg-navy  { background-color: var(--aega-navy)  !important; color: var(--aega-white) !important; }
.aega-bg-cream { background-color: var(--aega-cream) !important; }

/* Border utility */
.aega-border-stone { border-color: var(--aega-stone) !important; }

/*
 * Gold differentiator divider — 2px brass-gold left border.
 * Used on differentiator list items per §3 color usage rules.
 * Apply to the wrapper div of each differentiator block in BB.
 */
.aega-divider-gold {
  border-left: 2px solid var(--aega-gold);
  padding-left: 1.25rem;
}