/* Decluttered header: short main menu + "Help" dropdown on desktop,
   hamburger menu on tablet/mobile. Loaded after styles.css/effects.css. */
header.wrap { gap: 24px; z-index: 900; }
header.wrap nav { margin-left: auto; display: flex; align-items: center; gap: 30px; font-size: 15px; color: #dddde4; white-space: nowrap; width: auto; order: 0; overflow: visible; padding: 0; }
header.wrap nav > a, header.wrap .nav-more > button { white-space: nowrap; }
header.wrap .login { white-space: nowrap; flex-shrink: 0; margin-left: 0; }

/* Help dropdown */
.nav-more { position: relative; }
.nav-more > button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: inherit; font: inherit; }
.nav-more > button:hover, .nav-more.open > button { color: #fff; }
.nav-more > button:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 4px; }
.nav-more > button svg { width: 10px; height: 10px; transition: transform .2s; }
.nav-more.open > button svg { transform: rotate(180deg); }
.nav-more-menu { position: absolute; top: calc(100% + 18px); right: -12px; min-width: 210px; display: none; flex-direction: column; padding: 8px; background: rgba(16, 15, 18, .97); border: 1px solid #2a2f3a; border-radius: 12px; box-shadow: 0 18px 40px #000a; z-index: 950; }
.nav-more.open .nav-more-menu { display: flex; }
.nav-more-menu a { padding: 11px 14px; border-radius: 8px; color: #dddde4; }
.nav-more-menu a:hover { background: #0d6efd1f; color: #fff; }
.nav-more-menu a::after { display: none !important; }

/* Hamburger button (hidden on desktop) */
.nav-toggle { display: none; flex-shrink: 0; width: 46px; height: 46px; border: 1px solid #3a3a40; border-radius: 12px; background: transparent; cursor: pointer; position: relative; padding: 0; }
.nav-toggle span { position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px; background: #fff; transition: transform .25s, opacity .2s, top .25s; }
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 29px; }
.nav-open .nav-toggle span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

@media (max-width: 1150px) {
  header.wrap nav { gap: 22px; font-size: 14px; }
}

@media (max-width: 950px) {
  header.wrap { flex-wrap: nowrap !important; height: 96px !important; padding-bottom: 0 !important; gap: 12px; position: sticky; }
  header.wrap .brand { height: auto !important; width: 112px !important; }
  header.wrap .brand img { height: 76px !important; }
  header.wrap .login { margin-left: auto !important; font-size: 13px; padding: 12px 16px; }
  .nav-toggle { display: block; }

  /* Menu becomes a drop-down panel under the header */
  header.wrap nav { display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 10px; font-size: 16px; background: #0c0b0e; border: 1px solid #2a2f3a; border-radius: 0 0 16px 16px; box-shadow: 0 24px 50px #000c; z-index: 950; max-height: calc(100vh - 120px); overflow-y: auto; }
  .nav-open header.wrap nav { display: flex; }
  header.wrap nav > a, .nav-more-menu a { padding: 15px 14px; border-radius: 10px; border-bottom: 1px solid #ffffff10; }
  header.wrap nav > a::after { display: none; }
  header.wrap nav > a:hover { background: #0d6efd1f; }
  .nav-more > button { display: none; }
  .nav-more-menu { display: flex; position: static; min-width: 0; padding: 0; background: none; border: 0; box-shadow: none; }
  .nav-more-menu a:last-child { border-bottom: 0; }
}

@media (max-width: 650px) {
  header.wrap { height: 84px !important; }
  header.wrap .brand { width: 96px !important; }
  header.wrap .brand img { height: 66px !important; }
  header.wrap .login { padding: 11px 14px; }
  header.wrap .login span { margin-left: 8px; }
}