/* Home Page Specific Styles */

@import url('https://fonts.googleapis.com/css2?family=Khand:wght@300;400;500;600;700&family=Mukta:wght@200;300;400;500;600;700;800&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&family=Stack+Sans+Text:wght@200..700&display=swap');

html {
    max-width: 100%;
}

body {
    margin: 0;
    padding: 0;
    background-color: gainsboro;
    color: #242424;
    /* transition: background-color 0.3s, color 0.3s; REMOVED FOR INSTANT SWITCH */
    font-family: 'Mukta', sans-serif;
    max-width: 100%;
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Protect Navbar from font change */
.branding-header,
.sticky-nav,
.sidebar {
    /*font-family: 'Khand', sans-serif !important;*/
}

body.dark {
    background-color: #1a202c;
    color: #f7fafc;
}

/* Layout Structure */
.home-main-container {
    max-width: 1320px;
    margin: 20px auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
}

/* Sidebar Column */
.home-sidebar {
    flex: 0 0 350px;
    width: 350px;
    position: sticky;
    top: 100px;
    /* Account for sticky navbar (70px) + election ticker (60px) + gap */
    transition: all 0.1s;
    /* Appear first (left side) on desktop */
    order: 1;
    /* Prevent content from pushing during collapse */
    will-change: flex-basis, width, opacity, transform;
}

body.sidebar-hidden .home-sidebar {
    flex: 0 0 0;
    width: 0;
    margin-left: 0;
    opacity: 0;
    pointer-events: none;
}

/* Main Content Column */
.home-content {
    flex: 0 1 940px;
    /* Use fixed flex-basis for stability */
    min-width: 0;
    /* Prevent flex blow-out */
    border-left: 1px solid #2424;
    padding-left: 30px;
    transition: all 0.6s cubic-bezier(0.65, 0, 0.35, 1);
    order: 2;
    /* Appear second (right side) */
    will-change: padding-left, border-color;
}

body.sidebar-hidden .home-content {
    border-left-color: transparent !important;
    padding-left: 0;
    /* Centered by flexbox justify-content: center because sidebar now has 0 width */
}

body.dark .home-content {
    border-color: #F5F5F5;
}

/* Toggle Trigger for Hidden State */
.sidebar-show-btn {
    position: fixed;
    left: 0;
    top: 135px;
    background: #e47200;
    color: white;
    padding: 8px 12px;
    /* Smaller padding */
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 0 6px 6px 0;
    /* Slightly smaller radius */
    cursor: pointer;
    z-index: 1001;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    /* Slightly sharper shadow */
    transition: transform 0.3s ease, background 0.3s ease;
    font-weight: 500;
    /* Lighter weight */
    font-size: 15px;
    /* Smaller font */
    gap: 6px;
    /* Smaller gap */
    white-space: nowrap;
}

/* Full Width Bottom Section */
.home-bottom-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 20px;
    overflow-x: hidden;
    width: 100%;
}

/* Default Desktop Ordering Logic */
.home-sidebar {
    order: 1;
}

.home-content {
    order: 2;
}

/* 
 * Ordering logic for items inside home-content (when display: contents is active on mobile)
 * On Desktop, these follow standard vertical flow within .home-content.
 */
#featuredSection {
    order: 1;
}

#newsSeriesSection {
    order: 3;
}

#topCatSection {
    order: 4;
}

#remCatSection {
    order: 5;
}

#webStoriesSection {
    order: 6;
}

#shortsSectionWrapper {
    order: 7;
}

#videoSectionWrapper {
    order: 8;
}

@media (max-width: 1100px) {
    .home-main-container {
        flex-direction: column;
        align-items: stretch;
        padding: 0 15px;
        margin: 0px 0;
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Flattens the content container so children can be ordered against the sidebar */
    .home-content {
        display: contents;
    }

    .home-sidebar {
        flex: none !important;
        width: 100% !important;
        position: relative !important;
        top: 0 !important;
        margin: 40px 0 !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        /* Mobile Order: Appear after Featured News */
        order: 2 !important;
    }

    /* DELETED: Explicit override for hidden state. Now we respect body.sidebar-hidden */

    .home-content {
        border-left: none;
        padding-left: 0;
    }

    /* Show toggle button on mobile if needed */
    .sidebar-show-btn {
        display: none;
        /* Default hidden, but JS toggles display: flex */
    }

    /* Hide vertical separators on mobile stack */
    .home-content hr {
        display: block;
        /* Keep them for spacing but they will follow order */
    }
}

/* Go To Top Button */
#scrollTopBtn {
    position: fixed;
    bottom: 30px;
    right: 15px;
    width: 40px;
    height: 40px;
    background: #e47200;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    z-index: 1000;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    opacity: 0;
    transform: translateY(20px);
}

#scrollTopBtn.show {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

#scrollTopBtn:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(245, 101, 101, 0.4);
}

/* Huge Screen Responsiveness */

/* Large Desktops (e.g., 1920px) */
@media (min-width: 1800px) {

    .home-main-container,
    .home-bottom-container {
        max-width: 1600px;
    }

    .home-sidebar {
        flex: 0 0 400px;
        width: 400px;
    }

    .home-content {
        padding-left: 40px;
        flex: 0 1 1160px;
    }

    body.sidebar-hidden .home-content {
        flex: 0 1 1160px;
    }
}

/* Ultra-Wide / 4K Monitors */
@media (min-width: 2200px) {

    .home-main-container,
    .home-bottom-container {
        max-width: 1900px;
    }

    .home-sidebar {
        flex: 0 0 450px;
        width: 450px;
    }

    .home-content {
        padding-left: 50px;
        flex: 0 1 1400px;
    }

    body.sidebar-hidden .home-content {
        flex: 0 1 1400px;
    }
}

body {
    font-size: 1.2rem;
}