/* ============================================
   RESPONSIVE BANNER FIX
   Applied October 6, 2025
   Makes banner/navigation fit better across all screen sizes
   ============================================ */

/* ============================================
   1. BASE NAVIGATION IMPROVEMENTS
   ============================================ */

/* Ensure navigation never causes horizontal scroll */
.main-nav {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  z-index: var(--z-sticky);
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-sizing: border-box;
}

/* Navigation container - fluid and responsive */
.main-nav .container {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-left: clamp(var(--space-sm), 3vw, var(--space-lg));
  padding-right: clamp(var(--space-sm), 3vw, var(--space-lg));
}

/* Navigation content - flexible layout */
.nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height, 64px);
  gap: clamp(var(--space-xs), 2vw, var(--space-md));
  width: 100%;
  box-sizing: border-box;
  flex-wrap: nowrap;
  position: relative;
}

/* ============================================
   2. LOGO RESPONSIVE SIZING
   ============================================ */

/* Logo scales smoothly across screen sizes */
.logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: clamp(var(--font-size-lg), 4vw, var(--font-size-xl));
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
  min-width: 0;
}

/* Logo SVG scales with text */
.logo svg {
  width: clamp(32px, 8vw, 40px);
  height: clamp(32px, 8vw, 40px);
  flex-shrink: 0;
}

.logo-text {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================
   3. NAV LINKS RESPONSIVE BEHAVIOR
   ============================================ */

/* Desktop nav links - smooth scaling */
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-sm), 1.5vw, var(--space-lg));
  flex: 1;
  justify-content: center;
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: hidden !important; /* Changed from auto to hidden */
  overflow-y: visible;
  padding: var(--space-xs) 0;
  box-sizing: border-box;
}

/* Hide scrollbar completely */
.nav-links::-webkit-scrollbar {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
}

/* Nav link text scales responsively */
.nav-link {
  position: relative;
  padding: var(--space-sm) clamp(var(--space-xs), 1vw, var(--space-md));
  font-size: clamp(var(--font-size-sm), 1.2vw, var(--font-size-base));
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  box-sizing: border-box;
}

/* ============================================
   4. NAV ACTIONS RESPONSIVE SIZING
   ============================================ */

/* Actions scale smoothly */
.nav-actions {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-xs), 1vw, var(--space-sm));
  flex-shrink: 0;
  min-width: 0;
}

/* Buttons in nav actions */
.nav-actions button,
.nav-actions .btn {
  padding: clamp(var(--space-xs), 1vw, var(--space-sm))
    clamp(var(--space-sm), 1.5vw, var(--space-md));
  font-size: clamp(var(--font-size-sm), 1.1vw, var(--font-size-base));
  white-space: nowrap;
  box-sizing: border-box;
}

/* Theme toggle and profile buttons */
.theme-toggle,
.profile-btn {
  width: clamp(36px, 8vw, 40px);
  height: clamp(36px, 8vw, 40px);
  flex-shrink: 0;
}

/* ============================================
   5. MOBILE MENU TOGGLE
   ============================================ */

/* Mobile menu toggle - always hidden on desktop */
.mobile-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-xs);
  color: var(--color-text);
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.hamburger {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  position: relative;
  transition: background-color var(--transition-fast);
}

.hamburger::before,
.hamburger::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 2px;
  background: currentColor;
  transition: transform var(--transition-fast);
}

.hamburger::before {
  top: -8px;
}

.hamburger::after {
  bottom: -8px;
}

/* ============================================
   6. LARGE DESKTOP (1440px+)
   ============================================ */

@media (min-width: 1440px) {
  /* Increase spacing on large screens */
  .main-nav .container {
    max-width: 1400px;
    padding-left: var(--space-2xl);
    padding-right: var(--space-2xl);
  }

  .nav-content {
    gap: var(--space-lg);
  }

  .nav-links {
    gap: var(--space-xl);
  }

  .nav-link {
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--font-size-base);
  }

  .nav-actions {
    gap: var(--space-md);
  }
}

/* ============================================
   7. DESKTOP (1025px - 1439px)
   ============================================ */

@media (max-width: 1439px) and (min-width: 1025px) {
  .main-nav .container {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }

  .nav-content {
    gap: var(--space-md);
  }

  .nav-links {
    gap: var(--space-md);
  }

  .nav-link {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-base);
  }
}

/* ============================================
   8. TABLET (769px - 1024px)
   ============================================ */

@media (max-width: 1024px) and (min-width: 769px) {
  .main-nav .container {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  .nav-content {
    gap: var(--space-sm);
  }

  .nav-links {
    gap: var(--space-sm);
    overflow-x: hidden !important; /* Changed from auto to hidden */
    justify-content: flex-start;
    padding: var(--space-xs) var(--space-xs);
  }

  .nav-link {
    padding: var(--space-sm) var(--space-sm);
    font-size: var(--font-size-sm);
  }

  .logo {
    font-size: var(--font-size-lg);
  }

  .logo svg {
    width: 36px;
    height: 36px;
  }

  .nav-actions {
    gap: var(--space-xs);
  }

  .nav-actions button,
  .nav-actions .btn {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-sm);
  }
}

/* ============================================
   9. MOBILE LANDSCAPE (641px - 768px)
   ============================================ */

