/* Wave Divider Before Footer */
.wave-divider-footer {
  position: relative;
  width: 100%;
  height: 60px;  /* Reduced height */
  margin-bottom: -50px;  /* More overlap */
  margin-top: -30px;  /* Pull up into contact section */
  z-index: 1;
  background: #000a1e;  /* Match contact section color */
  overflow: hidden;
}

.wave-divider-footer svg {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.wave-divider-footer path {
  stroke: none !important;
  outline: none !important;
}

/* Footer with SVG Background - Override ALL existing styles with maximum specificity */

footer.site-footer,
.site-footer {
  background: 
    linear-gradient(rgba(0, 10, 30, 0.7), rgba(0, 10, 30, 0.7)),  /* Medium overlay - more SVG visible */
    url('../img/footer-background-v2.svg') !important;
  background-color: rgba(0, 10, 30, 0.75) !important;  /* Medium fallback */
  background-repeat: no-repeat !important;
  background-size: cover !important;  /* Changed to cover to fill entire footer */
  background-position: center center !important;
  background-attachment: scroll !important;
  color: #ffffff !important;  /* Pure white text for better contrast */
  padding: 250px 0 60px !important;  /* Significantly increased top padding */
  position: relative !important;
  overflow: hidden !important;
  min-height: 650px !important;  /* Increased min-height to accommodate content */
}

/* Ensure all footer text has good contrast */
.site-footer .footer-content,
.site-footer .footer-brand,
.site-footer .footer-links,
.site-footer .footer-bottom {
  color: #ffffff !important;
  position: relative !important;
  z-index: 2 !important;
}

.site-footer a {
  color: #ffffff !important;
  opacity: 0.9 !important;
}

.site-footer a:hover {
  opacity: 1 !important;
  color: var(--brand-yellow) !important;
}

/* Remove conflicting pseudo-elements */
.site-footer::before {
  display: none !important;
}

/* Keep the floating animation but adjust it */
.site-footer::after {
  content: '';
  position: absolute;
  top: 20%;
  right: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(253, 195, 0, 0.03) 0%, transparent 70%);
  animation: float 20s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

/* Ensure all footer content appears above the overlay */
.site-footer .container {
  position: relative;
  z-index: 1;
}

.footer-content {
  position: relative;
  z-index: 1;
}

/* Adjust opacity of SVG background */
.site-footer {
  background-blend-mode: multiply; /* This will blend the SVG with the gradient */
}

/* For better performance and control, you can also use this approach */
.site-footer-with-svg {
  background-image: 
    linear-gradient(180deg, rgba(0, 26, 51, 0.9) 0%, rgba(0, 45, 83, 0.9) 100%),
    url('/Users/sorn/Downloads/Ideensammlung + Grafiken tecoil Webseite_Kopie.svg');
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
}