/**
 * SVG Section Dividers CSS
 * Modern responsive dividers for section transitions
 */

/* Shape Divider Container */
.shape-divider {
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 10;
    border: none;
    outline: none;
    font-size: 0;
}

.shape-divider-top {
    top: -1px;
    transform: rotate(180deg);
}

.shape-divider-bottom {
    bottom: -1px;
}

/* Flip transformation - Vertical flip (mirror top to bottom) */
.shape-divider.flip {
    transform: scaleY(-1);
}

.shape-divider-top.flip {
    transform: rotate(180deg) scaleY(-1);
}

/* SVG Styling */
.shape-divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 60px;
    transform: translateZ(0);
    vertical-align: middle;
    border: none;
    outline: none;
    shape-rendering: geometricPrecision;
}

.shape-divider svg path {
    outline: none;
    border: none;
}

/* Remove any gaps/lines */
.shape-divider-top svg {
    margin-top: -3px;
}

.shape-divider-bottom svg {
    margin-bottom: -3px;
}

/* Responsive Heights */
@media (min-width: 768px) {
    .shape-divider svg {
        height: 80px;
    }
    
    .shape-divider-top svg {
        margin-top: -3px;
    }
    
    .shape-divider-bottom svg {
        margin-bottom: -3px;
    }
}

@media (min-width: 1024px) {
    .shape-divider svg {
        height: 100px;
    }
    
    .shape-divider-top svg {
        margin-top: -3px;
    }
    
    .shape-divider-bottom svg {
        margin-bottom: -3px;
    }
}

@media (min-width: 1440px) {
    .shape-divider svg {
        height: 120px;
    }
    
    .shape-divider-top svg {
        margin-top: -3px;
    }
    
    .shape-divider-bottom svg {
        margin-bottom: -3px;
    }
}

/* Ensure sections with dividers have proper positioning */
.has-shape-divider {
    position: relative;
    overflow: hidden;
    outline: none;
    border: none !important;
    box-shadow: none !important;
}

/* Prevent any section borders or outlines that might show as lines */
section.has-shape-divider,
.has-shape-divider.about-intro-section,
.has-shape-divider.vision-mission-section,
.has-shape-divider.about-values-section {
    border-top: none !important;
    border-bottom: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Hide old section-shape elements when using new dividers */
.has-shape-divider .section-shape {
    display: none !important;
    border: none;
}

/* Prevent parallax backgrounds from extending beyond section bounds */
.has-shape-divider .parallax-bg {
    position: absolute;
    top: -30%;
    left: 0;
    width: 100%;
    height: 160%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

/* Parallax overlay should respect divider shapes */
.has-shape-divider .parallax-overlay,
.has-shape-divider .challenges-overlay,
.has-shape-divider .benefits-overlay,
.has-shape-divider.has-divider-top .parallax-overlay,
.has-shape-divider.has-divider-top .challenges-overlay,
.has-shape-divider.has-divider-top .benefits-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* Clip overlay to avoid extending beyond dividers */
.has-shape-divider.has-divider-bottom .parallax-overlay,
.has-shape-divider.has-divider-bottom .challenges-overlay,
.has-shape-divider.has-divider-bottom .benefits-overlay {
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - 60px),
        0 100%
    );
}

.has-shape-divider.has-divider-top .parallax-overlay,
.has-shape-divider.has-divider-top .challenges-overlay,
.has-shape-divider.has-divider-top .benefits-overlay {
    clip-path: polygon(
        0 60px,
        100% 0,
        100% 100%,
        0 100%
    );
}

.has-shape-divider.has-divider-top.has-divider-bottom .parallax-overlay,
.has-shape-divider.has-divider-top.has-divider-bottom .challenges-overlay,
.has-shape-divider.has-divider-top.has-divider-bottom .benefits-overlay {
    clip-path: polygon(
        0 60px,
        100% 0,
        100% calc(100% - 60px),
        0 100%
    );
}

@media (min-width: 768px) {
    .has-shape-divider.has-divider-bottom .parallax-overlay,
    .has-shape-divider.has-divider-bottom .challenges-overlay,
    .has-shape-divider.has-divider-bottom .benefits-overlay {
        clip-path: polygon(
            0 0,
            100% 0,
            100% calc(100% - 80px),
            0 100%
        );
    }
    
    .has-shape-divider.has-divider-top .parallax-overlay,
    .has-shape-divider.has-divider-top .challenges-overlay,
    .has-shape-divider.has-divider-top .benefits-overlay {
        clip-path: polygon(
            0 80px,
            100% 0,
            100% 100%,
            0 100%
        );
    }
    
    .has-shape-divider.has-divider-top.has-divider-bottom .parallax-overlay,
    .has-shape-divider.has-divider-top.has-divider-bottom .challenges-overlay,
    .has-shape-divider.has-divider-top.has-divider-bottom .benefits-overlay {
        clip-path: polygon(
            0 80px,
            100% 0,
            100% calc(100% - 80px),
            0 100%
        );
    }
}

