/* =============================================================================
   FULL WIDTH SECTION COMPONENT
   Outermost page-section wrapper. Controls background theme + vertical padding.
   ============================================================================= */

.full-width-section {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    /* Ensure no overflow clipping by default so AOS animations can enter */
    overflow: visible; 
}

/* =============================================================================
   Theme Modifiers (Brand Colors via Tokens)
   ============================================================================= */

.full-width-section--white {
    background-color: var(--color-white);
}

.full-width-section--light-gray {
    background-color: var(--color-off-white);
}

.full-width-section--dark {
    background-color: var(--color-trust-blue);
    color: var(--color-off-white);
}

/* Headings inside dark sections */
.full-width-section--dark h1,
.full-width-section--dark h2,
.full-width-section--dark h3,
.full-width-section--dark h4 {
    color: var(--color-white);
}

/* Body paragraphs inside dark sections */
.full-width-section--dark p {
    color: var(--color-off-white);
}

/* Subtle brand accent tint */
.full-width-section--accent-tint {
    /* Calm Teal at low opacity */
    background-color: rgba(31, 138, 112, 0.05); 
}

.full-width-section--transparent {
    background-color: transparent;
}

/* =============================================================================
   Pure CSS Parallax Implementation
   ============================================================================= */

/* Required perspective wrapper */
.parallax-wrapper {
    perspective: 1px;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    transform-style: preserve-3d;
}

/* The background layer pushed backward and scaled up to cover the space */
.parallax-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateZ(-1px) scale(2);
    transform-origin: center center;
    z-index: -1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* Content needs to be pulled forward so it rests above the parallax layer */
.parallax-content {
    position: relative;
    z-index: 1;
}

/* Disable parallax entirely for accessibility/reduced motion */
@media (prefers-reduced-motion: reduce) {
    .parallax-wrapper {
        perspective: none;
        overflow-y: visible;
        transform-style: flat;
    }
    
    .parallax-bg {
        transform: none;
        background-attachment: scroll; /* Fallback to standard scrolling */
    }
}

/* Disable pure CSS parallax on mobile devices as it often causes jitter/jank 
   with mobile Safari/Chrome viewport handling */
@media screen and (max-width: 768px) {
    .parallax-wrapper {
        perspective: none;
        overflow-y: visible;
        transform-style: flat;
    }
    .parallax-bg {
        transform: none;
        background-attachment: scroll;
    }
}

/* =============================================================================
   Padding Modifiers (Desktop Default Scale)
   ============================================================================= */

.full-width-section--pad-none {
    padding-top: 0;
    padding-bottom: 0;
}

.full-width-section--pad-small {
    padding-top: 32px;
    padding-bottom: 32px;
}

.full-width-section--pad-medium {
    padding-top: 48px;
    padding-bottom: 48px;
}

.full-width-section--pad-large {
    padding-top: 64px;
    padding-bottom: 64px;
}

.full-width-section--pad-hero {
    padding-top: 80px;
    padding-bottom: 80px;
}

.full-width-section--pad-xl {
    padding-top: 96px;
    padding-bottom: 96px;
}

/* =============================================================================
   Responsive Padding Scaling
   Reduces vertical rhythm on smaller viewports
   ============================================================================= */

/* Tablet (Max 1023px) */
@media screen and (max-width: 1023px) {
    .full-width-section--pad-large {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .full-width-section--pad-hero {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .full-width-section--pad-xl {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

/* Mobile (Max 639px) */
@media screen and (max-width: 639px) {
    .full-width-section--pad-small {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .full-width-section--pad-medium {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .full-width-section--pad-large {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .full-width-section--pad-hero {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .full-width-section--pad-xl {
        padding-top: 64px;
        padding-bottom: 64px;
    }
}