/* ============================================================
   MICHAELXCHANGE — PREMIUM SPORTSBOOK NAVIGATION
   Fixed 82px · 3 equal sections · center-anchored logo
   ============================================================ */

.mx-nav{
  position:fixed;top:0;left:0;right:0;z-index:120;
  height:72px;
  background:rgba(11,15,20,.96);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.06);
  font-family:'Inter','Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  transform:translateY(-100%);
  animation:mxNavSlide .65s cubic-bezier(.22,1,.36,1) .05s forwards;
  transition:box-shadow .3s ease;
  will-change:transform;
}
.mx-nav.mx-nav--scrolled{box-shadow:0 12px 36px rgba(0,0,0,.45)}
@keyframes mxNavSlide{to{transform:translateY(0)}}

.mx-nav__in{
  position:relative;height:100%;max-width:1440px;margin:0 auto;
  padding:0 48px;display:flex;align-items:center;justify-content:space-between;
}
@media(max-width:1280px){.mx-nav__in{padding:0 24px}}
@media(max-width:640px){.mx-nav__in{padding:0 18px}}

/* ---------- left / right sections ---------- */
.mx-nav__left,.mx-nav__right{flex:1 1 0;display:flex;align-items:center;min-width:0}
.mx-nav__left{justify-content:flex-start;gap:34px;padding-right:90px}
.mx-nav__right{justify-content:flex-end;gap:18px;padding-left:90px}
@media(max-width:1280px){.mx-nav__left{gap:24px;padding-right:72px}.mx-nav__right{gap:14px;padding-left:72px}}

