/**
 * Accessible List Styles for BFL-OL (CSS-Only Solution)
 *
 * Styles for properly marked-up semantic HTML lists.
 * Maintains the original visual appearance with custom bullets.
 * Addresses WCAG 2.2 compliance for semantic HTML structure.
 *
 * @package BFL_Accessibility
 * @author WP-Stars - Valentin Girleanu
 * @version 1.0
 */

/* ============================================
   1. SEMANTIC LIST STYLES
   Styles for lists with class="bfl-semantic-list"
   ============================================ */

/**
 * Base list styles
 * Remove default list styling
 */
ul.bfl-semantic-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/**
 * List item styles
 * Add custom bullet using ::before pseudo-element
 * Match the original <p> margin-bottom of 16px for spacing
 */
ul.bfl-semantic-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 16px;
    line-height: 1.5;
}

/**
 * Custom bullet using background image
 * Replicates the original .ulelement visual appearance
 */
ul.bfl-semantic-list li::before {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url(/wp-content/uploads/2021/10/ul_element.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto;
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
}

/**
 * Remove margin from last list item to prevent extra space after the list
 */
ul.bfl-semantic-list li:last-child {
    margin-bottom: 0;
}

/* ============================================
   2. LEGACY SUPPORT
   Hide old .ulelement divs if they still exist
   ============================================ */

/**
 * Hide legacy .ulelement divs
 * This ensures backward compatibility if old markup still exists
 */
.bold_timeline_item_text .ulelement {
    display: none !important;
}

/* ============================================
   3. RESPONSIVE ADJUSTMENTS
   ============================================ */

/**
 * Adjust spacing on smaller screens
 */
@media screen and (max-width: 768px) {
    ul.bfl-semantic-list li {
        padding-left: 25px;
    }

    ul.bfl-semantic-list li::before {
        width: 18px;
        height: 18px;
    }
}

/* ============================================
   4. PRINT STYLES
   Ensure lists print correctly
   ============================================ */

@media print {
    ul.bfl-semantic-list {
        list-style: disc;
        padding-left: 20px;
    }

    ul.bfl-semantic-list li::before {
        display: none;
    }

    ul.bfl-semantic-list li {
        padding-left: 0;
    }
}

/* ============================================
   5. HIGH CONTRAST MODE SUPPORT
   Ensure lists are visible in Windows High Contrast Mode
   ============================================ */

@media (prefers-contrast: high) {
    ul.bfl-semantic-list li::before {
        /* Fallback to standard bullet in high contrast mode */
        background-image: none;
        content: '•';
        font-size: 20px;
        line-height: 20px;
    }
}

/* ============================================
   6. RTL (Right-to-Left) SUPPORT
   For potential multilingual support
   ============================================ */

[dir="rtl"] ul.bfl-semantic-list li {
    padding-left: 0;
    padding-right: 30px;
}

[dir="rtl"] ul.bfl-semantic-list li::before {
    left: auto;
    right: 0;
}

/* ============================================
   7. NESTED LISTS SUPPORT
   In case lists are nested in the future
   ============================================ */

ul.bfl-semantic-list ul {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    padding-left: 20px;
}

ul.bfl-semantic-list ul li {
    padding-left: 25px;
}

ul.bfl-semantic-list ul li::before {
    width: 15px;
    height: 15px;
}

/* ============================================
   8. GROUP ITEM BACKGROUND COLOR FIX
   Add orange background when anchor is removed for accessibility
   ============================================ */

/**
 * Background color for group items without anchor tags
 * This replaces the .bt_bb_group_item_background_color span that was inside the removed anchor
 * Color: rgb(229,114,0) - BFL Orange
 */
.bt_bb_group_item_content_image > span:first-child {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(229, 114, 0);
    border-radius: 20px;
    z-index: 0;
}

/**
 * Ensure the image span is positioned above the background
 */
.bt_bb_group_item_content_image > span:last-child {
    position: relative;
    z-index: 1;
}

/**
 * Ensure the content_image container has position relative for absolute positioning
 */
.bt_bb_group_item_content_image {
    position: relative;
}