

/* 2. DESKTOP STICKY SIDEBAR */
@media (min-width: 1025px) {
    .elementor-column, .elementor-widget-wrap {
        overflow: visible !important;
    }

    .sticky-legal-sidebar {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 125px !important;
        height: fit-content !important;
        align-self: flex-start !important;
        z-index: 10;
    }
}

/* 3. SIDEBAR ITEM STYLING */
.legal-nav-item {
    padding: 6px 12px !important;
    margin-bottom: 2px !important;
    cursor: pointer;
    border-left: 4px solid transparent;
    transition: all 0.2s ease;
    border-radius: 5px 0px 0px 5px;
    display: block;
}

.legal-nav-item h1, .legal-nav-item h2, .legal-nav-item h3, 
.legal-nav-item h4, .legal-nav-item h5, .legal-nav-item h6,
.legal-nav-item span, .legal-nav-item p {
    color: #555 !important; 
    margin: 0 !important; 
    font-size: 13px !important;
    transition: color 0.2s ease;
}

/* ACTIVE STATE - FORCING HSL COLOR TO ALL NESTED TEXT */
.legal-nav-item.active {
    background-color: hsla(193, 35%, 53%, 0.1) !important;
    border-left: 4px solid hsl(193, 35%, 53%) !important;
}

.legal-nav-item.active h1, .legal-nav-item.active h2, .legal-nav-item.active h3, 
.legal-nav-item.active h4, .legal-nav-item.active h5, .legal-nav-item.active h6,
.legal-nav-item.active span, .legal-nav-item.active p { 
    color: hsl(193, 35%, 53%) !important; 
    font-weight: 600 !important;
}

/* 4. MOBILE MODERN DROPDOWN */
@media (max-width: 1024px) {
    .mobile-sticky-trigger {
        position: fixed;
        top: -150px; 
        left: 0;
        width: 100%;
        background: #fff;
        z-index: 9998;
        padding: 12px 20px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.08);
        transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .dropdown-selected-label {
        display: flex; justify-content: space-between; align-items: center;
        padding: 12px 18px; background: #fdfdfd; border: 1px solid #eee;
        border-radius: 10px; font-family: "DM Sans", sans-serif;
        font-weight: 600; font-size: 14px; 
        color: hsl(193, 35%, 53%);
    }
    .dropdown-selected-label::after {
        content: ''; border: solid #555; border-width: 0 2px 2px 0;
        display: inline-block; padding: 3.5px; transform: rotate(45deg);
    }
    .dropdown-selected-label.open::after { transform: rotate(-135deg); }
    .custom-dropdown-menu {
        display: none; position: absolute; top: 65px; left: 20px; right: 20px;
        background: #fff; border-radius: 12px; border: 1px solid #eee;
        box-shadow: 0 10px 25px rgba(0,0,0,0.15); overflow-y: auto; max-height: 350px;
    }
    .custom-dropdown-menu.show { display: block; animation: slideUpMobile 0.3s ease-out; }
    .dropdown-option { padding: 15px 20px; font-size: 14px; color: #444; border-bottom: 1px solid #f7f7f7; }
    .dropdown-option.active { 
        background: hsla(193, 35%, 53%, 0.05); 
        color: hsl(193, 35%, 53%); 
        font-weight: 600; 
    }
}

/* 5. CONTENT DISPLAY LOGIC */
.js-hidden { display: none !important; }
.legal-content-visible { display: block !important; animation: simpleFade 0.3s ease-in; padding-bottom: 80px !important; }
@keyframes slideUpMobile { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes simpleFade { from { opacity: 0; } to { opacity: 1; } }