/* ==========================================================================
   Section Wave Divider Styles
   ========================================================================== */

.section-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 10;
    pointer-events: none;
}

.section-wave--top {
    bottom: auto;
    top: -1px;
    transform: rotate(180deg);
}

.section-wave svg {
    display: block;
    width: calc(100% + 1.3px);
    height: 60px;
}

.section-wave path {
    fill: var(--wave-color, #ffffff);
}

/* Wave color variations */
.section--signature-hero .section-wave path,
.section--signature .section-wave path {
    fill: #ffffff;
}

.section--alt .section-wave path {
    fill: var(--bg-light, #FFF9F5);
}

.section--bg-white .section-wave path {
    fill: #ffffff;
}

.section--bg-light .section-wave path {
    fill: var(--bg-light, #FFF9F5);
}

/* Responsive wave heights */
@media (max-width: 768px) {
    .section-wave svg {
        height: 40px;
    }
}

@media (max-width: 480px) {
    .section-wave svg {
        height: 30px;
    }
}

/* Section positioning for waves */
.section--signature {
    position: relative;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.section--signature-hero {
    padding-bottom: 6rem;
}

.section--signature + .section--signature {
    margin-top: 0;
}