/* ===============================
   SPORTZ — GLASS HEADER (MOBILE OPTIMIZED)
   Scoped: .sni-header
   =============================== */

.sni-header{
  --header-bg: rgba(10,10,10,.45);
  --header-stroke: rgba(255,255,255,.12);
  --header-shadow: 0 18px 40px rgba(0,0,0,.25);
  --header-radius: 20px 50px 20px 50px;
  --ink:#fff;

  --wrap-max: 1320px;
  --top-gap: 14px;
  --pad-x: 18px;

  position:relative;
  z-index:1100;
  font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Main wrapper (fixed top) */
.sni-header .nav-wrap{
  position:fixed;
  top:var(--top-gap);
  left:50%;
  transform:translateX(-50%);
  width:min(96%, var(--wrap-max));
  z-index:1100;
}

/* Glass container */
.sni-header .nav-glass{
  background:var(--header-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border:1px solid var(--header-stroke);
  border-radius:var(--header-radius);
  box-shadow:var(--header-shadow);
  padding:16px var(--pad-x);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

/* Brand */
.sni-header .brand{display:flex; align-items:center; text-decoration:none}
.sni-header .brand img{height:50px; display:block}

/* Desktop Navigation */
.sni-header nav ul{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  gap:12px;
}

.sni-header nav a{
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  font-size:14px;
  font-weight:500;
  padding:10px 18px;
  border-radius:100px;
  display:flex;
  align-items:center;
  position:relative;
  transition: all .35s cubic-bezier(.22,1,.36,1);
}

/* Subtle ripple */
.sni-header nav a::before{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:0;
  height:0;
  border-radius:999px;
  opacity:0;
  background:radial-gradient(60px 60px at center, rgba(255,255,255,.14), rgba(255,255,255,0) 70%);
  transition:width .36s cubic-bezier(.22,1,.36,1),
              height .36s cubic-bezier(.22,1,.36,1),
              opacity .36s;
}
.sni-header nav a:hover::before{ width:140%; height:220%; opacity:1; }

.sni-header nav a:hover{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);
  transform:translateY(-4px) scale(1.1);
  box-shadow:0 12px 26px rgba(0,0,0,.30), 0 0 22px rgba(35,69,255,.35);
}

/* Actions */
.sni-header .actions{
  display:flex;
  gap:12px;
  align-items:center;
}

/* Social Icons */
.sni-header .social{
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  text-decoration:none;
  color:#fff;
  background:rgba(255,255,255,.06);
  border:1px solid var(--header-stroke);
  backdrop-filter: blur(8px);
  transition:all .35s cubic-bezier(.22,1,.36,1);
}
.sni-header .social:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.15);
  border-color:rgba(255,255,255,.22);
  box-shadow:0 8px 18px rgba(0,0,0,.28);
}

/* CTA Button */
.sni-header .cta{
  letter-spacing:.8px;
  text-transform:uppercase;
  font-size:14px;
  padding:0 30px;
  height:48px;
  border-radius:100px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  text-decoration:none;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
  backdrop-filter:blur(10px);
  transition:.35s cubic-bezier(.22,1,.36,1);
  position:relative;
  overflow:hidden;
  white-space:nowrap;
}
.sni-header .cta:hover{
  transform:translateY(-3px) scale(1.05);
  background:linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.10));
  border-color:rgba(255,255,255,.45);
  box-shadow:0 14px 28px rgba(0,0,0,.35), 0 0 28px rgba(35,69,255,.5);
}
.sni-header .cta::before{
  content:"";
  position:absolute;
  inset:-150% -50% auto -50%;
  height:220%;
  background:linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,0) 45%, rgba(255,255,255,.18));
  transform:skewX(-25deg) translateX(-20%);
  transition:transform .7s ease;
}
.sni-header .cta:hover::before{ transform:skewX(-25deg) translateX(35%); }

/* Hamburger (hidden on desktop) */
.sni-header .menu-btn{
  display:none;
  width:46px;
  height:46px;
  border-radius:14px;
  border:1px solid var(--header-stroke);
  background:rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0;
}
.sni-header .menu-btn span{
  display:block;
  width:22px;
  height:2px;
  background:#fff;
  border-radius:99px;
  opacity:.95;
}

