/* === CZTRAINERS NAV (blue, normal corners, dark-mode ready) === */
:root{
  --nav-blue:#0072CE;
  --nav-h:64px;             /* approx navbar height; adjust if you change logo size */
}

/* Bar */
.cznav{
  position:sticky; top:0; z-index:1002;
  display:flex; align-items:center; justify-content:space-between;
  gap:.6rem; /* ensure space between logo and right cluster */
  padding:.8rem 1.2rem;
  background:var(--nav-blue); color:#fff;
  box-shadow:0 2px 4px rgba(0,0,0,.1);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.cznav *{ box-sizing:border-box; }

/* Logo */
.cznav__logo{ flex:0 0 auto; }
.cznav__logo img{ height:50px; display:block; }

/* Right side cluster */
.cznav__right{ margin-left:auto; display:inline-flex; align-items:center; gap:.75rem; }

/* Profile/Login pill */
.cznav__pill{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.45rem .9rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.9);
  color:#fff; text-decoration:none; font-weight:700; line-height:1;
  background:transparent; white-space:nowrap;
  /* Allow pill to be the first thing that shrinks */
  flex:1 1 auto; max-width:52vw; min-width:0; overflow:hidden;
}
.cznav__pill:hover{ background:rgba(255,255,255,.12); }
/* Truncate long names inside the pill */
#profilePill svg{ flex:0 0 auto; }
#pillText{ display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Theme toggle (emoji) */
.cznav__theme{ background:transparent; border:0; color:#fff; padding:0; cursor:pointer; line-height:1; font-size:20px; }
.cznav__theme{ flex:0 0 auto; }

/* Hamburger with X animation */
.cznav__hamburger{
  display:inline-flex; flex-direction:column; justify-content:center; align-items:center;
  gap:6px; width:44px; height:36px; padding:6px;
  background:transparent; border:0; border-radius:10px; cursor:pointer; color:#fff;
  position:relative; z-index:1003; -webkit-tap-highlight-color:transparent;
}
.cznav__hamburger{ flex:0 0 auto; }
.cznav__hamburger:focus-visible{ outline:2px solid rgba(255,255,255,.6); outline-offset:2px; }
.cznav__hamburger span{ width:26px; height:3px; border-radius:3px; background:currentColor; transition:transform .22s ease, opacity .22s ease; transform-origin:center; }
.cznav__hamburger.active span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.cznav__hamburger.active span:nth-child(2){ opacity:0; }
.cznav__hamburger.active span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

/* Links (shared) */
.cznav__link{
  display:flex; align-items:center; justify-content:center;
  width:100%; text-decoration:none; font-weight:700;
  border-radius:12px; padding:.6rem .9rem; transition:filter .15s ease, background .15s ease, color .15s ease;
}

/* -------- Desktop dropdown (small blue panel under the bar) -------- */
@media (min-width:768px){
  .cznav__menu{
    display:none;
    position:absolute; right:12px; top:calc(100% + 8px);
    min-width:260px; padding:.6rem;
    background:var(--nav-blue); color:#fff;
    border-radius:12px; border:0;
    box-shadow:0 10px 28px rgba(0,0,0,.18);
    flex-direction:column; gap:.55rem; z-index:1001;
  }
  .cznav__menu.active{ display:flex !important; }

  .cznav__link{
    background:rgba(255,255,255,.06); color:#fff; border:1px solid rgba(255,255,255,.16);
  }
  .cznav__link:hover{ background:rgba(255,255,255,.14); }
}

/* -------- Mobile full-screen sheet (covers page) -------- */
@media (max-width:767.98px){
  .cznav__logo img{ height:40px; }
  .cznav__right{ gap:.5rem; min-width:0; }
  .cznav__pill{ padding:.35rem .7rem; font-size:14px; }
  /* Slightly tighter truncation budget on small screens */
  .cznav__pill{ max-width:58vw; }

  .cznav{ position:sticky; top:0; z-index:1002; }

  .cznav__menu{
    position:fixed; left:0; right:0; top:var(--nav-h); bottom:0;  /* start below navbar */
    background:var(--nav-blue); color:#fff;
    display:flex; flex-direction:column; gap:.75rem;
    padding:12px 16px 24px;                         /* content padding only */
    z-index:1001;                                   /* keep under the bar */
    transform:translateY(8px); opacity:0; pointer-events:none;
    transition:transform .25s ease, opacity .25s ease;
  }
  .cznav__menu.active{ transform:none; opacity:1; pointer-events:auto; }

  .cznav__link{
    background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.18);
  }
  .cznav__link:hover{ background:rgba(255,255,255,.16); }
}

/* Ultra-narrow devices: hide the pill if there's no space */
@media (max-width:340px){
  .cznav__pill{ display:none; }
}

/* Always respect hidden (auth buttons) */
.cznav__menu [hidden]{ display:none !important; }

/* Dark mode — keep blue bar/sheet, just ensure contrast */
body.dark .cznav,
body.dark .cznav__menu{ color:#fff; }
body.dark .cznav__pill{ border-color:rgba(255,255,255,.9); }
body.dark .cznav__hamburger{ color:#fff; }

/* Reset stray page styles */
html,body{ margin:0; padding:0; }