/* Menu styling that is independent of page styles */
.menu-wrapper {
    position: fixed !important;
    top: 0px !important;
    left: 6px !important;
    width: calc(100% - 12px) !important; /* Updated width for 6px margins */
    z-index: 9999 !important;
    background: var(--menu-wrapper-bg);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    transition: all 0.3s ease !important;
    padding: 2.5px 0 !important;
    margin: 1px 0 !important;
    border-radius: var(--menu-header-rounding) !important;
}

.menu-header {
    display: flex;
    justify-content: space-between; /* Changed to space-between to push items to ends */
    align-items: center;
    padding: 2.5px 0 !important;
    margin: 1px 3px !important;
    position: relative;
    width: calc(100% - 6px) !important; /* Updated width */
    box-sizing: border-box;
    padding-left: 0px !important;
    padding-right: 0px !important;
    gap: 0 !important;
    background-color: var(--menu-bg-color);
    border-radius: var(--menu-header-rounding) !important;
}

@keyframes border-glow-gold-green {
    0% {
        box-shadow: 0 0 5px #f59e0b;
        border-color: #f59e0b;
    }
    50% {
        box-shadow: 0 0 15px #b2f2bb;
        border-color: #b2f2bb;
    }
    100% {
        box-shadow: 0 0 5px #f59e0b;
        border-color: #f59e0b;
    }
}

/* Version display styling */
.version-display {
    position: fixed;
    top: 4px;
    left: 10px;
    font-size: 8px;
    color: white;
    font-family: inherit;
    z-index: 10000;
    background: transparent;
    padding: 0;
    border-radius: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: calc(100vw - 22px);
    box-sizing: border-box;
    padding-left: 0px !important;
    padding-right: 0px !important;
    gap: 0 !important;
}

