/* Section Shape Dividers - Reusable across all pages */
/* ================================================== */

/* Base Section Shape Styles */
.section-shape {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 40px;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
}

.section-shape.shape-top {
    top: 0;
}

.section-shape.shape-bottom {
    bottom: 0;
}

/* Shape SVG Container */
.section-shape svg {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
}

.section-shape.shape-top svg {
    top: 0;
}

.section-shape.shape-bottom svg {
    bottom: 0;
}

/* ================================================== */
/* SHAPE VARIANTS */
/* ================================================== */

/* Wave Shape */
.shape-wave.shape-bottom svg {
    transform: rotateX(0);
}

.shape-wave.shape-top svg {
    transform: rotateX(180deg);
}

/* Curve Shape */
.shape-curve.shape-bottom svg {
    transform: rotateX(0);
}

.shape-curve.shape-top svg {
    transform: rotateX(180deg);
}

/* Diagonal Shape */
.shape-diagonal {
    height: 30px;
}

.shape-diagonal.shape-bottom svg {
    transform: rotateX(0);
}

.shape-diagonal.shape-top svg {
    transform: rotateX(180deg);
}

/* Zigzag Shape */
.shape-zigzag {
    height: 20px;
}

/* Triangle Shape */
.shape-triangle {
    height: 40px;
}

.shape-triangle.shape-top svg {
    transform: rotateX(180deg);
}

/* Rounded Shape (Arc) */
.shape-rounded {
    height: 50px;
}

.shape-rounded.shape-top svg {
    transform: rotateX(180deg);
}

/* Tilt Shape */
.shape-tilt {
    height: 25px;
}

.shape-tilt.shape-top svg {
    transform: rotateX(180deg);
}

/* Clouds Shape */
.shape-clouds {
    height: 50px;
}

.shape-clouds.shape-top svg {
    transform: rotateX(180deg);
}

/* ================================================== */
/* SECTION WITH SHAPES - Position Relative */
/* ================================================== */

.has-shape-divider {
    position: relative;
    overflow: visible;
}

/* Ensure shapes don't overlap content */
.has-shape-divider.has-shape-bottom {
    padding-bottom: 0;
    margin-bottom: 0;
}

.has-shape-divider.has-shape-top {
    padding-top: 0;
    margin-top: 0;
}

/* Adjust for diagonal (smaller height) */
.has-shape-divider.has-shape-bottom.shape-diagonal-active {
    padding-bottom: 0;
    margin-bottom: 0;
}

/* ================================================== */
/* COLOR FILL CLASSES */
/* ================================================== */

/* Default fills - can be overridden inline */
.shape-fill-white { fill: #ffffff; }
.shape-fill-light { fill: #f5f5f5; }
.shape-fill-gray { fill: #e0e0e0; }
.shape-fill-dark { fill: #065F46; }
.shape-fill-primary { fill: var(--cf-primary); }

/* ================================================== */
/* RESPONSIVE ADJUSTMENTS */
/* ================================================== */

@media (max-width: 768px) {
    .section-shape {
        height: 25px;
    }
    
    .shape-diagonal {
        height: 20px;
    }
    
    .shape-zigzag {
        height: 15px;
    }
    
    .shape-triangle {
        height: 25px;
    }
    
    .shape-rounded {
        height: 30px;
    }
    
    .shape-tilt {
        height: 18px;
    }
    
    .shape-clouds {
        height: 30px;
    }
    
    .has-shape-divider.has-shape-bottom {
        padding-bottom: 0;
        margin-bottom: 0;
    }
    
    .has-shape-divider.has-shape-top {
        padding-top: 0;
        margin-top: 0;
    }
}

@media (max-width: 480px) {
    .section-shape {
        height: 35px;
    }
    
    .shape-diagonal {
        height: 25px;
    }
    
    .shape-rounded {
        height: 40px;
    }
    
    .shape-clouds {
        height: 40px;
    }
}

/* ================================================== */
/* ANIMATION FOR SHAPES (Optional) */
/* ================================================== */

.shape-animated svg path {
    animation: shapeFloat 6s ease-in-out infinite;
}

@keyframes shapeFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* Disable animation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .shape-animated svg path {
        animation: none;
    }
}