/* FULL WIDTH HEADER FOOTER FIX - Highest specificity override */
/* This file must be loaded LAST to override all other styles */

/* ✅✅✅ ABSOLUT FORCED STICKY HEADER ✅✅✅ */
header.page-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    margin: 0 !important;
    z-index: 999999999 !important;
    background-color: white !important;
    border-bottom: 1px solid #eee !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
}

body {
    padding-top: 60px !important;
}

body.dark-mode header.page-header {
    background-color: #2d2d2d !important;
    border-bottom: 1px solid #444 !important;
}

html, body {
    width: 100% !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    max-width: none !important;
    min-width: 100% !important;
}

/* Remove all constraints from body and ensure proper sticky header support */
html, body {
    height: 100% !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

body {
    display: block !important;
    position: relative !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure body can have sticky children */
html {
    height: 100% !important;
    overflow-y: scroll !important;
}

/* Ensure main content doesn't constrain header/footer */
main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 1em !important;
    box-sizing: border-box !important;
}

/* HEADER FIX - Full width with highest specificity */
html body .page-header,
body .page-header,
.page-header,
header.page-header,
html body header.page-header,
body header.page-header,
html body .page-header,
body .page-header,
html body header,
body header,
header {
    width: 100vw !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    max-width: none !important;
    min-width: 100% !important;
    display: block !important;
    top: 0 !important;
    z-index: 999999 !important;
    background-color: white !important;
    border-bottom: 1px solid #eee !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}

/* FOOTER FIX - Full width with highest specificity */
html body .page-footer,
body .page-footer,
.page-footer,
footer.page-footer,
html body footer.page-footer,
body footer.page-footer,
html body footer,
body footer,
footer {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    max-width: none !important;
    min-width: 100% !important;
    display: block !important;
}

/* Header content - proper padding within full-width container */
html body .page-header .header-content,
body .page-header .header-content,
.page-header .header-content,
header.page-header .header-content,
html body header .header-content,
body header .header-content,
header .header-content {
    width: 100% !important;
    max-width: none !important;
    padding: 0.5em 1em !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
    min-height: 50px !important;
}

/* Footer content - proper padding within full-width container */
html body .page-footer .footer-content,
body .page-footer .footer-content,
.page-footer .footer-content,
footer.page-footer .footer-content,
html body footer .footer-content,
body footer .footer-content,
footer .footer-content {
    width: 100% !important;
    max-width: none !important;
    padding: 1em !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
}

/* Remove any transform that might affect positioning */
.page-header, .page-footer, header, footer {
    transform: none !important;
}

/* Remove any constraints from parent elements */
body > .page-header,
body > .page-footer,
body > header,
body > footer {
    width: 100vw !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    left: 50% !important;
    right: 50% !important;
}

/* Ensure no other styles can override the full width */
html body .page-header,
html body .page-footer,
html body header,
html body footer {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    left: 50% !important;
    right: 50% !important;
}

/* Fix for any container elements that might constrain width */
html body #content,
body #content,
#content,
html body main,
body main,
main,
html body > div,
body > div,
html body > main,
body > main {
    width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
    margin: 0 auto !important;
    padding: 1em !important;
    box-sizing: border-box !important;
}

/* Remove any padding or margins that might cause issues */
.page-header, .page-footer, header, footer {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Ensure content has proper margins but stays within viewport */
main, #content {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 1em !important;
    box-sizing: border-box !important;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .page-header, .page-footer, header, footer {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }

    .header-content, .footer-content {
        padding: 0.8em 1em !important;
    }

    main, #content {
        padding: 0.8em 1em !important;
    }
}

@media (min-width: 768px) {
    .header-content, .footer-content {
        padding: 1em 2em !important;
    }

    main, #content {
        padding: 1em 2em !important;
    }
}

/* Dark mode compatibility */
body.dark-mode .page-header,
body.dark-mode .page-footer,
body.dark-mode header,
body.dark-mode footer {
    width: 100vw !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    left: 50% !important;
    right: 50% !important;
}

/* ULTRA-SPECIFIC STICKY HEADER FIX - Should override absolutely everything */
html body .page-header,
body .page-header,
.page-header,
header.page-header,
html body header.page-header,
body header.page-header,
html body .page-header,
body .page-header,
html body header,
body header,
header,
html body .page-header,
body .page-header,
.page-header,
header.page-header,
html body header.page-header,
body header.page-header,
html body .page-header,
body .page-header,
html body header,
body header,
header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    margin: 0 !important;
    z-index: 999999 !important;
    background-color: white !important;
    border-bottom: 1px solid #eee !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    min-height: 50px !important;
    height: auto !important;
    padding: 0 !important;
}

