/* =========================================
   Training Page Styles
   ========================================= */

/* Enhanced smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Sidebar group headings */
.group-heading {
    background-color: #b6c9db;
    padding: 6px 10px;
    margin-bottom: 4px;
    border-radius: 3px;
    list-style-type: none;
    cursor: pointer;
    font-weight: bold;
    position: relative;
    padding-right: 25px;
    margin-top: 10px;
    margin-bottom: 5px;
}

.group-heading:hover {
    background-color: #ddd;
}

.toggle-icon {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}

.group-categories {
    list-style-type: none;
    padding-left: 20px;
}

.li_border {
    list-style-type: none;
}

ul {
    list-style-type: disc;
    padding-left: 20px;
}

/* Swiper wrapper */
.swiper-wrapper {
    min-height: 300px;
    height: 45vh;
    height: 45dvh;
}

/* =========================================
   Mobile View Styles (max-width: 768px)
   ========================================= */

@media only screen and (max-width: 991px) {

    /* Category accordion header */
    .category-header {
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-bottom: 1px solid transparent;
        background-color: #1f5183;
        padding: 10px 20px;
        position: relative;
        z-index: 2;
    }

    .category-header:hover {
        background-color: #2a6bb0;
    }

    .category-header.active {
        background-color: #193a64 !important;
    }

    .category-header.active h3 {
        color: #ffffff !important;
        font-weight: 600;
    }

    .category-toggle-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #64748b;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .category-header.active .category-toggle-icon {
        color: #ffffff;
        transform: rotate(180deg);
    }

    /* Category content accordion */
    .category-content {
        display: none;
        background: #f8f9fa;
        overflow: hidden;
        transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .category-content.expanded {
        display: block;
    }

    /* Skeleton loader */
    .skeleton-box {
        transition: opacity 0.3s ease;
    }

    .skeleton-box[data-skeleton] {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: loading 1.5s infinite;
    }

    .skeleton-box:not([data-skeleton]) {
        background: none !important;
        animation: none !important;
    }

    @keyframes loading {
        0%   { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    /* Mobile category container */
    .m-container {
        margin-bottom: 10px;
        border: 1px solid #e2e8f0;
        overflow: hidden;
        border-radius: 8px;
        background: white;
        transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .m-container.active-container {
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
    }

    /* Swiper adjustments */
    .swiper-container {
        padding: 15px 0;
    }

    /* Swiper navigation */
    .navigation-container {
        padding: 25px 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }

    .swiper-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        background: #cbd5e1;
        opacity: 0.6;
        transition: all 0.3s ease;
        margin: 0 !important;
    }

    .swiper-pagination-bullet-active {
        background: #1f5183;
        opacity: 1;
        transform: scale(1.2);
    }
}

/* 2026-11-05: /services#<category-slug> (e.g. About › What we do → GRC). The slug is also the id of the
   category's .tabcontent1, so the browser's own hash jump put its heading at the very top, under the 60px
   fixed header. Land it below the header instead (the page script then fine-tunes after load). */
.tabcontent1 { scroll-margin-top: 150px; }