/* Additional custom styling for About page tabs */

/* Override any existing styles that might cause conflicts */
.about-content {
    background-color: #ffffff;
    padding-bottom: 30px;
}

.about-h1 {
    color: #2c5aa0;
    margin-bottom: 25px;
}

/* Ensure proper spacing between content sections */
.container .tab-content {
    margin-top: 0;
}

/* Make sure text in tabs has good contrast */
.sw-pages-menu li a {
    position: relative;
    z-index: 10;
    font-size: 16px;
}

/* Fix for potential text color issues inside active tabs */
.sw-pages-menu li.acting-sw-link a {
    color: #ffffff !important; /* Force white text in active tab */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); /* Improve readability */
}

/* Remove the pseudo-element approach and use direct styling */
.sw-pages-menu li {
    padding: 0; /* Reset padding to control it through the link */
    margin-bottom: 0;
    border-radius: 4px 4px 0 0;
    margin-right: 2px; /* Add slight spacing between tabs */
}

/* Make the li element fully clickable */
.sw-pages-menu li a {
    border-radius: 4px 4px 0 0;
    width: 100%;
    box-sizing: border-box;
    height: 45px; /* Match parent height */
}

/* Set specific styles for hover state */
.sw-pages-menu li:hover {
    background-color: rgba(44, 90, 160, 0.8);
}

/* Set specific styles for active state */
.sw-pages-menu li.acting-sw-link {
    background-color: #2c5aa0;
}

/* Ensure the tab bottom indicator aligns with tab */
.sw-pages-menu li.acting-sw-link::after {
    bottom: -1px; /* Position it to overlap the border */
}

/* Ensuring tab content is properly styled */
#sw-page_01, #sw-page_02, #sw-page_03, #sw-page_04, #sw-page_05 {
    background-color: #fff;
}

/* Mobile optimization */
@media (max-width: 767px) {
    .sw-pages-menu ul {
        flex-direction: column;
        height: auto;
    }
    
    .sw-pages-menu li {
        margin-right: 0;
        margin-bottom: 3px;
        width: 100%;
        height: 45px; /* Keep consistent height on mobile */
    }
    
    .sw-pages-menu li a {
        width: 100%;
        height: 45px; /* Keep consistent height on mobile */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .sw-pages-menu li.acting-sw-link::after {
        display: none;
    }
    
    /* Full width tabs on mobile */
    .sw-pages-menu {
        margin-bottom: 20px;
        border-bottom: none;
    }
}