body,
html body {
    padding-top: 60px !important;
}

body.dark-mode .page-header,
html body.dark-mode .page-header {
    background-color: #2d2d2d !important;
    border-bottom: 1px solid #444 !important;
}


/* Make header text smaller for compact design */
.myname h2 {
    font-size: 1em !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 900 !important;
}

.myname div {
    font-size: 0.75em !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: normal !important;
}

/* Make logo smaller */
.logo-block img {
    height: 2.5em !important;
    max-width: 100px !important;
}

/* Ensure header stays compact */
.page-header {
    min-height: 50px !important;
    height: auto !important;
}

/* ===== NAVIGATION MENU FIXES - Lightmode ===== */
/* Light mode header background white for good readability */
html body .page-header,
body .page-header,
.page-header,
header.page-header {
    background-color: #ffffff !important;
}

/* Blue menu text in light mode - bold */
html body .page-header .main-nav a,
body .page-header .main-nav a,
.page-header .main-nav a {
    color: #007bff !important;
    font-weight: bold !important;
}

/* Active menu item - light gray background in light mode, underline bar */
html body .page-header .main-nav .activetab,
html body .page-header .main-nav li.activetab,
html body .page-header .main-nav .dropdown.activetab,
body .page-header .main-nav .activetab,
body .page-header .main-nav li.activetab,
body .page-header .main-nav .dropdown.activetab,
.page-header .main-nav .activetab,
.page-header .main-nav li.activetab,
.page-header .main-nav .dropdown.activetab {
    background-color: #e8e8e8 !important;
    border-radius: 0.3em !important;
    border-bottom: none !important;
}

/* Active menu item text - blue */
html body .page-header .main-nav .activetab > a,
html body .page-header .main-nav a.activetab,
body .page-header .main-nav .activetab > a,
body .page-header .main-nav a.activetab,
.page-header .main-nav .activetab > a,
.page-header .main-nav a.activetab {
    color: #007bff !important;
    font-weight: bold !important;
}

/* Hover state - underline bar only */
html body .page-header .main-nav li:hover,
body .page-header .main-nav li:hover,
.page-header .main-nav li:hover {
    background-color: transparent !important;
    border-bottom-color: #888 !important;
    border-width: 0 0 3px 0 !important;
    border-style: solid !important;
}

/* Dropdown sub-menu items hover - underline bar only */
html body .page-header .main-nav .sub-menu a:hover,
body .page-header .main-nav .sub-menu a:hover,
.page-header .main-nav .sub-menu a:hover {
    background-color: transparent !important;
    border-bottom-color: #888 !important;
    border-width: 0 0 2px 0 !important;
    border-style: solid !important;
}

/* Remove any box shadow or effects that might cause overflow */
.page-header, .page-footer, header, footer {
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
}

/* Ensure no horizontal scrolling */
html, body {
    overflow-x: hidden !important;
}

/* COMPREHENSIVE DARK MODE SUPPORT */
/* Dark mode for body and html */
html.dark-mode, body.dark-mode {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
}

/* Dark mode for main content */
html.dark-mode main, body.dark-mode main,
html.dark-mode #content, body.dark-mode #content,
.dark-mode main, .dark-mode #content {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
}

/* Dark mode for all text elements */
.dark-mode, body.dark-mode, html.dark-mode {
    color: #e0e0e0 !important;
}

/* Dark mode for headings */
.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6,
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6,
html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, html.dark-mode h4, html.dark-mode h5, html.dark-mode h6 {
    color: #ffffff !important;
}

/* Dark mode for paragraphs and list items */
.dark-mode p, .dark-mode li, .dark-mode span, .dark-mode div,
body.dark-mode p, body.dark-mode li, body.dark-mode span, body.dark-mode div,
html.dark-mode p, html.dark-mode li, html.dark-mode span, html.dark-mode div {
    color: #e0e0e0 !important;
}

/* Dark mode for links */
.dark-mode a, body.dark-mode a, html.dark-mode a {
    color: #4da6ff !important;
}

/* Dark mode for header and footer */
.dark-mode .page-header, .dark-mode header,
body.dark-mode .page-header, body.dark-mode header,
html.dark-mode .page-header, html.dark-mode header {
    background-color: #2d2d2d !important;
    border-bottom: 1px solid #444 !important;
    color: #e0e0e0 !important;
}

.dark-mode .page-footer, .dark-mode footer,
body.dark-mode .page-footer, body.dark-mode footer,
html.dark-mode .page-footer, html.dark-mode footer {
    background-color: #2d2d2d !important;
    border-top: 1px solid #444 !important;
    color: #e0e0e0 !important;
}

