/* ============================================================================
   Mobile Bottom Navigation Bar
   Only visible on mobile devices (<=767px)
   ============================================================================ */

/* Hide by default (desktop) */
.mobile-bottom-nav {
    display: none;
}

/* Show only on mobile */
@media (max-width: 767px) {
    .mobile-bottom-nav {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #ffffff;
        border-top: 1px solid #e5e7eb;
        z-index: 999;
    }

    .mobile-nav-container {
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 12px 24px 12px;
        max-width: 100%;
    }

    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        text-decoration: none;
        transition: all 0.2s ease;
        cursor: pointer;
        flex: 1;
        max-width: 120px;
    }

    /* Default state - light gray, rounded, no fill */
    .mobile-nav-item .material-symbols-rounded {
        font-size: 24px;
        color: #d1d5db;
        transition: color 0.2s ease;
        font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    }

    /* Make Learn icon slightly larger for visual balance */
    .mobile-nav-item:first-child .material-symbols-rounded {
        font-size: 26px;
    }

    /* Make Account icon larger */
    .mobile-nav-item:nth-child(3) .material-symbols-rounded {
        font-size: 28px;
    }

    .mobile-nav-label {
        font-size: 12px;
        font-weight: 500;
        color: #9ca3af;
        transition: all 0.2s ease;
    }

    /* Active state - black, rounded, no fill */
    .mobile-nav-item.active .material-symbols-rounded {
        color: #000000;
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }

    .mobile-nav-item.active .mobile-nav-label {
        color: #000000;
        font-weight: 700;
    }

    /* Hover state */
    .mobile-nav-item:hover .material-symbols-rounded {
        color: #6b7280;
    }

    .mobile-nav-item:hover .mobile-nav-label {
        color: #6b7280;
    }

    /* Dark mode support */
    .site-s-dark .mobile-bottom-nav {
        background: #1f2937;
        border-top-color: #374151;
    }

    .site-s-dark .mobile-nav-item .material-symbols-rounded {
        color: #4b5563;
    }

    .site-s-dark .mobile-nav-label {
        color: #6b7280;
    }

    .site-s-dark .mobile-nav-item.active .material-symbols-rounded {
        color: #ffffff;
    }

    .site-s-dark .mobile-nav-item.active .mobile-nav-label {
        color: #ffffff;
    }

    .site-s-dark .mobile-nav-item:hover .material-symbols-rounded {
        color: #9ca3af;
    }

    .site-s-dark .mobile-nav-item:hover .mobile-nav-label {
        color: #9ca3af;
    }

    /* Add bottom padding to body to prevent content from being hidden */
    body {
        padding-bottom: 80px;
    }

    /* Hide main footer on mobile devices */
    .main-footer.bold.bold-light {
        display: none !important;
    }
}