/* ═════════════════════════════════════════════════════════════════
   THEME-GBN.CSS — Blue + Navy (HomeOne blue)
   Index page prototype — Caring Vision Therapy Academy
   All rules scoped to body.theme-gbn (index page only)

   Palette (matches HomeOne's accent blue):
     Primary  — Blue       #1A6BDA  /  light #5B9AFF  /  pale #8FB8FF
     Dark     — Deep navy  #07111F  /  #0D1E33  /  #162840
     Light bg — #F0F6FF (barely blue-tinted white)
═════════════════════════════════════════════════════════════════ */

/* ─── 1. CSS variable overrides ─────────────────────────────────────────── */
body.theme-gbn {
  --violet:           #1A6BDA;
  --violet-light:     #5B9AFF;
  --violet-glow:      rgba(26, 107, 218, 0.18);
  --pink:             #1A6BDA;   /* repurposed: HomeOne blue */

  --sovereign-night:  #07111F;
  --sovereign-night2: #0D1E33;
  --sovereign-night3: #162840;
  --sovereign-gold:   #5B9AFF;   /* gold → blue for dark-bg accents */
  --sovereign-gold-l: #8FB8FF;   /* gold-light → pale blue */
  --sovereign-ivory:  #F8FFFE;

  --clay-bg:    #F0F6FF;
  --clay-fg:    #07111F;
  --clay-muted: #4A6275;

  --shadow-card:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 8px 24px rgba(26, 107, 218, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.80);
  --shadow-card-hover:
    0 4px 16px rgba(0, 0, 0, 0.09),
    0 20px 48px rgba(26, 107, 218, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  --shadow-btn:
    0 4px 16px rgba(26, 107, 218, 0.38),
    0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-deep:
    0 2px 8px rgba(0, 0, 0, 0.06),
    0 20px 48px rgba(26, 107, 218, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

/* ─── 2. Body background ─────────────────────────────────────────────────── */
body.theme-gbn {
  background:
    radial-gradient(ellipse 90% 60% at 12% 5%,  rgba(26, 107, 218, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 90% 95%, rgba(26, 107, 218, 0.04) 0%, transparent 55%),
    var(--clay-bg) !important;
}

/* ─── 3. Scrollbar ───────────────────────────────────────────────────────── */
body.theme-gbn { scrollbar-color: #1A6BDA transparent; }
body.theme-gbn ::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #5B9AFF, #1A6BDA);
}
body.theme-gbn ::-webkit-scrollbar-thumb:hover { background: #1A6BDA; }

/* ─── 4. Scroll progress bar ─────────────────────────────────────────────── */
body.theme-gbn .scroll-progress {
  background: linear-gradient(90deg,
    #1A6BDA 0%, #5B9AFF 45%, #8FB8FF 75%, #1A6BDA 100%) !important;
  box-shadow:
    0 0 10px rgba(26, 107, 218, 0.9),
    0 0 20px rgba(26, 107, 218, 0.4) !important;
}

/* ─── 5. Navbar — redesign ───────────────────────────────────────────────── */

/* Non-scrolled (hero) state — ID selector beats every class rule in every stylesheet */
body.theme-gbn #navbar:not(.scrolled) {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Scrolled state: white card with blue identity line */
body.theme-gbn #navbar.scrolled {
  background: #FFFFFF !important;
  border: none !important;
  border-bottom: 2.5px solid rgba(26, 107, 218, 0.35) !important;
  border-radius: 14px !important;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.07),
    0 12px 36px rgba(26, 107, 218, 0.09) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
}

/* Active link — subtle white tint in hero state */
body.dark-hero.theme-gbn .navbar:not(.scrolled) .nav-links a:not(.nav-cta).active,
body.dark-hero.theme-gbn .navbar:not(.scrolled) .nav-links a:not(.nav-cta):hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Hero nav links — bold white with drop-shadow for readability over any hero image */
body.theme-gbn #navbar:not(.scrolled) .nav-links a:not(.nav-cta) {
  color: #FFFFFF !important;
  font-weight: 700 !important;
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.55),
    0 2px 12px rgba(0, 0, 0, 0.40) !important;
}
body.theme-gbn #navbar:not(.scrolled) .nav-links a:not(.nav-cta).active {
  color: #5B9AFF !important;
  text-shadow:
    0 1px 6px rgba(0, 0, 0, 0.50),
    0 0 20px rgba(91, 154, 255, 0.30) !important;
}

/* Brand text drop-shadow in hero state */
body.theme-gbn #navbar:not(.scrolled) .nav-brand-text {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.50) !important;
}

