/* ============================================================
   Theory 8 — shared site header (used by every page)
   Rendered by nav.js into <div id="site-header"></div>.
   One source of truth so the header is identical site-wide.
   ============================================================ */
.t8-topbar{border-bottom:1px solid var(--line,#1c2b26);background:rgba(5,11,9,.9);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  position:sticky;top:0;z-index:100;}
.t8-topbar .t8-row{display:flex;align-items:center;gap:16px;
  padding:14px 24px;max-width:1080px;margin:0 auto;}
.t8-topbar .t8-brand{display:flex;align-items:center;gap:10px;margin-right:auto;}
.t8-topbar .t8-brand img{height:30px;display:block;}
.t8-topbar .t8-brand .wm{font-family:var(--font-display,"Sora",sans-serif);font-weight:700;font-size:16px;color:#fff;}
.t8-topbar .t8-brand .wm .n{font-style:italic;color:var(--accent,#2E9E6F);}

/* Link cluster */
.t8-topbar .t8-links{display:flex;align-items:center;gap:22px;}
.t8-topbar .t8-links a{font-family:var(--font-mono,"JetBrains Mono",monospace);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fog-2,#c2cfca);font-weight:500;
  transition:color .18s;cursor:pointer;background:none;border:0;}
.t8-topbar .t8-links a:hover{color:var(--bright,#2E9E6F);}
/* Pill CTA (Start training / My training) */
.t8-topbar .t8-links a.t8-cta{color:var(--bright,#2E9E6F);font-weight:600;
  border:1px solid var(--line-bright,#294139);padding:6px 14px;border-radius:20px;}
.t8-topbar .t8-links a.t8-cta:hover{background:rgba(46,158,111,.08);color:var(--bright,#2E9E6F);}
/* Log out is a quieter link */
.t8-topbar .t8-links a.t8-logout{color:var(--fog,#7f918b);}
.t8-topbar .t8-links a.t8-logout:hover{color:var(--fog-2,#c2cfca);}

/* Burger (hidden on desktop) */
.t8-topbar .t8-burger{display:none;background:none;border:0;color:#fff;cursor:pointer;padding:4px;margin-left:4px;}
.t8-topbar .t8-burger svg{display:block;}
.t8-topbar .t8-burger .ic-close{display:none;}
.t8-topbar.menu-open .t8-burger .ic-open{display:none;}
.t8-topbar.menu-open .t8-burger .ic-close{display:block;}

/* -------- Mobile -------- */
@media (max-width:860px){
  .t8-topbar .t8-row{padding:12px 16px;position:relative;}
  .t8-topbar .t8-brand img{height:24px;}
  .t8-topbar .t8-brand .wm{font-size:14px;white-space:nowrap;}
  .t8-topbar .t8-burger{display:flex;align-items:center;justify-content:center;}
  .t8-topbar .t8-links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(5,11,9,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line,#1c2b26);
    padding:6px 0;max-height:0;overflow:hidden;transition:max-height .3s ease;}
  .t8-topbar.menu-open .t8-links{max-height:70vh;}
  .t8-topbar .t8-links a{padding:15px 24px;font-size:14px;letter-spacing:.08em;
    border-bottom:1px solid rgba(28,43,38,.5);}
  .t8-topbar .t8-links a:last-child{border-bottom:0;}
  .t8-topbar .t8-links a.t8-cta{display:block;box-sizing:border-box;text-align:center;
    border:1px solid var(--line-bright,#294139);border-radius:10px;
    margin:12px 20px 8px;padding:14px 16px;font-size:12px;}
}