/* ==========================================================================
   GROWLY — DARK THEME OVERRIDE
   Usage: Add this file AFTER your main stylesheet link
   <link rel="stylesheet" href="growly-dark-theme.css">
   ========================================================================== */

/* ==========================================================================
   ROOT VARIABLES — Dark Palette Override
   ========================================================================== */
:root {
  --gold: #C9A24A;
  --gold-deep: #A8842E;
  --gold-soft: rgba(201, 162, 74, 0.12);
  --ink: #E8C97A;           /* Headings → bright gold */
  --muted: #C4A45A;         /* Body text → muted warm gold */
  --bg: #0F0E0C;            /* Was #ffffff → deep warm black */
  --bg-alt: #161410;        /* Was #FAF7F1 → slightly lighter dark */
  --bg-card: #1A1814;       /* Card surfaces */
  --bg-elevated: #211F1A;   /* Elevated panels */
  --border: rgba(201, 162, 74, 0.15);
  --border-subtle: rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   BASE
   ========================================================================== */
body {
  background: var(--bg);
  color: var(--ink);
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.growly-nav {
  background: #0F0E0C !important;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.sticky-menu {
  background: #0F0E0C !important;
}

/* Mobile Drawer */
.premium-drawer {
  background: #141210 !important;
  border-left: 1px solid var(--border) !important;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5) !important;
}

.offcanvas-header {
  border-bottom-color: var(--border) !important;
}

.mobile-drawer-links .nav-link {
  color: #C4A45A !important;
  background: #1A1814 !important;
  border-color: var(--border-subtle) !important;
}

.mobile-drawer-links .nav-link:hover,
.mobile-drawer-links .nav-link.active {
  color: var(--gold) !important;
  background: rgba(201, 162, 74, 0.08) !important;
  border-color: var(--border) !important;
}

/* Close button dark mode */
.btn-close {
  filter: invert(1) brightness(0.7);
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.hero-section {
  background: linear-gradient(
    to right,
    rgba(15, 14, 12, 0.97) 0%,
    rgba(15, 14, 12, 0.92) 45%,
    rgba(15, 14, 12, 0.5) 100%
  ), url('../images/banner-img.jpg') !important;
  background-size: cover !important;
  background-position: right center !important;
}

.display-hero {
  color: #E8C97A;
}

.lead-text {
  color: #C4A45A;
}

.eyebrow {
  color: var(--gold);
}

.hero-stats {
  border-top-color: var(--border-subtle);
}

.stat-num {
  color: #E8C97A;
}

.stat-label {
  color: #C4A45A;
}

/* ==========================================================================
   SECTION HEADINGS — Universal
   ========================================================================== */
.section-heading-block .main-title,
.vision-premium-text .main-title {
  color: #E8C97A;
  text-shadow:
  0 0 8px  rgba(201, 162, 74, 0.55), 
  0 0 20px rgba(201, 162, 74, 0.30), 
  0 0 45px rgba(201, 162, 74, 0.12); 
}

.section-alt {
  background: var(--bg-alt);
}

.text-muted-2 {
  color: var(--muted);
}

/* ==========================================================================
   WHAT IS GROWLY — Gold Gradient Section
   ========================================================================== */
#what.section {
  background: linear-gradient(
    231deg,
    #1a1508 0%,
    #231c09 18%,
    #1c1608 35%,
    #141210 48%,
    #0F0E0C 55%,
    #1a1508 65%,
    #211a08 82%,
    #161208 100%
  ) !important;
}

/* Feature Cards */
.card-glow-wrapper {
  background: #2A2720 !important;
}

.card-glow-wrapper::before {
  background: conic-gradient(
    transparent 0deg,
    transparent 260deg,
    rgba(201, 162, 74, 0.2) 300deg,
    rgba(201, 162, 74, 0.6) 340deg,
    #C9A24A 360deg
  ) !important;
}

.custom-feature-card {
  background: #1A1814 !important;
}

.card-heading {
  color: #E8C97A !important;
}

.card-text {
  color: #C4A45A !important;
}

/* ==========================================================================
   GROWLY FORMULA SECTION
   ========================================================================== */
.formula-section {
  background-color: #0F0E0C !important;
}

.formula-desc {
  color: #C4A45A !important;
}

/* Orbit nodes */
.orbit-node {
  background: #1A1814 !important;
  border-color: rgba(201, 162, 74, 0.2) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
}

.orbit-node span {
  color: #D4AA60 !important;
}

/* Pillar list */
.pillar-list li {
  border-bottom-color: rgba(201, 162, 74, 0.12) !important;
}

.pillar-list strong {
  color: #E8C97A !important;
}

.pillar-list span {
  color: #C4A45A !important;
}

/* ==========================================================================
   VISION / MISSION / CORE VALUES
   ========================================================================== */
.vision-premium-section {
  background-color: #0F0E0C !important;
}

.vision-premium-section::before {
  background-image:
    radial-gradient(circle at 15% 25%, rgba(201, 162, 74, 0.04) 0%, transparent 40%),
    radial-gradient(circle at 85% 45%, rgba(201, 162, 74, 0.05) 0%, transparent 45%),
    radial-gradient(circle at 35% 85%, rgba(201, 162, 74, 0.03) 0%, transparent 35%),
    linear-gradient(rgba(201, 162, 74, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 162, 74, 0.03) 1px, transparent 1px) !important;
}

.vision-premium-text p {
  color: #C4A45A !important;
}

.vision-premium-image {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4) !important;
}

