/* =========================================================
   SLACKER ESPORTS — LOCKED MASTER HEADER v8
   Desktop: logo | navigation | account on ONE row.
   ========================================================= */

html body > header{
  position:relative !important;
  display:block !important;
  width:100% !important;
  height:58px !important;
  min-height:58px !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  background:#0b0e12 !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
  color:#e9edf1 !important;
  z-index:99999 !important;
  font-family:Arial, Helvetica, sans-serif !important;
}

html body > header *,
html body > header *::before,
html body > header *::after{
  box-sizing:border-box !important;
}

/* Locked desktop row. High specificity prevents page CSS from changing it. */
html body > header > .container.nav{
  width:min(calc(100% - 48px), 1400px) !important;
  height:58px !important;
  min-height:58px !important;
  margin:0 auto !important;
  padding:0 !important;
  display:grid !important;
  grid-template-columns:minmax(260px, 1fr) auto minmax(260px, 1fr) !important;
  grid-template-rows:58px !important;
  align-items:center !important;
  justify-items:stretch !important;
  column-gap:28px !important;
}

/* LEFT: BRAND */
html body > header .brand{
  grid-column:1 !important;
  grid-row:1 !important;
  justify-self:start !important;
  align-self:center !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  width:auto !important;
  height:58px !important;
  margin:0 !important;
  padding:0 !important;
  color:#dfe3e7 !important;
  text-decoration:none !important;
  font-size:17px !important;
  font-weight:800 !important;
  line-height:1 !important;
  letter-spacing:.08em !important;
  white-space:nowrap !important;
}

html body > header .brand span{ color:#d9b85b !important; }

html body > header .brand-mark{
  display:block !important;
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  max-width:42px !important;
  max-height:42px !important;
  margin:0 !important;
  padding:0 !important;
  object-fit:contain !important;
  flex:0 0 42px !important;
}

/* CENTER: NAVIGATION — forced to stay on row 1 */
html body > header > .container.nav > nav{
  grid-column:2 !important;
  grid-row:1 !important;
  display:block !important;
  align-self:center !important;
  justify-self:center !important;
  width:auto !important;
  height:58px !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
}

html body > header nav ul{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:center !important;
  gap:24px !important;
  width:auto !important;
  height:58px !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}

html body > header nav li{
  display:block !important;
  position:relative !important;
  width:auto !important;
  height:58px !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}

html body > header nav a,
html body > header .slacker-community-toggle{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  height:58px !important;
  min-height:58px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
  color:#b8bec6 !important;
  text-decoration:none !important;
  font-family:Arial, Helvetica, sans-serif !important;
  font-size:10px !important;
  font-weight:800 !important;
  line-height:1 !important;
  letter-spacing:.10em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
  cursor:pointer !important;
  transition:color .15s ease !important;
}

html body > header nav a:hover,
html body > header nav a:focus,
html body > header .slacker-community-toggle:hover,
html body > header .slacker-community-toggle:focus{
  color:#e0bd61 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  transform:none !important;
}

html body > header nav a::before,
html body > header nav a::after,
html body > header .slacker-community-toggle::before{
  display:none !important;
  content:none !important;
}

html body > header .slacker-community-toggle::after{
  content:" ▾" !important;
  display:inline !important;
  margin-left:2px !important;
  font-size:.72em !important;
  opacity:.75 !important;
}

/* RIGHT: LOGIN / LOGOUT */
html body > header .account-actions{
  grid-column:3 !important;
  grid-row:1 !important;
  justify-self:end !important;
  align-self:center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  width:auto !important;
  height:58px !important;
  margin:0 !important;
  padding:0 !important;
}

html body > header .account-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:36px !important;
  margin:0 !important;
  padding:0 14px !important;
  border:1px solid #2c3540 !important;
  border-radius:10px !important;
  background:#151b22 !important;
  color:#dfe4e8 !important;
  text-decoration:none !important;
  font-family:Arial, Helvetica, sans-serif !important;
  font-size:9px !important;
  font-weight:800 !important;
  line-height:1 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
}

html body > header .discord-icon{
  margin-right:6px !important;
  color:#7186d8 !important;
}

