/* ==========================================
   SIDEBAR NAVIGATION MENU
   ========================================== */

/* Menu Toggle Button - Minimal Elegant Style */
.menu-toggle {
    display: flex;
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1001;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    /* Subtle glow effect around button */
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.1));
    /* Remove default tap highlight on mobile */
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
    outline: none;
    -webkit-touch-callout: none;
    user-select: none;
}

.menu-toggle:hover {
    transform: translateY(-50%) scale(1.1);
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.2));
}

/* Elegant active/tap effect for mobile */
.menu-toggle:active {
    transform: translateY(-50%) scale(0.95);
    transition: transform 0.15s ease;
}

.menu-toggle:active .menu-toggle-icon {
    transform: translateX(1px) scale(0.95);
    opacity: 0.8;
    transition: all 0.15s ease;
}

.menu-toggle:hover .menu-toggle-icon {
    background: #ffffff;
    transform: translateX(2px) scale(1.1);
    box-shadow:
        /* Right-top dot - brighter with glow */
        9px -5px 0 0 #ffffff,
        9px -5px 8px 0 rgba(255, 255, 255, 0.5),
        /* Right-bottom dot - brighter with glow */
        9px 5px 0 0 #ffffff,
        9px 5px 8px 0 rgba(255, 255, 255, 0.5),
        /* Center dot glow */
        0 0 10px rgba(255, 255, 255, 0.6);
}

/* Elegant horizontal arrow pointing right - inspired by scroll-to-top but unique */
.menu-toggle-icon {
    display: block;
    width: 0;
    height: 0;
    position: relative;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Elegant horizontal arrow made of 3 dots - center, right-top, right-bottom */
    /* Center dot */
    background: rgba(255, 255, 255, 0.75);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    /* Right-top dot */
    box-shadow:
        9px -5px 0 0 rgba(255, 255, 255, 0.75),
        /* Right-bottom dot */
        9px 5px 0 0 rgba(255, 255, 255, 0.75);
}

.menu-toggle-icon::before,
.menu-toggle-icon::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.menu-toggle[aria-expanded="true"] {
    position: fixed !important;
    top: 50% !important;
    left: calc(320px + 20px) !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    z-index: 100000 !important;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.08) 100%
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    width: 32px !important;
    height: 80px !important;
    max-height: none !important;
    border-radius: 16px !important;
    padding: 0;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 
        4px 0 20px rgba(0, 0, 0, 0.3),
        inset 0 0 20px rgba(255, 255, 255, 0.05);
    cursor: pointer;
}

.menu-toggle[aria-expanded="true"]:hover {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.22) 50%,
        rgba(255, 255, 255, 0.12) 100%
    ) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    box-shadow: 
        6px 0 30px rgba(0, 0, 0, 0.4),
        inset 0 0 25px rgba(255, 255, 255, 0.1),
        0 0 20px rgba(255, 255, 255, 0.1);
}

/* Elegant transformation when menu is open - vertical chevron pointing left (close) */
.menu-toggle[aria-expanded="true"] .menu-toggle-icon {
    background: rgba(255, 255, 255, 0.85);
    width: 4px;
    height: 4px;
    transform: translateX(-2px) rotate(180deg);
    /* Elegant vertical chevron pointing left - mirrors scroll-to-top style */
    box-shadow:
        0 -7px 0 0 rgba(255, 255, 255, 0.85),
        0 7px 0 0 rgba(255, 255, 255, 0.85);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.menu-toggle[aria-expanded="true"]:hover .menu-toggle-icon {
    background: #ffffff;
    transform: translateX(-4px) rotate(180deg) scale(1.1);
    box-shadow:
        0 -7px 0 0 #ffffff,
        0 7px 0 0 #ffffff,
        /* Subtle glow - matching scroll-to-top style */
        0 0 15px rgba(255, 255, 255, 0.7),
        0 -7px 15px rgba(255, 255, 255, 0.6),
        0 7px 15px rgba(255, 255, 255, 0.6);
}

.menu-toggle[aria-expanded="true"]::before,
.menu-toggle[aria-expanded="true"]::after {
    content: none !important;
}

/* Elegant subtle pulse animation - similar to scroll-to-top but horizontal */
@keyframes elegantArrowPulse {
    0%, 100% {
        opacity: 0.75;
        transform: translateX(0) scale(1);
    }
    50% {
        opacity: 0.95;
        transform: translateX(1px) scale(1.05);
    }
}

.menu-toggle-icon {
    animation: elegantArrowPulse 3s ease-in-out infinite;
}

.menu-toggle:hover .menu-toggle-icon {
    animation: none;
}

@keyframes pulseArrow {
    0%, 100% { opacity: 0.6; transform: translate(-60%, -50%) rotate(-45deg) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) rotate(-45deg) scale(1.1); }
}

