/* DARK MODE HEADER CENTERING FIX */
/* This file fixes the header centering issue in dark mode */
/* Should be loaded after all other CSS files to ensure proper override */

/* Fix dark mode header centering - override problematic full-width rules */
body.dark-mode .page-header,
body.dark-mode header.page-header,
body.dark-mode .page-header,
body.dark-mode header,
.dark-mode .page-header,
.dark-mode header.page-header,
.dark-mode .page-header,
.dark-mode header {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    right: 0 !important;
    position: fixed !important;
    top: 0 !important;
    z-index: 9999999999 !important;
}

/* Ensure header content is properly centered - MATCH LIGHT MODE */
body.dark-mode .header-content,
.dark-mode .header-content {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0.5em 1em !important;
    box-sizing: border-box !important;
    min-height: 50px !important;
    height: auto !important;
}

/* Fix myname container alignment in dark mode - match light mode */
body.dark-mode .myname,
.dark-mode .myname {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Fix logo block alignment in dark mode */
body.dark-mode .logo-block,
.dark-mode .logo-block {
    margin-left: auto !important;
    padding-left: 1em !important;
}

/* Ensure navigation is properly centered in dark mode */
body.dark-mode .main-nav,
.dark-mode .main-nav {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 1em !important;
    box-sizing: border-box !important;
}

body.dark-mode .main-nav ul.navbar,
.dark-mode .main-nav ul.navbar {
    width: 100% !important;
    justify-content: center !important;
    margin: 0 auto !important;
}

/* Fix for mobile dark mode header - match light mode layout */
@media (max-width: 767px) {
    body.dark-mode .page-header,
    .dark-mode .page-header {
        width: 100% !important;
        margin: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }

    body.dark-mode .header-content,
    .dark-mode .header-content {
        width: 100% !important;
        padding: 0.5em 1em !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: wrap !important;
    }

    body.dark-mode .myname,
    .dark-mode .myname {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: 40% !important;
        overflow: hidden !important;
        order: 1 !important;
    }

    body.dark-mode .nav-toggle,
    .dark-mode .nav-toggle {
        order: 3 !important;
    }

    body.dark-mode .logo-block,
    .dark-mode .logo-block {
        flex: 0 0 auto !important;
        margin-left: auto !important;
        order: 2 !important;
    }

    body.dark-mode .main-nav,
    .dark-mode .main-nav {
        order: 4 !important;
        width: 100% !important;
        flex-basis: 100% !important;
    }
}

/* Ensure dark mode header has proper background and borders */
body.dark-mode .page-header,
.dark-mode .page-header {
    background-color: #2d2d2d !important;
    border-bottom: 1px solid #444 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important;
}

/* Fix for ultra-specific selectors that might override our fixes */
html body.dark-mode .page-header,
body body.dark-mode .page-header,
html.dark-mode .page-header,
body.dark-mode .page-header,
html body .dark-mode .page-header,
body body .dark-mode .page-header,
html .dark-mode .page-header,
body .dark-mode .page-header,
.dark-mode html .page-header,
.dark-mode body .page-header {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    right: 0 !important;
    position: fixed !important;
    top: 0 !important;
    z-index: 9999999999 !important;
}

/* Fix for any remaining width issues */
body.dark-mode .page-header,
.dark-mode .page-header {
    max-width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
}

/* Ensure header stays within viewport */
@media (min-width: 1px) {
    body.dark-mode .page-header,
    .dark-mode .page-header {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        position: fixed !important;
    }
}