/* ============================================================
   QuantX Shared Header
   Included by BOTH index.html and docs/quickstart.html
   Do NOT duplicate header styles in page CSS
   ============================================================ */

/* ---- Header container ---- */
.quantx-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);       /* 64px */
  z-index: 100;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background-color var(--transition-duration-basic) var(--transition-ease-basic),
              border-color var(--transition-duration-basic) var(--transition-ease-basic);
}

/* ---- Three-column grid: logo | nav | actions ---- */
.quantx-header__grid {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem;
  padding-inline: var(--header-padding-mobile);   /* 16px mobile */
  max-width: 100%;
}

/* Reduce gap on small screens */
@media (max-width: 480px) {
  .quantx-header__grid {
    gap: 0.5rem;
  }
}

@media (min-width: 768px) {
  .quantx-header__grid {
    padding-inline: var(--header-padding-desktop); /* 32px md+ */
  }
}

/* ---- Left: Logo + hamburger (mobile) ---- */
.quantx-header__left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.quantx-header__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text-emphasis);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* ---- Logo image (external SVG, transparent bg) ---- */
.quantx-logo-img {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
  transition: opacity var(--transition-duration-basic) var(--transition-ease-basic);
}

.quantx-logo-text {
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Hide logo text on very small screens to prevent overflow */
@media (max-width: 480px) {
  .quantx-logo-text {
    display: none;
  }
}

/* ---- Center: Main navigation ---- */
.quantx-header__nav {
  display: none;       /* hidden on mobile */
  align-items: center;
  gap: 0.25rem;
  justify-self: center;
}

@media (min-width: 1024px) {
  .quantx-header__nav {
    display: flex;
  }
}

/* ---- Nav link ---- */
.quantx-nav-link {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  white-space: nowrap;
  transition: color var(--transition-duration-basic) var(--transition-ease-basic),
              background-color var(--transition-duration-basic) var(--transition-ease-basic);
}

.quantx-nav-link:hover {
  color: var(--color-text-emphasis);
  background: var(--color-background-primary-soft-alpha);
}

.quantx-nav-link.active {
  color: var(--color-text-emphasis);
  font-weight: 500;
  background: var(--color-background-primary-soft);
}

/* ---- Disabled nav link (coming soon) ---- */
.quantx-nav-link--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.quantx-nav-link--disabled:hover {
  background: transparent;
  color: var(--color-text-secondary);
}

/* ---- Right: Search + login + register + theme ---- */
.quantx-header__right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-self: end;
  flex-shrink: 0;
}

/* Tighter gap on small screens */
@media (max-width: 480px) {
  .quantx-header__right {
    gap: 0.25rem;
  }
}

/* ---- Search trigger: capsule (≥1280px) ---- */
.quantx-search-trigger {
  display: none;
  align-items: center;
  gap: 0.5rem;
  height: 2.25rem;
  padding: 0 0.75rem;
  min-width: 13rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface-secondary);
  color: var(--color-text-tertiary);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: border-color var(--transition-duration-basic) var(--transition-ease-basic),
              background-color var(--transition-duration-basic) var(--transition-ease-basic);
}

.quantx-search-trigger:hover {
  border-color: var(--gray-300);
  background: var(--color-surface);
}

/* Search trigger: text left, icon right */
.quantx-search-trigger__text {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quantx-search-trigger__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--color-text-tertiary);
}

/* ≥1280px: show full capsule */
@media (min-width: 1280px) {
  .quantx-search-trigger {
    display: flex;
  }
}

/* ---- Search icon button (1024px–1279px and mobile) ---- */
.quantx-search-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  color: var(--color-text);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-duration-basic) var(--transition-ease-basic);
}

.quantx-search-icon-btn:hover {
  background: var(--color-background-primary-soft-alpha);
}

/* 1024px–1279px: show icon button, hide capsule */
@media (min-width: 1024px) and (max-width: 1279px) {
  .quantx-search-icon-btn {
    display: flex;
  }
}

/* <1024px: show icon button */
@media (max-width: 1023px) {
  .quantx-search-icon-btn {
    display: flex;
  }
}

/* ≥1280px: hide icon button, capsule is enough */
@media (min-width: 1280px) {
  .quantx-search-icon-btn {
    display: none;
  }
}

/* ---- Login button (text only) ---- */
.quantx-login-btn {
  display: none;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  padding: 0 0.75rem;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition-duration-basic) var(--transition-ease-basic),
              background-color var(--transition-duration-basic) var(--transition-ease-basic);
}

.quantx-login-btn:hover {
  color: var(--color-text-emphasis);
  background: var(--color-background-primary-soft-alpha);
}

/* ---- Register button (filled) ---- */
.quantx-register-btn {
  display: none;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  padding: 0 0.875rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-emphasis);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--transition-duration-basic) var(--transition-ease-basic),
              border-color var(--transition-duration-basic) var(--transition-ease-basic);
}

.quantx-register-btn:hover {
  background: var(--color-surface-secondary);
  border-color: var(--gray-300);
}

