/* ============================================================
   JAMESGENDOM — Global Design System (White-First Premium)
   Palette:
     --gold:    #D4AF37  (Golden Yellow — brand accent)
     --blue:    #2764FF  (Electric Blue  — secondary action)
     --black:   #0A0A0A  (Near-black  — headings, hero bg)
     --dark:    #1A1A1A  (Dark sections)
     --white:   #FFFFFF  (Primary page background — 80%)
     --off-white: #F8F6F1 (Warm white for section alternates)
     --gray-text: #4B5563 (Body copy on white bg)
   ============================================================ */

/* ---- Google Font ------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Prompt:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --gold:        #D4AF37;
  --gold-light:  #F0D060;
  --gold-dark:   #A88A20;
  --blue:        #2764FF;
  --blue-dark:   #1A4ACC;
  --black:       #0A0A0A;
  --dark:        #111111;
  --white:       #FFFFFF;
  --off-white:   #F8F6F1;
  --gray-text:   #4B5563;
  --gray-mid:    #6B7280;
  --border:      rgba(0,0,0,0.08);
  --border-gold: rgba(212,175,55,0.35);
}

/* ---- Base ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-family: 'Prompt', 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--white);
  color: var(--black);
  -webkit-font-smoothing: antialiased;
}

/* Reduce thickness of major headings */
h1, h2, h3, .font-black {
  font-weight: 700 !important;
}

/* ---- Layout helpers --------------------------------------- */
.hero { min-height: 60vh; display: flex; align-items: center; }
.hero .display-2 { font-weight: 800; letter-spacing: -1px; }
.navbar-brand { letter-spacing: 2px; }

img { max-width: 100%; height: auto; display: block; }