/* Logo ring — blue */
body.theme-gbn .nav-logo {
  box-shadow: 0 0 0 2px rgba(26, 107, 218, 0.30), 0 4px 10px rgba(26, 107, 218, 0.14) !important;
}

/* Brand text — CARING in blue, both states */
body.dark-hero.theme-gbn .navbar.scrolled .nav-brand-text .accent {
  color: #1A6BDA !important;
}
body.theme-gbn .nav-brand-text .accent { color: #1A6BDA !important; }
body.theme-gbn .navbar.scrolled .nav-brand-tail { color: #0D1E33; opacity: 0.75; }

/* Nav links — dark navy in scrolled state, weighted slightly heavier */
body.theme-gbn .navbar.scrolled .nav-links a:not(.nav-cta) {
  color: #0D1E33 !important;
  font-weight: 600 !important;
}

/* Hover & active — blue pill background */
body.theme-gbn .nav-links a:not(.nav-cta):hover,
body.theme-gbn .nav-links a:not(.nav-cta).active {
  background: rgba(26, 107, 218, 0.08) !important;
  color: #1A6BDA !important;
  border-radius: 8px !important;
}
body.theme-gbn .nav-links a:not(.nav-cta)::after { background: #1A6BDA; }

/* Active underline — blue */
body.theme-gbn .navbar.scrolled .nav-links a:not(.nav-cta).active::after {
  background: #1A6BDA;
}

/* Hamburger / toggle — blue tint */
body.theme-gbn .nav-toggle {
  background: rgba(26, 107, 218, 0.06);
  border-color: rgba(26, 107, 218, 0.14);
  border-radius: 8px !important;
}
body.theme-gbn .nav-toggle:hover { background: rgba(26, 107, 218, 0.12); }

/* CTA buttons — solid blue */
body.theme-gbn .nav-cta,
body.theme-gbn .nav-cta-pill {
  background: #1A6BDA !important;
  box-shadow: 0 4px 14px rgba(26, 107, 218, 0.32) !important;
  border-radius: 9999px !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}
body.theme-gbn .nav-cta:hover,
body.theme-gbn .nav-cta-pill:hover {
  background: #1550A6 !important;
  box-shadow: 0 6px 20px rgba(26, 107, 218, 0.42) !important;
  transform: translateY(-1px) !important;
}

/* Mobile dropdown — only when .open (hamburger menu expanded) */
body.dark-hero.theme-gbn .navbar:not(.scrolled) .nav-links.open {
  background: rgba(7, 17, 31, 0.98) !important;
  border-color: rgba(26, 107, 218, 0.20) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45) !important;
}
body.theme-gbn .nav-links.open {
  border-color: rgba(26, 107, 218, 0.10);
  box-shadow: 0 16px 40px rgba(26, 107, 218, 0.10), 0 4px 12px rgba(0, 0, 0, 0.06);
  border-radius: 12px;
}

/* ─── 6. Hero overlay ────────────────────────────────────────────────────── */
body.theme-gbn .hero-overlay {
  background:
    radial-gradient(ellipse 70% 55% at 50% 35%, rgba(26, 107, 218, 0.14) 0%, transparent 60%),
    linear-gradient(180deg,
      rgba(7, 17, 31, 0.55) 0%,
      rgba(7, 17, 31, 0.12) 30%,
      rgba(7, 17, 31, 0.48) 65%,
      rgba(7, 17, 31, 1.00) 100%) !important;
}

/* ─── 7. Hero text accents ───────────────────────────────────────────────── */
body.theme-gbn .hs-accent {
  color: #5B9AFF !important;
  -webkit-text-fill-color: #5B9AFF !important;
}
body.theme-gbn .hs-tag { color: #5B9AFF !important; }

/* Affiliation banner — dark glass pill, clearly visible over any hero image */
body.theme-gbn .hero-affiliation {
  background: rgba(7, 17, 31, 0.55) !important;
  border: 1.5px solid rgba(26, 107, 218, 0.70) !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
body.theme-gbn .hero-affiliation strong,
body.theme-gbn .hero-affiliation a {
  color: #5B9AFF !important;
  -webkit-text-fill-color: #5B9AFF !important;
}
body.theme-gbn .hero-affiliation svg { color: #5B9AFF; }

/* Slide-1 trust dot is hardcoded violet #C4B5FD in styles.css — fix to blue */
body.theme-gbn .hs-trust-dot { background: #5B9AFF !important; box-shadow: 0 0 8px rgba(91, 154, 255, 0.7) !important; }

body.theme-gbn .hero-progress-item.active .hero-progress-fill {
  background: linear-gradient(90deg, #8FB8FF, #5B9AFF);
}

/* ─── 8. Section labels & text gradients ────────────────────────────────── */
body.theme-gbn .section-label {
  color: #1A6BDA;
  background: rgba(26, 107, 218, 0.06);
  border-color: rgba(26, 107, 218, 0.14);
}
body.theme-gbn .section-label::before { background: #1A6BDA; }

body.theme-gbn .text-gradient-clay {
  background: linear-gradient(135deg, #5B9AFF 0%, #1A6BDA 55%, #1A6BDA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Testimonials heading uses text-gradient-gold */
body.theme-gbn .text-gradient-gold {
  background: linear-gradient(135deg, #8FB8FF 0%, #5B9AFF 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── 9. Buttons ─────────────────────────────────────────────────────────── */
body.theme-gbn .btn-primary {
  background: linear-gradient(135deg, #5B9AFF 0%, #1A6BDA 100%);
  box-shadow: var(--shadow-btn);
}
body.theme-gbn .btn-primary:hover {
  box-shadow: 0 6px 20px rgba(26, 107, 218, 0.42), 0 2px 6px rgba(0, 0, 0, 0.10);
}
body.theme-gbn .btn-secondary {
  border-color: rgba(26, 107, 218, 0.10);
}

/* ─── 10. Stats strip ────────────────────────────────────────────────────── */
body.theme-gbn .sovereign-stats {
  border-top-color: rgba(26, 107, 218, 0.12);
  border-bottom-color: rgba(26, 107, 218, 0.20);
}
body.theme-gbn .sovereign-stats::after {
  background:
    radial-gradient(ellipse 60% 80% at 10% 50%, rgba(26, 107, 218, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse 50% 80% at 90% 50%, rgba(26, 107, 218, 0.08) 0%, transparent 60%);
}

/* Gold icon → blue container */
body.theme-gbn .sov-stat-icon--gold {
  background: linear-gradient(145deg, rgba(26, 107, 218, 0.22), rgba(26, 107, 218, 0.06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 20px rgba(26, 107, 218, 0.18);
  border-color: rgba(26, 107, 218, 0.22);
}
/* Violet icon → blue container */
body.theme-gbn .sov-stat-icon--violet {
  background: linear-gradient(145deg, rgba(26, 107, 218, 0.22), rgba(26, 107, 218, 0.06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 6px 20px rgba(26, 107, 218, 0.22);
  border-color: rgba(26, 107, 218, 0.22);
}

/* ─── 11. Clinic banner ──────────────────────────────────────────────────── */
/* premium.css sets background+border with !important — must match with higher specificity (0,2,0 vs 0,1,0) + !important */
body.theme-gbn .clinic-banner {
  background: linear-gradient(135deg, rgba(26, 107, 218, 0.12) 0%, rgba(26, 107, 218, 0.05) 100%) !important;
  border-color: rgba(26, 107, 218, 0.28) !important;
}
body.theme-gbn .clinic-banner::before {
  background: linear-gradient(90deg, rgba(26, 107, 218, 0.08), transparent 60%) !important;
}
body.theme-gbn .clinic-banner:hover {
  border-color: #1A6BDA !important;
  box-shadow: 0 4px 32px rgba(26, 107, 218, 0.16) !important;
}
body.theme-gbn .clinic-banner-pill {
  background: #1A6BDA;
}
body.theme-gbn .clinic-banner-cta {
  background: #1A6BDA;
  box-shadow: 0 4px 14px rgba(26, 107, 218, 0.30);
}
body.theme-gbn .clinic-banner:hover .clinic-banner-cta {
  background: #1550A6;
  box-shadow: 0 6px 20px rgba(26, 107, 218, 0.40);
}
body.theme-gbn .clinic-banner-logo {
  filter: drop-shadow(0 2px 8px rgba(26, 107, 218, 0.18));
}

/* ─── 12. Trust section ──────────────────────────────────────────────────── */
body.theme-gbn .trust-section {
  border-bottom-color: rgba(26, 107, 218, 0.08);
  background: #FFFFFF;
}
body.theme-gbn .trust-badge {
  border-color: rgba(26, 107, 218, 0.09);
}
body.theme-gbn .trust-badge:hover {
  border-color: rgba(26, 107, 218, 0.25);
}
/* Remap badge accent colours: gold → blue, violet → blue, pink → blue */
body.theme-gbn .trust-badge--gold   { --tb-accent: #1A6BDA; }
body.theme-gbn .trust-badge--violet { --tb-accent: #1A6BDA; }
body.theme-gbn .trust-badge--pink   { --tb-accent: #1A6BDA; }

/* ─── 13. Marquee ────────────────────────────────────────────────────────── */
body.theme-gbn .marquee-section {
  background: linear-gradient(135deg, rgba(26, 107, 218, 0.05), rgba(91, 154, 255, 0.03));
  border-top-color: rgba(26, 107, 218, 0.10);
  border-bottom-color: rgba(26, 107, 218, 0.10);
}
body.theme-gbn .marquee-item strong { color: #1A6BDA; }
/* premium.css sets rgba(26,107,218,0.4) !important — override with higher specificity */
body.theme-gbn .marquee-dot { background: #5B9AFF !important; }

/* ─── 14. Why section ────────────────────────────────────────────────────── */
/* Remap purple orb → blue */
body.theme-gbn .orb-purple { background: linear-gradient(135deg, #5B9AFF, #1A6BDA); }
body.theme-gbn .metric-purple {
  background: linear-gradient(135deg, #DCEAFF, #BFDBFE);
  --m-color: #1A6BDA;
  --m-desc:  #1550A6;
}

/* ─── 15. Program panels ─────────────────────────────────────────────────── */
/* Remap gold panel → blue */
body.theme-gbn .cin-panel--gold {
  --panel-accent: #5B9AFF;
  --panel-accent-rgb: 27, 92, 212;
}
/* premium.css uses rgba(26,107,218,...) !important on the Programs section label */
body.theme-gbn .programs-cinematic-section .section-label {
  background: rgba(26, 107, 218, 0.12) !important;
  border-color: rgba(26, 107, 218, 0.28) !important;
  color: #1A6BDA !important;
}
body.theme-gbn .programs-cinematic-section .section-label::before {
  background: #1A6BDA !important;
}

/* ─── 16. Testimonials ───────────────────────────────────────────────────── */
body.theme-gbn .t-avatar--violet {
  background: linear-gradient(135deg, #5B9AFF, #1A6BDA);
}

/* ─── 17. FAQ section ────────────────────────────────────────────────────── */
body.theme-gbn .faq-trigger[aria-expanded="true"],
body.theme-gbn .faq-item.open .faq-trigger { color: #1A6BDA; }

/* ─── 18. Countdown & CTA ────────────────────────────────────────────────── */
body.theme-gbn .countdown-wrap {
  background: rgba(26, 107, 218, 0.08);
  border-color: rgba(26, 107, 218, 0.18);
}
/* premium.css sets these with !important using gold rgba */
body.theme-gbn .cd-num { color: #1A6BDA !important; }
body.theme-gbn .cd-sep { color: rgba(26, 107, 218, 0.5) !important; }

/* CTA batch tag - premium.css uses rgba(26,107,218,...) !important */
body.theme-gbn .cta-batch-tag {
  background: rgba(26, 107, 218, 0.12) !important;
  border-color: rgba(26, 107, 218, 0.30) !important;
  color: #1A6BDA !important;
}

body.theme-gbn .cta-box {
  background: linear-gradient(135deg,
    rgba(26, 107, 218, 0.10) 0%,
    rgba(91, 154, 255, 0.08) 50%,
    rgba(26, 107, 218, 0.06) 100%);
  border-color: rgba(26, 107, 218, 0.16);
}
body.theme-gbn .cta-box::before {
  background: radial-gradient(ellipse at center, rgba(26, 107, 218, 0.08) 0%, transparent 60%);
}

/* ─── 19. Footer ─────────────────────────────────────────────────────────── */
body.theme-gbn footer { border-top-color: rgba(26, 107, 218, 0.08); }
body.theme-gbn .footer-grid { border-bottom-color: rgba(26, 107, 218, 0.08); }
body.theme-gbn .footer-links a:hover,
body.theme-gbn .legal-links a:hover { color: #1A6BDA; }
body.theme-gbn .social-btn:hover {
  background: #1A6BDA;
  color: #fff;
  border-color: #1A6BDA;
  box-shadow: 0 4px 16px rgba(26, 107, 218, 0.38);
}
body.theme-gbn .contact-icon {
  background: rgba(26, 107, 218, 0.07);
  color: #1A6BDA;
  border-color: rgba(26, 107, 218, 0.11);
}

/* ─── 20. Scroll-to-top button ───────────────────────────────────────────── */
body.theme-gbn .scroll-top-btn {
  border-color: rgba(26, 107, 218, 0.18);
  color: #1A6BDA;
}
body.theme-gbn .scroll-top-btn:hover {
  background: #1A6BDA;
  color: #fff;
  border-color: #1A6BDA;
  box-shadow: 0 12px 28px rgba(26, 107, 218, 0.35);
}

/* ─── 21. DivX badge ─────────────────────────────────────────────────────── */
body.theme-gbn .divx-pill {
  background: linear-gradient(135deg, #5B9AFF, #1A6BDA);
  box-shadow: 0 3px 12px rgba(26, 107, 218, 0.32);
}
body.theme-gbn .divx-card-name { color: #1A6BDA; }
body.theme-gbn .divx-card { border-color: rgba(26, 107, 218, 0.14); }

/* ─── 22. Clay blobs ─────────────────────────────────────────────────────── */
body.theme-gbn .clay-blob-1 {
  background: radial-gradient(circle, rgba(26, 107, 218, 0.08) 0%, transparent 70%);
}
body.theme-gbn .clay-blob-2 {
  background: radial-gradient(circle, rgba(26, 107, 218, 0.06) 0%, transparent 70%);
}
body.theme-gbn .clay-blob-3 {
  background: radial-gradient(circle, rgba(26, 107, 218, 0.05) 0%, transparent 70%);
}