/* ==========================================================================
   EliteBlocc — Emerald System
   File: assets/css/global/eb-emerald-system.css
   Version: 1.0

   PURPOSE
   ─────────────────────────────────────────────────────────────────────────
   The site's page-level CSS files each define private background variables
   (--ab-bg, --sus-dark, --th-deep etc.) at near-void black (#020c07,
   #010f0a). This file systematically overrides those variables to shift
   every dark background from void-black to deep forest emerald, and adds
   structural emerald treatments globally across all pages.

   LOAD ORDER
   ─────────────────────────────────────────────────────────────────────────
   Loaded after eb-utilities.css in the global chain (see enqueue-assets.php).
   Must come BEFORE page CSS files so page CSS can still override if needed.

   WHAT THIS FILE DOES
   ─────────────────────────────────────────────────────────────────────────
   1. Overrides per-page private background CSS variables
   2. Strengthens the body emerald gradient
   3. Adds emerald section separator system
   4. Adds emerald surface treatment to cards / panels
   5. Strengthens visible borders site-wide
   6. Adds emerald glow to stat bands
   7. Adds emerald section breathing — alternating depth rhythm

   DESIGN PRINCIPLE
   ─────────────────────────────────────────────────────────────────────────
   The colours stay dark. They shift from cold void-black to warm deep forest.
   Emerald is structural — it defines space, borders, and rhythm.
   It is NOT decorative neon. It is architectural depth.
   ========================================================================== */


/* ==========================================================================
   1. BODY — Strengthen existing emerald gradient
   ========================================================================== */

body {
  background-color: #011a0d;
  background-image:
    radial-gradient(ellipse 120% 60% at 50%  0%,  rgba(6, 78, 59, 0.60) 0%, transparent 52%),
    radial-gradient(ellipse  60% 40% at 0%   50%, rgba(6, 78, 59, 0.28) 0%, transparent 55%),
    radial-gradient(ellipse  50% 35% at 100% 60%, rgba(6, 78, 59, 0.18) 0%, transparent 50%),
    linear-gradient(180deg, rgba(1, 26, 13, 1) 0%, rgba(1, 14, 8, 1) 100%);
  background-attachment: fixed;
}


/* ==========================================================================
   2. PRIVATE VARIABLE OVERRIDES
   Override each page's dark background variables to shift from void-black
   to deep forest emerald. All values keep the same relative darkness ratio.
   ========================================================================== */

/* About page */
.eb-about-page {
  --ab-bg:  #01180c;
  --ab-bg2: #021a0e;
  --ab-border: rgba(16, 185, 129, 0.14);
  --ab-brd-em: rgba(16, 185, 129, 0.28);
}

/* Sustainability page */
.eb-sus-page,
[class*="eb-sus-"] {
  --sus-dark:  #01180c;
  --sus-mid:   #021a0e;
  --sus-panel: #031508;
}

/* Contact page */
[class*="eb-ct__"] {
  --ct-dark: #01180c;
  --ct-mid:  #021a0e;
}

/* Technical Hub */
[class*="eb-th-"] {
  --th-deep:  #01180c;
  --th-mid:   #021a0e;
  --th-panel: #031508;
}

/* Product Hub */
[class*="eb-ph-"] {
  --ph-deep:  #01180c;
  --ph-mid:   #021a0e;
  --ph-sb-bg: #011209;
}

/* Download Centre */
[class*="eb-dc__"] {
  --deep: #01180c;
  --surf: #091a0d;
  --ink:  #0e1f10;
}


/* ==========================================================================
   3. SECTION SEPARATOR SYSTEM
   A consistent emerald top-line separator between major page sections.
   Applied to known section class patterns across all pages.
   ========================================================================== */

/* Universal section top line — applied to all eb-* sections */
.eb-about__story,
.eb-about__founders,
.eb-about__markets,
.eb-about__values,
.eb-about__partnership,
.eb-about__cta,
.eb-home-statement,
.eb-home-products,
.eb-home-features,
.eb-home-cta,
.eb-sus-section--dark,
.eb-sus-section--mid,
.eb-th-resources,
.eb-th-categories,
.eb-ph-choose,
.eb-ph-results,
.eb-dc__body,
.eb-ct__section--intent {
  border-top: 1px solid rgba(16, 185, 129, 0.18);
  position: relative;
}

