/* Header Gradient Styles - Matching Mission Page Design */

/* Main page headers with gradient backgrounds */
#wrapper > .main > header.accent1 {
  background: linear-gradient(135deg, var(--lightblue) 0%, #0056b3 100%);
  position: relative;
  overflow: hidden;
}

#wrapper > .main > header.accent2 {
  background: linear-gradient(135deg, #80bb2d 0%, #5a8520 100%);
  position: relative;
  overflow: hidden;
}

/* Add subtle pattern overlay for depth */
#wrapper > .main > header.accent1::before,
#wrapper > .main > header.accent2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(
      circle at 20% 80%,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(255, 255, 255, 0.05) 0%,
      transparent 50%
    );
  pointer-events: none;
  z-index: 0;
}

/* Ensure content stays above the overlay */
#wrapper > .main > header.accent1 > *,
#wrapper > .main > header.accent2 > * {
  position: relative;
  z-index: 1;
}

/* Tab headers with gradients */
#wrapper > .main > header.accent1 + .tabs > .titles {
  background: linear-gradient(135deg, var(--lightblue) 0%, #0056b3 100%);
}

#wrapper > .main > header.accent1 + .tabs > .titles:before {
  background: linear-gradient(135deg, var(--lightblue) 0%, #0056b3 100%);
}

#wrapper > .main > header.accent2 + .tabs > .titles {
  background: linear-gradient(135deg, #80bb2d 0%, #5a8520 100%);
}

#wrapper > .main > header.accent2 + .tabs > .titles:before {
  background: linear-gradient(135deg, #80bb2d 0%, #5a8520 100%);
}

/* Main accent sections with gradients */
#wrapper > .main.accent1 {
  background: linear-gradient(135deg, var(--lightblue) 0%, #0056b3 100%);
  position: relative;
}

#wrapper > .main.accent2 {
  background: linear-gradient(135deg, #80bb2d 0%, #5a8520 100%);
  position: relative;
}

/* Hero/Banner sections with gradients */
.hero-section,
.page-hero {
  background: linear-gradient(135deg, var(--lightblue) 0%, #0056b3 100%);
  position: relative;
  overflow: hidden;
}

/* Add decorative gradient accents to section headers */
section > header:not(.accent1):not(.accent2) {
  position: relative;
}

/* section > header:not(.accent1):not(.accent2)::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, var(--lightblue), #80bb2d);
  border-radius: 2px;
} */

/* Gradient overlays for images in headers */
.image-header {
  position: relative;
  overflow: hidden;
}

.image-header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 23, 135, 0.7) 0%,
    rgba(0, 86, 179, 0.7) 100%
  );
  pointer-events: none;
}

/* Navigation header gradient on scroll */
#header {
  transition: background 0.3s ease;
}

#header:not(.alt) {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(247, 247, 247, 0.98) 100%
  );
  backdrop-filter: blur(10px);
}

/* Add gradient to navigation active states */
#header > nav > ul > li.current:after {
  background: linear-gradient(90deg, var(--lightblue), #0056b3);
  height: 3px;
}

/* Gradient hover effects for navigation */
#header > nav > ul > li > a {
  position: relative;
  transition: color 0.3s ease;
}

#header > nav > ul > li > a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--lightblue), #80bb2d);
  transition: width 0.3s ease;
}

#header > nav > ul > li:not(.current) > a:hover::before {
  width: 100%;
}

/* Gradient buttons in headers */
#wrapper > .main > header.accent1 .button.primary,
#wrapper > .main > header.accent2 .button.primary {
  background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
  transition: all 0.3s ease;
}

#wrapper > .main > header.accent1 .button.primary:hover,
#wrapper > .main > header.accent2 .button.primary:hover {
  background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 100%);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Gradient overlays for content headers */
.content-header {
  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
  padding: 3rem 0;
  margin-bottom: 2rem;
}

/* Special gradient for featured sections */
.featured-header {
  background: linear-gradient(
    135deg,
    var(--lightblue) 0%,
    #0056b3 50%,
    #80bb2d 100%
  );
  background-size: 200% 200%;
  animation: gradientShift 10s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Responsive adjustments */
@media screen and (max-width: 980px) {
  section > header:not(.accent1):not(.accent2)::after {
    width: 60px;
    height: 3px;
  }
}

@media screen and (max-width: 736px) {
  #header > nav > ul > li > a::before {
    display: none;
  }

  section > header:not(.accent1):not(.accent2)::after {
    width: 50px;
    height: 3px;
  }
}

/* Print styles - remove gradients for printing */
@media print {
  #wrapper > .main > header.accent1,
  #wrapper > .main > header.accent2,
  #wrapper > .main.accent1,
  #wrapper > .main.accent2,
  .hero-section,
  .page-hero {
    background: none !important;
  }

  #wrapper > .main > header.accent1,
  #wrapper > .main.accent1 {
    background-color: var(--lightblue) !important;
  }

  #wrapper > .main > header.accent2,
  #wrapper > .main.accent2 {
    background-color: #80bb2d !important;
  }
}