/* Logo container: align image and text inline and vertically centered */
.logo {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Anchor styling for logo (image link and text link) - remove vertical transform so text sits naturally */
.logo a {
    font-family: 'Neuropol', sans-serif !important;
    font-size: 20px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    color: #006DBF !important;
    position: relative !important;
    z-index: 1000 !important;
    margin: 0 !important;
    padding: 0 !important;
    top: auto !important;
    left: 0 !important;
    transform: none !important;
}

/* Logo image placed before the text — small horizontal margins to separate from text */
.logo-img {
    margin-left: 2px !important;
    margin-right: 2px !important;
    width: 35px !important;
    height: 35px !important;
    max-height: 35px !important;
    vertical-align: middle !important;
    display: inline-block !important;
    object-fit: cover !important;
    transform: translateY(0px) !important; /* move image 1px down from previous -1px */
    box-shadow: none !important; /* removed logo shadow as requested */
    border-radius: 50% !important; /* Make the logo image round */
}

/* Logo text styling and character classes:
   - letters keep the brand color (blue)
   - digits are rendered in golden color
   Use the .logo-text namespace to avoid selector conflicts and ensure correct specificity. */
.logo-text {
    color: inherit !important;
    text-decoration: none !important;
    cursor: pointer !important;
    display: inline-block !important;
    font-family: 'Neuropol', sans-serif !important;
    font-size: 20px !important;
    font-weight: bold !important;
    vertical-align: middle !important;
    line-height: 1 !important;

    /* Move logo text back into vertical center (match previous behavior) */
    position: relative !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Individual group styling: use .logo-text .letter/.digit with high specificity */
.logo-text .letter {
    color: var(--logo-letter-color) !important;
    font-family: inherit !important;
    font-size: 20px !important;
    font-weight: bold !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.logo-text .digit {
    color: var(--logo-digit-color) !important;
    font-family: inherit !important;
    font-size: 20px !important;
    font-weight: bold !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* Ensure menu items use default font */
.nav-link,
.mobile-nav-link {
    font-family: inherit !important;
    font-size: 17px !important;
    font-weight: bold !important;
}

/* Ensure mobile menu items are bold */

.font-neuropol {
    font-family: 'Neuropol', sans-serif !important;
}

.desktop-nav {
    gap: 6px !important;
    justify-content: center !important;
    margin-left: 30px !important; /* Shift the desktop menu 30px to the right as requested */
    flex-wrap: nowrap !important;
}

.desktop-nav.force-hidden {
    display: none !important;
}

/* Responsive adjustments */
@media (min-width: 640px) { /* Tablet and larger */
.desktop-nav {
    display: flex !important;
    justify-content: center !important;
}
.hamburger {
    display: flex !important; /* Always display hamburger */
}
}

.nav-item-wrapper {
    padding: 0px 2px;
    border-radius: 8px;
    transition: all 0.2s ease-in-out;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid var(--menu-item-border-color);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.nav-item-wrapper:hover {
    transform: translateY(1px); /* Sink in */
    background: var(--menu-item-hover-bg); /* Black backdrop on hover */
    backdrop-filter: blur(5px); /* Keep the blur effect */
    -webkit-backdrop-filter: blur(5px); /* Keep the blur effect for webkit */
    animation: border-glow-gold-green 2s infinite;
    border-color: #f59e0b !important;
}

.nav-item-wrapper:active {
    transform: translateY(1px);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3); /* Bevel effect */
}

.nav-link {
    text-decoration: none !important;
    color: var(--menu-item-color) !important;
    font-weight: bold !important;
    font-size: 17px !important;
    transition: color 0.3s ease !important;
    padding: 2px 4px !important;
    text-shadow: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    white-space: nowrap !important;
}

.nav-link:hover {
    color: var(--menu-item-hover-color) !important; /* Changed to white on hover */
}

.menu-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important; /* Changed to 2px gap as requested */
    margin-left: auto !important; /* Push to the right */
    margin-right: 7px !important; /* Move 2px further to the left (5px + 2px) */
}

.hamburger {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    color: var(--hamburger-color) !important; /* Pastel light green */
    font-size: 1.4rem !important; /* slightly larger icon */
    padding: 1px !important; /* 1px on all sides for desktop responsive mode */
    transition: color 0.3s ease !important;
    width: 43px !important; /* Increased width by 3px (40px + 3px) */
    height: 36px !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 4px !important; /* 4px spacing to the left */
}

/* Ensure hamburger icon has extra clickable area and matches close button */
.hamburger .hamburger-icon {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    padding: 1px !important;
    line-height: 1 !important;
}

.hamburger .bar {
    transition: all 0.3s ease;
}

.hamburger .top-bar {
    width: 22px !important; /* 4px wider */
}

.hamburger .middle-bar {
    width: 16px !important; /* 2px shorter */
}

/* Hide the Font Awesome icon when SVG is present */
.hamburger i.fas.fa-bars {
    display: none !important;
}

.hamburger:hover {
    color: var(--hamburger-hover-color) !important;
}

.login-btn-desktop {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; /* Center icon */
    width: 30px !important; /* Set width */
    height: 30px !important; /* Set height */
    text-decoration: none !important;
    color: #006DBF !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important; /* Smooth transition for all properties */
    padding: 0 !important; /* Remove padding */
    border-radius: 50% !important; /* Make it circular */
    font-size: 1.2rem !important; /* Adjust icon size */
    transform: translateX(4px) !important; /* Move 4px to the right visually */
    /* Ensure the button is properly styled as a circle with glow effect */
    box-sizing: border-box !important;
    border: 1px solid transparent !important;
}

.login-btn-desktop:hover {
    color: #f59e0b !important;
}

#loginBtn {
    border: 1px solid #b2f2bb !important; /* Border glow like logo-img-link */
    box-shadow: 0 0 10px #b2f2bb !important; /* Glow like logo-img-link */
}

#loginBtn:hover {
    animation: heartbeat-glow 1.5s infinite ease-in-out !important;
    border-color: #C04040 !important;
    box-shadow: 0 0 16px #C04040 !important;
}

#logoutBtn {
    border: 1px solid #C04040 !important; /* Default red glow */
    box-shadow: 0 0 16px #C04040 !important;
}

#logoutBtn:hover {
    animation: heartbeat-glow 1.5s infinite ease-in-out !important;
    border-color: #b2f2bb !important; /* Hover green glow */
    box-shadow: 0 0 10px #b2f2bb !important;
}

.profile-btn-desktop {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    text-decoration: none !important;
    padding: 0 !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    border: 1px solid transparent !important;
    overflow: hidden; /* Ensure image stays within circular boundary */
    border: 1px solid #b2f2bb !important; /* Add border for default glow */
    box-shadow: 0 0 8px rgba(178, 242, 187, 0.8), 0 0 16px rgba(178, 242, 187, 0.45) !important; /* Add glow for default state */
    animation: pulseGreen 1.5s infinite; /* Add animation for default state */
}

.profile-btn-desktop .profile-icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.profile-btn-desktop:hover {
    border: 1px solid #ff0000 !important; /* Red border on hover */
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.7), 0 0 16px rgba(255, 0, 0, 0.4) !important; /* Red glow on hover */
    animation: pulseRed 1.5s infinite; /* Red pulse animation on hover */
}

