/* ==========================================================================
   WAKAR Global Enterprise — DARK VARIANT
   "Warm Midnight" — champagne gold on matte black
   Loads AFTER wj-brand.css to override the light tokens.
   ========================================================================== */

:root {
  /* ---- Surfaces (dark) ---- */
  --bg:            #08090B;   /* matte black canvas */
  --bg-elev:       #101115;   /* card */
  --bg-soft:       #0C0D11;   /* section wash */
  --bg-deep:       #05060A;   /* deepest — footer */

  /* ---- Ink (warm off-whites, never cool gray) ---- */
  --ink:           #F5F1E5;   /* primary text */
  --ink-body:      #C9C2B0;   /* body */
  --ink-mute:      #8E8878;   /* supporting */
  --ink-faint:     #6A6558;   /* meta/captions */
  --ink-invert:    #08090B;

  /* ---- Rules & lines ---- */
  --rule:          rgba(194,160,90,0.16);
  --rule-strong:   rgba(194,160,90,0.32);

  /* ---- Gold (champagne, not brassy) ---- */
  --gold:          #E4C97E;
  --gold-warm:     #C7A35A;
  --gold-deep:     #B08A3E;
  --gold-tint:     rgba(228,201,126,0.18);
  --gold-wash:     rgba(228,201,126,0.08);

  /* ---- Shadow ---- */
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.35);
  --shadow:    0 8px 24px -10px rgba(0,0,0,0.55), 0 24px 60px -30px rgba(0,0,0,0.75);
  --shadow-lg: 0 40px 90px -30px rgba(0,0,0,0.85), 0 15px 40px -20px rgba(0,0,0,0.55);
  --shadow-gold: 0 20px 50px -22px rgba(228,201,126,0.35);
}

/* ==========================================================================
   Body + selection
   ========================================================================== */
