/**
 * Two header designs: desktop (full nav) vs mobile (hamburger + children).
 * Loaded after css/style.css. Breakpoint: 980px.
 */
:root {
  --gmc-desktop: 981px;
}

/* ========== DESKTOP MENU ========== */
@media (min-width: 981px) {
  .header-inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
  }
  .header .wrap {
    width: min(1240px, calc(100% - 40px));
  }
  .nav {
    display: flex !important;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
  }
  .nav a,
  .nav button.linkish {
    font-size: .9rem;
    padding: 8px 11px;
  }
  .hamburger,
  .mobile-nav,
  .mobile-nav-backdrop,
  .mobile-nav.is-open,
  #mobile-nav.mobile-nav.is-open,
  body.nav-open .mobile-nav,
  .mobile-nav-backdrop.is-open,
  .mobile-nav-backdrop:not([hidden]),
  .mobile-nav-close {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body.nav-open {
    overflow: auto;
  }
  .search {
    display: flex;
  }
  .header-actions {
    gap: 8px;
  }
  .user-name,
  .mini-select {
    display: inline-flex;
  }
}

@media (min-width: 981px) and (max-width: 1119px) {
  .search { display: none !important; }
  .nav a,
  .nav button.linkish {
    font-size: .82rem;
    padding: 8px 8px;
  }
}

/* ========== MOBILE MENU ========== */
@media (max-width: 980px) {
  .header-inner {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
  }
  .nav,
  .search {
    display: none !important;
  }
  .hamburger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  .header-actions .btn-ghost {
    display: none;
  }
  .dropdown-menu {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .user-name,
  .mini-select {
    display: none !important;
  }
  .btn-auth {
    min-width: 76px;
    height: 36px;
    padding: 0 12px;
    font-size: .8rem;
  }
}