/* ========================================
   NAVBAR.CSS - Navigation Bar Styles
   ======================================== */

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(17, 24, 39, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    transition: var(--transition);
}

.light-mode header {
    background: rgba(255, 255, 255, 0.95);
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
}



.nav-links {
    display: flex;
    gap: 2rem;
    align-items: center;
    list-style: none;
}

.nav-link {
    color: var(--text-secondary);
    font-weight: 500;
    position: relative;
    padding: 0.5rem 0;
    text-decoration: none;
    transition: var(--transition);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient);
    transition: width 0.3s ease;
}

.nav-link:hover {
    color: var(--text-primary);
}

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

.nav-link.active {
    color: var(--text-primary);
}

.nav-link.active::after {
    width: 100%;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.search-toggle,
.theme-toggle {
    background: var(--hover-color);
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
    font-size: 1.2rem;
}

.search-toggle:hover,
.theme-toggle:hover {
    background: var(--primary);
    color: white;
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 1.5rem;
    cursor: pointer;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
}

#logout-btn,
#premium-btn,
#admin-link {
    transition: var(--transition);
}

#logout-btn.hidden,
#premium-btn.hidden,
#admin-link.hidden {
    display: none;
}

/* Mobile Navigation */
@media (max-width: 992px) {
    .mobile-menu-btn {
        display: flex;
    }

    .nav-links {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        background: var(--bg-primary);
        border-bottom: 1px solid var(--border-color);
        flex-direction: column;
        padding: 1rem;
        gap: 1rem;
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: var(--transition);
        z-index: 999;
    }

    .nav-links.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .nav-link {
        width: 100%;
        text-align: center;
        padding: 0.75rem;
    }

    .nav-link::after {
        display: none;
    }

    .nav-link:hover {
        background: var(--hover-color);
        border-radius: var(--border-radius);
    }

    .header-actions {
        gap: 0.5rem;
    }

    .search-toggle,
    .theme-toggle {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    #login-btn,
    #logout-btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .header-container {
        padding: 0 1rem;
    }

    .logo span {
        display: none;
    }

   

    .header-actions {
        gap: 0.25rem;
    }

    .search-toggle,
    .theme-toggle {
        width: 35px;
        height: 35px;
    }

    #login-btn span,
    #logout-btn span {
        display: none;
    }

    #login-btn i,
    #logout-btn i {
        margin: 0;
    }
}

/* iOS Safe Area */
@supports (padding: max(0px)) {
    header {
        padding-top: env(safe-area-inset-top);
    }

    .nav-links {
        top: calc(70px + env(safe-area-inset-top));
    }
} 
/* Fix the logo-icon container */
.logo-icon {
    width: 75px;
    height: 75px;
    border-radius: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;  /* Important: keeps image within bounds */
    flex-shrink: 0;
}

/* Add these rules to control the image */
.logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;  /* Use 'contain' to show full image */
    /* OR use 'cover' to fill container (may crop) */
    display: block;
}

/* Alternative if you want the image to fill completely without distortion */
.logo-icon img.fill {
    object-fit: cover;
}

/* Responsive mobile size */
@media (max-width: 480px) {
    .logo-icon {
        width: 65px;
        height: 65px;
    }
}

/* Full-page mobile/tablet navigation — 2026-07-31 */
@media (max-width: 1024px) {
  .nav-links {
    top:0 !important; bottom:0 !important; height:100dvh !important;
    overflow-y:auto !important; overscroll-behavior:contain;
    padding:76px 18px 28px !important; gap:6px !important;
    transform:translateY(-105%) !important; border:0 !important;
    z-index:1200 !important; align-items:stretch !important;
  }
  .nav-links.active { transform:translateY(0) !important; }
  .nav-links > li { width:100%; }
  .nav-link { text-align:left !important; border-radius:12px; display:flex !important; align-items:center; justify-content:space-between; }
  .mobile-menu-close-row { display:flex; justify-content:flex-end; position:absolute; top:14px; right:16px; }
  .mobile-menu-close { width:44px; height:44px; border:1px solid var(--border-color); border-radius:50%; background:var(--bg-secondary); color:var(--text-primary); font-size:1.2rem; }
  .mobile-menu-heading { padding:14px 12px 6px; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; opacity:.65; }
  .mobile-category-panel { display:none; padding:4px 0 10px 12px; }
  .mobile-category-panel.open { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .mobile-category-option { border:1px solid var(--border-color); background:var(--bg-secondary); color:var(--text-primary); border-radius:10px; padding:10px; text-align:left; }
  body.mobile-menu-open { overflow:hidden !important; }
}
@media (min-width:1025px) {
  .mobile-menu-close-row,.mobile-menu-heading,.mobile-category-panel,.mobile-footer-link { display:none !important; }
}

/* Stable mobile menu icon/text alignment */
.nav-link-with-icon { display:flex !important; align-items:center; justify-content:flex-start !important; gap:.75rem; width:100%; }
.nav-link-with-icon > i { flex:0 0 1.25rem; width:1.25rem; text-align:center; margin:0 !important; }
.nav-link-with-icon > span, .nav-link-with-icon { white-space:nowrap; }
@media (max-width: 992px) {
  .nav-links .nav-link { justify-content:flex-start; }
  .nav-links li { width:100%; }
}


/* 20260731 role/navigation hardening */
@media (min-width: 1025px) {
  header .container, header .navbar-container { min-width: 0; }
  .nav-links {
    min-width: 0;
    max-width: calc(100vw - 360px);
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 1.15rem;
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links > li { flex: 0 0 auto; }
  .nav-links::-webkit-scrollbar { height: 4px; }
}
#admin-link.hidden, #advertiser-link.hidden,
#admin-link[hidden], #advertiser-link[hidden],
li:has(> #admin-link.hidden), li:has(> #advertiser-link.hidden) { display:none !important; }