@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@500;600;700;800&display=swap");

/* =========================================================
   NAVBAR — Runetopic-style dark gaming header
   ========================================================= */
:root{
  --nav-h: 90px;
  --nav-h-mobile: 70px;

  --bg-1: #050912;
  --bg-2: #07101b;
  --bg-3: #0a1320;

  --gold: #c89a3c;
  --gold-soft: rgba(200, 154, 60, 0.35);
  --gold-border: rgba(200, 154, 60, 0.55);

  --text: #f5f1e8;
  --text-dim: rgba(245, 241, 232, 0.78);
  --border: rgba(200, 154, 60, 0.18);
  --shadow: rgba(0, 0, 0, 0.65);
}

/* main bar */
.navigation-bar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  height: var(--nav-h);
  display: flex;
  justify-content: center;
  align-items: center;

  background:
    linear-gradient(to bottom, rgba(6, 10, 18, 0.96), rgba(5, 9, 18, 0.94)),
    linear-gradient(90deg, var(--bg-1), var(--bg-2) 45%, var(--bg-3));
  border-bottom: 1px solid var(--gold-border);
  box-shadow:
    0 10px 28px var(--shadow),
    inset 0 -1px 0 rgba(255,255,255,0.02);
}

.navigation-bar::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,0.04), transparent 25%),
    radial-gradient(circle at 80% 0%, rgba(200,154,60,0.08), transparent 20%);
  opacity: 0.9;
}

.navigation-bar a{
  text-decoration: none !important;
}

.nav-inner{
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: stretch;
  position: relative;
  z-index: 1;
}

/* row */
.nav-menu-row{
  width: 100%;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* links */
.nav-link{
  flex: 0 1 auto;
  min-width: unset;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 26px;

  font-family: "Raleway", sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--text);

  position: relative;
  z-index: 1;
  transition:
    color 180ms ease,
    transform 180ms ease,
    opacity 180ms ease;
}

.nav-link:hover{
  color: #ffffff;
  transform: translateY(-1px);
}

/* remove glass panel hover */
.nav-link::before{
  display: none;
}

/* subtle gold underline on hover */
.nav-link::after{
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 20px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  opacity: 0;
  transform: scaleX(0.7);
  transition: opacity 180ms ease, transform 180ms ease;
}

.nav-link:hover::after{
  opacity: 1;
  transform: scaleX(1);
}

/* centered logo */
.nav-logo.center{
  flex: 0 0 170px;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}

.nav-logo-img{
  height: 82px;
  width: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 0 10px rgba(0,0,0,0.45))
    drop-shadow(0 0 12px rgba(140, 92, 255, 0.08));
  transition: transform 220ms ease, filter 220ms ease;
}

.nav-logo-img:hover{
  transform: scale(1.02);
  filter:
    drop-shadow(0 0 14px rgba(0,0,0,0.55))
    drop-shadow(0 0 16px rgba(200,154,60,0.12));
}

/* optional spacing so logo feels centered between link groups */
.nav-menu-row > .nav-link:nth-child(1),
.nav-menu-row > .nav-link:nth-child(2),
.nav-menu-row > .nav-link:nth-child(3){
  margin-right: 2px;
}

.nav-menu-row > .nav-link:nth-last-child(1),
.nav-menu-row > .nav-link:nth-last-child(2),
.nav-menu-row > .nav-link:nth-last-child(3){
  margin-left: 2px;
}

/* mobile button */
.menu-button{
  display: none;
  margin-left: auto;
  border: 1px solid var(--gold-border);
  background: linear-gradient(to bottom, rgba(18, 26, 40, 0.95), rgba(8, 14, 24, 0.95));
  color: var(--text);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 991px){
  .navigation-bar{
    height: var(--nav-h-mobile);
  }

  .nav-inner{
    max-width: 100%;
    padding: 0 14px;
    align-items: center;
  }

  .menu-button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
  }

  .nav-logo.center{
    display: none;
  }

  .nav-menu-row{
    position: absolute;
    top: var(--nav-h-mobile);
    left: 14px;
    right: 14px;

    height: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;

    background:
      linear-gradient(to bottom, rgba(8, 14, 24, 0.98), rgba(5, 9, 18, 0.98));
    border: 1px solid var(--gold-border);
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(0,0,0,.55);

    padding: 10px;
    display: none;
    z-index: 10000;
  }

  .nav-link{
    width: 100%;
    height: 48px;
    justify-content: flex-start;
    padding: 0 14px;
    font-size: 14px;
    letter-spacing: 1px;
    color: var(--text-dim);
    border-radius: 10px;
  }

  .nav-link:hover{
    color: #fff;
    background: rgba(200,154,60,0.08);
  }

  .nav-link::after{
    display: none;
  }
}

@media (max-width: 768px){
  .nav-logo-img{
    height: 52px;
  }
}

.navigation-bar.is-open .nav-menu-row{
  display: flex;
}

/* kill old forced background override */
.navigation-bar{
  background-image: none !important;
}
/* Hide the original headerX.php black topbar */
#header,
header#header,
.app-topbar {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Prevent old layout spacing from leaving a black strip */
body,
.wrapper,
.page-content,
.rt-page,
.rt-login-page {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Keep custom navbar above page content */
.navigation-bar {
    position: relative;
    z-index: 9999;
}