/* Global Blue Gradient Wipe - FINAL OVERRIDE */
/* This file must load LAST to ensure gradient is visible */

/* Ensure html doesn't have a background */
html {
  background: transparent !important;
  min-height: 100vh;
}

/* Apply the blue gradient wipe to body - similar to prefooter */
body {
  background: linear-gradient(
    to bottom,
    #0f172a 0%,           /* Darkest blue/slate at top */
    #1e293b 10%,          /* Dark slate */
    #2c3e50 20%,          /* Deep blue */
    #1e3a8a 30%,          /* Rich blue */
    #1e40af 40%,          /* Primary blue */
    #3b82f6 60%,          /* Lighter blue */
    #60a5fa 75%,          /* Sky blue */
    #93c5fd 85%,          /* Light blue */
    #dbeafe 92%,          /* Very light blue */
    #eff6ff 96%,          /* Almost white blue */
    #ffffff 100%          /* White at bottom */
  ) !important;
  background-attachment: fixed !important;
  min-height: 100vh !important;
}

/* Restore header with blue gradient */
.header {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #3b82f6 100%) !important;
  position: relative !important;
}

.header::before,
.header::after {
  display: none !important;
}

.header-top {
  background: rgba(15, 23, 42, 0.95) !important;
}

.header-main {
  background: transparent !important;
}

/* Force all main content sections to be transparent - BUT NOT hero, prefooter or footer */
main,
main section,
.hero-cards-section,
.core-services,
#core-services,
.core-services--retail,
.services-stack,
.unified-gradient-wrapper,
.home,
.page-template,
.main-content-gradient {
  background: transparent !important;
}

/* Restore hero section with gradient and image overlay */
.home-hero-compact {
  background: linear-gradient(135deg, #1f2937 0%, rgba(15, 23, 42, 0.95) 35%, rgba(15, 118, 110, 0.85) 70%, rgba(15, 23, 42, 0.9) 100%) !important;
  box-shadow: inset 0 -12px 28px rgba(15, 23, 42, 0.35), inset 0 12px 24px rgba(15, 23, 42, 0.25) !important;
  position: relative !important;
  color: #f8fafc !important;
}

/* IMPORTANT: Preserve prefooter and footer - exclude from transparency rules */
/* These sections keep their original backgrounds - don't touch them */

/* Prevent visual duplication of footer elements */
.footer::before,
.footer::after {
  display: block !important;
}

.uwg-prefooter {
  position: relative !important;
}

.uwg-prefooter::before,
.uwg-prefooter::after {
  display: block !important;
}

/* Remove pseudo-element overlays from main content sections ONLY */
#core-services::before,
.core-services::before,
.core-services--retail::before,
.hero-cards-section::before,
.hero-cards-section::after {
  display: none !important;
  background: transparent !important;
}

/* Keep cards white for readability */
.hero-card,
.core-service-card {
  background: #fff !important;
}

.hero-card--services,
.hero-card--retail {
  background: #fff !important;
}

/* ========================================
   RESPONSIVE DESIGN FIXES
   ======================================== */

/* Desktop view optimizations (1025px and above) */
@media (min-width: 1025px) {
  .home-hero-compact {
    height: 37.5vh !important;
    min-height: 300px !important;
    max-height: 450px !important;
  }

  .hero-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .core-services__grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Tablet view (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .home-hero-compact {
    height: 30vh !important;
    min-height: 225px !important;
    max-height: 300px !important;
  }

  .hero-cards-grid {
    grid-template-columns: 1fr !important;
    gap: clamp(1.5rem, 3vw, 2rem) !important;
  }

  .core-services__grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Mobile view (below 768px) */
@media (max-width: 767px) {
  .header {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%) !important;
  }

  .home-hero-compact {
    height: 26.25vh !important;
    min-height: 187.5px !important;
    max-height: 262.5px !important;
    padding: 0.75rem 0 !important;
  }

  .home-hero-compact__header h1 {
    font-size: clamp(1.5rem, 4vw, 2rem) !important;
  }

  .home-hero-compact__header p {
    font-size: clamp(0.95rem, 2vw, 1.1rem) !important;
  }

  .hero-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .hero-card {
    padding: clamp(1.5rem, 3vw, 2rem) !important;
  }

  .core-services__grid {
    grid-template-columns: 1fr !important;
  }

  .core-service-card {
    margin-bottom: 1rem !important;
  }
}

/* Small mobile view (below 480px) */
@media (max-width: 480px) {
  .container {
    padding-right: 35px !important;
  }

  .hero-card__actions {
    flex-direction: column !important;
  }

  .hero-card__actions .btn {
    width: 100% !important;
  }
}