/* General Body & Container */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa; /* Light background */
}

.container {
    max-width: 1200px;
}

/* --- Header & Navbar Styling --- */
/* --- Header & Navbar Styling --- */
.fancy-header {
    /* NEW VIBRANT GRADIENT: Golden -> Orange -> Red -> Magenta -> Pink */
    background: linear-gradient(to right, 
                #FFD700,    /* Golden */
                #FF00FF,    /* Magenta */
                #FF4500,    /* Orange-Red */
                #FFA500,    /* Orange */
                #FFA500,    /* Orange */
                #FF0000,    /* Red */
                #FF69B4),   /* Hot Pink */
                #FFD700;   /* Golden */
    color: #FFFFFF; /* White text for better contrast on this vibrant background */
    padding-bottom: 0;
    padding-top: 15px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); /* Stronger shadow for vibrant header */
    position: relative;
    z-index: 10;
}

/* Add a subtle pattern/texture to the header background */
.fancy-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="diagonal-stripe" patternUnits="userSpaceOnUse" width="10" height="10"><path d="M-1,1 l2,-2 M0,10 l10,-10 M9,11 l2,-2" stroke="%23ffffff" stroke-width="0.5" opacity="0.05"/></pattern></defs><rect width="100" height="100" fill="url(%23diagonal-stripe)"/></svg>');
    background-size: 20px 20px;
    opacity: 0.1; /* Reduced opacity for subtlety */
    z-index: 1;
}

.navbar {
    background-color: transparent !important;
    padding-top: 0;
    padding-bottom: 15px;
    position: relative;
    z-index: 12;
}

.navbar-brand {
    padding-top: 5px;
    padding-bottom: 5px;
    margin-right: 20px;
}

.navbar-brand img {
    transition: transform 0.3s ease;
}

.navbar-brand img:hover {
    transform: scale(1.05);
}

.navbar-brand .site-title {
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: 1.25px;
    margin-left: 12px;
    /* ENHANCED TEXT GRADIENT: Contrasting against the new header */
    background: linear-gradient(45deg, #001f3f, #007bff, #001f3f); /* Very dark blue -> Brighter blue -> Very dark blue */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.1;
    /* Added a subtle text-shadow for better definition */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}

.navbar-brand .site-slogan {
    font-size: 1.2rem;
    /* ENHANCED SLOGAN COLOR AND SHADOW */
    color: #F8F8F8; /* Light gray/off-white for high contrast on vibrant background */
    font-style: normal;
    font-weight: 500; /* Slightly bolder for readability */
    text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3); /* Slightly stronger shadow */
    margin-left: 12px;
    margin-top: 3px;
}

/* Navbar Toggler Icon Color for the new header */
.navbar-toggler-icon {
    /* Changed to a white icon for better visibility on vibrant header */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Navbar Nav links for desktop */
.navbar-nav .nav-link {
    color: #F0F0F0 !important; /* Light gray for regular links */
    font-weight: 600;
    margin-right: 20px;
    position: relative;
    transition: all 0.3s ease-in-out;
    padding: 8px 0;
}

.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    display: block;
    margin-top: 5px;
    right: 0;
    background: #FFFFFF; /* White for hover underline */
    transition: width 0.3s ease;
    -webkit-transition: width 0.3s ease;
}

.navbar-nav .nav-link:hover {
    color: #FFFFFF !important; /* Pure white on hover */
}

.navbar-nav .nav-link:hover::after {
    width: 100%;
    left: 0;
    background: #FFD700; /* Golden for hover underline */
}

/* Dropdown menu for desktop */
.dropdown-menu {
    background-color: rgba(255, 165, 0, 0.95); /* Semi-transparent Orange for dropdown background */
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    position: absolute;
    display: none; /* Controlled by JS hover now */
    padding: 5px 0;
    border-radius: 4px;
}

.dropdown-item {
    color: #FFFFFF !important; /* White text for dropdown items */
    transition: background-color 0.3s ease, color 0.3s ease;
    padding: 8px 15px;
}

.dropdown-item:hover {
    background-color: rgba(255, 215, 0, 0.9); /* Semi-transparent Golden on hover */
    color: #1A2C40 !important; /* Deep blue text on hover for contrast */
}

/* --- Main Content Styling (no changes needed here from previous version unless desired) --- */
.card {
    border-radius: 8px;
    border: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
}

.card-title {
    color: #343a40;
    font-weight: 700;
}

.btn-primary {
    background-color: #4A90E2; /* Softer blue for primary buttons */
    border-color: #4A90E2;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #304C6A; /* Darker blue on hover */
    border-color: #304C6A;
}

.btn-outline-secondary {
    color: #4A90E2; /* Softer blue for outline */
    border-color: #4A90E2;
    transition: all 0.3s ease;
}

.btn-outline-secondary:hover {
    background-color: #4A90E2;
    color: #fff;
}

.bg-warning {
    background-color: #FFD700 !important; /* Gold accent for warning */
    color: #333 !important; /* Ensure good contrast text on yellow */
}

/* --- Footer --- */
footer {
    background-color: #1A2C40 !important; /* Deep blue footer (kept dark for contrast) */
    color: #E0E0E0; /* Off-white text */
}

.social-icons a {
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: #FFD700 !important; /* Gold accent on hover for social icons */
}

/* --- Lightbox Specific Styling --- */
.modal-header .btn-close {
    display: block !important;
    visibility: visible !important;
    z-index: 1060;
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 1 !important;
}