html body > header #slacker-logout{ display:none !important; }

html body > header #slacker-account-actions.logged-in .account-login{ display:none !important; }

html body > header #slacker-account-actions.logged-in #slacker-logout{
  display:inline-flex !important;
  background:#d32f2f !important;
  border-color:#d32f2f !important;
  color:#fff !important;
}

html body > header #slacker-logout:hover{
  background:#e53935 !important;
  border-color:#e53935 !important;
}

/* COMMUNITY DROPDOWN */
html body > header .slacker-community-nav-item{ position:relative !important; }

html body > header .slacker-community-dropdown{
  position:absolute !important;
  top:58px !important;
  left:50% !important;
  display:block !important;
  width:max-content !important;
  min-width:205px !important;
  height:auto !important;
  margin:0 !important;
  padding:8px !important;
  transform:translateX(-50%) translateY(-6px) !important;
  background:#17191d !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:12px !important;
  box-shadow:0 18px 40px rgba(0,0,0,.38) !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  z-index:100000 !important;
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease !important;
}

html body > header .slacker-community-menu.open > .slacker-community-dropdown{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translateX(-50%) translateY(0) !important;
}

html body > header .slacker-community-dropdown a{
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:11px 13px !important;
  border:0 !important;
  border-radius:8px !important;
  background:transparent !important;
  color:#f4f4f4 !important;
  text-decoration:none !important;
  font-family:Arial, Helvetica, sans-serif !important;
  font-size:13px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
}

html body > header .slacker-community-dropdown a:hover{
  background:rgba(255,255,255,.07) !important;
  color:#fff !important;
}

/* Hidden by default. JS reveals these ONLY after successful Discord auth status. */
html body > header .slacker-community-dropdown .community-auth{
  display:none !important;
}

html body.slacker-user-logged-in > header .slacker-community-dropdown .community-auth{
  display:block !important;
}

/* MOBILE */
html body > header .menu-toggle{ display:none !important; }

@media(max-width:1150px){
  html body > header{ height:auto !important; min-height:58px !important; }

  html body > header > .container.nav{
    grid-template-columns:1fr auto !important;
    grid-template-rows:58px auto !important;
    height:auto !important;
  }

  html body > header .account-actions{
    display:none !important;
  }

  html body > header .menu-toggle{
    display:inline-flex !important;
    grid-column:2 !important;
    grid-row:1 !important;
    align-items:center !important;
    justify-content:center !important;
    width:38px !important;
    height:36px !important;
    margin:0 !important;
    padding:0 !important;
    border:1px solid #2c3540 !important;
    border-radius:9px !important;
    background:#151b22 !important;
    color:#fff !important;
    font-size:18px !important;
  }

  html body > header > .container.nav > nav{
    display:none !important;
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    justify-self:stretch !important;
    width:100% !important;
    height:auto !important;
    padding:0 0 14px !important;
  }

  html body > header > .container.nav > nav.is-open{ display:block !important; }

  html body > header nav ul{
    height:auto !important;
    flex-wrap:wrap !important;
    justify-content:flex-start !important;
    gap:0 22px !important;
  }

  html body > header nav li{ height:40px !important; }
  html body > header nav a,
  html body > header .slacker-community-toggle{
    height:40px !important;
    min-height:40px !important;
  }
}

@media(max-width:700px){
  html body > header > .container.nav{
    width:calc(100% - 24px) !important;
  }

  html body > header .brand{
    font-size:14px !important;
  }

  html body > header .brand-mark{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
    flex-basis:34px !important;
  }

  html body > header nav ul{ display:block !important; }
  html body > header nav li{
    height:auto !important;
    border-top:1px solid rgba(255,255,255,.06) !important;
  }

  html body > header nav a,
  html body > header .slacker-community-toggle{
    width:100% !important;
    justify-content:flex-start !important;
  }

  html body > header .slacker-community-dropdown{
    position:static !important;
    width:100% !important;
    min-width:0 !important;
    transform:none !important;
    box-shadow:none !important;
  }

  html body > header .slacker-community-menu.open > .slacker-community-dropdown{
    transform:none !important;
  }
}