/* ============================================================
   NAVBAR — SA FITNESS
   Premium, art-directed header. Signature accent system: deep
   navy/black foundation + electric blue (SA FITNESS / on-dark)
   + vibrant pink (SA LIBRARY / on-paper). Geometry references
   gym equipment — repetition, gauges, machined edges — without
   literal icons.
   Scoped entirely to header/.nav/.drawer selectors so nothing
   outside the navbar is affected.
   ============================================================ */

:root{
  --nav-blue:#3E7BFA;
  --nav-blue-dim:rgba(62,123,250,0.16);
  --nav-pink:#FF3F91;
  --nav-pink-dim:rgba(255,63,145,0.16);
  --nav-ease:cubic-bezier(.2,.8,.3,1);
}

header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:26px 0;
  transition:background .5s var(--nav-ease), border-color .5s var(--nav-ease), padding .35s var(--nav-ease), box-shadow .5s var(--nav-ease), color .35s;
  border-bottom:1px solid transparent; color:var(--fit-ink);
}
header::after{
  /* calibration line — appears once scrolled, reads as a machined edge */
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, var(--nav-blue) 35%, var(--nav-pink) 65%, transparent);
  opacity:0; transition:opacity .6s var(--nav-ease);
}
header.scrolled::after{opacity:0.55;}
header.scrolled{
  background:rgba(6,7,12,0.78); backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-color:var(--fit-line); padding:17px 0; box-shadow:0 1px 24px rgba(0,0,0,0.22);
}
header.on-paper{color:var(--lib-ink);}
header.on-paper.scrolled{background:rgba(244,239,228,0.84); border-color:var(--lib-line); box-shadow:0 1px 24px rgba(33,29,22,0.07);}
.nav{display:flex; align-items:center; justify-content:space-between; gap:28px;}

/* ---- brand lockup: SA FITNESS  /  SA LIBRARY ---- */
.brand{display:flex; align-items:center; gap:16px; min-width:0;}
.brand-fit-link{display:flex; align-items:center; gap:13px; color:inherit; border-radius:3px;}
.brand-fit-link:focus-visible{outline:2px solid var(--nav-blue); outline-offset:6px;}

.brand-mark{flex:none; display:block; width:36px; height:36px; object-fit:contain; transition:transform .5s var(--nav-ease);}
header.scrolled .brand-mark{transform:scale(0.86);}
.brand:hover .brand-mark{transform:rotate(-4deg);}

.brand-fit{display:flex; align-items:baseline; gap:6px; white-space:nowrap;}
.brand-fit .sa{
  font-family:"Anton",sans-serif; font-size:1.24rem; letter-spacing:0.01em;
  background:linear-gradient(120deg, var(--nav-blue), var(--nav-pink));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand-fit .fitness{font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:0.86rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--fit-ink); transition:color .35s var(--nav-ease);}
header.on-paper .brand-fit .fitness{color:var(--lib-ink);}

.brand-div{width:1px; height:20px; background:currentColor; opacity:0.2; flex:none;}

.brand-lib{
  font-family:"Fraunces",Georgia,serif; font-style:italic; font-weight:500; font-size:0.94rem; letter-spacing:0.005em;
  color:var(--nav-pink); opacity:0.72; transition:opacity .35s var(--nav-ease); white-space:nowrap; border-radius:2px;
}
.brand-lib:hover,.brand-lib:focus-visible{opacity:1;}
.brand-lib:focus-visible{outline:2px solid var(--nav-pink); outline-offset:5px;}

/* ---- nav links: gauge-style active indicator ---- */
.nav-links{display:flex; align-items:center; gap:34px; list-style:none; margin:0; padding:0;}
.nav-links a{
  font-family:"Space Mono",monospace; font-size:0.7rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  position:relative; padding:8px 1px; color:currentColor; opacity:0.5;
  transition:opacity .3s var(--nav-ease), color .3s var(--nav-ease), transform .3s var(--nav-ease);
  display:inline-block; border-radius:2px;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:repeating-linear-gradient(90deg, var(--nav-blue) 0 6px, transparent 6px 9px);
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--nav-ease), background .3s;
}
header.on-paper .nav-links a::after{background:repeating-linear-gradient(90deg, var(--nav-pink) 0 6px, transparent 6px 9px);}
.nav-links a:hover{opacity:0.85; transform:translateY(-1px);}
.nav-links a:hover::after{transform:scaleX(1);}
.nav-links a.active{opacity:1; color:var(--nav-blue);}
header.on-paper .nav-links a.active{color:var(--nav-pink);}
.nav-links a.active::after{transform:scaleX(1);}
.nav-links a:focus-visible{outline:2px solid var(--nav-blue); outline-offset:4px; opacity:1;}
header.on-paper .nav-links a:focus-visible{outline-color:var(--nav-pink);}