@media (min-width: 1024px) {
    .has-shape-divider.has-divider-bottom .parallax-overlay,
    .has-shape-divider.has-divider-bottom .challenges-overlay,
    .has-shape-divider.has-divider-bottom .benefits-overlay {
        clip-path: polygon(
            0 0,
            100% 0,
            100% calc(100% - 100px),
            0 100%
        );
    }
    
    .has-shape-divider.has-divider-top .parallax-overlay,
    .has-shape-divider.has-divider-top .challenges-overlay,
    .has-shape-divider.has-divider-top .benefits-overlay {
        clip-path: polygon(
            0 100px,
            100% 0,
            100% 100%,
            0 100%
        );
    }
    
    .has-shape-divider.has-divider-top.has-divider-bottom .parallax-overlay,
    .has-shape-divider.has-divider-top.has-divider-bottom .challenges-overlay,
    .has-shape-divider.has-divider-top.has-divider-bottom .benefits-overlay {
        clip-path: polygon(
            0 100px,
            100% 0,
            100% calc(100% - 100px),
            0 100%
        );
    }
}

@media (min-width: 1440px) {
    .has-shape-divider.has-divider-bottom .parallax-overlay,
    .has-shape-divider.has-divider-bottom .challenges-overlay,
    .has-shape-divider.has-divider-bottom .benefits-overlay {
        clip-path: polygon(
            0 0,
            100% 0,
            100% calc(100% - 120px),
            0 100%
        );
    }
    
    .has-shape-divider.has-divider-top .parallax-overlay,
    .has-shape-divider.has-divider-top .challenges-overlay,
    .has-shape-divider.has-divider-top .benefits-overlay {
        clip-path: polygon(
            0 120px,
            100% 0,
            100% 100%,
            0 100%
        );
    }
    
    .has-shape-divider.has-divider-top.has-divider-bottom .parallax-overlay,
    .has-shape-divider.has-divider-top.has-divider-bottom .challenges-overlay,
    .has-shape-divider.has-divider-top.has-divider-bottom .benefits-overlay {
        clip-path: polygon(
            0 120px,
            100% 0,
            100% calc(100% - 120px),
            0 100%
        );
    }
}

/* Add padding to sections with dividers to prevent content overlap */
.has-shape-divider.has-divider-top {
    padding-top: 80px;
    border-top: none;
}

.has-shape-divider.has-divider-bottom {
    padding-bottom: 80px;
    border-bottom: none;
}

@media (min-width: 768px) {
    .has-shape-divider.has-divider-top {
        padding-top: 100px;
    }
    
    .has-shape-divider.has-divider-bottom {
        padding-bottom: 100px;
    }
}

@media (min-width: 1024px) {
    .has-shape-divider.has-divider-top {
        padding-top: 120px;
    }
    
    .has-shape-divider.has-divider-bottom {
        padding-bottom: 120px;
    }
}

/* Animation for dividers (optional) */
@keyframes divider-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.shape-divider.animate svg {
    animation: divider-float 3s ease-in-out infinite;
}

/* Fix for sections that already have shape divider classes */
section.has-shape-divider.has-shape-bottom {
    padding-bottom: 120px;
}

section.has-shape-divider.has-shape-top {
    padding-top: 120px;
}

/* Specific fix for About Vision & Mission section with parallax to eliminate shade line */
.vision-mission-section.has-parallax.has-divider-top {
    overflow: hidden;
    margin-top: 60px;
}

.vision-mission-section.has-parallax.has-divider-top.has-divider-bottom {
    padding-bottom: 80px;
}

.vision-mission-section.has-parallax.has-divider-top .parallax-bg {
    top: -30%;
    height: 160%;
}

.vision-mission-section.has-parallax.has-divider-top .parallax-overlay {
    top: 0;
    height: 100%;
    clip-path: none;
}

@media (min-width: 768px) {
    .vision-mission-section.has-parallax.has-divider-top {
        margin-top: 80px;
    }
    
    .vision-mission-section.has-parallax.has-divider-top.has-divider-bottom {
        padding-bottom: 100px;
    }
}

@media (min-width: 1024px) {
    .vision-mission-section.has-parallax.has-divider-top {
        margin-top: 100px;
    }
    
    .vision-mission-section.has-parallax.has-divider-top.has-divider-bottom {
        padding-bottom: 120px;
    }
}

@media (min-width: 1440px) {
    .vision-mission-section.has-parallax.has-divider-top {
        margin-top: 120px;
    }
    
    .vision-mission-section.has-parallax.has-divider-top.has-divider-bottom {
        padding-bottom: 140px;
    }
}