/* Emerald glow sweep on section tops — premium architectural line */
.eb-about__story::before,
.eb-about__founders::before,
.eb-about__markets::before,
.eb-about__values::before,
.eb-about__partnership::before,
.eb-about__cta::before,
.eb-home-statement::before,
.eb-sus-section--dark::before,
.eb-th-resources::before,
.eb-ph-results::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(600px, 80%);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(16, 185, 129, 0.50) 30%,
    rgba(16, 185, 129, 0.70) 50%,
    rgba(16, 185, 129, 0.50) 70%,
    transparent 100%
  );
  pointer-events: none;
}


/* ==========================================================================
   4. SECTION ALTERNATING DEPTH
   Alternating sections pick up a deeper emerald surface tint to break
   the monotony of continuous near-black.
   ========================================================================== */

/* Sections with emerald-surface treatment */
.eb-about__story,
.eb-about__values,
.eb-about__cta,
.eb-home-features,
.eb-home-cta,
.eb-sus-section--mid,
.eb-th-categories,
.eb-ph-choose {
  background-image: linear-gradient(
    180deg,
    rgba(6, 78, 59, 0.10) 0%,
    rgba(6, 78, 59, 0.04) 60%,
    transparent 100%
  );
}

/* Hero sections — rich emerald radial glow */
.eb-about__hero,
.eb-home-hero,
.eb-sus-hero,
.eb-th-hero,
.eb-ph-hero,
.eb-ct__section--hero,
.eb-dc__hero {
  background-image:
    radial-gradient(ellipse 70% 60% at 5%  10%, rgba(6, 78, 59, 0.55) 0%, transparent 60%),
    radial-gradient(ellipse 45% 40% at 95% 15%, rgba(16, 185, 129, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 50% 90%, rgba(4, 42, 24, 0.50) 0%, transparent 65%),
    radial-gradient(circle at 1px 1px, rgba(16, 185, 129, 0.12) 1px, transparent 1px);
  background-size: auto, auto, auto, 22px 22px;
}


/* ==========================================================================
   5. CARD & PANEL SURFACE UPGRADES
   Shift card surfaces from cold transparent glass to warm emerald glass.
   ========================================================================== */

/* Product cards — site-wide */
.eb-product-card,
.eb-about__founder-card,
.eb-about__market-card,
.eb-about__partnership-card,
.eb-about__value-card,
.eb-about__hero-card {
  background: rgba(6, 78, 59, 0.10);
  border-color: rgba(16, 185, 129, 0.18);
}

.eb-product-card:hover,
.eb-about__founder-card:hover,
.eb-about__market-card:hover,
.eb-about__value-card:hover {
  background:   rgba(6, 78, 59, 0.18);
  border-color: rgba(16, 185, 129, 0.34);
  box-shadow:   0 8px 32px rgba(6, 78, 59, 0.25),
                0 0 0 1px rgba(16, 185, 129, 0.16);
}

/* Resource / download cards */
.eb-resource-row,
.eb-dc__rcard,
.eb-th-resource-card,
.eb-dc__ctab {
  background:   rgba(6, 78, 59, 0.08);
  border-color: rgba(16, 185, 129, 0.16);
}

.eb-resource-row:hover,
.eb-dc__rcard:hover,
.eb-th-resource-card:hover {
  background:   rgba(6, 78, 59, 0.16);
  border-color: rgba(16, 185, 129, 0.30);
}

/* Performance cards / comparison panels */
.eb-home-perf__pane,
.eb-ph-card,
.eb-th-panel,
.eb-prod__perf-card {
  background:   rgba(6, 78, 59, 0.08);
  border-color: rgba(16, 185, 129, 0.16);
}

/* Stat / compliance boxes */
.eb-about__hero-card,
.eb-prod__compliance-box,
.eb-prod__system-card,
.eb-prod__speed-card {
  background:   rgba(6, 78, 59, 0.12);
  border-color: rgba(16, 185, 129, 0.22);
}


/* ==========================================================================
   6. STATS BAND EMERALD — punch up the proof numbers
   ========================================================================== */

.eb-home-stats,
.eb-about__hero-stats,
.eb-sus-stats-band,
.eb-ph-hero__stats,
.eb-th-stats-band,
.eb-prod__cert-strip {
  background:  rgba(6, 78, 59, 0.14);
  border-top:    1px solid rgba(16, 185, 129, 0.24);
  border-bottom: 1px solid rgba(16, 185, 129, 0.24);
}


/* ==========================================================================
   7. BORDER & LINE SYSTEM — increase emerald border visibility
   ========================================================================== */

/* Emerald eyebrow bars — wider and brighter */
.eb-about__eyebrow-bar,
.eb-eyebrow-bar,
.eb-prod__eyebrow-bar {
  width:      28px;
  height:     2px;
  background: linear-gradient(90deg, #b45309, #f59e0b 40%, #10b981 70%, #064e3b);
  flex-shrink: 0;
}

/* Emerald divider spans — stronger glow */
.eb-about__amber-line,
[class*="amber-line"] {
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(16, 185, 129, 0.18) 8%,
    rgba(245, 158, 11, 0.55) 30%,
    rgba(16, 185, 129, 0.80) 50%,
    rgba(245, 158, 11, 0.55) 70%,
    rgba(16, 185, 129, 0.18) 92%,
    transparent 100%
  );
  display: block;
  width: 100%;
}

/* Timeline dots — richer emerald */
.eb-about__tl-dot {
  background: rgba(6, 78, 59, 0.40);
  border:     1.5px solid rgba(16, 185, 129, 0.55);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.25);
}

