/* EMERGENCY THEME TOGGLE FIX - MAXIMUM VISIBILITY */

/* Force the button to appear with highest priority */
#homepage-theme-toggle,
button.theme-toggle,
.theme-toggle,
.navbar .theme-toggle,
.navbar-nav .theme-toggle {
    /* Force visibility */
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;

    /* Solid white background - impossible to miss */
    background: #ffffff !important;
    background-color: #ffffff !important;

    /* Strong border */
    border: 3px solid #333333 !important;
    border-radius: 50% !important;

    /* Size */
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;

    /* Positioning */
    position: relative !important;
    z-index: 9999 !important;

    /* Centering */
    align-items: center !important;
    justify-content: center !important;

    /* Cursor */
    cursor: pointer !important;

    /* Shadow for depth */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;

    /* Remove any potential hiding */
    transform: none !important;
    clip-path: none !important;
    overflow: visible !important;
}

/* Icon inside */
.theme-toggle-icon,
button.theme-toggle .theme-toggle-icon,
.theme-toggle .theme-toggle-icon {
    font-size: 1.8rem !important;
    line-height: 1 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #333333 !important;
}

/* Hover state */
button.theme-toggle:hover,
.theme-toggle:hover {
    background: #f8f8f8 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.7) !important;
}

/* List item container */
.navbar-nav .nav-item.theme-toggle-item,
li.nav-item:has(.theme-toggle) {
    display: list-item !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Dark mode - make button stand out even more */
[data-theme="dark"] .theme-toggle {
    background: #ffffff !important;
    border-color: #ffffff !important;
}

[data-theme="dark"] .theme-toggle-icon {
    color: #000000 !important;
}