/* ---- Dropdown (stays dark for contrast on dark navbar) ---- */
.dropdown-menu {
  border-radius: .75rem;
  padding: 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
@media (min-width: 992px) {
  .dropdown-menu.dropdown-menu-dark { background: #0f0f0f; }
}

/* ============================================================
   GLOBAL PAGE THEME OVERRIDES
   Forces every page into white-background / dark-text mode.
   Hero sections keep a black/dark background for drama.
   ============================================================ */

/* ----- BODY default: white bg, black text ------------------ */
body.bg-black   { background-color: var(--white) !important; color: var(--black) !important; }
body.bg-white   { background-color: var(--white) !important; color: var(--black) !important; }

/* ----- Section overrides ----------------------------------- */

/* Hero: stays dramatic black */
section.bg-black,
header.bg-black,
section[class*="from-black"],
section[class*="to-black"] {
  background: var(--black) !important;
  color: var(--white) !important;
}

/* Content sections: white background */
section.bg-\[#07090e\],
section.bg-\[#0c0f18\],
section.bg-gray-900,
section.bg-gray-950 {
  background-color: var(--off-white) !important;
  color: var(--black) !important;
}

/* CTA section at bottom: rich black for contrast */
section.py-20.bg-black.text-center {
  background-color: var(--black) !important;
  color: var(--white) !important;
}

/* ---- Cards: white background, subtle border --------------- */
.card { border: none; border-radius: .75rem; }

/* ----- Footer: stays dark ---------------------------------- */
footer {
  background-color: var(--black) !important;
  color: var(--white) !important;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* ============================================================
   CONTENT SECTION CARD STYLES
   Used in subpages (coaching, courses, events, programs)
   ============================================================ */

/* Dark content cards → become white cards with border */
.p-8.bg-black\/40,
.p-8.bg-black\/30,
.p-8.bg-black\/20,
div[class*="bg-black/"] {
  background-color: var(--white) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07) !important;
}

/* Text inside cards */
.p-8.bg-black\/40 p,
.p-8.bg-black\/30 p,
div[class*="bg-black/"] p {
  color: var(--gray-text) !important;
}

div[class*="bg-black/"] .text-gray-400,
div[class*="border-gray-800"] .text-gray-400 {
  color: var(--gray-text) !important;
}

/* Borders on cards: use light version */
div.border.border-gray-800 {
  border-color: var(--border) !important;
}

/* ============================================================
   TYPOGRAPHY: On white background
   ============================================================ */

/* General gray text → dark gray readable on white bg pages */
.text-gray-400 { color: var(--gray-text) !important; }
.text-gray-300 { color: #374151 !important; }
.text-gray-500 { color: var(--gray-mid) !important; }

/* ============================================================
   NAVBAR EXCEPTION — restore light text inside dark nav
   Uses higher specificity to beat the global .text-gray-300 rule.
   ============================================================ */
body nav .text-gray-300,
body nav .text-gray-400,
body nav button.text-gray-300,
body nav a.text-gray-300,
body #navbar-placeholder nav .text-gray-300,
body #navbar-placeholder nav .text-gray-400,
body #navbar-placeholder nav button.text-gray-300,
body #navbar-placeholder nav a.text-gray-300 {
  color: #D1D5DB !important; /* light gray — readable on dark navbar */
}

/* Mobile hamburger icon */
body nav svg.text-gray-300,
body #navbar-placeholder nav svg.text-gray-300 {
  color: #D1D5DB !important;
}

/* White text inside dark sections stays white */
section.bg-black .text-gray-400,
section.bg-black .text-gray-300,
header.bg-black .text-gray-400,
header.bg-black .text-gray-300,
section.py-20.bg-black.text-center .text-gray-400,
section.py-20.bg-black.text-center .text-gray-300 {
  color: rgba(255,255,255,0.65) !important;
}

/* Hero gradient sections (dark gradient to black) — keep text light */
section[class*="bg-gradient-to-b"][class*="to-black"] .text-gray-400,
section[class*="bg-gradient-to-b"][class*="to-black"] .text-gray-300,
section[class*="bg-gradient"][class*="from-"] .text-gray-400 {
  color: rgba(255,255,255,0.7) !important;
}

/* Hero gradient section body text */
section[class*="bg-gradient-to-b"][class*="to-black"] p {
  color: rgba(255,255,255,0.65) !important;
}

/* About page hero header (uses header tag with bg-gradient) */
header[class*="bg-gradient"] .text-gray-400,
header[class*="bg-gradient"] p {
  color: rgba(255,255,255,0.7) !important;
}

/* ============================================================
   GOLD ACCENT UTILITIES
   ============================================================ */

.text-gold          { color: var(--gold) !important; }
.hover\:text-gold:hover { color: var(--gold) !important; }
.bg-gold            { background-color: var(--gold) !important; }
.border-gold        { border-color: var(--gold) !important; }
.shadow-gold        { box-shadow: 0 0 20px rgba(212,175,55,0.3) !important; }
.shadow-gold-lg     { box-shadow: 0 0 40px rgba(212,175,55,0.4) !important; }

/* Gold gradient text */
.highlight-gold {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold), var(--gold-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   PREMIUM CARD
   ============================================================ */

.card-premium {
  background: var(--white);
  border: 1px solid rgba(212,175,55,0.2);
  border-radius: 1rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.card-premium:hover {
  border-color: var(--gold);
  box-shadow: 0 8px 32px rgba(212,175,55,0.2);
  transform: translateY(-4px);
}

/* ============================================================
   BUTTON: Gold CTA
   ============================================================ */

.btn-gold {
  background-color: var(--gold);
  color: var(--black);
  font-weight: 700;
  padding: 0.75rem 2rem;
  border-radius: 9999px;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  display: inline-block;
  text-decoration: none;
}
.btn-gold:hover {
  background-color: var(--gold-light);
  transform: scale(1.04);
  box-shadow: 0 0 20px rgba(212,175,55,0.4);
  color: var(--black);
}

/* ============================================================
   DIVIDERS
   ============================================================ */

.divider-gold {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 2rem 0;
}

/* Section separator on white pages */
section + section {
  border-top: 1px solid var(--border);
}

/* ============================================================
   INDEX PAGE — SECTION ALTERNATING
   white → off-white → white for visual rhythm
   ============================================================ */

main > section:nth-child(odd)  { background-color: var(--white)     !important; }
main > section:nth-child(even) { background-color: var(--off-white)  !important; }

/* But keep hero & CTA dark always */
main > header,
main > section.bg-black,
section.bg-black.text-center {
  background-color: var(--black) !important;
}

/* ============================================================
   SHOP PAGE OVERRIDES
   ============================================================ */

/* Shop filter tabs area */
.filter-tab {
  background: transparent;
  color: var(--black);
  border: 1.5px solid var(--border);
  padding: 0.4rem 1.25rem;
  border-radius: 9999px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.filter-tab:hover,
.filter-tab.active {
  background: var(--gold) !important;
  color: var(--black) !important;
  border-color: var(--gold) !important;
}

/* Shop product cards */
.product-card {
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 1.25rem;
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.product-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
  transform: translateY(-4px);
  border-color: var(--gold);
}

/* Product price: gold */
.price-tag { color: var(--gold) !important; font-weight: 800; }

/* ============================================================
   NEWSLETTER / FORMS
   ============================================================ */

input[type="email"],
input[type="text"],
textarea {
  background: var(--white) !important;
  color: var(--black) !important;
  border: 1.5px solid rgba(0,0,0,0.15) !important;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
}
input[type="email"]:focus,
input[type="text"]:focus,
textarea:focus {
  border-color: var(--gold) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(212,175,55,0.15);
}

/* ============================================================
   RESPONSIVE UTILS
   ============================================================ */

@media (max-width: 768px) {
  .hero { min-height: 50vh; }
}

/* Blue Aura Pulse Effect */
.pulse-blue-aura {
  animation: pulse-blue 2s infinite alternate;
  box-shadow: 0 0 15px rgba(39, 100, 255, 0.5);
  background-color: #2764FF !important;
  color: #FFFFFF !important;
}
.pulse-blue-aura:hover {
  background-color: #1A4ACC !important;
  transform: scale(1.03);
}
@keyframes pulse-blue {
  0% {
    box-shadow: 0 0 10px rgba(39, 100, 255, 0.4), 0 0 5px rgba(39, 100, 255, 0.2);
  }
  100% {
    box-shadow: 0 0 25px rgba(39, 100, 255, 0.8), 0 0 12px rgba(39, 100, 255, 0.5), 0 0 35px rgba(39, 100, 255, 0.3);
  }
}

/* Institutional Redesign Additions */
.bg-soft-white {
  background-color: #F8F9FC !important;
}

.text-gold {
  color: #D4AF37 !important;
}

.bg-gold-light {
  background-color: rgba(212, 175, 55, 0.08) !important;
}

.border-gold-subtle {
  border-color: rgba(212, 175, 55, 0.15) !important;
}

/* Apple/Stripe-like Grid Card hover */
.premium-card {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(0, 0, 0, 0.04);
}
.premium-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
  border-color: rgba(39, 100, 255, 0.2);
}

/* OpenAI-like console styling */
.terminal-glow {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

/* Animated subtle mesh gradient background */
.animated-mesh {
  background: linear-gradient(120deg, #F8F9FC 0%, #E8EDF9 50%, #FAF6EE 100%);
  background-size: 200% 200%;
  animation: mesh-move 15s ease infinite alternate;
}
@keyframes mesh-move {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* Deep Blue Glow Aura Styles */
.glow-deep-blue {
  box-shadow: 0 0 15px rgba(0, 85, 255, 0.6);
  background-color: #0055ff;
  color: #ffffff;
  transition: all 0.3s ease;
}
.glow-deep-blue:hover {
  box-shadow: 0 0 30px rgba(0, 85, 255, 1);
  background-color: #ffffff;
  color: #000000;
}

/* Deep Blue Glow Aura for Light Themes */
.glow-deep-blue-light {
  box-shadow: 0 4px 20px rgba(0, 85, 255, 0.3);
  background-color: #0055ff;
  color: #ffffff;
  transition: all 0.3s ease;
}
.glow-deep-blue-light:hover {
  box-shadow: 0 8px 30px rgba(0, 85, 255, 0.5);
  background-color: #0044cc;
  color: #ffffff;
}