/* ============================================================================
   site-header.css — the UNIFIED Stockertim site header (lifted from the home
   page's .h-top header) so every page wears the exact same chrome: logo +
   universal search + auth + hamburger (row 1), nav links + Platforms dropdown
   (row 2). Paired with partials/site-header.php + assets/site-header.js.

   Design tokens are scoped to the header elements (not :root) so this file can
   drop onto any page without clobbering that page's own CSS variables.
   ========================================================================== */
.h-top, .h-menu, .h-scrim, .h-ac {
  --dim:rgba(255,255,255,.93); --ink:#eef3fb; --muted:rgba(255,255,255,.93);
  --line:rgba(120,150,210,.14); --cyan:#3dd7f0;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.h-top a{color:inherit;text-decoration:none}
.h-wrap{max-width:1240px;margin:0 auto;padding:0 20px}
/* This header is STICKY (in normal flow), so the page needs no top padding to clear
   a fixed bar — neutralise any that the page's old (fixed) header left behind. Only
   loads on pages that use this header, so it can't affect anything else. */
body{padding-top:0 !important}

/* ── Top bar (row 1) ─────────────────────────────────────────────────────── */
.h-top{position:sticky;top:0;z-index:40;font-family:var(--sans);
  background:rgba(5,7,13,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.h-top-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:70px}
.h-logo{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:-.01em;flex:0 0 auto;min-width:0}
.h-logo img{height:26px;width:auto;display:block}

/* Universal search */
/* Yahoo-style: a rounded pill — text sits at the left edge, a solid cyan search
   button hugs the right edge (replaces the old inline left magnifier). */
.h-topsearch{position:relative;display:flex;align-items:center;gap:8px;background:rgba(120,150,210,.10);
  border:1px solid rgba(120,150,210,.22);border-radius:22px;padding:0 5px 0 18px;height:42px;
  flex:1 1 auto;min-width:0;max-width:600px;margin:0 12px;color:#9fb4d6}
.h-topsearch:focus-within{border-color:#44f1ff;background:rgba(68,241,255,.06)}
.h-topsearch input{flex:1;min-width:0;background:none;border:0;outline:0;color:#dbe6fb;font:inherit;font-size:14px;padding:0}
.h-topsearch input::placeholder{color:#8ba0c4}
.h-topsearch-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:999px;border:0;cursor:pointer;color:#04121a;background:linear-gradient(180deg,#5ef6ff,#28c8e0);transition:filter .12s}
.h-topsearch-btn:hover{filter:brightness(1.06)}
.h-topsearch-btn svg{width:17px;height:17px}

/* Autocomplete dropdown */
.h-ac{position:absolute;top:calc(100% + 6px);left:0;right:auto;width:min(420px,90vw);z-index:80;
  background:linear-gradient(180deg,rgba(8,12,22,.98),rgba(7,10,18,.98));border:1px solid rgba(120,150,210,.18);
  border-radius:18px;overflow:hidden;display:none;max-height:min(68vh,520px);overflow-y:auto;box-shadow:0 22px 60px rgba(0,0,0,.42)}
.h-ac.open{display:block}
.h-ac-sec{padding:12px 14px 6px;font:700 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.h-ac-item{display:flex;align-items:center;gap:12px;padding:11px 14px;cursor:pointer;border-bottom:1px solid rgba(120,150,210,.07);transition:background .12s}
.h-ac-item:hover{background:rgba(68,241,255,.06)}
.h-ac-item:last-child{border-bottom:none}
.h-ac-badge{display:flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;border-radius:11px;font:800 12px/1 var(--mono);letter-spacing:.04em;color:#fff;background:linear-gradient(160deg,#15455e,#0d2f44);border:1px solid rgba(255,255,255,.08)}
.h-ac-badge.inst{background:linear-gradient(160deg,#5e4a12,#3a2e0c);color:#ffce6b}
.h-ac-main{flex:1 1 auto;min-width:0}
.h-ac-row{display:flex;align-items:center;gap:8px;min-width:0}
.h-ac-item b{font-family:var(--mono);font-size:13px;color:#fff;flex:0 0 auto}
.h-ac-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--muted)}
.h-ac-meta{display:flex;align-items:center;gap:7px;margin-top:4px;min-width:0}
.h-ac-pill{display:inline-flex;align-items:center;padding:2px 7px;border-radius:999px;border:1px solid rgba(61,215,240,.2);font:700 10px/1 var(--mono);letter-spacing:.06em;color:var(--cyan);text-transform:uppercase}
.h-ac-country{flex:0 0 auto;display:inline-flex;align-items:center;padding:2px 7px;border-radius:999px;background:rgba(120,150,210,.12);font:600 10px/1 var(--mono);letter-spacing:.03em;color:#aeb9d6;white-space:nowrap}
.h-ac-empty{padding:18px 14px;color:var(--dim);font-size:13px;text-align:center}

/* Right cluster: premium icon · auth · hamburger */
.h-right{display:flex;align-items:center;gap:10px;flex:0 0 auto;margin-left:auto;white-space:nowrap}
.h-portfolio-ic{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:9px;color:#000;background:linear-gradient(180deg,#5ef6ff,#2bd4e6);text-decoration:none;flex:none}
.h-portfolio-ic svg{stroke:#000}
.h-portfolio-ic:hover{filter:brightness(1.06)}
.h-btn{font:inherit;font-size:14px;font-weight:700;cursor:pointer;border-radius:12px;padding:10px 16px;border:1px solid rgba(120,150,210,.18);background:rgba(255,255,255,.03);color:var(--ink);white-space:nowrap}
.h-btn.cyan{background:linear-gradient(180deg,#5ef6ff,#28c8e0);color:#04121a;border:none}
.h-burger{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:44px;font:inherit;font-size:20px;line-height:1;cursor:pointer;border:1px solid rgba(120,150,210,.18);background:rgba(255,255,255,.03);color:var(--ink);border-radius:12px;padding:0 12px}

/* ── Nav row (row 2) — links + Platforms dropdown ────────────────────────── */
.h-navrow{display:none;border-top:1px solid rgba(120,150,210,.12)}
@media(min-width:768px){.h-navrow{display:flex;align-items:center;gap:6px}}
.h-navrow-inner{display:flex;align-items:center;gap:6px;height:46px;overflow-x:auto;scrollbar-width:none;flex:1 1 auto;min-width:0}
.h-navrow-inner::-webkit-scrollbar{display:none}
.h-navrow-link{position:relative;display:inline-flex;align-items:center;gap:5px;padding:9px 14px;border-radius:8px;font-size:14px;font-weight:600;color:var(--dim);text-decoration:none;white-space:nowrap;background:none;border:0;cursor:pointer;font-family:inherit}
.h-navrow-link::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:4px;width:0;height:2px;border-radius:2px;background:var(--cyan);transition:width .18s ease}
.h-navrow-link:hover{color:#fff;background:rgba(120,150,210,.1)}
.h-navrow-link:hover::after{width:34%}
.h-navrow-link.is-active{color:#fff}
.h-navrow-link.is-active::after{width:56%}
/* Dropdown sits OUTSIDE the scrolling .h-navrow-inner (overflow-x:auto also clips
   overflow-y), so it's a flex sibling here and never gets cut off. */
.h-nav-dd{position:relative;flex:0 0 auto}
.h-nav-ddmenu{position:absolute;top:calc(100% + 8px);right:0;left:auto;min-width:230px;background:#0b1322;border:1px solid rgba(120,150,210,.18);border-radius:12px;padding:6px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s,transform .16s;box-shadow:0 24px 60px rgba(0,0,0,.5);z-index:60}
.h-nav-dd:hover .h-nav-ddmenu,.h-nav-dd:focus-within .h-nav-ddmenu,.h-nav-dd.open .h-nav-ddmenu{opacity:1;visibility:visible;transform:translateY(0)}
.h-nav-ddmenu a{display:block;padding:9px 12px;border-radius:8px;text-decoration:none;color:#dbe6fb}
.h-nav-ddmenu a:hover{background:rgba(120,150,210,.12)}
.h-nav-ddmenu a b{display:block;font-size:14px;color:#fff}
.h-nav-ddmenu a span{display:block;font-size:11.5px;color:#8ea3c7;margin-top:1px}

/* ── Mobile hamburger drawer + scrim ─────────────────────────────────────── */
.h-scrim{position:fixed;inset:0;background:rgba(3,5,10,.6);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:60;opacity:0;pointer-events:none;transition:opacity .2s}
.h-scrim.open{opacity:1;pointer-events:auto}
.h-menu{position:fixed;top:0;right:0;height:100vh;height:100dvh;width:min(320px,90vw);background:linear-gradient(180deg,#0b1120,#070b13);border-left:1px solid var(--line);z-index:71;transform:translateX(102%);transition:transform .24s;overflow:auto;padding:18px;padding-bottom:env(safe-area-inset-bottom,0px);font-family:var(--sans);color:var(--ink)}
.h-menu.open{transform:none}
.h-menu a{display:flex;align-items:center;gap:11px;padding:13px 12px;border-radius:11px;font-size:15px;font-weight:600;color:var(--ink);text-decoration:none}
.h-menu a:hover{background:rgba(255,255,255,.04)}
.h-menu .sec{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:14px 12px 4px}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media(max-width:820px){
  .h-wrap{padding:0 14px}
  .h-top-inner{min-height:62px;gap:10px}
  .h-logo img{height:23px}
  .h-btn{padding:9px 13px;font-size:13px}
  .h-burger{min-width:42px;height:42px;padding:0 11px;font-size:18px}
}
@media(max-width:767px){
  /* Search drops to its own full-width row below the logo/auth row (Yahoo style). */
  .h-top{padding-top:calc(env(safe-area-inset-top,0px) + 12px)}
  .h-top-inner{flex-wrap:wrap;row-gap:8px;align-items:center}
  .h-topsearch{order:3;flex:1 1 100%;max-width:none;min-width:0;margin:2px 0 2px;height:42px}
  .h-ac{width:100%}
}
@media(max-width:720px){.h-hide-mobile{display:none}}
/* Touch devices: 16px fields so iOS Safari never auto-zooms on focus. */
@media(pointer:coarse){.h-top input,.h-top textarea,.h-top select{font-size:16px !important}}