/* Wolf Winner — self-contained header. Own classes, own layout, own colors. */

:root{
  --wwh-teal:  #02b0cb;
  --wwh-teal2: #018da3;
  --wwh-gold:  #e8be8c;
  --wwh-text:  #d5dde9;
  --wwh-bg:    linear-gradient(180deg,#0f1418 0%,#0b0f13 100%);
  --wwh-border: rgba(232,190,140,.22);
}

.ww-header,
.ww-header *,
.ww-header *::before,
.ww-header *::after{ box-sizing:border-box; }

.ww-header{
  position:fixed !important; top:0 !important; left:0; right:0; z-index:1000;
  width:100%;
  background:var(--wwh-bg);
  border-bottom:1px solid var(--wwh-border);
  box-shadow:0 4px 24px rgba(0,0,0,.35);
}
/* Push page content down to compensate for the fixed header */
body{ padding-top:82px !important; }
@media (max-width:900px){ body{ padding-top:66px !important; } }
@media (max-width:480px){ body{ padding-top:58px !important; } }
.ww-header::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(2,176,203,.4) 30%,rgba(232,190,140,.4) 70%,transparent);
  pointer-events:none;
}

/* Inner grid: on ALL viewports layout is
   [logo] [burger] [nav flex fill] [login] [register]                            */
.ww-header__inner{
  max-width:1200px; margin:0 auto;
  padding:14px 20px;
  display:grid;
  grid-template-columns: auto auto 1fr auto auto;
  align-items:center;
  gap:16px;
  position:relative;
}

/* --- Logo (grid col 1) --- */
.ww-header__logo{
  grid-column:1; grid-row:1;
  display:inline-block; line-height:0;
  transition:transform .2s ease, filter .2s ease;
  filter:drop-shadow(0 2px 8px rgba(2,176,203,.22));
  text-decoration:none;
}
.ww-header__logo:hover{ transform:scale(1.03); filter:drop-shadow(0 4px 14px rgba(2,176,203,.4)); }
.ww-header__logo img{ display:block; height:auto; max-width:180px; width:auto; }

/* --- Burger (grid col 2) — visible ONLY on mobile --- */
.ww-header__burger{
  grid-column:2; grid-row:1;
  display:none;
  width:38px; height:38px;
  padding:0; margin:0;
  background:transparent;
  border:1px solid var(--wwh-border);
  border-radius:10px;
  cursor:pointer;
  align-items:center; justify-content:center; flex-direction:column; gap:4px;
  transition:background .18s, border-color .18s;
}
.ww-header__burger:hover{ background:rgba(2,176,203,.08); border-color:rgba(2,176,203,.4); }
.ww-header__burger span{
  display:block; width:18px; height:2px;
  background:var(--wwh-text); border-radius:2px;
  transition:transform .25s, opacity .2s;
}
.ww-header.is-open .ww-header__burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.ww-header.is-open .ww-header__burger span:nth-child(2){ opacity:0; }
.ww-header.is-open .ww-header__burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* --- Nav (grid col 3) --- */
.ww-header__nav{
  grid-column:3; grid-row:1;
  display:flex; align-items:center; justify-content:center;
  gap:28px;
}
.ww-header__nav-link{
  position:relative;
  color:var(--wwh-text); font-weight:600; font-size:14px;
  padding:8px 4px;
  text-decoration:none; white-space:nowrap;
  transition:color .2s;
}
.ww-header__nav-link::after{
  content:""; position:absolute; left:50%; bottom:0;
  height:2px; width:0;
  background:linear-gradient(90deg,var(--wwh-teal),var(--wwh-gold));
  transform:translateX(-50%); transition:width .25s; border-radius:2px;
}
.ww-header__nav-link:hover{ color:var(--wwh-teal); }
.ww-header__nav-link:hover::after{ width:100%; }

/* --- CTA buttons (grid cols 4,5) --- */
.ww-header__login,
.ww-header__register{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 22px;
  font-family:inherit; font-weight:800; font-size:13px;
  text-transform:uppercase; letter-spacing:.5px;
  border-radius:26px;
  text-decoration:none; white-space:nowrap;
  cursor:pointer;
  transition:transform .15s, background .15s, color .15s, box-shadow .15s;
  line-height:1;
  border:0;
}
.ww-header__login{
  grid-column:4; grid-row:1;
  background:transparent;
  color:var(--wwh-gold);
  border:2px solid var(--wwh-gold);
  padding:8px 20px;
}
.ww-header__login:hover{ background:var(--wwh-gold); color:#0b1116; }
.ww-header__register{
  grid-column:5; grid-row:1;
  background:var(--wwh-teal); color:#0b1116;
  box-shadow:0 6px 18px rgba(2,176,203,.35);
}
.ww-header__register:hover{
  transform:translateY(-1px); background:var(--wwh-teal2); color:#fff;
  box-shadow:0 10px 24px rgba(2,176,203,.55);
}

/* ================= MOBILE ≤900px ================= */
@media (max-width:900px){
  .ww-header__inner{
    padding:12px 14px;
    gap:8px;
    /* Redefine grid: burger sits in col 2, nav is dropdown so drop from flow */
    grid-template-columns: auto auto 1fr auto auto;
  }
  .ww-header__logo img{ max-width:88px; }

  .ww-header__burger{ display:flex; }

  /* Nav becomes drawer under header — pulled out of grid via absolute positioning */
  .ww-header__nav{
    position:absolute;
    top:100%; left:0; right:0;
    background:linear-gradient(180deg,#141a20,#0f1519);
    border-top:1px solid var(--wwh-border);
    border-bottom:1px solid var(--wwh-border);
    box-shadow:0 12px 30px rgba(0,0,0,.45);
    flex-direction:column;
    align-items:stretch; justify-content:flex-start;
    gap:6px;
    padding:0 16px;
    max-height:0; overflow:hidden; opacity:0; pointer-events:none;
    transition:max-height .3s, opacity .25s, padding .3s;
    z-index:99;
  }
  .ww-header.is-open .ww-header__nav{
    max-height:520px; opacity:1; pointer-events:auto;
    padding:12px 16px 16px;
  }
  .ww-header__nav-link{
    display:block;
    padding:12px 14px;
    background:rgba(255,255,255,.03);
    border:1px solid var(--wwh-border);
    border-radius:10px;
    text-align:left;
  }
  .ww-header__nav-link::after{ display:none; }
  .ww-header__nav-link:hover{
    background:rgba(2,176,203,.12); color:var(--wwh-teal);
    border-color:rgba(2,176,203,.4);
  }

  .ww-header__login{
    padding:10px 18px; font-size:13px; letter-spacing:.3px;
    border-width:2px; border-radius:22px;
  }
  .ww-header__register{
    padding:11px 18px; font-size:13px; letter-spacing:.3px;
    border-radius:22px;
    box-shadow:0 4px 14px rgba(2,176,203,.35);
  }
}

@media (max-width:480px){
  .ww-header__inner{ padding:10px 10px; gap:6px; }
  .ww-header__logo img{ max-width:70px; }
  .ww-header__burger{ width:36px; height:36px; }
  .ww-header__burger span{ width:16px; }
  .ww-header__login{ padding:8px 14px; font-size:12px; letter-spacing:.2px; }
  .ww-header__register{ padding:9px 14px; font-size:12px; letter-spacing:.2px; }
}

/* Hide any leftover native header if it still exists */
header.page-header,
.top-panel{ display:none !important; }