/* ---- CTA: JOIN NOW — REST / ACTIVE(hover) / PRESS(:active) ---- */
.nav-cta{display:flex; align-items:center; gap:22px;}
.btn-join{
  position:relative; display:inline-flex; align-items:center; gap:10px; overflow:hidden;
  font-family:"Space Mono",monospace; font-weight:700; font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase;
  padding:12px 20px; border-radius:3px; border:1px solid var(--nav-blue); color:var(--fit-ink);
  transition:color .35s var(--nav-ease), border-color .4s var(--nav-ease), transform .15s var(--nav-ease), box-shadow .25s var(--nav-ease);
  box-shadow:0 0 0 0 var(--nav-blue-dim);
}
header.on-paper .btn-join{border-color:var(--nav-pink); color:var(--lib-ink); box-shadow:0 0 0 0 var(--nav-pink-dim);}
.btn-join::before{
  content:""; position:absolute; inset:0; background:linear-gradient(120deg, var(--nav-blue), var(--nav-pink)); transform:translateX(-104%);
  transition:transform .45s var(--nav-ease); z-index:0;
}
.btn-join .btn-led{
  position:relative; z-index:1; width:6px; height:6px; border-radius:50%; flex:none;
  background:var(--nav-blue); opacity:0.45; transition:opacity .3s var(--nav-ease), background .3s var(--nav-ease), box-shadow .3s var(--nav-ease);
}
header.on-paper .btn-join .btn-led{background:var(--nav-pink);}
.btn-join .btn-label{position:relative; z-index:1;}
.btn-join:hover{color:#080910; border-color:transparent; box-shadow:0 0 0 4px var(--nav-blue-dim);}
header.on-paper .btn-join:hover{box-shadow:0 0 0 4px var(--nav-pink-dim);}
.btn-join:hover::before{transform:translateX(0);}
.btn-join:hover .btn-led{opacity:1; box-shadow:0 0 8px 1px var(--nav-blue);}
header.on-paper .btn-join:hover .btn-led{box-shadow:0 0 8px 1px var(--nav-pink);}
.btn-join:active{transform:translateY(1px) scale(0.98); box-shadow:0 0 0 1px var(--nav-blue-dim) inset;}
header.on-paper .btn-join:active{box-shadow:0 0 0 1px var(--nav-pink-dim) inset;}
.btn-join:focus-visible{outline:2px solid var(--nav-blue); outline-offset:4px;}
header.on-paper .btn-join:focus-visible{outline-color:var(--nav-pink);}

.burger{
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  width:38px; height:38px; background:none; border:1px solid var(--fit-line-strong); border-radius:3px; padding:0;
  color:inherit; transition:border-color .3s var(--nav-ease), background .3s var(--nav-ease);
}
header.on-paper .burger{border-color:var(--lib-line-strong);}
.burger:hover{border-color:var(--nav-blue);}
header.on-paper .burger:hover{border-color:var(--nav-pink);}
.burger:focus-visible{outline:2px solid var(--nav-blue); outline-offset:3px;}
.burger span{width:16px; height:1px; background:currentColor; display:block; transition:transform .3s var(--nav-ease), opacity .3s var(--nav-ease), background .3s;}

/* ---- mobile drawer: an extension of the same brand system ---- */
.drawer{
  position:fixed; inset:0; z-index:1500; color:var(--fit-ink); display:flex; flex-direction:column; padding:32px 30px 40px;
  background:
    radial-gradient(120% 70% at 100% 0%, var(--nav-blue-dim), transparent 55%),
    radial-gradient(120% 70% at 0% 100%, var(--nav-pink-dim), transparent 55%),
    var(--fit-bg);
  transform:translateX(100%); transition:transform .5s var(--nav-ease);
}
.drawer.open{transform:translateX(0);}
.drawer-brand{display:flex; align-items:center; gap:12px; margin-bottom:56px;}
.drawer-brand .brand-mark{transform:none;}
.drawer-brand-word{display:flex; flex-direction:column; gap:3px;}
.drawer-brand .brand-fit{gap:6px;}
.drawer-brand .brand-lib{font-size:0.82rem; opacity:0.8; margin-top:1px;}

.drawer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px;}
.drawer li{overflow:hidden;}
.drawer a{
  font-family:"Anton",sans-serif; font-size:2.1rem; text-transform:uppercase; padding:15px 4px;
  border-bottom:1px solid var(--fit-line); display:flex; align-items:center; justify-content:space-between; gap:14px;
  transition:color .25s var(--nav-ease), padding-left .25s var(--nav-ease); opacity:0;
  transform:translateX(18px);
}
.drawer.open a{opacity:1; transform:translateX(0); transition:color .25s var(--nav-ease), padding-left .25s var(--nav-ease), opacity .45s var(--nav-ease), transform .45s var(--nav-ease);}
.drawer.open li:nth-child(1) a{transition-delay:.08s;}
.drawer.open li:nth-child(2) a{transition-delay:.13s;}
.drawer.open li:nth-child(3) a{transition-delay:.18s;}
.drawer.open li:nth-child(4) a{transition-delay:.23s;}
.drawer a::after{
  content:""; width:9px; height:9px; border-radius:50%; flex:none; background:var(--nav-blue); opacity:0;
  transition:opacity .25s var(--nav-ease), transform .25s var(--nav-ease); transform:scale(0.4);
}
.drawer li:nth-child(2n) a::after{background:var(--nav-pink);}
.drawer a:hover,.drawer a:focus-visible{color:var(--nav-blue); padding-left:12px;}
.drawer li:nth-child(2n) a:hover,.drawer li:nth-child(2n) a:focus-visible{color:var(--nav-pink);}
.drawer a:hover::after,.drawer a:focus-visible::after{opacity:1; transform:scale(1);}
.drawer a:focus-visible{outline:none;}

.drawer .btn-solid-fit{
  margin-top:32px; align-self:stretch; justify-content:center;
  background:linear-gradient(120deg, var(--nav-blue), var(--nav-pink)); color:#080910; border-radius:3px;
}
.drawer-close{
  position:absolute; top:26px; right:28px; background:none; border:1px solid var(--fit-line-strong); border-radius:3px;
  width:38px; height:38px; color:inherit; font-size:1.15rem; transition:border-color .3s var(--nav-ease);
}
.drawer-close:hover,.drawer-close:focus-visible{border-color:var(--nav-pink);}

@media(max-width:860px){ .nav-links{display:none;} .nav-cta .btn-join{display:none;} .burger{display:flex;} }
@media(max-width:1080px) and (min-width:861px){ .nav-links{gap:24px;} }
@media(max-width:480px){ .brand-div,.brand-lib{display:none;} }