body { background: var(--bg); color: var(--ink); }
::selection { background: rgba(228,201,126,0.3); color: #FFFFFF; }

/* ==========================================================================
   Typography color overrides
   ========================================================================== */
.wj-display, .wj-h1, .wj-h2, .wj-h3 { color: var(--ink); }
.wj-lead, .wj-body { color: var(--ink-body); }
.wj-meta { color: var(--ink-mute); }
.wj-italic { color: var(--gold); font-weight: 500; }
.wj-eyebrow { color: var(--gold); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.wj-btn-primary {
  background: var(--gold);
  color: var(--ink-invert);
  border-color: var(--gold);
}
.wj-btn-primary:hover {
  background: #F0DEA9;
  border-color: #F0DEA9;
  color: var(--ink-invert);
  box-shadow: var(--shadow-gold);
}

.wj-btn-gold {
  background: var(--gold);
  color: var(--ink-invert);
  border-color: var(--gold);
}
.wj-btn-gold:hover {
  background: #F0DEA9;
  border-color: #F0DEA9;
  color: var(--ink-invert);
  box-shadow: var(--shadow-gold);
}

.wj-btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.wj-btn-ghost:hover {
  background: var(--gold-wash);
  border-color: var(--gold);
  color: var(--gold);
}

.wj-btn-subtle {
  background: transparent;
  color: var(--gold);
  border-color: var(--rule-strong);
}
.wj-btn-subtle:hover {
  border-color: var(--gold);
  background: var(--gold-wash);
  color: var(--gold);
}

.wj-link { color: var(--gold); }
.wj-link:hover { color: #F0DEA9; border-bottom-color: #F0DEA9; }
.wj-link-arrow { color: var(--ink); }
.wj-link-arrow::after { color: var(--gold); }

/* ==========================================================================
   Sections
   ========================================================================== */
.wj-section-soft { background: var(--bg-soft); }
.wj-section-white { background: var(--bg-elev); }
.wj-section-deep {
  background: linear-gradient(155deg, #14151C, #08090B);
  color: var(--ink);
}
.wj-section-deep .wj-h1,
.wj-section-deep .wj-h2,
.wj-section-deep .wj-h3,
.wj-section-deep .wj-display { color: var(--ink); }
.wj-section-deep .wj-body,
.wj-section-deep .wj-lead { color: var(--ink-body); }

/* ==========================================================================
   Cards
   ========================================================================== */
.wj-card {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
}
.wj-card-hover:hover {
  border-color: var(--rule-strong);
  box-shadow: var(--shadow);
}
.wj-card-feature {
  background: linear-gradient(180deg, rgba(228,201,126,0.05), var(--bg-elev));
  border-color: var(--rule-strong);
  position: relative;
}
.wj-card-feature::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse at 90% -10%, rgba(228,211,162,0.12), transparent 60%);
  pointer-events: none;
}
.wj-card-feature > * { position: relative; }

/* ==========================================================================
   Nav (dark)
   ========================================================================== */
.wj-nav {
  background: rgba(8,9,11,0.88);
  border-bottom-color: var(--rule);
}
.wj-nav[data-scrolled="true"] {
  background: rgba(8,9,11,0.96);
  border-bottom-color: var(--rule-strong);
  box-shadow: 0 4px 20px -12px rgba(0,0,0,0.8);
}
.wj-logo-mark {
  background: var(--gold);
  color: var(--ink-invert);
}
.wj-logo-name { color: var(--ink); }
.wj-logo-sub { color: var(--gold); }
.wj-nav-link { color: var(--ink-body); }
.wj-nav-link:hover, .wj-nav-link[data-active="true"] {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
.wj-nav-toggle {
  border-color: var(--rule-strong);
}
.wj-nav-toggle span,
.wj-nav-toggle span::before,
.wj-nav-toggle span::after {
  background: var(--gold);
}
.wj-mobile-menu { background: var(--bg); }
.wj-mobile-menu a { color: var(--ink); border-bottom-color: var(--rule); }
.wj-mobile-menu a::after { color: var(--gold); }
.wj-mobile-phone {
  background: var(--bg-elev);
  border-color: var(--rule) !important;
}
.wj-mobile-phone strong { color: var(--gold); }

/* ==========================================================================
   Forms
   ========================================================================== */
.wj-input, .wj-textarea, .wj-select {
  background: var(--bg-soft);
  border-color: var(--rule-strong);
  color: var(--ink);
}
.wj-input::placeholder, .wj-textarea::placeholder { color: var(--ink-faint); }
.wj-input:focus, .wj-textarea:focus, .wj-select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(228,201,126,0.15);
}
.wj-label { color: var(--gold); }
.wj-fineprint { color: var(--ink-mute); }

/* ==========================================================================
   Chips
   ========================================================================== */
.wj-chip {
  background: var(--gold-wash);
  border-color: var(--rule-strong);
  color: var(--gold);
}
.wj-chip-live {
  background: var(--bg-elev);
  border-color: var(--rule-strong);
  color: var(--ink);
}

/* ==========================================================================
   Divider
   ========================================================================== */
.wj-divider { background: var(--rule); }
.wj-divider-gold { background: var(--gold); }

/* ==========================================================================
   Countdown / Progress
   ========================================================================== */
.wj-countdown-unit {
  background: var(--bg-soft);
  border-color: var(--rule);
}
.wj-countdown-num { color: var(--gold); }
.wj-countdown-label { color: var(--ink-mute); }
.wj-progress { background: rgba(255,255,255,0.06); }
.wj-progress-fill {
  background: linear-gradient(90deg, var(--gold-warm), var(--gold));
}

/* ==========================================================================
   Footer
   ========================================================================== */
.wj-footer {
  background: var(--bg-deep);
  color: var(--ink-body);
  border-top: 1px solid var(--rule);
}
.wj-footer a { color: var(--ink-body); }
.wj-footer a:hover { color: var(--gold); }
.wj-footer h4 { color: var(--gold); }
.wj-footer-brand-name { color: var(--ink); }
.wj-footer-brand-sub { color: var(--gold); }
.wj-footer-bottom { border-top-color: var(--rule); color: var(--ink-faint); }
.wj-footer-disclosures a { color: var(--ink-faint); }

/* ==========================================================================
   Mobile action bar
   ========================================================================== */
.wj-mobile-action {
  background: rgba(8,9,11,0.94);
  border-top-color: var(--rule);
}

/* ==========================================================================
   Page-specific dark overrides
   ========================================================================== */

/* Homepage hero portrait caption */
.wj-hero-portrait-caption {
  background: var(--bg-elev);
  border-color: var(--rule);
}
.wj-hero-portrait-caption .wj-meta { color: var(--ink-mute); }
.wj-hero-trust { border-top-color: var(--rule); }
.wj-hero-trust-value { color: var(--gold); }
.wj-hero-trust-value span { color: var(--gold); }
.wj-hero-trust-label { color: var(--ink-mute); }
.wj-webinar-image { background: #14151A; }
.wj-webinar-meta {
  border-top-color: var(--rule);
  color: var(--ink-mute);
}
.wj-expertise-num { color: var(--gold); }
.wj-valuation-benefits li { color: var(--ink-body); }
.wj-valuation-benefits svg {
  background: var(--gold-wash);
  color: var(--gold);
}
.wj-stars { color: var(--gold); }
.wj-quote p { color: var(--ink); }
.wj-quote footer .wj-meta { color: var(--ink-mute); }
.wj-dot { background: var(--rule-strong); }
.wj-dot[data-active="true"] { background: var(--gold); }
.wj-cred {
  background: var(--gold-wash);
  border-color: var(--rule);
  color: var(--ink-body);
}
.wj-cred::before { background: var(--gold); }

/* About page */
.wj-about-hero-portrait::before { border-color: var(--rule-strong); }
.wj-stat { border-right-color: var(--rule); }
.wj-stats .wj-stat:last-child { border-right: 0; }
@media (max-width: 640px) {
  .wj-stat:nth-child(2) { border-right: 0; }
  .wj-stat:nth-child(1), .wj-stat:nth-child(2) { border-bottom-color: var(--rule); }
}
.wj-stat-num { color: var(--gold); }
.wj-stat-num span { color: var(--gold); }
.wj-stat-label { color: var(--ink-mute); }
.wj-cred-card {
  background: var(--bg-elev);
  border-color: var(--rule);
}
.wj-cred-card:hover { border-color: var(--gold-warm); }
.wj-cred-icon {
  background: var(--gold-wash);
  color: var(--gold);
}
.wj-cred-card strong { color: var(--ink); }
.wj-cred-card span { color: var(--ink-mute); }
.wj-approach-item { border-bottom-color: var(--rule); }
.wj-approach-num { color: var(--gold); }

/* Webinar pages */
.wj-check {
  background: var(--gold-wash);
  color: var(--gold);
}
.wj-web-benefits strong { color: var(--gold); }
.wj-web-host { border-top-color: var(--rule); }
.wj-web-host img { border-color: var(--gold-warm); }
.wj-panel-card {
  background: var(--bg-elev);
  border-color: var(--rule);
}
.wj-panel-tag { color: var(--ink-mute); }
.wj-panel-tag-host { color: var(--gold); }
.wj-panel-avatar {
  background: var(--bg-soft);
  color: var(--gold);
  border-color: var(--rule-strong);
}
.wj-panel-avatar-img { border-color: var(--gold-warm); }
.wj-agenda-row { border-bottom-color: var(--rule); }
.wj-agenda-time { color: var(--gold); }
.wj-web-date {
  background: var(--gold-wash);
  border-color: var(--rule-strong);
  color: var(--gold);
}
.wj-register-alt { border-top-color: var(--rule); }

/* Seller Guide */
.wj-bulleted-list li { color: var(--ink-body); }
.wj-bulleted-list li::before { background: var(--gold); }
.wj-resource-card {
  background: var(--bg-elev);
  border-color: var(--rule-strong);
}
.wj-resource-card::before {
  background: radial-gradient(circle, rgba(228,201,126,0.12), transparent 65%);
}
.wj-resource-badge {
  background: var(--gold);
  color: var(--ink-invert);
}
.wj-learn-item {
  border-right-color: var(--rule);
  border-bottom-color: var(--rule);
}
.wj-learn-num { color: var(--gold); }
.wj-pullquote::before { color: var(--gold); }
.wj-pullquote p { color: var(--ink); }
.wj-contact-item {
  background: var(--bg-elev);
  border-color: var(--rule);
}
.wj-contact-item strong { color: var(--ink); }
a.wj-contact-item:hover { border-color: var(--gold-warm); }

/* ==========================================================================
   NAV HARDENING  (fixes: cropped logo, links overlapping the logo, smear)
   Loads last so it wins over both the base nav rules and the dark overrides.
   ========================================================================== */
/* Solid nav, no blur. The backdrop-filter created a paint smear over the dark
   hero on some machines; a solid bar is cleaner and easier to read anyway. */
.wj-nav,
.wj-nav[data-scrolled="true"] {
  background: rgba(8, 9, 11, 0.97);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(228, 201, 126, 0.22);
}
/* Logo must not hog width and shove the links on top of itself. */
.wj-logo { flex: 0 1 auto; }
/* High-contrast gold badge (was a low-contrast light circle in dark mode). */
.wj-logo-mark { background: var(--gold); color: #08090B; }
.wj-nav-links { gap: 20px; }
.wj-nav-link  { font-size: 0.88rem; }

/* At 18px type, four full links + the logo + the CTA need real room. Below
   ~1080px they were getting squeezed until the links overlapped the logo, so
   collapse to the hamburger menu earlier instead of letting them collide. */
@media (max-width: 1080px) {
  .wj-nav-links { display: none; }
  .wj-nav-cta .wj-btn:not(.wj-nav-phone) { display: none; }
  .wj-nav-toggle { display: inline-flex; }
}