/* =====================================================================
   BotLeague navbar — shared by every page (source: International page)
   Needs: the <header class="site-header"> markup + navbar.js.
   Fonts: Inter (links). Load in <head>:
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
   ===================================================================== */

/* Tokens (scoped to the navbar so they don't clash with your page) */
.site-header{
  --nav-bg:rgba(5,5,5,.92);
  --nav-bg-solid:#050505;
  --nav-rule:#242428;
  --nav-rule-2:#333338;
  --nav-text:#bcbec4;
  --nav-text-hover:#f1f1f2;
  --nav-accent:#ee3a33;
  --nav-font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --nav-h:70px;
  --nav-gutter:20px;
  --nav-max:1160px;
}

/* Bar */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--nav-bg);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--nav-rule);
}
.site-header *,.site-header *::before,.site-header *::after{box-sizing:border-box}
.site-header .bar{
  width:min(var(--nav-max),100% - var(--nav-gutter)*2);margin-inline:auto;
  height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}

/* Logo */
.site-header .brand{display:flex;align-items:center;flex:none;text-decoration:none}
.site-header .brand img{display:block;height:clamp(30px,4.2vw,42px);width:auto}

/* Links (desktop) */
.site-header .nav-links ul{display:flex;align-items:center;gap:clamp(18px,2.6vw,34px);margin:0;padding:0;list-style:none}
.site-header .nav-links a{
  display:block;padding:8px 0;
  font:500 15px var(--nav-font);color:var(--nav-text);
  text-decoration:none;white-space:nowrap;
  transition:color .15s;
}
.site-header .nav-links a:hover{color:var(--nav-text-hover)}
/* Current page: add aria-current="page" to the active link */
.site-header .nav-links a[aria-current=page]{color:var(--nav-text-hover);box-shadow:inset 0 -2px 0 var(--nav-accent)}
.site-header a:focus-visible,.site-header button:focus-visible{outline:2px solid var(--nav-accent);outline-offset:3px}

/* Hamburger button (hidden on desktop) */
.site-header .menu-toggle{
  display:none;width:44px;height:44px;padding:0;
  background:none;border:1px solid var(--nav-rule-2);cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.site-header .menu-toggle span{display:block;width:20px;height:2px;background:var(--nav-text-hover);transition:transform .2s,opacity .2s}
/* Turns into an X when open */
.site-header .menu-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-header .menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.site-header .menu-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Tablet and phone (≤768px): hamburger + dropdown */
@media (max-width:768px){
  .site-header{--nav-h:62px}
  .site-header .menu-toggle{display:flex}
  .site-header .nav-links{
    position:absolute;top:100%;left:0;right:0;
    display:none;
    background:var(--nav-bg-solid);border-bottom:1px solid var(--nav-rule);
  }
  .site-header .nav-links.open{display:block}
  .site-header .nav-links ul{flex-direction:column;align-items:stretch;gap:0;padding:8px var(--nav-gutter) 16px}
  .site-header .nav-links a{padding:14px 0;font-size:16px;border-bottom:1px solid var(--nav-rule)}
  .site-header .nav-links li:last-child a{border-bottom:0}
  .site-header .nav-links a[aria-current=page]{box-shadow:none;color:var(--nav-accent)}
}
@media (max-width:480px){
  .site-header{--nav-gutter:16px}
}

@media (prefers-reduced-motion:reduce){
  .site-header .menu-toggle span,.site-header .nav-links a{transition:none}
}

/* Optional: so in-page anchor links don't hide under the sticky bar */
html{scroll-padding-top:70px}
@media (max-width:768px){html{scroll-padding-top:62px}}