/* =========================================================
   SHANEX — Home Page Color Override
   Applies ONLY to index.html (loaded after styles.css).
   Swaps the shared green primary for a premium navy tone with
   a light gold gradient accent, leaving every other page on
   the original palette untouched.
   ========================================================= */

:root {
  /* Solid navy — kept for text, icons, and borders, which can't
     render a gradient (color/border-color only accept a solid). */
  --shanex-green: #0b1f3a;
  --shanex-green-dark: #071527;

  /* Blue gradients used for actual background areas below. */
  --shanex-navy-gradient: linear-gradient(135deg, #16345f 0%, #0b1f3a 55%, #071527 100%);
  --shanex-navy-gradient-deep: linear-gradient(160deg, #0b1f3a 0%, #071527 55%, #040d1a 100%);

  --shanex-gold-gradient: linear-gradient(135deg, #FDECB8 0%, #EEBA0B 50%, #C79A09 100%);
  --shanex-gold-gradient-hover: linear-gradient(135deg, #FFF4D6 0%, #F5C736 50%, #D9A80E 100%);
}

/* styles.css hardcodes a couple of green tints instead of using the
   variable above — realign them to the new navy so badges/icon
   chips don't look mismatched. These stay solid tints (small chips
   read better without a gradient running through them). */
.eyebrow { background: rgba(11, 31, 58, 0.08); }
.icon-badge { background: rgba(11, 31, 58, 0.07); }

/* Blue gradient backgrounds — header, hero photo wash, stats strip,
   the dark CTA section, footer, and the mobile nav drawer. Each of
   these uses the `background` shorthand in styles.css (not
   background-color), so a gradient value is safe to drop in. */
.site-header { background: var(--shanex-navy-gradient); }
.hero-overlay { background: linear-gradient(135deg, rgba(22,52,95,0.78) 0%, rgba(11,31,58,0.74) 55%, rgba(7,21,39,0.8) 100%); }
.stats-strip { background: var(--shanex-navy-gradient-deep); }
.section--dark { background: var(--shanex-navy-gradient-deep); }
.site-footer { background: var(--shanex-navy-gradient-deep); }
@media (max-width: 959px) {
  .main-nav { background: var(--shanex-navy-gradient-deep); }
}

/* Light gold gradient accent for primary buttons and the thin
   decorative hero lines, per the premium/corporate direction. */
.btn-primary { background: var(--shanex-gold-gradient); }
.btn-primary:hover { background: var(--shanex-gold-gradient-hover); }
.hero-line { background: var(--shanex-gold-gradient); }