.login-btn-glow-green {
    /* Match the hamburger pastel-green color */
    border: 1px solid #b2f2bb !important;
    box-shadow: 0 0 8px rgba(178, 242, 187, 0.8), 0 0 16px rgba(178, 242, 187, 0.45) !important;
    animation: pulseGreen 1.5s infinite;
    /* Ensure it's circular */
    border-radius: 50% !important;
}

.login-btn-glow-red {
    border: 1px solid #ff0000 !important;
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.7), 0 0 16px rgba(255, 0, 0, 0.4) !important;
    animation: pulseRed 1.5s infinite;
    /* Ensure it's circular */
    border-radius: 50% !important;
}

.debug-btn {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    color: black !important;
    font-size: 1.2rem !important;
    top: 10px !important;
    right: 10px !important;
    padding: 0.2rem !important;
    transition: color 0.3s ease !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.debug-btn:hover {
    color: #f59e0b !important;
}

.debug-btn i {
    opacity: 0.5 !important;
}

/* Mobile Menu */
.mobile-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    /* Lighter business-like grey background (2 steps lighter) */
    background: var(--mobile-menu-bg-color) !important;
    z-index: 10000 !important;
    transform: translateY(-100%) !important;
    transition: transform 0.3s ease !important;
    padding: 1rem !important;
    overflow-y: scroll !important; /* Add scroll */
    /* Beveled 3px darker border and soft shadow for depth */
    border: 3px solid rgba(0,0,0,0.10) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12), inset 0 3px 0 rgba(255,255,255,0.28) !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

.mobile-menu.active {
    transform: translateY(0) !important;
}

.mobile-menu-header {
    display: flex !important;
    justify-content: flex-end !important;
    margin-bottom: 2rem !important;
    margin-top: -5px !important; /* Move the X button 5px up */
}

/* Close button (X) - styled as a circular button with bevel effect */
.mobile-menu-btn {
    /* Revert to original positioning adjustments */
    margin-right: -5px !important; /* moved 2px right from previous -7px */
    margin-top: -3px !important; /* move 3px up */
    
    padding: 6px !important; /* larger clickable area (3px extra each side) */
    font-size: 1.75rem !important; /* Revert to original font size */
    cursor: pointer !important;
    color: #1e40af !important; /* Revert to original color */

    /* Use shared bevel/button surface */
    background: linear-gradient(180deg, #ffffff 0%, #e9e9ea 100%) !important;
    border: 1px solid #b2f2bb !important; /* Add border for default glow */
    border-radius: 50% !important; /* Make it circular */
    box-shadow: 0 0 8px rgba(178, 242, 187, 0.8), 0 0 16px rgba(178, 242, 187, 0.45) !important; /* Add glow for default state */
    animation: pulseGreen 1.5s infinite; /* Add animation for default state */
    transition: transform 0.12s ease, box-shadow 0.12s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Ensure width and height are equal for a perfect circle, slightly larger */
    width: 40px !important;
    height: 40px !important;
}

.profile-btn-mobile {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important; /* Match mobile-menu-btn width */
    height: 40px !important; /* Match mobile-menu-btn height */
    padding: 0 !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    border: 1px solid #b2f2bb !important; /* Add border for default glow */
    box-shadow: 0 0 8px rgba(178, 242, 187, 0.8), 0 0 16px rgba(178, 242, 187, 0.45) !important; /* Add glow for default state */
    animation: pulseGreen 1.5s infinite; /* Add animation for default state */
    transition: transform 0.12s ease, box-shadow 0.12s ease !important;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #e9e9ea 100%) !important; /* Match mobile-menu-btn background */
    margin-right: 9px !important; /* Adjusted from 4px to 9px to move 5px to the left */
}

.profile-btn-mobile .profile-icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.profile-btn-mobile:hover {
    border: 1px solid #ff0000 !important; /* Red border on hover */
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.7), 0 0 16px rgba(255, 0, 0, 0.4) !important; /* Red glow on hover */
    animation: pulseRed 1.5s infinite; /* Red pulse animation on hover */
}

.profile-btn-mobile:active {
    transform: translateY(0) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.5) !important;
}

/* Icon inside close button */
.mobile-menu-btn i {
    display: inline-block !important;
    padding: 3px !important; /* Revert to original padding */
    font-size: 1.1rem !important; /* Revert to original icon size */
    line-height: 1 !important;
    color: inherit !important;
}

/* Hover/active states to emphasize 3D */
.mobile-menu-btn:hover {
    border: 1px solid #ff0000 !important; /* Red border on hover */
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.7), 0 0 16px rgba(255, 0, 0, 0.4) !important; /* Red glow on hover */
    animation: pulseRed 1.5s infinite; /* Red pulse animation on hover */
}

.mobile-menu-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.5) !important;
}

