/**
 * MotionFy Mobile Navigation Styles
 * 
 * Mobile-only navigation system with:
 * - Burger menu icon in header
 * - Full-screen sidebar overlay
 * - Light & dark mode support
 * 
 * Breakpoint: 767px and below is mobile
 */

/* ============================================================
   Mobile-only Top Bar Adjustments
   ============================================================ */
@media (max-width: 767px) {
    /* Hide desktop nav links on mobile */
    .mf-header__nav {
        display: none;
    }
    
    /* Hide the "Log in" button on mobile */
    .auth-topbar__btn--login {
        display: none;
    }
    
    /* Adjust spacing for mobile header right section */
    .mf-header__right {
        gap: 8px;
    }
    
    /* Ensure avatar stays hidden properly when logged out */
    .auth-topbar {
        gap: 8px;
    }
}

/* ============================================================
   Burger Menu Button
   ============================================================ */
.mobile-nav__burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--auth-text, #0A0A0A);
    transition: color 150ms ease;
    -webkit-tap-highlight-color: transparent;
}

.mobile-nav__burger:hover {
    color: var(--auth-text-secondary, #5A6578);
}

.mobile-nav__burger:focus-visible {
    outline: 2px solid var(--brand-accent, #3B82F6);
    outline-offset: 2px;
    border-radius: 4px;
}

.mobile-nav__burger-icon {
    width: 24px;
    height: 24px;
}

/* Show burger only on mobile */
@media (max-width: 767px) {
    .mobile-nav__burger {
        display: flex;
    }
}

/* Dark mode burger */
html.theme-dark .mobile-nav__burger,
body.theme-dark .mobile-nav__burger {
    color: var(--auth-text, #f2f2f2);
}

html.theme-dark .mobile-nav__burger:hover,
body.theme-dark .mobile-nav__burger:hover {
    color: var(--auth-text-secondary, #b5b5b5);
}

/* ============================================================
   Mobile Sidebar Overlay
   ============================================================ */
.mobile-nav__overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, visibility 200ms ease;
}

.mobile-nav__overlay--open {
    opacity: 1;
    visibility: visible;
}

/* Dark mode overlay */
html.theme-dark .mobile-nav__overlay,
body.theme-dark .mobile-nav__overlay {
    background: rgba(0, 0, 0, 0.75);
}

/* ============================================================
   Mobile Sidebar
   ============================================================ */
.mobile-nav__sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 320px;
    background: var(--auth-surface-elevated, #FFFFFF);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 250ms ease;
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.15);
}

.mobile-nav__sidebar--open {
    transform: translateX(0);
}

/* Dark mode sidebar */
html.theme-dark .mobile-nav__sidebar,
body.theme-dark .mobile-nav__sidebar {
    background: #1c1c1c;
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   Sidebar Header
   ============================================================ */
.mobile-nav__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--auth-border, #E6EBF2);
    flex-shrink: 0;
}

html.theme-dark .mobile-nav__header,
body.theme-dark .mobile-nav__header {
    border-color: #2c2c2c;
}

/* Sidebar Logo - matches main header logo */
.mobile-nav__logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    height: 64px;
    overflow: visible;
}

.mobile-nav__logo-img {
    height: 80px;
    width: auto;
    object-fit: cover;
    object-position: left center;
    transform: scale(1.35);
    transform-origin: left center;
}

/* Close Button */
.mobile-nav__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: var(--auth-text-muted, #8B95A5);
    transition: background 150ms ease, color 150ms ease;
    -webkit-tap-highlight-color: transparent;
}

.mobile-nav__close:hover {
    background: var(--auth-surface, #F7F7F8);
    color: var(--auth-text, #0A0A0A);
}

.mobile-nav__close:focus-visible {
    outline: 2px solid var(--brand-accent, #3B82F6);
    outline-offset: 2px;
}

.mobile-nav__close-icon {
    width: 20px;
    height: 20px;
}

/* Dark mode close button */
html.theme-dark .mobile-nav__close,
body.theme-dark .mobile-nav__close {
    color: #8a8a8a;
}

html.theme-dark .mobile-nav__close:hover,
body.theme-dark .mobile-nav__close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #f2f2f2;
}

/* ============================================================
   Sidebar Body (Scrollable)
   ============================================================ */
.mobile-nav__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 24px 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ============================================================
   Main Navigation Links
   ============================================================ */
.mobile-nav__main {
    padding: 0 20px;
}

.mobile-nav__link {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 16px 16px;
    margin-bottom: 4px;
    font-size: 17px;
    font-weight: 500;
    color: var(--auth-text, #0A0A0A);
    text-decoration: none;
    border-radius: 10px;
    transition: background 150ms ease, color 150ms ease;
    -webkit-tap-highlight-color: transparent;
}

.mobile-nav__link:hover {
    background: var(--auth-surface, #F7F7F8);
}

.mobile-nav__link:active {
    background: var(--auth-border, #E6EBF2);
}

.mobile-nav__link:focus-visible {
    outline: 2px solid var(--brand-accent, #3B82F6);
    outline-offset: -2px;
}

.mobile-nav__link--active {
    color: var(--brand-accent, #3B82F6);
    background: rgba(59, 130, 246, 0.08);
}

/* Dark mode main nav links */
html.theme-dark .mobile-nav__link,
body.theme-dark .mobile-nav__link {
    color: #f2f2f2;
}

html.theme-dark .mobile-nav__link:hover,
body.theme-dark .mobile-nav__link:hover {
    background: rgba(255, 255, 255, 0.06);
}

html.theme-dark .mobile-nav__link:active,
body.theme-dark .mobile-nav__link:active {
    background: rgba(255, 255, 255, 0.1);
}

html.theme-dark .mobile-nav__link--active,
body.theme-dark .mobile-nav__link--active {
    color: #60A5FA;
    background: rgba(96, 165, 250, 0.12);
}

/* ============================================================
   Secondary Navigation Links
   ============================================================ */
.mobile-nav__secondary {
    margin-top: auto;
    padding: 24px 20px 0;
    border-top: 1px solid var(--auth-border, #E6EBF2);
}

html.theme-dark .mobile-nav__secondary,
body.theme-dark .mobile-nav__secondary {
    border-color: #2c2c2c;
}

.mobile-nav__secondary-link {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    margin-bottom: 2px;
    font-size: 14px;
    font-weight: 400;
    color: var(--auth-text-secondary, #5A6578);
    text-decoration: none;
    border-radius: 8px;
    transition: background 150ms ease, color 150ms ease;
    -webkit-tap-highlight-color: transparent;
}

.mobile-nav__secondary-link:hover {
    background: var(--auth-surface, #F7F7F8);
    color: var(--auth-text, #0A0A0A);
}

.mobile-nav__secondary-link:active {
    background: var(--auth-border, #E6EBF2);
}

.mobile-nav__secondary-link:focus-visible {
    outline: 2px solid var(--brand-accent, #3B82F6);
    outline-offset: -2px;
}

/* Dark mode secondary nav links */
html.theme-dark .mobile-nav__secondary-link,
body.theme-dark .mobile-nav__secondary-link {
    color: #8a8a8a;
}

html.theme-dark .mobile-nav__secondary-link:hover,
body.theme-dark .mobile-nav__secondary-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #b5b5b5;
}

html.theme-dark .mobile-nav__secondary-link:active,
body.theme-dark .mobile-nav__secondary-link:active {
    background: rgba(255, 255, 255, 0.1);
}

/* ============================================================
   Body Scroll Lock (when sidebar is open)
   ============================================================ */
body.mobile-nav-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* ============================================================
   Hide on Desktop
   ============================================================ */
@media (min-width: 768px) {
    .mobile-nav__overlay,
    .mobile-nav__sidebar {
        display: none !important;
    }
}