/* Header: ticker strip + sticky nav. Palette comes from theme.css tokens.
   The `body { }` reset that used to live here is gone: the header was its own
   iframe document and needed it; now it is a component inside a page that
   already sets its own body from theme.css. */

.site-header {
  width: 100%;
  /* The mobile dropdown is position:absolute with z-index:auto, so it painted
     BELOW anything positioned later in the DOM — the hero's text showed through
     it and swallowed the clicks. The header needs its own layer above <main>. */
  position: relative;
  z-index: 100;
}

/* ---------- ticker strip ---------- */
.ticker {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.ticker::-webkit-scrollbar { display: none; }

.ticker-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 9px 24px;
  font-size: 12.5px;
  white-space: nowrap;
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tk-k {
  color: var(--ink-dim);
  font-weight: 500;
}

.tk-v {
  color: var(--ink);
  font-weight: 600;
}

.ticker-updated {
  margin-left: auto;
  color: var(--ink-soft);
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 0 var(--accent-soft);
  animation: livepulse 2s ease-out infinite;
}

@keyframes livepulse {
  0%   { box-shadow: 0 0 0 0 rgba(87, 190, 178, 0.5); }
  70%  { box-shadow: 0 0 0 6px rgba(87, 190, 178, 0); }
  100% { box-shadow: 0 0 0 0 rgba(87, 190, 178, 0); }
}

/* ---------- nav ---------- */
.nav {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 12px 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}

.brand-logo {
  width: 36px;
  height: 36px;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
}
.brand-name b { color: var(--accent-2); font-weight: 700; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}

.nav-link {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
}

.nav-link:hover {
  color: var(--ink);
  background: var(--surface-2);
}

.nav-link.active {
  color: var(--accent-2);
  background: var(--accent-soft);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-actions-desktop {
  margin-left: auto;
}

.nav-actions .btn {
  padding: 9px 16px;
  font-size: 14px;
}

.nav-actions-mobile { display: none; }

/* ---------- hamburger (hidden until small screens) ---------- */
.hamburger {
  display: none;
  margin-left: auto;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  cursor: pointer;
}

.hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav.open .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.open .hamburger span:nth-child(2) { opacity: 0; }
.nav.open .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- language switch (flags) ---------- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.lang-btn {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  overflow: hidden;
  opacity: 0.5;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.lang-btn:hover { opacity: 0.85; }

.lang-btn.active {
  opacity: 1;
  border-color: var(--accent);
}

.lang-btn svg {
  width: 26px;
  height: 18px;
  border-radius: 2px;
  display: block;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .nav-links { gap: 0; }
  .nav-link { padding: 8px 9px; font-size: 13px; }
  .nav-actions .btn { padding: 8px 13px; }
}

/* Mobile: collapse links into a dropdown under the bar (< 640px) */
@media (max-width: 640px) {
  .hamburger { display: flex; }
  .nav-actions-desktop { display: none; }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: 10px 16px 16px;
    background: var(--surface);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

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

  .nav-link { padding: 12px 12px; font-size: 15px; }

  .nav-actions-mobile {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }
  .nav-actions-mobile .btn { flex: 1; }

  .lang-switch { margin-left: auto; margin-right: 6px; }

  .ticker-updated { position: static; }
}