/* BRAND COLOR CONSISTENCY - NHP Begemann Blue (#007bff) */
/* Ensure header, subheading, and first footer item are all the same blue */

/* Light mode - Header name should be blue */
.myname h2, .myname h2 a,
header .myname h2, header .myname h2 a,
.page-header .myname h2, .page-header .myname h2 a {
    color: #007bff !important;
}

/* Light mode - Header subheading should be blue */
.myname div,
header .myname div,
.page-header .myname div {
    color: #007bff !important;
}

/* Light mode - Footer branding (not first link in .footer-links-row) */
.footer-item.footer-name .footer-link,
.footer-author, .footer-subtitle, .footer-subtitle-sep {
    color: #007bff !important;
}

/* Dark mode - Header name should be blue */
.dark-mode .myname h2, .dark-mode .myname h2 a,
body.dark-mode .myname h2, body.dark-mode .myname h2 a,
html.dark-mode .myname h2, html.dark-mode .myname h2 a {
    color: #007bff !important;
}

/* Dark mode - Header subheading should be blue */
.dark-mode .myname div,
body.dark-mode .myname div,
html.dark-mode .myname div {
    color: #007bff !important;
}

/* Dark mode - Header content */
.dark-mode .header-content, .dark-mode .myname,
body.dark-mode .header-content, body.dark-mode .myname,
html.dark-mode .header-content, html.dark-mode .myname {
    color: #e0e0e0 !important;
}

/* Dark mode - Footer branding */
.dark-mode .footer-item.footer-name .footer-link,
.dark-mode .footer-author, .dark-mode .footer-subtitle, .dark-mode .footer-subtitle-sep,
body.dark-mode .footer-item.footer-name .footer-link,
body.dark-mode .footer-author, body.dark-mode .footer-subtitle, body.dark-mode .footer-subtitle-sep,
html.dark-mode .footer-item.footer-name .footer-link,
html.dark-mode .footer-author, html.dark-mode .footer-subtitle, html.dark-mode .footer-subtitle-sep {
    color: #007bff !important;
}

/* Ensure header links stay blue in both modes */
.myname a, .myname h2 a,
header .myname a, header .myname h2 a,
.page-header .myname a, .page-header .myname h2 a {
    color: #007bff !important;
    text-decoration: none !important;
}

/* Dark mode header links stay blue */
.dark-mode .myname a, .dark-mode .myname h2 a,
body.dark-mode .myname a, body.dark-mode .myname h2 a,
html.dark-mode .myname a, html.dark-mode .myname h2 a {
    color: #007bff !important;
    text-decoration: none !important;
}

/* Dark mode for footer content */
.dark-mode .footer-content, .dark-mode .footer-item,
body.dark-mode .footer-content, body.dark-mode .footer-item,
html.dark-mode .footer-content, html.dark-mode .footer-item {
    color: #e0e0e0 !important;
}

/* Dark mode for footer links */
.dark-mode .footer-link, .dark-mode footer a,
body.dark-mode .footer-link, body.dark-mode footer a,
html.dark-mode .footer-link, html.dark-mode footer a {
    color: #007bff !important;
}

/* Dark mode for navigation - colors only, no sizing */
.dark-mode nav, .dark-mode .main-nav,
body.dark-mode nav, body.dark-mode .main-nav,
html.dark-mode nav, html.dark-mode .main-nav {
    background-color: #2d2d2d !important;
    border-color: #444 !important;
}

/* Dark mode for navigation - text colors handled by userstyles.css */
/* Only dark mode nav background/border here */
.dark-mode nav a:hover, .dark-mode .main-nav a:hover,
body.dark-mode nav a:hover, body.dark-mode .main-nav a:hover,
html.dark-mode nav a:hover, html.dark-mode .main-nav a:hover {
    background-color: #333333 !important;
    color: #4da6ff !important;
}

/* Dark mode active tab - blue background (matches light mode rule specificity) */
html body.dark-mode .page-header .main-nav .activetab,
html body.dark-mode .page-header .main-nav li.activetab,
html body.dark-mode .page-header .main-nav .dropdown.activetab,
body.dark-mode .page-header .main-nav .activetab,
body.dark-mode .page-header .main-nav li.activetab,
body.dark-mode .page-header .main-nav .dropdown.activetab,
.dark-mode .page-header .main-nav .activetab,
.dark-mode .page-header .main-nav li.activetab,
.dark-mode .page-header .main-nav .dropdown.activetab {
    background-color: #007bff !important;
}