.vision-premium-row:hover .vision-premium-image {
  box-shadow: 0 20px 45px rgba(201, 162, 74, 0.1) !important;
}

/* ==========================================================================
   GROWTH PILLARS SECTION
   ========================================================================== */
#pillars.pillars-premium-section {
  background: linear-gradient(
    231deg,
    rgba(40, 30, 8, 0.95) 0%,
    rgba(35, 28, 10, 0.9) 45%,
    rgba(30, 22, 8, 0.88) 85%,
    rgba(20, 15, 5, 0.85) 100%
  ) !important;
}

.pillar-premium-card {
  background: linear-gradient(145deg, #1A1814, #151310) !important;
  border-color: rgba(201, 162, 74, 0.15) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
}

.pillar-premium-card:hover {
  border-color: var(--gold) !important;
  box-shadow: 0 20px 40px rgba(168, 132, 46, 0.18) !important;
}

.pillar-premium-title {
  color: #E8C97A !important;
}

.pillar-premium-desc {
  color: #C4A45A !important;
}

/* ==========================================================================
   GLOBAL COMMUNITY
   ========================================================================== */
.community-stats {
  background: #1A1814 !important;
  border-color: rgba(201, 162, 74, 0.15) !important;
}

.community-stats li {
  border-bottom-color: rgba(201, 162, 74, 0.1) !important;
}

.community-stats i {
  background: var(--gold-soft) !important;
}

.community-stats strong {
  color: #E8C97A !important;
}

.community-stats span {
  color: #C4A45A !important;
}

/* World map — invert so it shows on dark bg */
.map-wrap img {
  filter: brightness(0.85) sepia(0.3) hue-rotate(5deg) saturate(1.2);
}

/* ==========================================================================
   GREEN MISSION SECTION
   ========================================================================== */
#mission.green-mission {
  background-image: linear-gradient(
    90deg,
    rgba(15, 14, 12, 0.97) 0%,
    rgba(15, 14, 12, 0.85) 60%
  ), url(/Content/Home/assets-growly/images/greeny.png) !important;
  background-size: cover !important;
  background-position: right center !important;
  background-color: #0F0E0C !important;
}

.mission-title {
  color: #E8C97A !important;  
  text-shadow:
  0 0 8px  rgba(201, 162, 74, 0.55),   
  0 0 20px rgba(201, 162, 74, 0.30),   
  0 0 45px rgba(201, 162, 74, 0.12); 
}

.text-muted-12 {
  color: #C4A45A !important;
}

.row.g-2.mission-stats {
  background: linear-gradient(
    275deg,
    rgba(201, 162, 74, 0.06) 0%,
    rgba(201, 162, 74, 0.02) 50%,
    transparent 100%
  ) !important;
}

.mission-stats .m-num {
  color: #E8C97A !important;
}

.mission-stats .m-lbl {
  color: #C4A45A !important;
}

/* ==========================================================================
   WHY JOIN GROWLY
   ========================================================================== */
.section-alt {
  background: var(--bg-alt) !important;
}

.title-top,
.title-bottom {
  color: #C4A45A !important;
}

/* ==========================================================================
   LEADERSHIP
   ========================================================================== */
.leader-card {
  background: #1A1814 !important;
  border-color: rgba(201, 162, 74, 0.15) !important;
}

.leader-card:hover {
  box-shadow: 0 14px 30px -8px rgba(0, 0, 0, 0.5) !important;
}

.leader-card h6 {
  color: #E8C97A !important;
}

.leader-card p {
  color: #C4A45A !important;
}

/* ==========================================================================
   CTA BANNER
   ========================================================================== */
.cta-banner {
  background-image: linear-gradient(
    180deg,
    rgba(15, 14, 12, 0.92) 0%,
    rgba(15, 14, 12, 0.75) 60%
  ), url(/Content/Home/assets-growly/images/gg.png) !important;
  background-size: cover !important;
  background-position: center !important;
}

.cta-headline {
  color: #E8C97A !important;
  text-shadow:
  0 0 8px  rgba(201, 162, 74, 0.55),   
  0 0 20px rgba(201, 162, 74, 0.30),   
  0 0 45px rgba(201, 162, 74, 0.12);   
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.growly-footer {
  background: #0A0908 !important;
  border-top-color: var(--border) !important;
}

.growly-footer h6 {
  color: #E8C97A !important;
}

.growly-footer ul li a {
  color: #C4A45A !important;
}

.growly-footer ul li a:hover {
  color: var(--gold) !important;
}

.growly-footer .text-muted-2 {
  color: var(--muted) !important;
}

.socials a {
  background: rgba(201, 162, 74, 0.1) !important;
  color: var(--gold) !important;
}

.socials a:hover {
  background: var(--gold) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   SCROLL TO TOP BUTTON — unchanged (gold already works on dark)
   ========================================================================== */

/* ==========================================================================
   BOOTSTRAP OVERRIDES — dark-safe utilities
   ========================================================================== */
.text-muted {
  color: var(--muted) !important;
}

/* Navbar toggler icon — white on dark */
.navbar-toggler-icon {
  filter: invert(1);
}

/* ==========================================================================
   MOBILE LOGO TEXT in Drawer (logo-mark G badge)
   ========================================================================== */
.logo-mark {
  color: var(--gold) !important;
}

.logo-name {
  color: #E8C97A !important;
}