/* Discourse header — merged into zeq-nav as single bar.
   .d-header is CSS-hidden from the start. JS relocates .panel
   into zeq-nav so Discourse icons appear inline. ONE bar always. */

/* ── Hide duplicates (login, branding — zeq-nav provides these) ── */
.login-button,
.sign-up-button,
.d-header .auth-buttons,
.header-buttons .login-button,
.header-buttons .sign-up-button {
  display: none !important;
}
.d-header .logo-mobile,
.d-header .logo-big,
.d-header .logo-small,
.d-header .title a[href="/forum/"],
.d-header .home-logo-wrapper-outlet,
.d-header .logo-wrapper {
  display: none !important;
}

/* ── KILL the entire Discourse header — wrapper AND inner ── */
.d-header-wrap {
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  z-index: 198 !important;
}
.d-header,
.d-header .wrap,
.d-header .contents,
.d-header .panel {
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── Body offset: ONE bar only ── */
body.zn-has-bar #main-outlet {
  padding-top: 3.75rem !important;
}
html {
  --header-offset: 3.75rem !important;
}

/* ── Hide zeq-nav avatar on forum — Discourse user menu replaces it ── */
body.zn-single-bar #zn-avatar-wrap { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   RELOCATED PANEL — Discourse icons inside zeq-nav
   After JS moves .panel from .d-header into .zn-discourse-panel,
   these rules take over (parent selector changed).
   ══════════════════════════════════════════════════════════════ */

.zn-bar { overflow: visible !important; }

.zn-discourse-panel {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-left: 4px !important;
  overflow: visible !important;
}

/* Reset .panel and icon list for inline layout */
.zn-discourse-panel .panel,
.zn-discourse-panel .d-header-icons {
  display: flex !important;
  align-items: center !important;
  height: auto !important;
  min-height: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}
.zn-discourse-panel .d-header-icons > li {
  display: inline-flex !important;
  align-items: center !important;
  position: relative !important;
  list-style: none !important;
  overflow: visible !important;
}

/* Hide auth buttons inside relocated panel */
.zn-discourse-panel .header-buttons { display: none !important; }

/* ── Icon buttons ── */
.zn-discourse-panel .icon.btn-flat,
.zn-discourse-panel .header-dropdown-toggle button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important; height: 32px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  border-radius: 8px !important;
  transition: background 0.15s !important;
  padding: 0 !important;
  color: rgba(255, 255, 255, 0.6) !important;
}
.zn-discourse-panel .icon.btn-flat:hover,
.zn-discourse-panel .header-dropdown-toggle button:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}
.zn-discourse-panel .d-icon {
  color: rgba(255, 255, 255, 0.6) !important;
  width: 18px !important; height: 18px !important;
}
.zn-discourse-panel .icon.btn-flat:hover .d-icon {
  color: #22d3ee !important;
}

/* ── Change Discourse hamburger to grid icon (avoid confusion with mobile menu) ── */
.zn-discourse-panel .hamburger-dropdown .d-icon {
  display: none !important;
}
.zn-discourse-panel .hamburger-dropdown .icon.btn-flat::before {
  content: '' !important;
  display: block !important;
  width: 18px !important; height: 18px !important;
  background-color: rgba(255, 255, 255, 0.6) !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E") !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}
.zn-discourse-panel .hamburger-dropdown .icon.btn-flat:hover::before {
  background-color: #22d3ee !important;
}

/* ── Avatar ── */
.zn-discourse-panel .avatar {
  width: 22px !important; height: 22px !important;
  border-radius: 50% !important;
}

/* ── Separator between zeq-nav and Discourse icons ── */
.zn-discourse-sep {
  display: inline-block !important;
  width: 1px !important; height: 20px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  margin: 0 4px !important;
  vertical-align: middle !important;
}

/* ── Dropdown menus from relocated panel ── */
.zn-discourse-panel .search-menu-panel,
.zn-discourse-panel .menu-panel {
  position: fixed !important;
  top: 3.75rem !important;
  right: 0 !important;
  z-index: 250 !important;
  max-height: calc(100vh - 4.5rem) !important;
  overflow-y: auto !important;
  background: rgba(10, 10, 15, 0.97) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-top: none !important;
  border-radius: 0 0 12px 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  width: 320px !important;
  max-width: 90vw !important;
}

/* ── Search input theming ── */
.search-menu-panel input,
.search-input input {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #e2e8f0 !important;
  border-radius: 8px !important;
  font-family: Inter, system-ui, sans-serif !important;
}

/* ── Menu content dark theme ── */
.menu-panel a, .search-menu-panel a { color: rgba(255, 255, 255, 0.7) !important; }
.menu-panel a:hover, .search-menu-panel a:hover { color: #22d3ee !important; background: rgba(34, 211, 238, 0.06) !important; }
.menu-panel li { border-color: rgba(255, 255, 255, 0.06) !important; }
.menu-panel hr { border-color: rgba(255, 255, 255, 0.08) !important; }
.menu-panel .category-name { color: rgba(255, 255, 255, 0.8) !important; }
.menu-panel .tabs-list .btn { color: rgba(255, 255, 255, 0.6) !important; background: transparent !important; border: none !important; }
.menu-panel .tabs-list .btn.active, .menu-panel .tabs-list .btn:hover { color: #22d3ee !important; background: rgba(34, 211, 238, 0.08) !important; }
.search-menu-panel .search-link:hover { background: rgba(34, 211, 238, 0.06) !important; }

/* ── Mobile ── */
@media (max-width: 768px) {
  .zn-discourse-panel .icon.btn-flat,
  .zn-discourse-panel .header-dropdown-toggle button {
    width: 28px !important; height: 28px !important;
  }
  .zn-discourse-panel .d-icon { width: 16px !important; height: 16px !important; }
  .zn-discourse-panel .avatar { width: 20px !important; height: 20px !important; }
  .zn-discourse-sep { height: 16px !important; margin: 0 2px !important; }
  .zn-discourse-panel { margin-left: 2px !important; }

  /* Dropdown menus full-width on mobile */
  .zn-discourse-panel .search-menu-panel,
  .zn-discourse-panel .menu-panel {
    left: 0 !important; right: 0 !important;
    width: 100% !important; max-width: 100% !important;
    max-height: 80vh !important;
  }
}