.mobile-menu-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important; /* 3px vertical spacing between items */
    margin-bottom: 2rem !important;
    align-items: stretch !important; /* Make items span full width of menu */
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Mobile menu items use the same bevel/button surface by default */
.mobile-nav-link {
    position: relative !important;
    display: block !important;
    width: calc(100% - 60px) !important; /* 100% - (30px + 30px margins) */
    margin-left: 30px !important;
    margin-right: 30px !important;
    text-align: right !important;
    text-decoration: none !important;
    color: var(--mobile-menu-item-color) !important; /* Default text color */
    font-size: 17px !important;
    font-weight: bold !important;
    padding: 0.6rem 40px !important; /* Match login button padding */
    transition: all 0.2s ease-in-out !important;
    z-index: 1 !important;
    background: var(--mobile-menu-item-bg) !important; /* Match login button background */
    border: 1px solid rgba(0,0,0,0.08) !important; /* Match login button border */
    border-radius: 6px !important; /* Match login button border-radius */
    box-shadow: 0 4px 8px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.6) !important; /* Match login button shadow */
    margin-bottom: 3px !important; /* Add some spacing between menu items */
}

/* Hover / focus: match login button hover/focus styles */
.mobile-nav-link:hover,
.mobile-nav-link:focus {
    color: var(--mobile-menu-item-hover-color) !important; /* Changed to white on hover */
    background: var(--mobile-menu-item-hover-bg) !important;
    transform: translateY(-1px) !important;
    animation: border-glow-gold-green 2s infinite;
    border-color: #f59e0b !important;
}

/* Remove pseudo-element overlay (we now handle hover background on element itself) */
.mobile-nav-link::after {
    display: none !important;
}

/* Hover / focus styles: reveal solid pastel-blue background and darken text for contrast */
.mobile-nav-link:hover,
.mobile-nav-link:focus {
    color: #0b1220 !important;
}

.mobile-nav-link:hover::after,
.mobile-nav-link:focus::after,
.mobile-nav-link.active::after,
.mobile-nav-link:active::after {
    opacity: 1 !important;
}

/* Active/selected state (keeps solid background when clicked) */
.mobile-nav-link:active,
.mobile-nav-link.active {
    color: #0b1220 !important;
}

/* Ensure the mobile nav link retains button styling when its submenu is active */
.mobile-nav-link.active {
    background: var(--mobile-menu-item-hover-bg) !important; /* Match hover background */
    color: #0b1220 !important; /* Match hover text color */
    border: 1px solid #B4D1B7 !important; /* Keep border */
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15) !important; /* Keep shadow */
    transform: translateY(1px); /* Keep sink-in effect */
}

/* Show mobile submenu when the preceding mobile-nav-link is active */
.mobile-nav-link.active + .mobile-submenu {
    display: block !important;
}

.mobile-menu-buttons {
    display: flex !important;
    justify-content: flex-end !important; /* Align login/logout to the right under last item */
    gap: 1rem !important;
    width: 100% !important;
    margin-top: 1rem !important;
    padding-right: 0.5rem !important; /* small right padding so button doesn't touch edge */
}

/* Mobile login/logout button: match the mobile menu item (full-width item style),
   but keep the icon and JS-driven text (Login / Logout) intact. */
.mobile-menu-buttons #mobileLoginBtn,
.mobile-menu-buttons .mobile-login-btn {
    display: block !important;
    width: 100% !important; /* full-width to match other items */
    text-align: right !important;
    padding: 0.6rem 40px !important; /* same vertical padding as menu items */
    color: #006DBF !important;
    font-weight: bold !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    z-index: 1 !important;

    /* Use exact same bevel/button surface as .mobile-nav-link */
    background: linear-gradient(180deg, #ffffff 0%, #e9e9ea 100%) !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.6) !important;
    transition: color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease !important;
}

/* Hover / focus: switch to solid pastel-green and reduce bevel to flat appearance (same as items) */
.mobile-menu-buttons #mobileLoginBtn:hover,
.mobile-menu-buttons #mobileLoginBtn:focus,
.mobile-menu-buttons .mobile-login-btn:hover,
.mobile-menu-buttons .mobile-login-btn:focus {
    color: #ffffff !important; /* Changed to white on hover */
    background: rgba(200,255,200,0.95) !important;
    border-color: rgba(0,0,0,0.04) !important;
    box-shadow: none !important;
    transform: translateY(-1px) !important;
}

/* Ensure icon + text spacing — keep the icon visually unchanged while the button uses the bevel surface */
.mobile-menu-buttons #mobileLoginBtn i,
.mobile-menu-buttons .mobile-login-btn i {
    margin-right: 6px !important;
    font-size: 1rem !important; /* enforce original icon size */
    color: inherit !important;
    line-height: 1 !important;
}

/* Ensure the login button icon itself is not resized or restyled by the bevel surface.
   Explicitly target the mobileLoginBtn icon so it retains the original icon sizing and no extra padding/margin. */
#mobileLoginBtn i,
.mobile-nav-link#mobileLoginBtn i {
    font-size: 1rem !important;
    color: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* Hover / focus: switch to solid pastel-green and reduce bevel to flat appearance */
.mobile-menu-buttons #mobileLoginBtn:hover,
.mobile-menu-buttons #mobileLoginBtn:focus,
.mobile-menu-buttons .mobile-login-btn:hover,
.mobile-menu-buttons .mobile-login-btn:focus {
    color: #0b1220 !important;
    background: rgba(200,255,200,0.95) !important;
    border-color: rgba(0,0,0,0.04) !important;
    box-shadow: none !important;
    transform: translateY(-1px) !important;
}

/* Keep the broad force-remove rules for any other selectors except the mobile login button,
   to avoid unwanted glow from JS on other elements. */
#someOtherSelectorToPreserveForceRemove {
    /* placeholder - no-op to keep structure */
}