@keyframes shimmer {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* Main Navigation - Sidebar */
.main-navigation {
    position: fixed;
    top: 0;
    left: 0;
    width: 320px;
    max-width: 85vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Custom Scrollbar for Navigation */
.main-navigation::-webkit-scrollbar {
    width: 6px;
}

.main-navigation::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.main-navigation::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.main-navigation::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.main-navigation.active {
    transform: translateX(0);
}

/* Overlay when menu is open */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Primary Menu */
.primary-menu {
    list-style: none;
    margin: 0;
    padding: 0 0 20px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.primary-menu .menu-item {
    margin: 0;
    padding: 0;
}

.primary-menu .menu-item a {
    display: block;
    padding: 16px 24px;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    border-right: 3px solid transparent;
    transition: all 0.3s ease;
    margin: 0 16px;
    border-radius: 10px;
}

.primary-menu .menu-item a:hover,
.primary-menu .menu-item.current-menu-item > a,
.primary-menu .menu-item.current-page-ancestor > a {
    background: rgba(255, 255, 255, 0.15);
    border-right-color: #ffffff;
    color: #ffffff;
    transform: translateX(-4px);
    box-shadow: 0 2px 12px rgba(255, 255, 255, 0.15);
}

/* Submenu */
.primary-menu .sub-menu {
    list-style: none;
    margin: 8px 0 0 0;
    padding: 0 24px 0 0;
    background: rgba(255, 255, 255, 0.03);
    border-right: 2px solid rgba(255, 255, 255, 0.1);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.primary-menu .menu-item.menu-item-has-children.submenu-open > .sub-menu {
    max-height: 500px;
}

.primary-menu .sub-menu .menu-item {
    margin: 0;
    padding: 0;
}

.primary-menu .sub-menu .menu-item a {
    padding: 12px 20px;
    margin: 4px 16px;
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.03);
    border-right: 2px solid transparent;
}

.primary-menu .sub-menu .menu-item a:hover {
    background: rgba(255, 255, 255, 0.08);
    border-right-color: rgba(255, 255, 255, 0.3);
}

/* Submenu Toggle Arrow */
.primary-menu .menu-item-has-children > a::after {
    content: '›';
    float: right;
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.primary-menu .menu-item-has-children.submenu-open > a::after {
    transform: rotate(90deg);
}

/* Header adjustments for sidebar menu */
.header-container {
    justify-content: center;
}

.main-navigation {
    margin-left: 0;
}

/* Prevent body scroll when mobile menu is open */
body.menu-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}

/* Section Titles - GLOBAL STYLE for both desktop sidebar and mobile */
.nav-section-title {
    display: block;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin: 0 20px 12px 20px;
    padding-top: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* First title gets more top margin */
.nav-section-title:first-of-type {
    margin-top: 30px;
}

/* Subsequent titles get uniform spacing */
.nav-section-title:not(:first-of-type) {
    margin-top: 20px;
}

.nav-section-title.quiz-section-title {
    margin-top: 20px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .menu-toggle {
        top: 50%;
        right: 16px;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        padding: 0;
    }
    
    .menu-toggle-icon {
        width: 5px;
        height: 5px;
        background: rgba(255, 255, 255, 0.75);
        /* Elegant horizontal arrow - same style as desktop but slightly smaller */
        box-shadow:
            /* Right-top dot */
            8px -4px 0 0 rgba(255, 255, 255, 0.75),
            /* Right-bottom dot */
            8px 4px 0 0 rgba(255, 255, 255, 0.75);
    }
    
    .menu-toggle:hover .menu-toggle-icon {
        background: #ffffff;
        transform: translateX(2px) scale(1.1);
        box-shadow:
            /* Right-top dot - brighter with glow */
            8px -4px 0 0 #ffffff,
            8px -4px 6px 0 rgba(255, 255, 255, 0.5),
            /* Right-bottom dot - brighter with glow */
            8px 4px 0 0 #ffffff,
            7px 3px 6px 0 rgba(255, 255, 255, 0.5),
            /* Center dot glow */
            0 0 8px rgba(255, 255, 255, 0.6);
    }
    
    /* Menu toggle when open on mobile - show close icon */
    .menu-toggle[aria-expanded="true"] {
        display: flex !important;
        position: fixed !important;
        top: 20px !important;
        left: 20px !important;
        right: auto !important;
        transform: none !important;
        z-index: 100000 !important;
        width: 40px !important;
        height: 40px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-radius: 10px !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }
    
    /* Close icon - vertical chevron pointing left */
    .menu-toggle[aria-expanded="true"] .menu-toggle-icon {
        background: rgba(255, 255, 255, 0.85);
        width: 3px;
        height: 3px;
        transform: rotate(180deg);
        box-shadow:
            0 -6px 0 0 rgba(255, 255, 255, 0.85),
            0 6px 0 0 rgba(255, 255, 255, 0.85);
    }
    
    .menu-toggle[aria-expanded="true"]:hover .menu-toggle-icon {
        background: #ffffff;
        transform: rotate(180deg) scale(1.1);
        box-shadow:
            0 -6px 0 0 #ffffff,
            0 6px 0 0 #ffffff,
            0 0 12px rgba(255, 255, 255, 0.6),
            0 -6px 12px rgba(255, 255, 255, 0.5),
            0 6px 12px rgba(255, 255, 255, 0.5);
    }
    
    /* Elegant tap effect when menu is open */
    .menu-toggle[aria-expanded="true"]:active {
        transform: scale(0.9) !important;
        transition: transform 0.1s ease;
    }
    
    .menu-toggle[aria-expanded="true"]:active .menu-toggle-icon {
        transform: rotate(180deg) scale(0.9);
        opacity: 0.7;
        transition: all 0.1s ease;
    }
    
    .main-navigation {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        border-radius: 0 !important;
        border: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(255, 255, 255, 0.12) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
        z-index: 99999 !important;
    }
    
    .main-navigation.active {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding-top: 30px;
        padding-bottom: 100px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    /* Quiz widget spacing */
    .main-navigation .nav-quiz-widget {
        margin-bottom: 0;
        padding-bottom: 0;
    }
    
    .main-navigation .nav-quiz-widget .quiz-widget {
        padding-bottom: 20px !important;
        margin-bottom: 0 !important;
    }
    
    .primary-menu {
        text-align: center;
        width: 100%;
        padding: 20px 0 30px 0;
    }
    
    .primary-menu .menu-item a {
        font-size: 1.1rem !important;
        padding: 16px 24px !important;
        justify-content: center !important;
        margin: 0 20px;
    }
    
    /* Mobile Close Button - Minimalist style */
    .mobile-menu-close {
        display: none;
        position: relative;
        margin: 40px auto 30px auto;
        width: fit-content;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 24px;
        background: transparent;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .mobile-menu-close .close-text {
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 2px;
        color: rgba(255, 255, 255, 0.6);
        transition: color 0.3s ease;
    }
    
    .mobile-menu-close::before {
        content: '✕';
        font-size: 1rem;
        color: rgba(255, 255, 255, 0.6);
        transition: color 0.3s ease;
    }
    
    .mobile-menu-close:hover {
        background: rgba(255, 255, 255, 0.05);
    }
    
    .mobile-menu-close:hover .close-text,
    .mobile-menu-close:hover::before {
        color: rgba(255, 255, 255, 0.9);
    }
    
    .main-navigation.active .mobile-menu-close {
        display: flex;
    }
    
    .mobile-menu-close .close-icon {
        position: relative;
        width: 14px;
        height: 14px;
    }
    
    .mobile-menu-close .close-icon::before,
    .mobile-menu-close .close-icon::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 2px;
        background: #ffffff;
        border-radius: 2px;
    }
    
    .mobile-menu-close .close-icon::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }
    
    .mobile-menu-close .close-icon::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }
    
    .mobile-menu-close .close-text {
        color: #ffffff;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 2px;
        text-transform: uppercase;
    }
    
    /* Quiz widget as expandable menu item on mobile */
    .nav-quiz-widget {
        width: calc(100% - 40px);
        padding: 0;
        margin: 8px 20px 0 20px;
    }
    
    /* Quiz toggle button - YELLOW color */
    .nav-quiz-menu-item {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 16px 24px !important;
        background: linear-gradient(135deg, rgba(217, 70, 239, 0.18) 0%, rgba(168, 85, 247, 0.12) 100%) !important;
        border: 1px solid rgba(217, 70, 239, 0.3) !important;
        border-right: 3px solid rgba(217, 70, 239, 0.6) !important;
        border-radius: 10px;
        color: #ffffff !important;
        font-size: 1.1rem !important;
        font-weight: 600;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 0 15px rgba(217, 70, 239, 0.12);
    }
    
    .nav-quiz-menu-item:hover,
    .nav-quiz-menu-item:active {
        background: linear-gradient(135deg, rgba(217, 70, 239, 0.25) 0%, rgba(168, 85, 247, 0.18) 100%) !important;
        border-color: rgba(217, 70, 239, 0.4) !important;
        border-right-color: rgba(217, 70, 239, 0.8) !important;
        box-shadow: 0 0 25px rgba(217, 70, 239, 0.25);
    }
    
    .nav-quiz-menu-item.quiz-open {
        border-radius: 10px 10px 0 0;
        border-bottom: none !important;
    }
    
    .nav-quiz-menu-item .quiz-icon {
        margin-right: 10px;
    }
    
    .nav-quiz-menu-item .quiz-arrow {
        margin-left: 10px;
        transition: transform 0.3s ease;
    }
    
    .nav-quiz-menu-item.quiz-open .quiz-arrow {
        transform: rotate(180deg);
    }
    
    /* Quiz content - hidden by default, shown when expanded - YELLOW color */
    .nav-quiz-widget .quiz-widget {
        display: none;
        width: 100%;
        margin: 0;
        padding: 20px;
        background: linear-gradient(135deg, rgba(217, 70, 239, 0.18) 0%, rgba(168, 85, 247, 0.12) 100%);
        border: 1px solid rgba(217, 70, 239, 0.3);
        border-top: none;
        border-left: 3px solid rgba(217, 70, 239, 0.6);
        border-radius: 0 0 10px 10px;
        animation: slideDown 0.3s ease;
        box-shadow: 0 0 20px rgba(217, 70, 239, 0.15);
    }
    }
    
    .nav-quiz-widget.quiz-expanded .quiz-widget {
        display: block;
    }
    
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Quiz widget content styling for mobile */
    .nav-quiz-widget .quiz-widget-title {
        font-size: 0.85rem;
    }
    
    .nav-quiz-widget .quiz-widget-question {
        font-size: 0.9rem;
    }
    
    .nav-quiz-widget .quiz-widget-option {
        padding: 10px 14px;
        font-size: 0.85rem;
    }
}

/* ==========================================
   BREADCRUMB NAVIGATION
   ========================================== */

.breadcrumb {
    margin: 0 auto 1.5rem auto;
    padding: 0.75rem 1.75rem;
    max-width: fit-content;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(28, 28, 30, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    text-align: center;
}

/* Breadcrumb inside page containers - centered above titles */
.brands-page-container > .breadcrumb,
.brand-page-container > .breadcrumb,
.xrated-lab-page-container > .breadcrumb,
.legal-page-container > .breadcrumb,
.article-page-container > .breadcrumb,
.prompt-generator-page-container > .breadcrumb {
    margin-top: 0;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Ensure breadcrumb is centered on page - positioned above page containers */
.site-main > .breadcrumb {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 2rem auto 1.5rem auto;
    padding: 0.75rem 1.75rem;
    box-sizing: border-box;
    left: 50%;
    transform: translateX(-50%);
    position: relative;
}

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0; /* Removed gap, using margin on separator instead */
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.breadcrumb-link {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.8125rem; /* 13px - readable but elegant */
    font-weight: 400;
    padding: 0.25rem 0.5rem;
    background: transparent;
    border: none;
    transition: all 0.3s ease;
    position: relative;
    letter-spacing: 0.3px;
    border-radius: 6px;
}

.breadcrumb-link:hover {
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.05);
}

.breadcrumb-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.4);
    transition: width 0.3s ease;
}


.breadcrumb-link:hover::after {
    width: 100%;
}

.breadcrumb-current {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8125rem; /* 13px - readable but elegant */
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    background: transparent;
    border: none;
    letter-spacing: 0.3px;
}

.breadcrumb-separator {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.7rem;
    font-weight: 300;
    margin: 0 4px;
    user-select: none;
    opacity: 0.7;
}

/* Mobile Breadcrumb - Visually Hidden but accessible to Google */
/* Using standard "visually hidden" technique - Google-friendly and not penalized */
@media (max-width: 768px) {
    .breadcrumb {
        /* Standard visually-hidden technique - content remains accessible to crawlers */
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
        /* Keep it in document flow for crawlers */
        left: 0;
        top: 0;
    }
    
    /* Keep the structure intact - links and text are still readable by crawlers */
    .breadcrumb-list {
        display: block;
    }
    
    .breadcrumb-item {
        display: inline;
    }
    
    .breadcrumb-link,
    .breadcrumb-current {
        /* Text remains readable by crawlers even when visually hidden */
        font-size: 0.8125rem;
        padding: 0;
    }
    
    .breadcrumb-separator {
        display: inline;
        margin: 0 4px;
    }
}

/* Mobile Close Button - Hidden by default */
.mobile-menu-close {
    display: none;
}

/* Quiz Menu Item - Hidden by default (shown only on mobile) */
.nav-quiz-menu-item {
    display: none;
}

/* Quiz Widget in Navigation Sidebar */
.nav-quiz-widget {
    padding: 0 1rem 0;
    margin: 0;
}

.nav-quiz-widget .quiz-widget {
    margin: 0;
    background: linear-gradient(135deg, rgba(217, 70, 239, 0.18) 0%, rgba(168, 85, 247, 0.12) 100%);
    border: 1px solid rgba(217, 70, 239, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 0 20px rgba(217, 70, 239, 0.15);
}

.nav-quiz-widget .quiz-widget-title {
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 700;
}

.nav-quiz-widget .quiz-widget-question {
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 500;
}

.nav-quiz-widget .quiz-widget-option {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-weight: 500;
}

.nav-quiz-widget .quiz-widget-option:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
}