/**
 * OE GF Sticky Titles CSS
 * Enforces sticky positioning for section headers inside wrapper containers.
 * Applies default un-styled presentation until section header becomes stuck (.is-stuck).
 * Fully compatible with Gravity Forms 2.5+ / 2.10+ CSS Grid layouts.
 */

:root {
    --oe-gf-sticky-top: 135px;
}

/* Sentinel element for scroll detection */
.oe-sticky-sentinel {
    position: relative;
    height: 1px;
    width: 100%;
    margin: 0;
    padding: 0;
    pointer-events: none;
    visibility: hidden;
    grid-column: 1 / -1 !important;
}

/* 1. Section Wrapper Container (Preserves GF 12-column Grid) */
.oe-sticky-section-wrapper {
    grid-column: 1 / -1 !important; /* Span full width of .gform_fields grid */
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    column-gap: 2% !important;
    row-gap: 16px !important;
    position: relative;
    margin-bottom: 25px;
    background-color: transparent !important;
}

/* 2. Base Sticky Section Header (Un-stuck / Default Presentation) */
.oe-sticky-section-wrapper > .gfield--type-section.oe-sticky-section {
    grid-column: 1 / -1 !important; /* Header spans full 12 columns */
    position: -webkit-sticky;
    position: sticky;
    top: var(--oe-gf-sticky-top, 135px);
    z-index: 95;
    background-color: transparent;
    border: none;
    box-shadow: none;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Default Heading Text Style (Un-stuck) */
.oe-sticky-section-wrapper > .gfield--type-section.oe-sticky-section .gsection_title {
    color: inherit;
    transition: color 0.2s ease;
}

/* 3. Active Sticky State (.is-stuck) - PNG Background Image Only, Zero Horizontal Shift */
.oe-sticky-section-wrapper > .gfield--type-section.oe-sticky-section.is-stuck,
.gform_wrapper .oe-sticky-section-wrapper > .gfield--type-section.oe-sticky-section.is-stuck,
body .gform_wrapper div.gfield--type-section.oe-sticky-section.is-stuck {
    background-color: transparent !important;
    background-image: url('../images/white-to-tx-gradient.png') !important;
    background-repeat: repeat-x !important;
    background-position: left top !important;
    background-size: auto 100% !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    padding-left: 0 !important;   /* Keep exact left alignment with form edge */
    padding-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    border: none !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Highlighted Heading Text Style (.is-stuck) */
.oe-sticky-section-wrapper > .gfield--type-section.oe-sticky-section.is-stuck .gsection_title,
.gform_wrapper .oe-sticky-section-wrapper > .gfield--type-section.oe-sticky-section.is-stuck .gsection_title,
.gform_wrapper .oe-sticky-section-wrapper > .gfield--type-section.oe-sticky-section.is-stuck h3,
body .gform_wrapper div.gfield--type-section.oe-sticky-section.is-stuck h3.gsection_title {
    color: #1b458f !important;
    font-weight: 700 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Optional Description Text below title */
.oe-sticky-section-wrapper > .gfield--type-section.oe-sticky-section .gsection_description {
    margin-top: 4px !important;
    font-size: 0.875rem !important;
    color: #64748b !important;
}

/* Mobile Responsiveness Adjustment */
@media screen and (max-width: 768px) {
    .oe-sticky-section-wrapper > .gfield--type-section.oe-sticky-section.is-stuck {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}