@media (max-width: 768px) and (min-width: 641px) {
  /* Show mobile menu on smaller tablets/large phones */
  .mobile-menu-toggle {
    display: flex !important;
  }

  /* Hide nav links by default, show in dropdown */
  .nav-links {
    position: fixed;
    top: var(--header-height, 64px);
    left: 0;
    right: 0;
    flex-direction: column;
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-lg);
    gap: var(--space-xs);
    display: none;
    z-index: var(--z-dropdown);
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - var(--header-height, 64px));
    overflow-y: auto;
    align-items: stretch;
  }

  .nav-links.active {
    display: flex;
  }

  .nav-link {
    width: 100%;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    text-align: left;
  }

  .nav-link:hover {
    background: var(--color-bg-secondary);
  }

  .logo {
    font-size: var(--font-size-lg);
  }

  .logo svg {
    width: 36px;
    height: 36px;
  }

  /* Keep logo text visible on landscape */
  .logo-text {
    display: inline-block;
  }

  .nav-actions {
    gap: var(--space-xs);
  }

  .theme-toggle,
  .profile-btn {
    width: 36px;
    height: 36px;
  }
}

/* ============================================
   10. MOBILE PORTRAIT (481px - 640px)
   ============================================ */

@media (max-width: 640px) and (min-width: 481px) {
  .mobile-menu-toggle {
    display: flex !important;
  }

  .main-nav .container {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }

  .nav-content {
    gap: var(--space-xs);
    min-height: 56px;
  }

  /* Mobile dropdown menu */
  .nav-links {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    flex-direction: column;
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-md);
    gap: var(--space-xs);
    display: none;
    z-index: var(--z-dropdown);
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    align-items: stretch;
  }

  .nav-links.active {
    display: flex;
  }

  .nav-link {
    width: 100%;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    text-align: left;
  }

  .logo {
    font-size: var(--font-size-base);
  }

  .logo svg {
    width: 32px;
    height: 32px;
  }

  .logo-text {
    display: inline-block;
  }

  .nav-actions {
    gap: var(--space-xs);
  }

  .theme-toggle,
  .profile-btn {
    width: 36px;
    height: 36px;
  }

  /* Smaller buttons */
  .nav-actions button,
  .nav-actions .btn {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-sm);
  }
}

/* ============================================
   11. SMALL MOBILE (320px - 480px)
   ============================================ */

@media (max-width: 480px) {
  .mobile-menu-toggle {
    display: flex !important;
  }

  .main-nav .container {
    padding-left: var(--space-xs);
    padding-right: var(--space-xs);
  }

  .nav-content {
    gap: var(--space-xs);
    min-height: 52px;
  }

  /* Mobile dropdown menu - compact */
  .nav-links {
    position: fixed;
    top: 52px;
    left: 0;
    right: 0;
    flex-direction: column;
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-sm);
    gap: 4px;
    display: none;
    z-index: var(--z-dropdown);
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - 52px);
    overflow-y: auto;
    align-items: stretch;
  }

  .nav-links.active {
    display: flex;
  }

  .nav-link {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    text-align: left;
  }

  /* Hide logo text on very small screens */
  .logo {
    font-size: var(--font-size-sm);
    gap: var(--space-xs);
  }

  .logo svg {
    width: 28px;
    height: 28px;
  }

  .logo-text {
    display: none;
  }

  /* Compact nav actions */
  .nav-actions {
    gap: 4px;
  }

  .theme-toggle,
  .profile-btn {
    width: 32px;
    height: 32px;
    padding: var(--space-xs);
  }

  /* Very compact buttons */
  .nav-actions button,
  .nav-actions .btn {
    padding: var(--space-xs);
    font-size: var(--font-size-xs);
  }

  /* Hide button text, keep icons */
  .nav-actions .btn-text {
    display: none;
  }
}

/* ============================================
   12. EXTRA SMALL DEVICES (< 320px)
   ============================================ */

@media (max-width: 319px) {
  .mobile-menu-toggle {
    display: flex !important;
  }

  .main-nav .container {
    padding-left: 4px;
    padding-right: 4px;
  }

  .nav-content {
    gap: 4px;
    min-height: 48px;
  }

  .nav-links {
    top: 48px;
    padding: var(--space-xs);
    max-height: calc(100vh - 48px);
  }

  .logo svg {
    width: 24px;
    height: 24px;
  }

  .logo-text {
    display: none;
  }

  .theme-toggle,
  .profile-btn {
    width: 28px;
    height: 28px;
    padding: 4px;
  }
}

/* ============================================
   13. PREVENT HORIZONTAL OVERFLOW
   ============================================ */

/* Ensure nothing in navigation causes horizontal scroll */
.main-nav,
.main-nav *,
.nav-content,
.nav-content * {
  box-sizing: border-box;
}

/* Prevent text overflow */
.nav-link,
.logo-text,
.nav-actions button,
.nav-actions .btn {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================
   14. SMOOTH TRANSITIONS
   ============================================ */

/* Smooth resize transitions */
.main-nav,
.nav-content,
.nav-links,
.logo,
.nav-actions {
  transition: all var(--transition-base) ease;
}

/* Smooth font size changes */
.logo,
.nav-link,
.nav-actions button {
  transition: font-size var(--transition-base) ease,
    padding var(--transition-base) ease, gap var(--transition-base) ease;
}

/* ============================================
   15. ACCESSIBILITY
   ============================================ */

/* Focus visible for keyboard navigation */
.nav-link:focus-visible,
.mobile-menu-toggle:focus-visible,
.theme-toggle:focus-visible,
.profile-btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
  z-index: calc(var(--z-sticky) + 1);
}

/* Active mobile menu */
.mobile-menu-toggle[aria-expanded="true"] .hamburger {
  background-color: transparent;
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger::before {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger::after {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* ============================================
   16. PRINT STYLES
   ============================================ */

@media print {
  .main-nav {
    position: static;
    border-bottom: none;
    padding: 0;
  }

  .mobile-menu-toggle,
  .theme-toggle,
  .nav-actions {
    display: none !important;
  }

  .nav-links {
    display: none !important;
  }

  .logo {
    font-size: var(--font-size-base);
  }
}