/* ==========================================================================
   Both Learners — Backgrounds & accent (v2.2.0)
   · Light areas  : interactive "Constellation" background (js/constellation.js)
   · Dark areas   : Midnight ink (unchanged, the constellation is hidden there)
   · Accent (10%) : amber #F5A524 on button hover and on key buttons
   ========================================================================== */
:root{
  --bl-amber:        #F5A524;
  --bl-amber-dark:   #D98B0B;
  --bl-amber-light:  #FEF4E2;
  --bg-cloud-mist:   linear-gradient(180deg,#FFFFFF 0%,#F5F6F8 55%,#EAF3FD 100%);
  --bg-midnight-ink: radial-gradient(ellipse at 15% 0%,rgba(0,111,225,.35) 0%,rgba(0,111,225,0) 55%),
                     linear-gradient(160deg,#2A2C30 0%,#1F2124 100%);
  --bg-deep-ocean:   radial-gradient(ellipse at 85% 0%,rgba(90,166,240,.35) 0%,rgba(90,166,240,0) 55%),
                     linear-gradient(135deg,#003D7D 0%,#0057B3 50%,#006FE1 100%);
}

/* ── 1. Constellation canvas sits behind the whole site ───────────── */
html{ background:#F5F6F8 var(--bg-cloud-mist) fixed; }
body,
#page, .site, .site-content, #content, .ast-container, #primary, .site-main,
.ast-separate-container, .ast-plain-container, .ast-page-builder-template{ background:transparent !important; }
#bl-constellation{
  position:fixed; inset:0; width:100vw; height:100vh;
  z-index:-1; pointer-events:none; display:block;
}

/* Light sections become see-through so the constellation shows. Cards stay white. */
.bg-white, .bg-light, .bg-off,
#hero, .about-hero, .contact-hero, #testimonials,
.service-section:not([style*="background"]),
.resume-page,
.bl-blog-wrap, .bl-blog-page, .bl-next-post-section, .bl-comments-section, .bl-single-wrap,
section[style*="background:var(--color-light-bg)"],
section[style*="background:var(--color-off-white)"],
section[style*="background:var(--color-white)"],
.bl-single-wrap > div[style*="background:var(--color-light-bg)"],
.bl-single-wrap > div[style*="background:white"]{
  background:transparent !important;
}
/* soften the old flat-grey hero decorations so the dots read through */
#hero::before, #hero::after{ opacity:.55; }

/* Blog posts: keep the reading area on a clean white panel */
.bl-single-wrap > div[style*="background:white"] > .container{
  background:#fff; box-shadow:0 1px 0 #DCDFE4;
}
.bl-single-wrap > div[style*="background:white"] > .container{ border-radius:16px; padding-top:1.5rem; padding-bottom:1.5rem; }
.bl-single-wrap > div[style*="background:var(--color-light-bg)"]{ border-bottom-color:transparent !important; }

/* ── 2. Dark areas: Midnight ink (constellation hidden underneath) ── */
.services-hero,
.service-page-hero,
.legal-hero,
#youtube-section,
section#youtube,
#final-cta,
#life-coaching.service-section,
section[style*="#2A2C30 0%,#3A3D42 100%"],
section[style*="#2A2C30 0%,#0f1e35"]{
  background:var(--bg-midnight-ink) !important;
  color:#fff;
}
#counters{ background:var(--bg-deep-ocean) !important; }
#bl-footer{ background:linear-gradient(180deg,#1F2124 0%,#16171A 100%) !important; border-top:1px solid rgba(255,255,255,.08); }

#youtube-section::before, #final-cta::before, #counters::before,
.services-hero::before, .service-page-hero::after{ pointer-events:none; }
#youtube-section > .container, #final-cta > .container{ position:relative; z-index:1; }
#youtube-section .section-subtitle, section#youtube p, .services-hero p, .legal-hero p{ color:rgba(255,255,255,.78) !important; }

/* ── 3. Amber accent (10%) ────────────────────────────────────────── */

/* 3a. Every button turns amber on hover */
.btn:hover, .btn:focus-visible,
button[type="submit"]:hover, input[type="submit"]:hover,
.ab-btn:hover, .bl-btn:hover, .ac-btn:hover, .bc-btn:hover,
.newsletter-btn:hover, .slider-btn:hover,
.bl-feat-card:hover .bl-feat-go, .bl-feat-go:hover,
.wp-block-button__link:hover, .ast-button:hover, .button:hover,
.bl-pagination a:hover, .bl-paging a:hover{
  background:var(--bl-amber) !important;
  border-color:var(--bl-amber) !important;
  color:#2A2C30 !important;
  box-shadow:0 8px 26px rgba(245,165,36,.38) !important;
}
.btn:hover i, .btn:focus-visible i, button[type="submit"]:hover i,
.bl-feat-go:hover i, .bl-feat-card:hover .bl-feat-go i{ color:#2A2C30 !important; }
.btn:hover::after{ background:rgba(255,255,255,.06); }

/* intro-video player controls */
.bliv-btn:hover, .bliv-btn:focus-visible{ background:var(--bl-amber) !important; color:#2A2C30 !important; }
.bliv-start:hover .bliv-start-btn{ background:var(--bl-amber) !important; color:#2A2C30 !important; }

/* 3b. Amber buttons: "Let's Connect" in the header, main call-to-action buttons */
.btn-accent,
#final-cta .btn-white,
.service-page-hero .btn-white,
.services-hero .btn-white{
  background:var(--bl-amber) !important;
  border-color:var(--bl-amber) !important;
  color:#2A2C30 !important;
  box-shadow:0 4px 20px rgba(245,165,36,.35);
}
.btn-accent:hover,
#final-cta .btn-white:hover,
.service-page-hero .btn-white:hover,
.services-hero .btn-white:hover{
  background:var(--bl-amber-dark) !important;
  border-color:var(--bl-amber-dark) !important;
  color:#2A2C30 !important;
}
.btn-accent:hover i, #final-cta .btn-white:hover i,
.service-page-hero .btn-white:hover i, .services-hero .btn-white:hover i{ color:#2A2C30 !important; }

/* 3c. Amber button text & icons */
.btn-outline-white i,
.btn-outline i,
.ac-btn::after, .bc-btn::after{ color:var(--bl-amber); }
#bl-footer .newsletter-btn{ background:var(--bl-amber) !important; color:#2A2C30 !important; }
#bl-footer .newsletter-btn:hover{ background:var(--bl-amber-dark) !important; color:#2A2C30 !important; }

/* 3d. Keyboard focus ring in amber for all buttons */
.btn:focus-visible, button:focus-visible, .bl-feat-go:focus-visible{
  outline:3px solid rgba(245,165,36,.55); outline-offset:2px;
}