/* TorchRank theme — bittensor.torchrank.com (minimal + safe)
   Goal: keep a single bright top bar and DO NOT override the homepage header
   Date: 2025-09-04
*/

/* ---- Tokens you can tweak safely ---- */
:root{
  /* Brand gradient (homepage uses orange→gold; adjust here if desired) */
  --brand1: #ff8a00;  /* orange */
  --brand2: #ffc000;  /* gold  */

  /* Top bar height */
  --topbar-h: 8px;
}

/* ---- Single bright fixed top bar ---- */
.brand-bar{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: linear-gradient(90deg, var(--brand1), var(--brand2));
  z-index: 2000;
}

/* ---- DO NOT override the homepage header/nav — hard reset any prior sticky rules ---- */
#brand.brand{
  position: static !important;   /* scrolls like the main site header */
  top: auto !important;
}

/* ---- Do not touch link sizing/colors or Tailwind classes on the homepage ---- */
/* (intentionally no global a{}, .brand-nav{}, .brand-title{}, etc.) */

/* ---- Optional utility for pages that want a container (ignored by homepage if unused) ---- */
.container{ max-width:1200px; margin:0 auto; padding:0 16px }

/* ---- Hide any legacy skinny bars from older pages so we only have one bar ---- */
:where(.top-strip,.color-bar,.old-brand-bar,#top-strip,#color-bar){ display:none !important; }

/* THEME_STRIP_LOCK: bt-20250904-fix7 — single bar, orange/gold edges → teal center, fixed header */

:root{
  --brand-bar-h: 12px;   /* thickness of the color bar (10–14px looks good) */
  --brand-h: 60px;       /* header height */
  --c-orange: #ff8a00;
  --c-gold:   #ffc000;
  --c-teal:   #12e3d3;
}

/* 0) Kill any other skinny bars (legacy .learn-strip / .color-bar, etc.) */
:where(.top-strip,.learn-strip,.color-bar,#top-strip,#color-bar){
  display: none !important;
}

/* 1) The ONLY bar: fixed to very top */
.brand-bar{
  position: fixed !important;
  inset: 0 0 auto 0;                /* top:0; left:0; right:0 */
  height: var(--brand-bar-h) !important;
  /* Orange→Gold edges, Teal in the middle (symmetrical left/right) */
  background: linear-gradient(
    90deg,
    var(--c-orange) 0%,
    var(--c-gold)   14%,
    var(--c-teal)   50%,
    var(--c-gold)   86%,
    var(--c-orange) 100%
  ) !important;
  z-index: 2000 !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}

/* 2) Header fixed directly under the bar (no scroll jump, no gap) */
#brand.brand{
  position: fixed !important;
  top: var(--brand-bar-h) !important;
  left: 0; right: 0; width: 100%;
  z-index: 1500 !important;

  min-height: var(--brand-h);
  background: rgba(11,15,24,.92);
  backdrop-filter: saturate(120%) blur(6px);
  -webkit-backdrop-filter: saturate(120%) blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin: 0 !important;  /* stop any stray margins pushing it down */
}

/* 3) Push page content below the fixed bar + header */
body{
  padding-top: calc(var(--brand-bar-h) + var(--brand-h)) !important;
}

/* 4) Nav sizing to match bittensor page */
.brand-nav a{
  font-size: .90rem !important;
  padding: 6px 8px !important;
}