/* ==========================================================================
   Yanjye Navy — igihe-style: deep navy blue chrome, light readable content.
   The topbar, menu, heroes and footer are dark blue (bleu foncé); the reading
   area stays light grey with white cards, which is what actually reads well
   for dense article/course/job listings.
   ========================================================================== */
:root {
  --yj-primary: #1668c4;         /* navy-leaning brand blue */
  --yj-primary-dark: #0e4f9c;
  --yj-accent: #f7941d;          /* Yanjye orange */
  --yj-green: #2fa84f;
  --yj-ink: #12203a;             /* headings on light surfaces */
  --yj-muted: #5c6b84;
  --yj-line: #dfe4ec;
  --yj-bg: #eef1f6;              /* page background — light grey */
  --yj-radius: 8px;
  --yj-shadow: 0 6px 20px rgba(18, 32, 58, .09);

  /* Dark chrome */
  --yj-navy: #07224c;
  --yj-navy-deep: #04162f;
  --yj-navy-line: rgba(255, 255, 255, .12);
  --yj-menu-bg: #07224c;
}

html, body { background: var(--yj-bg); }
body { color: var(--yj-ink); }

/* ==========================================================================
   DARK NAVY CHROME
   ========================================================================== */

/* Utility strip */
.yj-topbar { background: var(--yj-navy-deep); color: rgba(255, 255, 255, .7); }
.yj-topbar-links a { color: rgba(255, 255, 255, .82); }
.yj-topbar-links a:hover { color: var(--yj-accent); }
.yj-topbar-social { border-left-color: var(--yj-navy-line); }

/* Main menu */
.yj-header.header_area,
.yj-header .navbar {
  background: var(--yj-navy) !important;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .2), 0 8px 24px rgba(4, 22, 47, .28);
}
/* Specificity must match custom.css's `.yj-header .menu_nav .nav-item .nav-link`
   rule, which is also !important — a shorter selector would lose. */
.yj-header .menu_nav .nav-item .nav-link { color: #d6e3f5 !important; font-weight: 600; }
.yj-header .menu_nav .nav-item .nav-link:hover,
.yj-header .menu_nav .nav-item.active .nav-link {
  color: #fff !important;
  background: rgba(255, 255, 255, .12);
}
.yj-header .navbar-toggler { background: #fff; border-radius: 6px; }
.yj-header .navbar-toggler .icon-bar { background: var(--yj-navy); }
.yj-brand-img { background: #fff; border-radius: 6px; padding: 4px 8px; }

/* Header buttons */
.yj-header .yj-btn-ghost { border-color: rgba(255, 255, 255, .45); color: #fff; }
.yj-header .yj-btn-ghost:hover { background: rgba(255, 255, 255, .14); color: #fff; border-color: #fff; }
.yj-header .yj-btn-solid { background: var(--yj-accent); box-shadow: none; }
.yj-header .yj-btn-solid:hover { filter: brightness(1.07); }
.yj-user-toggle, .yj-user-name { color: #fff !important; }

/* Mobile dropdown panel sits on the navy header, so keep it navy too */
@media (max-width: 991px) {
  .yj-header .navbar-collapse { background: #0a2b5e; }
  .yj-header .menu_nav .nav-link { color: #d6e3f5 !important; }
}

/* Page heroes */
.yj-page-hero {
  background: linear-gradient(135deg, var(--yj-navy) 0%, #0b3573 60%, var(--yj-primary-dark) 100%);
}
.yj-lead-fallback,
.yj-sb-cta,
.yj-cta-inline,
.yj-cta-box {
  background: linear-gradient(135deg, var(--yj-navy) 0%, var(--yj-primary-dark) 100%);
}

/* Footer */
.yj-footer, .footer-area { background: var(--yj-navy-deep) !important; }
.yj-footer h4, .yj-footer a, .yj-footer p { color: rgba(255, 255, 255, .82); }
.yj-footer h4 { color: #fff; }
.yj-footer a:hover { color: var(--yj-accent); }

/* ==========================================================================
   LIGHT READING AREA (kept light on purpose — dense text reads better)
   ========================================================================== */
.yj-block,
.yj-sb-block,
.yj-mosaic-pitch,
.yj-card,
.yj-video-card,
.yj-prose-card,
.yj-member-card,
.yj-contact-card,
.yj-event-card,
.yj-fl-card,
.yj-job,
.yj-stat,
.yj-prefooter,
.yj-leaderboard,
.yj-ticker { background: #fff; }

.yj-step, .yj-why-card, .yj-work-row { background: #f7f9fc; }

/* Accent bars on section titles */
.yj-block-title, .yj-sb-title { border-bottom: 2px solid var(--yj-line); }
.yj-block-title > span::before,
.yj-sb-title > span::before { background: var(--yj-accent); border-radius: 2px; }

/* Tags and chips */
.yj-card-tag, .yj-kicker, .yj-ticker-label { background: var(--yj-accent); }
.yj-sb-num, .yj-sb-tags a, .yj-sb-social a, .yj-fl-skills span {
  background: rgba(22, 104, 196, .1);
  color: var(--yj-primary-dark);
}
.yj-sb-tags a:hover, .yj-sb-social a:hover { background: var(--yj-primary); color: #fff; }

/* Buttons on light surfaces */
.yj-btn-solid { background: linear-gradient(135deg, var(--yj-primary), var(--yj-primary-dark)); }
/* The `background` shorthand resets background-clip, so re-declare the clip or
   the gradient paints a solid block instead of the digits. */
.yj-stat-num {
  background: linear-gradient(135deg, var(--yj-primary), var(--yj-accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Adverts */
.yj-house-ad {
  background: linear-gradient(135deg, rgba(22, 104, 196, .07), rgba(247, 148, 29, .07));
  border-color: rgba(22, 104, 196, .35);
}
.yj-ad-label { color: #97a3b6; }