html body.dark-mode .page-header .main-nav .activetab > a,
html body.dark-mode .page-header .main-nav a.activetab,
body.dark-mode .page-header .main-nav .activetab > a,
body.dark-mode .page-header .main-nav a.activetab,
.dark-mode .page-header .main-nav .activetab > a,
.dark-mode .page-header .main-nav a.activetab {
    color: #ffffff !important;
}

/* FORCE PAGE TITLE TO BE DARK BLUE - HIGHEST SPECIFICITY */
html body .page-title,
body .page-title,
.page-title,
h1.page-title {
    color: #1a365d !important;
}

/* Dark mode for services */
.dark-mode .services-grid, .dark-mode .services-container,
body.dark-mode .services-grid, body.dark-mode .services-container,
html.dark-mode .services-grid, html.dark-mode .services-container {
    background-color: #2d2d2d !important;
}

.dark-mode .service-item, .dark-mode .service-card,
body.dark-mode .service-item, body.dark-mode .service-card,
html.dark-mode .service-item, html.dark-mode .service-card {
    background-color: #333333 !important;
    border-color: #007bff !important;
    color: #e0e0e0 !important;
}

.dark-mode .service-item h2, .dark-mode .service-card h2,
body.dark-mode .service-item h2, body.dark-mode .service-card h2,
html.dark-mode .service-item h2, html.dark-mode .service-card h2 {
    color: #007bff !important;
}

.dark-mode .service-item p, .dark-mode .service-card p,
body.dark-mode .service-item p, body.dark-mode .service-card p,
html.dark-mode .service-item p, html.dark-mode .service-card p {
    color: #b0b0b0 !important;
}

/* Dark mode for page titles - light blue */
.dark-mode .page-title, .dark-mode h1.page-title,
body.dark-mode .page-title, body.dark-mode h1.page-title,
html.dark-mode .page-title, html.dark-mode h1.page-title {
    color: #4da6ff !important;
    background-color: #2d2d2d !important;
}

/* Dark mode for code blocks */
.dark-mode code, .dark-mode pre,
body.dark-mode code, body.dark-mode pre,
html.dark-mode code, html.dark-mode pre {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}

/* Dark mode for blockquotes */
.dark-mode blockquote,
body.dark-mode blockquote,
html.dark-mode blockquote {
    color: #e0e0e0 !important;
    border-left-color: #007bff !important;
}

/* Dark mode for tables */
.dark-mode table,
body.dark-mode table,
html.dark-mode table {
    border-color: #444 !important;
}

.dark-mode th, .dark-mode td,
body.dark-mode th, body.dark-mode td,
html.dark-mode th, html.dark-mode td {
    border-color: #444 !important;
    color: #e0e0e0 !important;
}

/* Dark mode for horizontal rules */
.dark-mode hr,
body.dark-mode hr,
html.dark-mode hr {
    border-color: #444 !important;
}

/* BRAND COLOR FOR HAMBURGER MENU - NHP Begemann Blue (#007bff) */

/* Light mode - Hamburger menu should be blue */
.nav-toggle {
    border-color: #007bff !important;
    color: #007bff !important;
    background-color: transparent !important;
}

/* Light mode - Hamburger menu hover state */
.nav-toggle:hover {
    background-color: rgba(0, 123, 255, 0.1) !important;
    color: #0056b3 !important;
    border-color: #0056b3 !important;
}

/* Dark mode - Hamburger menu should be blue */
.dark-mode .nav-toggle,
body.dark-mode .nav-toggle,
html.dark-mode .nav-toggle {
    border-color: #007bff !important;
    color: #007bff !important;
    background-color: transparent !important;
}

/* Dark mode - Hamburger menu hover state */
.dark-mode .nav-toggle:hover,
body.dark-mode .nav-toggle:hover,
html.dark-mode .nav-toggle:hover {
    background-color: rgba(0, 123, 255, 0.2) !important;
    color: #4da6ff !important;
    border-color: #4da6ff !important;
}

/* Ensure dark mode toggle button is visible */
.dark-mode .dark-mode-toggle,
body.dark-mode .dark-mode-toggle,
html.dark-mode .dark-mode-toggle {
    color: #4da6ff !important;
    background-color: transparent !important;
    border-color: #4da6ff !important;
}

/* Hide the old dark mode toggle since we're using the menu-based one */
.dark-mode-toggle {
    display: none !important;
}

/* Fix for Safari and other WebKit browsers */
@media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: none) {
        .page-header, .page-footer, header, footer {
            width: 100vw !important;
            margin-left: calc(50% - 50vw) !important;
            margin-right: calc(50% - 50vw) !important;
        }
    }
}