/* Strong override: force #mobileLoginBtn to exactly match .mobile-nav-link visuals.
   This ensures the login/logout anchor always looks like a menu item button,
   even if other styles try to override it. */
/* Responsive adjustments */
@media (min-width: 640px) { /* Tablet and larger */
    .desktop-nav {
        display: flex !important;
    }
    .hamburger {
        display: flex !important;
    }
}

@media (max-width: 639px) { /* Mobile */
    .desktop-nav {
        display: none !important;
    }
    .hamburger {
        display: flex !important;
    }
    .menu-header {
        padding: 2.5px 0 !important;
    }
    .menu-buttons {
        padding-right: 8px !important;
    }
}

/* Ensured mobile login/logout icon matches unified style */
.mobile-nav-link i {
    font-size: 1rem !important;
    padding: 0 !important;
    margin: 0 !important;
    color: inherit !important;
    line-height: 1 !important;
    vertical-align: middle;
}

/* ==========================================================================
   Scrolled state
   - When the page is scrolled beyond 50px the JS toggles `.scrolled` on the
     `.menu-header` (preferred) or `.menu-wrapper` (fallback). Apply a solid
     dark background and ensure nav text is readable.
   ========================================================================== */
.menu-header.scrolled {
    background-color: var(--menu-scrolled-bg-color) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.5) !important;
    transition: background-color 0.25s ease, box-shadow 0.25s ease !important;
}

.menu-wrapper.scrolled {
    background-color: var(--menu-wrapper-scrolled-bg) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.5) !important;
    transition: background-color 0.25s ease, box-shadow 0.25s ease !important;
}

/* Force override for any specific page styles that might conflict */
body .menu-header.scrolled,
body .menu-wrapper.scrolled header.menu-header {
    background-color: var(--menu-scrolled-bg-color) !important;
}

body .menu-wrapper.scrolled {
    background-color: var(--menu-wrapper-scrolled-bg) !important;
}

/* Ensure links remain blue and logo retains its original two-tone colours */
.menu-header.scrolled .nav-link,
.menu-wrapper.scrolled .nav-link {
    color: var(--menu-scrolled-item-color) !important;
}

/* Ensure logo text keeps its brand colours on dark background */
/* Target the specific letter/digit spans produced by PHP so colors don't bleed
   between runs (e.g. "Sustenance4All" -> letter, digit, letter). */
.menu-header.scrolled .logo-text .letter,
.menu-wrapper.scrolled .logo-text .letter {
    color: var(--menu-scrolled-logo-letter-color) !important;
}
.menu-header.scrolled .logo-text .digit,
.menu-wrapper.scrolled .logo-text .digit {
    color: var(--menu-scrolled-logo-digit-color) !important;
}

/* Icons/buttons should be gold for emphasis */
.menu-header.scrolled .hamburger,
.menu-header.scrolled .login-btn-desktop,
.menu-header.scrolled .mobile-menu-btn,
.menu-wrapper.scrolled .hamburger,
.menu-wrapper.scrolled .login-btn-desktop,
.menu-wrapper.scrolled .mobile-menu-btn,
.menu-header.scrolled .nav-link i,
.menu-wrapper.scrolled .nav-link i,
.menu-header.scrolled #mobileLoginBtn i,
.menu-wrapper.scrolled #mobileLoginBtn i {
    color: var(--menu-scrolled-icon-color) !important;
}

/* ==========================================================================
   Login modal styling — match the visual style of the mobile menu rollout
   ========================================================================== */