/* ---------- menu links ---------- */
.mx-nav__link{
  position:relative;display:inline-flex;align-items:center;gap:5px;
  font-size:14px;font-weight:600;letter-spacing:.08em;line-height:1;
  color:rgba(255,255,255,.85);white-space:nowrap;
  transition:color .25s ease;
}
.mx-nav__link::after{
  content:"";position:absolute;left:50%;bottom:-10px;height:2px;width:0;
  background:linear-gradient(90deg,#E6C25C,#D4AF37,#B88919);border-radius:2px;
  transform:translateX(-50%);transition:width .25s ease;
}
.mx-nav__link:hover,.mx-nav__link.is-active{color:#D4AF37}
.mx-nav__link:hover::after,.mx-nav__link.is-active::after{width:100%}
.mx-nav__link.is-active{color:#D4AF37}
.mx-nav__link.is-active::after{width:100%}

/* staggered entrance for links */
.mx-nav__left>*,.mx-nav__right>*{animation:mxFade .55s ease both}
.mx-nav__left>*:nth-child(1){animation-delay:.14s}
.mx-nav__left>*:nth-child(2){animation-delay:.20s}
.mx-nav__left>*:nth-child(3){animation-delay:.26s}
.mx-nav__left>*:nth-child(4){animation-delay:.32s}
.mx-nav__right>*:nth-child(1){animation-delay:.24s}
.mx-nav__right>*:nth-child(2){animation-delay:.30s}
.mx-nav__right>*:nth-child(3){animation-delay:.36s}
.mx-nav__right>*:nth-child(4){animation-delay:.42s}
@keyframes mxFade{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}

/* ---------- sports dropdown ---------- */
.mx-nav__drop{position:relative;animation:none !important}
.mx-nav__caret{transition:transform .25s ease;margin-left:2px}
.mx-nav__drop:hover .mx-nav__caret{transform:rotate(180deg)}
.mx-nav__menu{
  position:absolute;top:calc(100% + 14px);left:0;min-width:224px;
  background:rgba(13,20,27,.98);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:8px;
  box-shadow:0 24px 55px rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s;
}
.mx-nav__drop:hover .mx-nav__menu,.mx-nav__drop:focus-within .mx-nav__menu{
  opacity:1;visibility:visible;transform:none;
}
.mx-nav__menu a{
  display:flex;align-items:center;padding:11px 14px;border-radius:9px;
  font-size:14px;font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.72);
  border-left:2px solid transparent;transition:color .2s,background .2s,border-color .2s;
}
.mx-nav__menu a:hover{color:#D4AF37;background:rgba(255,255,255,.05);border-left-color:#D4AF37}

/* ---------- logo ---------- */
.mx-nav__logo{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:232px;text-align:center;line-height:1;background:none;border:0;
  transition:transform .25s ease;
}
.mx-nav__logo:hover{transform:translate(-50%,-50%) scale(1.04)}
.mx-nav__name{
  font-size:21px;font-weight:800;letter-spacing:-.01em;color:#fff;white-space:nowrap;
}
.mx-nav__name span{color:#D4AF37}
.mx-nav__tag{
  margin-top:5px;font-size:8.5px;font-weight:700;letter-spacing:.42em;
  text-transform:uppercase;color:rgba(255,255,255,.45);white-space:nowrap;
}

/* ---------- buttons ---------- */
.mx-nav__cta{
  display:inline-flex;align-items:center;justify-content:center;
  height:36px;padding:0 18px;border-radius:10px;
  font-family:inherit;font-size:14px;font-weight:700;letter-spacing:.08em;
  white-space:nowrap;cursor:pointer;border:1px solid transparent;
  transition:transform .25s ease,background .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.mx-nav__cta--ghost{
  background:transparent;border-color:rgba(255,255,255,.15);color:rgba(255,255,255,.9);
}
.mx-nav__cta--ghost:hover{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.3);color:#fff;
  transform:scale(1.04);
}
.mx-nav__cta--gold{
  padding:0 26px;
  background:linear-gradient(135deg,#E6C25C,#D4AF37,#B88919);
  color:#111;box-shadow:0 8px 30px rgba(212,175,55,.30);
}
.mx-nav__cta--gold:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 38px rgba(212,175,55,.45);
}
@media(max-width:1280px){
  .mx-nav__cta--ghost{padding:0 20px}
  .mx-nav__cta--gold{padding:0 22px}
}

/* ---------- burger ---------- */
.mx-nav__burger{
  display:none;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;
  width:44px;height:44px;background:none;border:0;cursor:pointer;padding:0;margin-right:auto;
}
.mx-nav__burger span{width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .3s,opacity .3s}
.mx-nav--open .mx-nav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mx-nav--open .mx-nav__burger span:nth-child(2){opacity:0}
.mx-nav--open .mx-nav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- mobile panel ---------- */
.mx-nav__mobile{
  display:none;position:absolute;top:100%;left:0;right:0;
  flex-direction:column;gap:2px;padding:10px 24px 20px;
  background:rgba(11,15,20,.98);border-bottom:1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
}
.mx-nav__mobile a{
  padding:13px 4px;font-size:15px;font-weight:600;letter-spacing:.08em;
  color:rgba(255,255,255,.85);border-bottom:1px solid rgba(255,255,255,.06);
  transition:color .25s;
}
.mx-nav__mobile a:hover{color:#D4AF37}
.mx-nav--open .mx-nav__mobile{display:flex;animation:mxPanel .3s ease}

/* ---------- responsive ---------- */
@media(max-width:1279px){
  .mx-nav__link--hide-lg{display:none}
}
@media(max-width:1023px){
  .mx-nav__link--hide-md{display:none}
  .mx-nav__left{display:none}
  .mx-nav__right{justify-content:flex-end;padding-left:0}
  .mx-nav__burger{display:flex}
  .mx-nav__logo{width:170px}
  .mx-nav__name{font-size:19px}
}
@media(max-width:520px){
  .mx-nav__in{padding:0 18px}
  .mx-nav__right{gap:10px}
  .mx-nav__cta{height:40px;border-radius:10px;font-size:13px;padding:0 18px !important}
  .mx-nav__tag{letter-spacing:.3em}
}

@media(prefers-reduced-motion:reduce){
  .mx-nav{animation:none;transform:none}
  .mx-nav__left>*,.mx-nav__right>*{animation:none}
}