/* Desktop: one horizontal footer row */
@media (min-width: 769px) {
    html body .page-footer .footer-content,
    body .page-footer .footer-content,
    .page-footer .footer-content {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        text-align: inherit !important;
    }

    html body .footer-content > .footer-item.footer-name,
    body .footer-content > .footer-item.footer-name,
    .footer-content > .footer-item.footer-name {
        text-align: left !important;
        width: auto !important;
        max-width: 250px !important;
    }

    html body .footer-name .footer-link,
    body .footer-name .footer-link,
    .footer-name .footer-link {
        text-align: left !important;
    }

    html body .footer-links-row,
    body .footer-links-row,
    .footer-links-row {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        gap: 0.5em !important;
    }

    html body .footer-links-row .footer-item,
    body .footer-links-row .footer-item,
    .footer-links-row .footer-item {
        flex: 1 1 auto !important;
        text-align: center !important;
        min-width: 0 !important;
    }
}

/* ===== MOBILE FOOTER - 2 LINES (BRANDING + LINKS) ===== */
@media (max-width: 768px) {
    html body .page-footer .footer-content,
    body .page-footer .footer-content,
    .page-footer .footer-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.45em !important;
    }

    html body .footer-content > .footer-item.footer-name,
    html body .footer-name,
    body .footer-name,
    .footer-name {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        display: block !important;
        text-align: center !important;
    }

    html body .footer-name .footer-link,
    body .footer-name .footer-link,
    .footer-name .footer-link {
        display: inline !important;
        text-align: center !important;
        line-height: 1.35 !important;
    }

    html body .footer-links-row,
    body .footer-links-row,
    .footer-links-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0.35em !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: clamp(0.68rem, 3.1vw, 0.85rem) !important;
    }

    html body .footer-links-row .footer-item,
    body .footer-links-row .footer-item,
    .footer-links-row .footer-item {
        display: block !important;
        flex: 0 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body .page-footer .footer-link,
    body .page-footer .footer-link,
    .page-footer .footer-link {
        display: inline !important;
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1.35 !important;
    }

    html body .footer-author,
    html body .footer-subtitle,
    html body .footer-subtitle-sep,
    body .footer-author,
    body .footer-subtitle,
    body .footer-subtitle-sep,
    .footer-author,
    .footer-subtitle,
    .footer-subtitle-sep {
        display: inline !important;
        width: auto !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .footer-subtitle-sep {
        opacity: 0.85 !important;
        font-weight: 400 !important;
    }

    .footer-author {
        font-size: 0.95em !important;
        font-weight: 600 !important;
    }

    .footer-subtitle {
        font-size: 0.8em !important;
        opacity: 0.85 !important;
    }

    /* Remove the br tag */
    html body .footer-content br,
    body .footer-content br,
    .footer-content br {
        display: none !important;
    }

    html body .footer-links-row .footer-item:not(:last-child) .footer-link::after,
    body .footer-links-row .footer-item:not(:last-child) .footer-link::after,
    .footer-links-row .footer-item:not(:last-child) .footer-link::after {
        content: " · " !important;
        margin: 0 0.1em 0 0.25em !important;
        font-weight: 300 !important;
        opacity: 0.75 !important;
    }
}

/* ✅ STICKY HEADER FIXED ✅ */
.page-header,
html body .page-header,
body .page-header,
header.page-header,
header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    margin: 0 !important;
    z-index: 999999 !important;
    background-color: white !important;
    border-bottom: 1px solid #eee !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}

/* Body padding so content doesn't hide under header */
body, html body {
    padding-top: 60px !important;
}

/* Dark mode sticky header */
body.dark-mode .page-header,
html body.dark-mode .page-header {
    background-color: #2d2d2d !important;
    border-bottom: 1px solid #444 !important;
}


/* 🔥 FORCE STICKY HEADER - ABSOLUTELY OVERRIDES EVERYTHING 🔥 */
* .page-header,
html body .page-header,
body .page-header,
.page-header,
header.page-header,
header,
html body.dark-mode .page-header,
body.dark-mode .page-header,
.dark-mode .page-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    margin: 0 !important;
    z-index: 9999999999 !important;
    background-color: white !important;
    border-bottom: 1px solid #eee !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07) !important;
    pointer-events: auto !important;
    transform: none !important;
    display: block !important;
}

/* BODY PADDING - EXACT SAME IN ALL MODES */
html body,
body,
html body.dark-mode,
html.dark-mode body {
    padding-top: 60px !important;
    position: static !important;
    overflow: visible !important;
    transform: none !important;
}

body.dark-mode .page-header,
html body.dark-mode .page-header {
    background-color: #2d2d2d !important;
    border-bottom: 1px solid #444 !important;
}