/* Surface that wraps the login dialog. Reuses the bevel/soft-shadow surface
   used in the mobile menu so the dialog visually matches the rollout menu. */
.login-modal-surface {
    /* Use the same lighter grey background used for the mobile menu */
    background: #d1d5db !important;
    width: 100% !important;
    box-sizing: border-box !important;

    /* Beveled surface like menu items */
    background-image: linear-gradient(180deg, #ffffff 0%, #e9e9ea 100%) !important;
    border: 3px solid rgba(0,0,0,0.10) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12), inset 0 3px 0 rgba(255,255,255,0.28) !important;
    border-radius: 8px !important;
    padding: 1rem !important;
}

/* ==========================================================================
   Login modal visibility & internals
   - Ensure modal and its two panels (login / signup) behave consistently
     across pages (some pages didn't include the index.php inline rules).
   - Use high-specificity rules and !important where necessary to override
     conflicting styles and JS-applied classes.
   ========================================================================== */

/* Modal visibility helpers (Tailwind 'hidden' may be used; ensure it hides) */
#loginModal.hidden {
    display: none !important;
}
#loginModal {
    display: none;
}

/* When shown (JS removes 'hidden') make it use flex center */
#loginModal:not(.hidden) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Internal panels */
.login-form {
    display: none !important; /* default hidden */
}
.login-form.active-login,
.login-form.active-login * {
    display: block !important;
}

/* Remember-me inline layout — force a single horizontal row with checkbox, label and remembered account.
   Use very specific selectors inside the login modal surface so this overrides other label rules. */
.login-modal-surface .remember-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    flex-wrap: nowrap !important;
}

/* Left group (checkbox + label) should remain inline */
.login-modal-surface .remember-row > .flex.items-center,
.login-modal-surface .remember-row > .flex.items-center * {
    display: inline-flex !important;
    align-items: center !important;
}

/* Label next to checkbox */
.login-modal-surface .remember-row label[for="rememberMe"] {
    display: inline-block !important;
    margin: 0 0 0 0.5rem !important;
    vertical-align: middle !important;
    line-height: 1 !important;
}

/* Keep the remembered account text on a single line and limit its width to avoid wrapping the checkbox/label */
.login-modal-surface .remember-row #rememberedAccount {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 160px !important;
    margin-left: 0.75rem !important;
    text-align: right !important;
    display: inline-block !important;
}

/* Keep danger/disabled styles for provider buttons consistent */
.btn-disabled {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
}

/* Ensure close button sits above modal */
#closeModal {
    z-index: 101;
}

/* Title and brand color */
.brand-blue {
    color: #006DBF !important;
}

/* Brand button used for primary actions inside dialogs */
.btn-brand {
    background: #006DBF !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 6px 12px rgba(0,109,191,0.18) !important;
    transition: background 0.15s ease, transform 0.12s ease !important;
}

.btn-brand:hover {
    background: #005aa3 !important; /* slightly darker on hover */
    transform: translateY(-1px) !important;
}

