/* /css/header.css */

/* 1. Base style for .navbar-toggler (desktop) */
.navbar-toggler {
    border: none;
    font-size: 1.5rem;
    color: var(--bs-body-color);
}

.navbar-toggler:focus {
    box-shadow: none;
}

/*
 * 2. Mobile styles
 * (Matches 'navbar-expand-lg' breakpoint)
*/
@media (max-width: 991.98px) {

    /* --- HEADER BAR (NEW "BREAKOUT" FIX) --- */
    /* This breaks the header out of its padded parent container */
    header.header-glass {
        position: relative;
        /* We use the var from sidebar.css to pull it left */
        margin-left: calc(var(--main-content-left-padding-gap) * -1);
        
        /* * --- THIS IS THE FIX ---
         * Use 100% instead of 100vw. 100% correctly accounts for 
         * the vertical scrollbar, preventing overflow.
        */
        width: 100%;
        
        /* Now we set its *own* padding to match the sidebar button */
        padding: 0.75rem 1rem !important; 
        
        /* Make the bar itself transparent */
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    /* Remove padding from the inner navbar element */
    header.header-glass .navbar {
        padding: 0 !important;
    }

    /* --- STYLED TOGGLER BUTTON --- */
    /* We no longer use 'position: fixed'.
       The 'ms-auto' class in your HTML will push this
       to the far right of the 100% wide header. */
    header.header-glass .navbar-toggler {
        /* Copied Styles from #showSidebarBtn */
        background-color: var(--apple-accent-color);
        color: white; 
        border: none;
        border-radius: 0.5rem;
        padding: 0.5rem 0.75rem;
        font-size: 1.2rem;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        
        /* Flex alignment (for icon) */
        display: flex;
        align-items: center;
        justify-content: center;

        /* SIZE FIX: Match the line-height and box-sizing */
        line-height: 1; 
        box-sizing: border-box;
    }
    
    /* Ensure the icon *inside* the button is styled correctly */
    header.header-glass .navbar-toggler i {
        color: white;
        font-size: 1.2rem; /* Match parent font-size */
        line-height: 1;
    }

    /* Dark Mode styles (copied from #showSidebarBtn) */
    [data-bs-theme="dark"] header.header-glass .navbar-toggler {
        color: #1c1c1e;
    }
    [data-bs-theme="dark"] header.header-glass .navbar-toggler i {
        color: #1c1c1e;
    }
    
    
    /* --- DROPDOWN MENU POSITIONING --- */
    /* This is back to being a normal dropdown */
    #headerNavbarContent.navbar-collapse {
        /* Position it as a "card" below the button */
        background-color: var(--sidebar-bg-color); 
        border: 1px solid var(--sidebar-border-color);
        border-radius: 0.6rem;
        padding: 1rem;
        margin-top: 0.75rem; /* Gap below the button */
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    /* Stack nav items (no change) */
    #headerNavbarContent .nav-item {
        width: 100%;
        margin-right: 0 !important;
        margin-bottom: 0.5rem;
    }

    /* Center the theme switcher (no change) */
    #headerNavbarContent #theme-switcher {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--sidebar-border-color);
        justify-content: center;
    }
}