/* ══════════════════════════════════════════════════════
   header.css — Shared header / nav / search / wordmark chrome.
   "Convergence Grid" visual language: sharp 2px corners,
   hairline borders, IBM Plex Mono accents, light theme.

   Loaded on: index.html, calendar.html, portfolio.html,
   tickers.html, tickers-stocks.html, tickers-ticker.html.

   Cascade position: after design.css and footer.css, before
   each page's own <style> block — so page-specific rules can
   still win where a page genuinely needs to differ. Colors
   below are literal (not var()) so this file renders identically
   regardless of each page's own :root token values.

   Does NOT cover: .ticker-bar (owned by design.css directly —
   see its "Ticker bar" rule), or anything page-content-specific
   (news ledger rows, calendar tables, portfolio holdings, etc.).
   ══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

/* ── Header shell: hairline only, no drop shadow ── */
header {
  background: #FFFFFF;
  border-bottom: 1px solid #DDE3EC;
  box-shadow: none;
}

/* ── Logo: image mark + divider + mono tagline ── */
.site-logo {
  height: 34px;
  width: auto;
  flex-shrink: 0;
}
.site-divider {
  width: 1px;
  height: 22px;
  background: #DDE3EC;
  flex-shrink: 0;
}
.site-tagline {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5B6B84;
  line-height: 1.4;
}
@media (max-width: 640px) {
  .site-divider, .site-tagline { display: none; }
}

/* ── Live clock: HH:MM:SS (local timezone abbreviation), ticks every second ── */
.header-clock {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #5B6B84;
  flex-shrink: 0;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .header-clock { display: none; }
}

/* ── Nav links: Plus Jakarta Sans, mixed-case, underline-on-active ──
   (Verified against News Feed Redesign.dc.html's actual nav markup: no
   font-family override — inherits body's Jakarta Sans — no text-transform,
   normal-case "News"/"Tickers"/etc. The mono-uppercase treatment below was
   wrong; corrected. Font-weight distinguishes active from inactive, not
   an underline-only difference — active is 700, inactive is 600.) */
.header-nav-link {
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: #5B6B84;
  background: none;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  padding: 0.3rem 0.5rem;
}
.header-nav-link:hover { color: #0D1F3C; background: none; }
.header-nav-link.active { color: #0D1F3C; background: none; border-bottom-color: #000000; font-weight: 700; }

/* ── SAVED link ── */
.saved-link {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5B6B84;
  text-decoration: none;
  cursor: pointer;
  padding: 0.3rem 0.4rem;
  flex-shrink: 0;
}
.saved-link:hover { color: #0D1F3C; }

/* ── Search bar: horizontal line, no box ── */
.search-wrap input {
  background: #FFFFFF;
  border: none;
  border-bottom: 1px solid #DDE3EC;
  border-radius: 0;
  color: #0D1F3C;
}
.search-wrap input::placeholder { color: #8B97A8; }
.search-wrap input:focus { border-color: #000000; }
.search-wrap button {
  background: none;
  border: none;
  color: #000000;
  border-radius: 2px;
  transition: background 0.15s, color 0.15s;
}
.search-wrap button:hover {
  background: #000000;
  color: #FFFFFF;
  opacity: 1;
}

/* ── Notification bell: icon/badge colors only (panel shape/size untouched) ── */
.notif-bell-btn { color: #5B6B84; }
.notif-bell-btn:hover { color: #0D1F3C; background: #F7F8FA; }
.notif-badge { background: #C0392B; }
.notif-tab.active { color: #000000; border-bottom-color: #000000; }

/* ── Auth buttons / premium crown: no box, text-only ── */
.auth-btn {
  border: none;
  border-radius: 2px;
  color: #5B6B84;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  letter-spacing: normal;
}
.auth-btn:hover { color: #0D1F3C; }
.auth-btn.auth-btn-primary,
.auth-btn-primary {
  background: none;
  color: #000000;
}
.auth-btn.auth-btn-primary:hover,
.auth-btn-primary:hover { color: #000000; opacity: 1; text-decoration: underline; }
.premium-crown { color: #FFB800; }

/* ── Premium upgrade button: shared across all pages ── */
.auth-btn.btn-upgrade {
  background: none;
  color: #FF8C00;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
}
.auth-btn.btn-upgrade:hover { opacity: 0.75; }

/* ── Account button: solid black treatment, keeps its own box ── */
#btn-account {
  background: #000000;
  border: 1px solid #000000;
  color: #FFFFFF;
  transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
#btn-account:hover {
  background: #000000;
  border-color: #000000;
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}