/* Disabled/greyed out button appearance for unavailable providers (Apple) */
.btn-disabled {
    background: #e6e6e6 !important;
    color: #8b8b8b !important;
    border-color: #d1d1d1 !important;
    opacity: 0.7 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

/* Ensure inputs in the modal use the brand focus ring */
.login-modal-surface input:focus,
.login-modal-surface textarea:focus,
.login-modal-surface select:focus {
    outline: none !important;
    border-color: #006DBF !important;
    box-shadow: 0 0 0 4px rgba(0,109,191,0.08) !important;
}

/* Make in-modal links use the brand blue */
.login-modal-surface a {
    color: #006DBF !important;
}

/* Pending modal close button fall back in case it still uses bg-primary */
.bg-primary {
    background: #006DBF !important;
    color: #ffffff !important;
}

/* Slight spacing tweak so modal content matches mobile menu spacing */
.login-modal-surface .mb-4,
.login-modal-surface .mb-6,
.login-modal-surface .mt-6 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* --------------------------------------------------------------------------
   Cassandra menu item overrides
   - Ensure Cassandra shows gold by default and blue on hover (overrides
     the general .nav-link/.mobile-nav-link rules which are very specific).
   -------------------------------------------------------------------------- */
/* Desktop link (higher specificity) */
.nav-link.cassandra-link {
    color: var(--cassandra-menu-item-color) !important;
    text-shadow: none !important;
}

/* Mobile link (higher specificity) */
.mobile-nav-link.cassandra-link {
    color: var(--cassandra-mobile-menu-item-color) !important;
    background: var(--cassandra-mobile-menu-item-bg) !important;
    text-shadow: none !important;
}

/* Hover / focus state for desktop */
.nav-link.cassandra-link:hover,
.nav-link.cassandra-link:focus {
    color: var(--cassandra-menu-item-hover-color) !important;
    background: var(--cassandra-menu-item-hover-bg) !important;
    text-shadow: none !important;
}

/* Hover / focus state for mobile */
.mobile-nav-link.cassandra-link:hover,
.mobile-nav-link.cassandra-link:focus {
    color: var(--cassandra-mobile-menu-item-hover-color) !important;
    background: var(--cassandra-mobile-menu-item-hover-bg) !important;
    text-shadow: none !important;
}

/* ==========================================================================
   Page-specific override for Cassandra page to defeat any runtime/scroll rules
   - Highest specificity: body.page-cassandra .menu-header.scrolled .nav-link.cassandra-link
   - This ensures the Cassandra link stays gold by default on that page and
     only switches to blue on hover.
   ========================================================================== */
body.page-cassandra .nav-link.cassandra-link,
body.page-cassandra .mobile-nav-link.cassandra-link {
    color: #f59e0b !important;
    text-shadow: none !important;
}
body.page-cassandra .nav-link.cassandra-link:hover,
body.page-cassandra .nav-link.cassandra-link:focus,
body.page-cassandra .mobile-nav-link.cassandra-link:hover,
body.page-cassandra .mobile-nav-link.cassandra-link:focus {
    color: #006DBF !important; /* hover blue */
    text-shadow: none !important;
}

/* Extremely high-specificity rules to override inline scripts or later JS-applied classes */
body.page-cassandra .menu-header.scrolled .nav-link.cassandra-link,
body.page-cassandra.menu-wrapper .menu-header.scrolled .nav-link.cassandra-link,
body.page-cassandra .menu-wrapper.scrolled .nav-link.cassandra-link {
    color: #f59e0b !important; /* keep gold even when scrolled */
}

/* Submenu styling */
.nav-item-wrapper {
    position: relative; /* Needed for absolute positioning of submenu */
}

.submenu {
    display: none; /* Hidden by default */
    position: absolute;
    background-color: var(--menu-submenu-bg-color) !important; /* Changed to #222222 as requested */
    width: max-content; /* Auto-responsive width */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border-radius: 8px;
    padding-top: 7.5px !important; /* Keep top padding for vertical enlargement */
    padding-bottom: 4px !important; /* Make submenu height 4px from the bottom of the last menu button item */
    top: calc(100% + 4px) !important; /* Move 4px down from the bottom of the menu header */
    left: 0;
    transition: background-color 0.25s ease; /* Add transition for background */
}

/* Submenu background reacts to scroll like the menu header */
.menu-header.scrolled .submenu {
    background-color: var(--menu-scrolled-submenu-bg-color) !important;
}

/* Change font border (text-shadow) of desktop submenu items to black when scrolled */
.menu-header.scrolled .submenu-link {
    text-shadow: none !important; /* Remove text shadow when scrolled */
    color: var(--menu-scrolled-submenu-item-color) !important;
}

.nav-item-wrapper:hover .submenu {
    display: block; /* Show on hover */
}

.submenu-link {
    font-family: inherit !important; /* Match nav-link font-family */
    color: var(--menu-submenu-item-color) !important; /* Default text color */
    padding: 2px 4px !important; /* Match nav-link padding */
    text-decoration: none;
    display: block;
    text-align: left;
    font-weight: bold !important; /* Match nav-link font-weight */
    font-size: 17px !important; /* Match nav-link font-size */
    transition: all 0.2s ease-in-out !important; /* Match nav-item-wrapper transition */
    background: var(--menu-submenu-item-bg) !important; /* Match nav-item-wrapper background */
    backdrop-filter: blur(5px); /* Match nav-item-wrapper backdrop-filter */
    -webkit-backdrop-filter: blur(5px); /* Match nav-item-wrapper backdrop-filter */
    border: 1px solid var(--menu-submenu-item-border-color) !important; /* Match nav-item-wrapper border */
    border-radius: 8px !important; /* Match nav-item-wrapper border-radius */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important; /* Match nav-item-wrapper box-shadow */
    margin-bottom: 3px !important; /* Keep spacing between submenu items */
    margin-left: 3px !important; /* 3px left margin */
    margin-right: 3px !important; /* 3px right margin */
    text-shadow: none !important; /* Remove text-shadow */
    white-space: nowrap; /* Ensure text always fits on one line */
}

.submenu-link:hover {
    color: var(--menu-submenu-item-hover-color) !important; /* Changed to white on hover */
    transform: translateY(1px) !important; /* Match nav-item-wrapper hover transform */
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15) !important; /* Match nav-item-wrapper hover box-shadow */
    background: var(--menu-submenu-item-hover-bg) !important; /* Black backdrop on hover */
    backdrop-filter: blur(5px); /* Keep the blur effect */
    -webkit-backdrop-filter: blur(5px); /* Keep the blur effect for webkit */
    animation: border-glow-gold-green 2s infinite;
    border-color: #f59e0b !important;
}

