/* 🎨 Custom Bootstrap Theme Overrides */

/* Brand colors */
:root {
  --bs-primary: #FA5B1D;   /* Red */
  --bs-secondary: #FEB12E; /* Yellow */
  --bs-dark: #333333;      /* Black */
  --bs-dark-rgb: 51, 51, 51; /* Black RGB for rgba() usage */
  --bs-light: #F8ECD2;     /* White */
  --bs-light-rgb: 248, 236, 210; /* White RGB for rgba() usage */
}

/* Fonts */
body {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  color: var(--bs-dark);
  background-color: var(--bs-light);
}

/* Navbar brand tweaks */
.navbar-brand {
  font-weight: 700;
  font-size: 1.25rem;
}

/* Example: buttons using brand colors */
.btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.btn-secondary {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}
/* existing */
.hero-wrap {
  position: relative;
  background-color: #333333;
  overflow: hidden;
}

/* stripes (unchanged angle/colors, but add transform + will-change) */
.hero-wrap::before {
  content: "";
  position: absolute;
  inset: -80px 0 0 0;                /* reaches into nav */
  z-index: 0;
  pointer-events: none;
  will-change: transform;            /* hint for smoothness */

  background: linear-gradient(
    150deg,
    transparent 0 58%,
    rgba(250, 91, 29, 0.5) 58% 63%,   /* red w/ 50% opacity */
    rgba(254, 177, 46, 0.5) 63% 68%,  /* yellow w/ 50% opacity */
    rgba(248, 236, 210, 0.5) 68% 73%, /* white-ish w/ 50% opacity */
    transparent 73% 100%
  );
  background-size: 130% 130%;
  background-repeat: no-repeat;
  background-position: center;

  /* parallax offset (set via JS) */
  transform: translateY(calc(var(--pY, 0px) * 0.3)); /* 0.3 = slower than content */
}

/* keep nav + header above */
.hero-wrap > nav,
.hero-wrap > header {
  position: relative;
  z-index: 1;
}

/* Accessibility: disable motion for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-wrap::before { transform: none !important; }
}

.icon-primary-red {
    color: #FA5B1D; /* Mission Ember */
  }

.icon-secondary-yellow {
    color: #FEB12E; /* Mission Ember */
  }