.modal-header {
    background-color: #1A2C40; /* Dark header for lightbox modal (kept dark for consistency) */
    color: #E0E0E0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-top-left-radius: calc(0.3rem - 1px);
    border-top-right-radius: calc(0.3rem - 1px);
}
.modal-title {
    margin-bottom: 0;
    line-height: 1.5;
    color: #E0E0E0;
}

.modal-backdrop {
    z-index: 1040;
    background-color: rgba(0, 0, 0, 0.75);
}

.modal {
    z-index: 1050;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}

#lightboxImage {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain;
    transition: transform 0.3s ease-out;
}

.modal-xl .modal-body {
    max-height: 80vh;
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background-color: #f8f9fa;
}

/* --- OFFcanvas Specific Styling (Mobile Menu) --- */
.offcanvas {
    /* NEW APPEALING GRADIENT FOR OFFCAVAS */
    background: linear-gradient(to bottom, #D1E1F1, #f8F9Ff); /* Light Blue to Light Pastel Purple/Blue */
    color: #333 !important; /* Dark text for light offcanvas background */
    /* Updated width for better mobile fit */
    width: max(160px, 40vw); /* At least 250px, or 55% of viewport width */
}

.offcanvas-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Darker border for light background */
    padding: 8px;
}

.offcanvas-title {
    color: #1A2C40; /* Deep blue title for offcanvas */
}

/* Ensure the close button is dark on the light offcanvas header */
.offcanvas .btn-close {
    filter: none; /* Reset filter to default dark */
    opacity: 0.6; /* Slightly less opaque than full white */
}


.offcanvas-body {
    padding: 1rem;
}

/* Navbar Nav links within Offcanvas */
.offcanvas-body .navbar-nav .nav-link {
    color: #333 !important; /* Dark text for regular links */
    padding: 10px 0;
    margin-right: 0;
    text-align: left;
    font-weight: 600;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.offcanvas-body .navbar-nav .nav-link:hover {
    color: #4A90E2 !important; /* Softer blue accent on hover */
    background-color: rgba(0, 0, 0, 0.05); /* Subtle light hover background */
    border-radius: 4px;
}

/* Dropdown items within offcanvas */
.offcanvas-body .dropdown-menu {
    background-color: rgba(208, 224, 240, 0.8); /* Slightly darker transparent light blue for sub-items */
    border: none;
    box-shadow: none;
    position: static;
    width: 100%;
    padding-left: 10px;
}

.offcanvas-body .dropdown-item {
    color: #333 !important; /* Dark text for dropdown items */
    padding: 8px 10px;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.offcanvas-body .dropdown-item:hover {
    background-color: rgba(74, 144, 226, 0.1); /* Transparent softer blue on hover */
    color: #4A90E2 !important; /* Softer blue accent on hover */
}

/* --- Responsive Adjustments --- */
@media (max-width: 991.98px) { /* For small to medium screens (Bootstrap's lg breakpoint and below) */
    .navbar-toggler {
        border-color: rgba(255, 255, 255, 0.8); /* White border for toggler on vibrant header */
    }

    /* Hide desktop navbar collapse on mobile */
    .navbar-collapse {
        display: none !important;
    }

    .navbar-brand .site-title {
        font-size: 1.8rem;
    }
    .navbar-brand .site-slogan {
        font-size: 0.75rem;
    }
}

@media (min-width: 992px) { /* For large screens and up (desktop) */
    .offcanvas {
        visibility: hidden;
        display: none !important; /* Ensure offcanvas is hidden on desktop */
    }

    /* Ensure desktop navbar collapse is visible and takes up space */
    .navbar-collapse {
        display: flex !important; /* Force flex display for desktop */
        flex-basis: auto; /* Allow content to dictate size */
        flex-grow: 1; /* Allow it to grow and push to the right */
    }

    /* These rules apply to the .navbar-nav which is now inside .navbar-collapse on desktop */
    .navbar-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-grow: 0 !important;
        padding-right: 0 !important;
        margin-left: auto !important; /* Pushes menu to the right */
        width: auto !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Restore desktop-specific styles for nav-links */
    .navbar-nav .nav-link {
        color: #F0F0F0 !important; /* Light text for desktop links on vibrant header */
        margin-right: 20px;
        text-align: left;
        padding: 8px 0;
    }

    .navbar-nav .nav-link::after {
        display: block;
    }
    .navbar-nav .nav-link:hover {
        color: #FFFFFF !important; /* Pure white on hover */
    }
    .navbar-nav .nav-link:hover::after {
        background: #FFD700; /* Golden for hover underline */
    }

    /* Restore desktop dropdown behavior */
    .dropdown-menu {
        position: absolute;
        display: none; /* Keep display: none; CSS, JS will handle visibility */
        background-color: rgba(255, 165, 0, 0.95); /* Semi-transparent Orange for desktop dropdowns */
        padding-left: 0;
    }
    .dropdown-item:hover {
        background-color: rgba(255, 215, 0, 0.9); /* Semi-transparent Golden on hover */
        color: #1A2C40 !important; /* Deep blue text on hover for contrast */
    }
}






        /* Optional: Add some padding to columns if needed for visual separation */
        .col-topics, .col-content { /* Custom classes for consistent padding */
            padding: 15px;
        }
        /* Optional: Give the sections a border to visualize the layout */
        .list-group-container {
            border: 1px solid #ddd;
            min-height: 400px; /* To make it visible even if empty */
        }
        #chapterContent {
            border: 1px solid #ddd;
            min-height: 400px; /* To make it visible even if empty */
        }

        /* Adjust for smaller screens */
        @media (max-width: 767.98px) {
            .list-group-container {
                margin-bottom: 20px;
            }
        }