/*
  Shared site header (Tplus Brand Guide v1.0).
  Load after a page's own styles. Markup:

  <header class="site-header">
    <a class="brand-lockup" href="/" aria-label="Tplus home">
      <img class="logomark" src="/assets/brand/tplus-logomark.svg" alt="" width="50" height="50">
      <picture>
        <source media="(max-width: 960px)" srcset="/assets/brand/tplus-wordmark-vert-white.svg" width="59" height="30">
        <img class="wordmark" src="/assets/brand/tplus-wordmark-white.svg" alt="TPLUS.CX" width="199" height="20">
      </picture>
    </a>
    <nav class="site-nav" aria-label="Primary"> …links… </nav>
    <a class="trade-btn" href="https://terminal.tplus.cx">Trade</a>
  </header>

  Lockup geometry from Brand Guide 4.1 / 4.2 / 4.5, in units of H = logomark height (H ≥ 50px).
  On the red header (4.3 On Color): primary yellow logomark; wordmark in white (the guide's alternative colours are black or white).
  Wordmark is the "Hor Elong Flat - Stroke Shadow" variant (3.2). In the guide's lockup of that variant
  (4.1, bottom-left) it is ≈ 0.39H tall incl. shadow, set ≈ 0.18H from the logomark, centred vertically.
  At ≤960px it switches (via <picture>) to the "Vert Elong Flat" variant at ≈ 0.6H tall, as in the 4.2 lockup.
  Clear space: the 4.2 dashed minimum is ≈ 0.22H; we use 16px (0.32H) above/below and 40px (0.8H) to the nav.
*/
:root {
  --logo-h: 50px;
  --lockup-clear-y: 16px;
  --lockup-clear-x: calc(var(--logo-h) * 0.8);
  --header-h: calc(var(--logo-h) + 2 * var(--lockup-clear-y) + 4px);
}

/* The header replaces the old top banner and runs edge to edge, whatever the page's body padding. */
body:has(.site-header) { padding-top: 0 !important; }

.site-header {
  box-sizing: border-box;
  position: sticky; /* stays pinned to the top while the page scrolls */
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--lockup-clear-x);
  width: 100vw;
  margin: 0 0 0 calc(50% - 50vw);
  padding: var(--lockup-clear-y) 40px;
  background: #FF0000; /* brand primary red */
  border: 0;
  border-bottom: 4px solid #000000;
  line-height: 1.2;
  text-align: left;
}
.site-header, .site-header * { font-family: Arial, Helvetica, sans-serif !important; }
.site-header *, .site-header *::before, .site-header *::after { box-sizing: border-box; }

.site-header .brand-lockup {
  display: flex;
  align-items: center;
  gap: calc(var(--logo-h) * 0.18);
  flex-shrink: 0;
  padding: 0;
  border: 0;
}
.site-header .brand-lockup picture,
.site-header .brand-lockup img { display: block; max-width: none; }
.site-header .logomark { height: var(--logo-h); width: var(--logo-h); }
.site-header .wordmark { height: calc(var(--logo-h) * 0.39); width: auto; }

.site-header .site-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
/* Dotted underline like the research page links (main.css `a`), in white on the red header */
.site-header .site-nav a {
  color: #FFFFFF;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border-bottom: 1px dotted #FFFFFF;
  padding: 0 0 2px;
  white-space: nowrap;
  transition: color 0.2s;
}
.site-header .site-nav a:hover,
.site-header .site-nav a:focus-visible { color: #FFFF00; border-bottom-color: #FFFF00; }
.site-header .site-nav a:focus-visible { outline: 2px solid #000000; outline-offset: 3px; }

/* Trade CTA: yellow fill, black frame, hard black backshadow (after the wordmark's backshadow) */
.site-header .trade-btn {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-block;
  padding: 10px 28px;
  background: #FFFF00;
  color: #000000;
  border: 3px solid #000000;
  box-shadow: 4px 4px 0 #000000;
  font-size: 18px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.5px;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 80ms ease, box-shadow 80ms ease;
}
.site-header .trade-btn:hover,
.site-header .trade-btn:focus-visible {
  color: #000000;
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #000000;
  outline: none;
}
.site-header .trade-btn:active { transform: translate(4px, 4px); box-shadow: none; }

@media (max-width: 960px) {
  /* One row: lockup + Trade. Vertical wordmark, no nav links. */
  .site-header { column-gap: 20px; padding: var(--lockup-clear-y) 20px; }
  .site-header .wordmark { height: calc(var(--logo-h) * 0.6); }
  .site-header .site-nav { display: none; }
  .site-header .trade-btn { font-size: 16px; padding: 8px 18px; }
}