/* Layout Styles using Flexbox */

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensures footer sticks to bottom if content is short */
    padding-top: 80px; /* Add padding to body to prevent content from being hidden by fixed header */
}

#main-header {
    /* Fixed header properties */
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000; /* Ensure header stays on top of other content */
    /* Flex container for logo, nav, and search */
    display: flex;
    justify-content: space-between; /* Pushes logo to left, nav/search to right */
    align-items: center;
    padding-left: 20px; /* Padding for the overall header */
    padding-right: 20px;
}

#main-header .logo-placeholder {
    /* No specific flex properties needed here if it's just a div/img */
    /* Its size is defined in style.css */
}

/* Container for nav and search to group them on the right */
.header-right-content {
    display: flex;
    align-items: center;
}

#main-header .main-nav {
    margin-right: 20px; /* Space between nav and search box */
}

#main-header .search-box {
    /* No specific flex properties needed here */
}

.main-container {
    display: flex;
    flex-grow: 1; /* Allows this container to take up available vertical space */
    width: 100%; /* Ensures it takes full width */
}

#left-sidebar {
    flex-basis: 206px; /* Sidebar width increased by 10% (187px * 1.1 = 205.7px, rounded to 206px) */
    flex-shrink: 0; /* Prevents sidebar from shrinking if content is too wide */
    /* Styling (background, padding) is in style.css */
}

#main-content {
    flex-grow: 1; /* Takes up the remaining space in the main-container */
    /* Styling (background, padding) is in style.css */
}

#main-footer {
    width: 100%;
    /* Styling (background, color, padding) is in style.css */
    /* margin-top: auto; is in style.css to push it down */
}

/* Channel Navigation in Sidebar */
#left-sidebar .channel-nav {
    padding: 15px 0; /* Add some vertical padding to the nav container */
}

#left-sidebar .channel-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#left-sidebar .channel-nav ul li {
    margin-bottom: 4px; /* Slightly more space between list items */
}

#left-sidebar .channel-nav ul li a { /* General link style within channel-nav */
    display: flex; /* Use flexbox for alignment */
    align-items: center;
    justify-content: center; /* Center text horizontally */
    padding: 12px 0; /* Adjusted padding for centering */
    text-decoration: none;
    color: var(--text-color); /* Use theme variable */
    border-radius: var(--border-radius);
    /* Removed transition for simpler interaction */
    font-size: 1em;
    background-color: var(--sidebar-bg); /* Unified background */
}

#left-sidebar .channel-nav ul li a:hover {
    background-color: var(--hover-bg); /* Use theme variable */
    color: var(--primary-color); /* Highlight text on hover */
    /* Removed transform: translateX(3px); to keep text centered */
    /* Removed box-shadow for simpler interaction */
}

#left-sidebar .channel-nav ul li a.active {
    background-color: var(--primary-color); /* Active link background */
    color: #ffffff; /* Active link text color */
    font-weight: bold;
    /* Removed box-shadow for simpler interaction */
    /* Removed transform: translateX(0); to keep text centered */
}

#left-sidebar .channel-nav ul li a.active:hover {
    background-color: var(--primary-hover-color); /* Darker primary on hover for active link */
}

/* Specific style for the homepage link */
#left-sidebar .channel-nav ul li a[href="../../index.html"] {
    background-color: #007bff; /* Set background color for homepage link */
    color: #ffffff; /* Ensure text is visible */
}

/* Category Toggle Styles */
#left-sidebar .channel-nav .category-toggle {
    position: relative;
    font-weight: bold;
    background-color: var(--sidebar-bg); /* Unified background */
    color: var(--text-color); /* Use general text color */
    padding: 12px 15px; /* Adjusted padding for left alignment */
    /* Removed padding-right: 35px; as arrow is removed */
    border-bottom: 1px solid var(--border-color); /* Separator for categories */
    margin-bottom: 5px; /* Space below category header */
    font-size: 1.05em; /* Slightly larger font for categories */
    cursor: pointer; /* Indicate it's clickable */
    /* Removed box-shadow for simpler interaction */
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically align items */
    justify-content: flex-start; /* Align text to the left */
    gap: 8px; /* Space between icon and text */
    border-radius: var(--border-radius); /* Apply border-radius */
    /* Removed transition for simpler interaction */
}

#left-sidebar .channel-nav .category-toggle:hover {
    background-color: var(--hover-bg); /* Unified hover background */
    transform: none; /* Remove slide effect for category toggles */
    /* Removed box-shadow for simpler interaction */
}

/* Removed category icon styles for simpler interaction */

/* Removed category toggle arrow styles for simpler interaction */

/* Submenu Styles */
#left-sidebar .channel-nav .submenu {
    list-style: none;
    padding: 0;
    margin: 0 0 10px 0; /* Top and bottom margin for spacing, no left margin */
    overflow: hidden;
    display: block; /* Always visible */
    background-color: var(--sidebar-bg); /* Unified background */
    border-radius: var(--border-radius);
    /* Removed box-shadow for simpler interaction */
}

#left-sidebar .channel-nav .submenu li a {
    display: flex; /* Use flexbox for alignment */
    align-items: center;
    justify-content: center; /* Center text horizontally */
    padding: 12px 0; /* Adjusted padding for centering */
    font-size: 0.9em; /* Slightly smaller font for submenu items */
    color: var(--text-color); /* Use general text color */
    border-bottom: 1px dashed rgba(0,0,0,0.05); /* Subtle separator */
    background-color: var(--sidebar-bg); /* Unified background */
}

#left-sidebar .channel-nav .submenu li:last-child a {
    border-bottom: none; /* No border for the last item */
}

#left-sidebar .channel-nav .submenu li a:hover {
    color: var(--primary-color); /* Highlight text on hover */
    background-color: var(--hover-bg); /* Unified hover background */
    transform: translateX(0); /* No slide for submenu items */
    box-shadow: none; /* Remove shadow on hover for submenu items */
}

#left-sidebar .channel-nav .submenu.expanded {
    /* Removed max-height, opacity, and transform as submenu is always visible */
}


/* Responsive adjustments (optional, can be expanded later) */
@media (max-width: 768px) {
    .main-container {
        flex-direction: column;
    }

    #left-sidebar {
        flex-basis: auto; /* Reset basis for column layout */
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #ddd; /* Separator when stacked */
    }

    #main-header {
        flex-direction: column;
        align-items: flex-start; /* Align items to the start in column layout */
    }

    .header-right-content {
        flex-direction: column;
        align-items: flex-start;
        width: 100%; /* Make nav and search take full width */
        margin-top: 10px;
    }

    #main-header .main-nav {
        margin-right: 0;
        margin-bottom: 10px; /* Space between nav and search when stacked */
        width: 100%;
    }
    #main-header .main-nav ul {
        flex-direction: column;
        width: 100%;
    }
    #main-header .main-nav ul li {
        margin-left: 0;
        margin-bottom: 5px;
        width: 100%;
        text-align: left;
    }
    #main-header .search-box {
        width: 100%;
        display: flex;
    }
    #main-header .search-box input[type="search"]{
        flex-grow: 1;
    }
}