/**
 * Shape Dividers Component Styles
 * 
 * Contains styles for the shape dividers that can be used to create visual separations between sections
 */

/* Shape Dividers
--------------------------------------------- */
.lubinik-shape-divider {
    position: relative;
    width: 100%;
    overflow: visible; /* Changed from hidden to visible */
    line-height: 0;
    z-index: 1;
    padding-top: 0;
    /* No default min-height - will be set responsively */
}

/* Full-width container for shape dividers */
.shape-divider-container {
    position: relative;
    width: 100vw !important;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    overflow: hidden;
    padding: 0;
    z-index: 1;
}

/* Constrained width container for shape dividers */
.shape-divider-container-constrained {
    position: relative;
    width: 100%;
    max-width: var(--lubinik-container-width);
    margin: 0 auto;
    padding: 0 var(--lubinik-spacing-xs);
    overflow: hidden;
    z-index: 1;
}

/* Container for shape divider content */
.lubinik-shape-divider .shape-divider-content {
    position: relative;
    z-index: 2;
    padding: 50px 0;
}

/* SVG container styles */
.lubinik-shape-divider .shape-divider-svg {
    position: absolute;
    left: 0;
    width: 100%;
    height: auto; /* Changed to auto for responsive height */
    overflow: visible; /* Changed to visible */
    line-height: 0;
    z-index: 1;
}

/* Top shape divider - attaches to the top edge */
.lubinik-shape-divider .shape-divider-top {
    top: 0;
    
}

/* Bottom shape divider - attaches to the bottom edge */
.lubinik-shape-divider .shape-divider-bottom {
    bottom: 0;
    /* No transform needed - naturally points up from bottom */
}

/* SVG styling */
.lubinik-shape-divider svg {
    display: block;
    width: 100%;
    height: 150px; /* Desktop height - !important removed for responsive overrides */
    transform-origin: center; /* Ensure transforms rotate around center */
}

/* Shape divider fill color - fallback */
.lubinik-shape-divider .shape-divider-fill {
    fill: var(--lubinik-theme-primary-color);
}

/* Classes for flipped and inverted shapes */
.lubinik-shape-divider svg.shape-flipped {
    transform: scaleX(-1); /* Flip horizontally */
}

.lubinik-shape-divider svg.shape-inverted {
    transform: scaleY(-1); /* Flip vertically */
}

/* Combined transforms */
.lubinik-shape-divider svg.shape-flipped.shape-inverted {
    transform: scale(-1, -1); /* Flip both horizontally and vertically */
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .lubinik-shape-divider {
        padding-top: 0;
    }
    .lubinik-shape-divider svg {
        height: 80px;
    }
}

@media (max-width: 767px) {
    .lubinik-shape-divider svg {
        height: 60px;
    }
}

@media (max-width: 480px) {
    .lubinik-shape-divider svg {
        height: 40px;
    }
}