/* Signed-in account entry uses the same compact, quiet header rhythm. */
.quantx-account-menu { display:none; position:relative; }
.quantx-account-trigger { align-items:center; background:transparent; border:0; border-radius:var(--radius-md); color:var(--color-text); cursor:pointer; display:flex; gap:.5rem; height:2.25rem; padding:0 .35rem; }
.quantx-account-trigger:hover { background:var(--color-background-primary-soft-alpha); }
.quantx-account-avatar { align-items:center; background:var(--color-text-emphasis); border-radius:50%; color:var(--color-surface); display:inline-flex; font-size:.75rem; font-weight:700; height:1.75rem; justify-content:center; width:1.75rem; }
.quantx-account-name { font-size:.8125rem; font-weight:500; max-width:5.5rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.quantx-account-dropdown { background:var(--color-glass-surface-strong); border:1px solid var(--color-glass-border); border-radius:var(--radius-xl); box-shadow:0 16px 36px rgba(0,0,0,.16); display:none; min-width:12.5rem; padding:.4rem; position:absolute; right:0; top:calc(100% + .55rem); -webkit-backdrop-filter:blur(18px) saturate(1.05); backdrop-filter:blur(18px) saturate(1.05); z-index:250; }
.quantx-account-dropdown.is-open { display:block; }
.quantx-account-dropdown__identity { border-bottom:1px solid var(--color-border-subtle); display:grid; gap:2px; padding:.55rem .65rem .7rem; }
.quantx-account-dropdown__identity strong { color:var(--color-text-emphasis); font-size:.8125rem; }
.quantx-account-dropdown__identity span { color:var(--color-text-tertiary); font-size:.75rem; }
.quantx-account-dropdown a, .quantx-account-dropdown button { background:transparent; border:0; border-radius:var(--radius-sm); color:var(--color-text-secondary); cursor:pointer; display:block; font-size:.8125rem; padding:.55rem .65rem; text-align:left; width:100%; }
.quantx-account-dropdown a:first-of-type { margin-top:.35rem; }
.quantx-account-dropdown a:hover, .quantx-account-dropdown button:hover { background:var(--color-background-primary-soft-alpha); color:var(--color-text-emphasis); }
.quantx-account-dropdown button { border-top:1px solid var(--color-border-subtle); margin-top:.35rem; padding-top:.7rem; }

/* Keep account entry points available on tablets and compact desktop windows. */
@media (min-width: 640px) {
  .quantx-login-btn,
  .quantx-register-btn,
  .quantx-account-menu {
    display: flex;
  }
}

/* ---- Theme toggle button ---- */
.quantx-theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  color: var(--color-text);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-duration-basic) var(--transition-ease-basic);
}

.quantx-theme-btn:hover {
  background: var(--color-background-primary-soft-alpha);
}

/* Sun icon visible in dark, moon in light */
.quantx-theme-btn .icon-sun { display: none; }
.quantx-theme-btn .icon-moon { display: block; }

[data-theme="dark"] .quantx-theme-btn .icon-sun { display: block; }
[data-theme="dark"] .quantx-theme-btn .icon-moon { display: none; }

/* ---- Hamburger (mobile only) ---- */
.quantx-hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  color: var(--color-text);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-duration-basic) var(--transition-ease-basic);
}

.quantx-hamburger:hover {
  background: var(--color-background-primary-soft-alpha);
}

@media (min-width: 1024px) {
  .quantx-hamburger {
    display: none;
  }
}

/* Compact header: keep the requested logo, search, theme and menu sequence
   readable. Account actions remain available from the menu on these widths. */
@media (max-width: 1023px) {
  .quantx-header__grid {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
  }
  .quantx-header__nav {
    display: none;
  }
  .quantx-header__right {
    grid-column: 2;
  }
  .quantx-login-btn,
  .quantx-register-btn,
  .quantx-account-menu {
    display: none;
  }
}


/* ---- Language switch ---- */
.quantx-lang-switch {
  position: relative;
  display: none;
  margin: 0 0.125rem;
}

.quantx-lang-btn {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  height: 2.25rem;
  padding: 0 0.5rem;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition-duration-basic) var(--transition-ease-basic),
              background-color var(--transition-duration-basic) var(--transition-ease-basic);
}

.quantx-lang-btn:hover {
  color: var(--color-text-emphasis);
  background: var(--color-background-primary-soft-alpha);
}

.quantx-lang-chevron {
  transition: transform var(--transition-duration-basic) var(--transition-ease-basic);
}

.quantx-lang-switch:hover .quantx-lang-chevron {
  color: var(--color-text);
}

.quantx-lang-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 9rem;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.12), 0 2px 8px -2px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--color-border);
  padding: 0.375rem;
  display: none;
  z-index: 200;
}

.quantx-lang-dropdown.open {
  display: block;
}
[data-theme="dark"] .quantx-lang-dropdown {
  box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.4), 0 2px 8px -2px rgba(0, 0, 0, 0.3);
  border-color: var(--color-border);
}

.quantx-lang-option {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  color: var(--color-text);
  font-size: 0.8125rem;
  font-weight: 400;
  cursor: pointer;
  text-align: left;
  transition: background-color var(--transition-duration-basic) var(--transition-ease-basic);
}

.quantx-lang-option:hover {
  background: var(--color-background-primary-soft-alpha);
}

.quantx-lang-option[aria-current="true"] {
  font-weight: 500;
  color: var(--color-text-emphasis);
}

/* Show language switch on desktop (>=1024px) */
@media (min-width: 1024px) {
  .quantx-lang-switch {
    display: block;
  }
}

/* Mobile drawer language button */
.quantx-drawer__lang-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  cursor: pointer;
  margin-bottom: 0.5rem;
  transition: background-color var(--transition-duration-basic) var(--transition-ease-basic);
}

.quantx-drawer__lang-btn:hover {
  background: var(--color-surface-secondary);
}

/* ---- Body offset for fixed header ---- */
/* Pages add their own top padding based on header height */

/* Shared navigation material: transparent enough to read as one system, but
   still dark/white enough to keep document work legible. */
.quantx-header {
  background: var(--color-glass-surface-strong);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  backdrop-filter: blur(18px) saturate(1.08);
}
.quantx-lang-dropdown,
.quantx-search-trigger,
.quantx-register-btn,
.quantx-drawer__lang-btn {
  background: var(--color-glass-surface);
  border-color: var(--color-glass-border);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
  backdrop-filter: blur(14px) saturate(1.08);
}