.submenu-link:active {
    transform: translateY(1px) !important; /* Match nav-item-wrapper active transform */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3) !important; /* Match nav-item-wrapper active box-shadow */
}

/* Active state for submenu items */
.submenu-link.active {
    animation: border-glow-gold-green 2s infinite;
    border-color: #f59e0b !important;
    background: var(--menu-submenu-item-hover-bg) !important;
    color: var(--menu-submenu-item-hover-color) !important;
}

/* Mobile submenu styling */
.mobile-submenu {
    display: none; /* Hidden by default */
    background-color: transparent !important; /* Match default mobile nav link background */
    padding: 0; /* Removed padding */
    border-radius: 8px;
    margin-top: 3px !important; /* Adjusted margin-top to match item spacing */
    width: 100%;
    box-sizing: border-box;
}

.mobile-submenu-link {
    font-family: inherit !important; /* Match mobile-nav-link font-family */
    color: var(--mobile-menu-item-color) !important; /* Match parent menu item color */
    padding: 0.6rem 40px !important; /* Match login button padding */
    text-decoration: none;
    display: block;
    text-align: right !important; /* Align to the right for mobile */
    font-weight: bold !important; /* Match mobile-nav-link font-weight */
    font-size: 17px !important; /* Match mobile-nav-link font-size */
    transition: all 0.2s ease-in-out !important;
    background: var(--mobile-menu-item-bg) !important; /* Match parent menu item background */
    border: 1px solid rgba(0,0,0,0.08) !important; /* Match login button border */
    border-radius: 6px !important; /* Match login button border-radius */
    box-shadow: 0 4px 8px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.6) !important; /* Match login button shadow */
    margin-bottom: 3px !important; /* Add some spacing between menu items */
    text-shadow: none !important; /* Remove text-shadow */
    
    /* 40px smaller in width than parent button (which is 100% - 60px) */
    /* So 100% - 100px. Centered means 50px margins on each side. */
    width: calc(100% - 100px) !important;
    margin-left: 50px !important;
    margin-right: 50px !important;
}

.mobile-submenu-link:hover {
    background: var(--mobile-menu-item-hover-bg) !important; /* Match parent menu item hover background */
    color: #0b1220 !important; /* Match parent menu item hover color */
    box-shadow: none !important; /* Match general hover box-shadow */
    transform: translateY(-1px) !important; /* Match general hover transform */
    animation: border-glow-gold-green 2s infinite;
    border-color: #f59e0b !important;
}

.mobile-submenu-link.active {
    animation: border-glow-gold-green 2s infinite;
    border-color: #f59e0b !important;
    background: var(--mobile-menu-item-hover-bg) !important;
    color: #0b1220 !important;
}

/* Disclaimer button styling for mobile menu */
/* Removed individual mobile disclaimer and login button styles to use unified .mobile-nav-link style */

@keyframes cassandra-text-glow-animation {
    0% { text-shadow: 0 0 5px #b2f2bb, 0 0 10px #b2f2bb, 0 0 15px #b2f2bb, 0 0 20px #006dbf, 0 0 25px #38adf0, 0 0 30px #b2f2bb; }
    25% { text-shadow: 0 0 5px #006dbf, 0 0 10px #f59e0b, 0 0 15px #38adf0, 0 0 20px #b2f2bb, 0 0 25px #ffd700, 0 0 30px #f59e0b; }
    50% { text-shadow: 0 0 5px #38adf0, 0 0 10px #006dbf, 0 0 15px #b2f2bb, 0 0 20px #ffd700, 0 0 25px #f59e0b, 0 0 30px #006dbf; }
    75% { text-shadow: 0 0 5px #b2f2bb, 0 0 10px #38adf0, 0 0 15px #ffd700, 0 0 20px #f59e0b, 0 0 25px #006dbf, 0 0 30px #38adf0; }
    100% { text-shadow: 0 0 5px #b2f2bb, 0 0 10px #b2f2bb, 0 0 15px #b2f2bb, 0 0 20px #006dbf, 0 0 25px #38adf0, 0 0 30px #b2f2bb; }
}

/* Toggle Switch Styles */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:checked + .slider:before {
    transform: translateX(16px);
}