/* ========================================
   UWC Manta - Maritime Design Enhancements
   CSS-only, Light + Dark Mode
   ======================================== */

/* ----------------------------------------
   1. Wave Dividers between Sections
   ---------------------------------------- */

.wave-top {
    position: relative;
    padding-top: 80px !important;
}

.wave-top::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 40px;
    z-index: 2;
    pointer-events: none;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* Wave color = previous section's background */
.wave-top--white::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1200v20c-200 25-400-10-600 10S200 45 0 20z' fill='%23FFFFFF'/%3E%3C/svg%3E");
}

.wave-top--gray::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1200v20c-200 25-400-10-600 10S200 45 0 20z' fill='%23F5F9FC'/%3E%3C/svg%3E");
}

.wave-top--blue::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1200v20c-200 25-400-10-600 10S200 45 0 20z' fill='%2301579B'/%3E%3C/svg%3E");
}

/* Dark Mode Waves */
[data-theme="dark"] .wave-top--white::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1200v20c-200 25-400-10-600 10S200 45 0 20z' fill='%231A1D21'/%3E%3C/svg%3E");
}

[data-theme="dark"] .wave-top--gray::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1200v20c-200 25-400-10-600 10S200 45 0 20z' fill='%23252A30'/%3E%3C/svg%3E");
}

[data-theme="dark"] .wave-top--blue::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1200v20c-200 25-400-10-600 10S200 45 0 20z' fill='%230277BD'/%3E%3C/svg%3E");
}

/* Mobile: kleinere Welle */
@media (max-width: 768px) {
    .wave-top {
        padding-top: 60px !important;
    }
    .wave-top::before {
        height: 25px;
    }
}


/* ----------------------------------------
   2. Footer Wave + Bubble Decoration
   ---------------------------------------- */

.footer {
    position: relative;
}

.footer::before {
    content: '';
    position: absolute;
    top: -39px;
    left: 0;
    width: 100%;
    height: 40px;
    z-index: 2;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 15c150-15 350 15 600 0s350-15 600 0v25H0z' fill='%23212121' opacity='0.5'/%3E%3Cpath d='M0 20c200-20 400 10 600 0s400 15 600-5v25H0z' fill='%23212121'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

[data-theme="dark"] .footer::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 15c150-15 350 15 600 0s350-15 600 0v25H0z' fill='%230D1117' opacity='0.5'/%3E%3Cpath d='M0 20c200-20 400 10 600 0s400 15 600-5v25H0z' fill='%230D1117'/%3E%3C/svg%3E");
}

/* Subtle bubbles */
.footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    opacity: 0.03;
    background-image:
        radial-gradient(circle 6px at 10% 30%, #4FC3F7 100%, transparent 100%),
        radial-gradient(circle 4px at 25% 70%, #4FC3F7 100%, transparent 100%),
        radial-gradient(circle 8px at 45% 20%, #4FC3F7 100%, transparent 100%),
        radial-gradient(circle 3px at 60% 80%, #4FC3F7 100%, transparent 100%),
        radial-gradient(circle 5px at 75% 40%, #4FC3F7 100%, transparent 100%),
        radial-gradient(circle 7px at 90% 60%, #4FC3F7 100%, transparent 100%);
    background-repeat: no-repeat;
}


/* ----------------------------------------
   3. Section Title Wave Underline
   ---------------------------------------- */

.section-title::after {
    width: 200px !important;
    height: 6px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 6'%3E%3Cpath d='M0 3c12-3 25 3 37 0s25 3 37 0s25-3 37 0s25 3 37 0s25-3 37 0s10 2 18 0' stroke='%230277BD' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center !important;
}

[data-theme="dark"] .section-title::after {
    width: 200px !important;
    height: 6px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 6'%3E%3Cpath d='M0 3c12-3 25 3 37 0s25 3 37 0s25-3 37 0s25 3 37 0s25-3 37 0s10 2 18 0' stroke='%23039BE5' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center !important;
}


/* ----------------------------------------
   4. CTA Gradient Underwater Pattern
   ---------------------------------------- */

.cta-gradient {
    position: relative;
    overflow: hidden;
}

.cta-gradient > .container {
    position: relative;
    z-index: 1;
}

.cta-gradient::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath d='M0 50c50-30 100 30 200 0M0 100c50-30 100 30 200 0M0 150c50-30 100 30 200 0' stroke='white' stroke-width='1' fill='none' opacity='0.5'/%3E%3C/svg%3E");
    background-size: 200px 200px;
}