/* Styles for the two-column section-pages layout */

/* Sections container styling */
.sections-container {
    margin-bottom: 2rem;
    padding-left: 25px;
}

.section-container {
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 0.5rem;
}

.section-container:last-child {
    border-bottom: none;
}

/* Section title button styling */
.section-title-btn {
    background: none;
    border: none;
    text-align: left;
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #495057;
}

.section-title-btn:hover, .section-title-btn:focus {
    background: none;
    box-shadow: none;
    color: #007bff;
}

.section-title-btn .dropdown-arrow {
    transition: transform 0.3s ease;
}

.section-title-btn[aria-expanded="true"] .dropdown-arrow {
    transform: rotate(180deg);
}

.section-title {
    font-size: 1.1rem;
    font-weight: 500;
}

/* Page list styling */
.section-page-list {
    margin-left: 1rem;
    margin-bottom: 1rem;
}

.list-group-item.active {
    background-color: #f8f9fa;
    color: #212529;
    border-color: #dee2e6;
    border-left: 3px solid #007bff;
    font-weight: 500;
}

.list-group-item:hover:not(.active) {
    background-color: #f1f3f5;
}

/* Collapsible section styling */
.section-pages-collapsible {
    padding-left: 0.5rem;
}

/* Page content styling */
#pageContainer {
    padding: 1rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.page-header {
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.page-meta {
    color: #6c757d;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

/* Collapsible section styling */
.section-container button {
    transition: transform 0.3s ease;
}

.section-container button[aria-expanded="false"] .dropdown-arrow {
    transform: rotate(0deg);
}

.section-container button[aria-expanded="true"] .dropdown-arrow {
    transform: rotate(180deg);
}

/* Responsive adjustments - match Bootstrap's lg breakpoint for burger menu */
@media (max-width: 991.98px) {
    /* Hide the sidebar when burger menu appears */
    .col-md-4 {
        display: none;
    }
    
    /* Make content full width */
    .col-md-8, .col-12 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 15px;
        margin-bottom: 0;
    }
    
    .row {
        margin-left: 0;
        margin-right: 0;
    }
    
    #pageContainer {
        margin-top: 0;
        width: 100%;
        border: none;
        box-shadow: none;
        padding: 0;
        background-color: transparent;
    }
    
    /* Mobile menu sections styling */
    #mobileAllSections .sections-container,
    #mobileAllSections .section-container {
        margin-bottom: 0.5rem;
        border-bottom: 1px solid #dee2e6;
    }
    
    #mobileAllSections .section-container:last-child {
        border-bottom: none;
    }
    
    /* Make sure the offcanvas is wide enough */
    .offcanvas-start {
        width: 280px;
    }
    
    /* Style the mobile menu */
    #mobileAllSections {
        padding: 0;
    }
    
    #mobileAllSections .section-title-btn {
        padding: 0.75rem 0;
    }
    
    #mobileAllSections .list-group-item {
        border-radius: 0;
        margin-bottom: 0;
    }
}

/* Ensure the page list is always visible on larger screens */
@media (min-width: 992px) {
    /* Show the sidebar on desktop */
    .col-md-4 {
        display: block;
    }
    
    /* Reset content width */
    .col-md-8 {
        width: 66.666667%;
        max-width: 66.666667%;
        flex: 0 0 66.666667%;
    }
    
    #pageListCollapse {
        display: block !important;
        height: auto !important;
    }
    
    /* Hide the collapse button on larger screens */
    .section-pages .d-flex button {
        display: none !important;
    }
    
    /* Clear the mobile menu */
    #mobileAllSections {
        display: none;
    }
    
    /* Restore page container styles */
    #pageContainer {
        padding: 1rem;
        background-color: #fff;
        border: 1px solid #dee2e6;
        border-radius: 0.25rem;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }
    
    /* Ensure the Sermons section is always visible but not expanded */
    .section-container[data-section="Sermons"] {
        display: block !important;
    }
    
    /* Style the Sermons section as a link rather than a collapsible section */
    .section-container[data-section="Sermons"] .section-title-btn {
        cursor: pointer;
    }
}

/* Dark mode support */
[data-bs-theme="dark"] .section-title-btn {
    color: #f8f9fa;
}

[data-bs-theme="dark"] .section-title-btn:hover, 
[data-bs-theme="dark"] .section-title-btn:focus {
    color: #0d6efd;
    background: none;
}

[data-bs-theme="dark"] .section-title {
    color: #f8f9fa;
}

[data-bs-theme="dark"] .section-container {
    border-color: #495057;
}

[data-bs-theme="dark"] .section-container button {
    color: #f8f9fa;
    border-color: #495057;
}

[data-bs-theme="dark"] .section-pages-collapsible {
    border-color: #495057;
}

[data-bs-theme="dark"] .list-group-item.active {
    background-color: #343a40;
    color: #f8f9fa;
    border-color: #495057;
    border-left: 3px solid #0d6efd;
}

[data-bs-theme="dark"] .list-group-item:hover:not(.active) {
    background-color: #495057;
}

[data-bs-theme="dark"] #pageContainer {
    background-color: #212529;
    border-color: #495057;
}

[data-bs-theme="dark"] .page-header {
    border-color: #495057;
}