/* Drawer Backdrop */
.sni-header .drawer-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  z-index:1099;
}

/* Drawer */
.sni-header .drawer{
  position:fixed;
  top:0;
  right:0;
  height:100vh;
  width:min(86vw, 380px);
  background:rgba(10,10,10,.72);
  border-left:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform:translateX(105%);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
  z-index:1100;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.sni-header .drawer.is-open{ transform:translateX(0); }

.sni-header .drawer-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.sni-header .drawer-brand img{height:42px; display:block}
.sni-header .drawer-close{
  width:42px; height:42px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
}

/* Drawer Nav */
.sni-header .drawer-nav{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top:4px;
}
.sni-header .drawer-link{
  color:#fff;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.6px;
  font-weight:600;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  transition:transform .25s ease, background .25s ease, border-color .25s ease;
}
.sni-header .drawer-link:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.18);
}

/* Drawer bottom */
.sni-header .drawer-actions{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.10);
}
.sni-header .drawer-socials{
  display:flex;
  gap:10px;
}
.sni-header .drawer-cta{
  height:50px;
  display:grid;
  place-items:center;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.8px;
  font-weight:700;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
}

/* ===============================
   Responsive behavior
   =============================== */

@media (max-width: 992px){
  .sni-header .nav-desktop{display:none;}
  .sni-header .socials-desktop{display:none;}
  .sni-header .menu-btn{display:flex; flex-direction:column;}
  .sni-header .nav-glass{
    padding:12px 14px;
    gap:10px;
  }
  .sni-header .brand img{height:44px;}
  .sni-header .cta{
    height:44px;
    padding:0 14px;
    font-size:12px;
    border-radius:14px;
  }
}

/* Smaller phones */
@media (max-width: 520px){
  .sni-header{ --top-gap: 10px; }
  .sni-header .nav-wrap{ width:min(96%, 700px); }
  .sni-header .brand img{height:40px;}
  .sni-header .cta{
    padding:0 12px;
    font-size:11px;
  }
  .sni-header .menu-btn{ width:44px; height:44px; }
}
/* ===============================
   DESKTOP FIX PATCH (override)
   Paste at END of css/header.css
   =============================== */

@media (min-width: 993px){

  /* Keep the glass bar stable and aligned */
  .sni-header .nav-glass{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:18px !important;
    padding:16px 18px !important;
  }

  /* Logo area fixed width so it doesn't collapse */
  .sni-header .brand{
    flex:0 0 auto !important;
    display:flex !important;
    align-items:center !important;
  }
  .sni-header .brand img{
    height:50px !important;
    width:auto !important;
    max-width:170px;      /* adjust if needed */
    object-fit:contain !important;
    display:block !important;
  }

  /* Desktop nav should be centered and not wrap */
  .sni-header .nav-desktop{
    flex:1 1 auto !important;
    display:flex !important;
    justify-content:center !important;
  }
  .sni-header .nav-desktop ul{
    display:flex !important;
    align-items:center !important;
    gap:14px !important;
    flex-wrap:nowrap !important;
    white-space:nowrap !important;
  }
  .sni-header .nav-desktop a{
    padding:10px 16px !important;
    transform:none !important; /* prevents weird push on hover */
  }

  /* Actions stay on the right, in one row */
  .sni-header .actions{
    flex:0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
  }

  /* Social icons MUST be horizontal on desktop */
  .sni-header .socials-desktop{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    flex-direction:row !important;
  }

  /* CTA normal size */
  .sni-header .cta{
    height:48px !important;
    padding:0 26px !important;
    font-size:13px !important;
    border-radius:999px !important;
    white-space:nowrap !important;
  }

  /* Hamburger must not disturb desktop */
  .sni-header .menu-btn{
    display:none !important;
  }

  /* Drawer/backdrop disabled on desktop */
  .sni-header .drawer,
  .sni-header .drawer-backdrop{
    display:none !important;
  }
}