.eb-about__tl-dot svg {
  color: #10b981;
}

.eb-about__tl-dot--gold {
  background: rgba(80, 50, 5, 0.40);
  border-color: rgba(245, 158, 11, 0.55);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.22);
}

/* Partner logo area */
.eb-about__partner-logo-area {
  background:    rgba(6, 78, 59, 0.15);
  border:        1px solid rgba(16, 185, 129, 0.30);
  border-radius: 12px;
}


/* ==========================================================================
   8. HEADING EM TAGS — consistent emerald accent
   ========================================================================== */

h1 em,
h2 em,
h3 em,
.eb-heading-1 em,
.eb-heading-2 em,
.eb-heading-3 em {
  font-style: normal;
  color: var(--eb-color-emerald-light, #10b981);
}

/* Keep gold on specific contexts where it's intentional */
.eb-home-hero h1 em,
.eb-home-perf__val--gold em,
.eb-prod__perf-val--gold {
  color: var(--eb-color-gold, #f59e0b);
}


/* ==========================================================================
   9. CARIB BANNER / FEATURE PANELS — emerald wash
   ========================================================================== */

.eb-about__carib-banner {
  background: linear-gradient(
    135deg,
    rgba(6, 78, 59, 0.30) 0%,
    rgba(4, 42, 24, 0.50) 50%,
    rgba(6, 78, 59, 0.20) 100%
  );
  border-top:    1px solid rgba(16, 185, 129, 0.20);
  border-bottom: 1px solid rgba(16, 185, 129, 0.20);
}

.eb-about__carib-points {
  border-left: 2px solid rgba(16, 185, 129, 0.25);
  padding-left: 24px;
}

.eb-about__cp-num {
  color: rgba(16, 185, 129, 0.55);
}


/* ==========================================================================
   10. CTA SECTIONS — emerald centrepiece
   ========================================================================== */

.eb-home-cta,
.eb-about__cta,
.eb-prod__bottom-cta {
  background: radial-gradient(
    ellipse 85% 70% at 50% 50%,
    rgba(6, 78, 59, 0.25) 0%,
    rgba(6, 78, 59, 0.10) 55%,
    transparent 100%
  );
}


/* ==========================================================================
   11. MARQUEE TRUST STRIP — stronger emerald accent
   ========================================================================== */

.eb-trust-marquee,
.eb-ph-marquee,
.eb-th-marquee,
.eb-sus-marquee,
.ebc-marquee {
  background:    rgba(1, 22, 12, 0.95);
  border-top:    1px solid rgba(16, 185, 129, 0.28);
  border-bottom: 1px solid rgba(16, 185, 129, 0.28);
}


/* ==========================================================================
   12. FOCUS STATES — keep emerald consistent
   ========================================================================== */

:focus-visible {
  outline:        2px solid rgba(16, 185, 129, 0.70);
  outline-offset: 3px;
  border-radius:  3px;
}


/* ==========================================================================
   13. SCROLLBAR — emerald tinted (Webkit)
   ========================================================================== */

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #011209;
}

::-webkit-scrollbar-thumb {
  background:    rgba(16, 185, 129, 0.35);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(16, 185, 129, 0.55);
}