/* ===========================================================================
 * CareerBuddy site navigation - the ONE navbar.
 *
 * The same markup (templates/includes/site_nav.html) is used by the public
 * landing page and by every page that extends base.html, so there is no longer
 * a second, older Bootstrap navbar to flash in during a redirect.
 *
 * Every rule is scoped under .cb-nav on purpose. base.html also loads
 * Bootstrap, which owns .nav-link, .nav-item and .btn; without the scope the
 * two rule sets would fight each other and bleed into page content. For the
 * same reason the design tokens are declared on .cb-nav rather than :root, so
 * nothing outside the navbar changes colour.
 * ======================================================================== */

/* display:contents, so .cb-nav generates no box of its own. A sticky element
   can only travel inside its parent's box, and this wrapper is exactly as tall
   as the header - which pinned the navbar to the top of the page and let it
   scroll straight off. The children are laid out as if they were body's own,
   while the tokens below still inherit into them and every .cb-nav selector
   still matches. */
.cb-nav{
  display:contents;
  --cbn-primary:#185adb; --cbn-primary-dark:#123e9e; --cbn-navy:#14213d;
  --cbn-ink:#0f172a; --cbn-ink-2:#1e293b; --cbn-slate:#64748b; --cbn-slate-2:#475569;
  --cbn-line:#e2e8f0; --cbn-tint:#f8fafc; --cbn-soft:rgba(24,90,219,.08);
  --cbn-shadow-lg:0 24px 60px rgba(20,33,61,.16);
  --cbn-radius:16px;
}

/* ---------- shell ---------- */
.cb-nav .cbn-header{position:sticky;top:0;z-index:1030;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-bottom:1px solid var(--cbn-line)}
.cb-nav .wrap{max-width:1760px;margin:0 auto;padding:0 1.5rem}
.cb-nav .bar{display:flex;align-items:center;gap:.5rem;height:76px}

/* The logo, matching the Skill Up hub's lockup rule for rule: 38px mark, the
   same gap, letter-spacing and type scale, and "Buddy" in the brand gold. This
   is the only place it is defined - the landing page used to carry its own copy
   that drifted out of step. */
.cb-nav .brand{display:flex;align-items:center;gap:.65rem;font-weight:700;color:var(--cbn-ink);letter-spacing:-.01em;font-size:clamp(1.1rem,1.5vw,1.4rem);flex-shrink:0;text-decoration:none}
.cb-nav .brand .brand-logo{width:38px;height:38px;flex-shrink:0;display:block}
.cb-nav .brand b{color:#FCA311;font-weight:700;margin-left:.15em}
/* Name over tagline, stacked, so the mark still sits beside the pair as one
   unit. The sizes are in em so the whole lockup scales with .brand. */
.cb-nav .brand-copy{display:flex;flex-direction:column;justify-content:center;line-height:1.08}
/* The name is set like the logo artwork: the slab face, uppercase, tightly
   tracked. !important because base.html forces Noto Sans across .cb-nav. */
.cb-nav .brand-copy>span:first-child{font-family:'Zilla Slab',Georgia,serif !important;font-weight:700;text-transform:uppercase;letter-spacing:.005em}
.cb-nav .brand-tagline{display:flex;align-items:center;gap:.4em;font-size:.4em;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--cbn-slate);white-space:nowrap;margin-top:.15em}
.cb-nav .brand-tagline::before,.cb-nav .brand-tagline::after{content:"";flex:1;height:1px;background:currentColor;opacity:.55;min-width:.8em}

.cb-nav nav.main-nav{display:flex;align-items:center;gap:clamp(.1rem,.45vw,.6rem);margin-left:2.5rem;flex:1;min-width:0;justify-content:flex-start}
.cb-nav .nav-item{position:relative;list-style:none}
.cb-nav .nav-link{display:inline-flex;align-items:center;gap:.35rem;padding:.55rem clamp(.2rem,.5vw,.9rem);border-radius:8px;font-weight:600;color:var(--cbn-slate-2);font-size:clamp(.82rem,1.08vw,1.15rem);cursor:pointer;white-space:nowrap;background:none;border:0;text-decoration:none;line-height:1.6}
.cb-nav .nav-link:hover,.cb-nav .nav-item.open > .nav-link{color:var(--cbn-primary);background:var(--cbn-soft)}
.cb-nav .nav-link.is-active{color:var(--cbn-primary);background:var(--cbn-soft)}
/* One dropdown arrow for the whole navbar: a small filled triangle, drawn
   with borders so it takes currentColor and needs no font or image. Open menus
   flip it to point up. */
.cb-nav .caret{width:0;height:0;border-left:4.5px solid transparent;border-right:4.5px solid transparent;border-top:5.5px solid currentColor;transition:transform .18s ease;flex-shrink:0}
.cb-nav .nav-item.open .nav-link .caret,
.cb-nav .acct.open .acct-btn .caret,
.cb-nav .mm-item.open .mm-trigger .caret{transform:rotate(180deg)}
.cb-nav .header-actions{display:flex;align-items:center;gap:1rem;flex-shrink:0;margin-left:1rem}

/* ---------- mega menu ---------- */
.cb-nav .mega{position:absolute;top:calc(100% + 10px);left:0;min-width:700px;background:#fff;border:1px solid var(--cbn-line);border-radius:var(--cbn-radius);box-shadow:var(--cbn-shadow-lg);padding:1.75rem;opacity:0;visibility:hidden;transform:translateY(6px);transition:.16s ease;z-index:10}
.cb-nav .nav-item.open .mega{opacity:1;visibility:visible;transform:none}
.cb-nav .mega-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem}
.cb-nav .mega.two-col .mega-cols{grid-template-columns:repeat(2,1fr)}
.cb-nav .mega-col-title{font-size:.9rem;font-weight:700;color:var(--cbn-navy);margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid var(--cbn-line)}
.cb-nav .mega-link{display:flex;align-items:flex-start;gap:.75rem;padding:.6rem .5rem;border-radius:8px;margin:0 -.4rem;text-decoration:none}
.cb-nav .mega-link:hover{background:var(--cbn-tint)}
.cb-nav .mega-link > .ic{width:30px;height:30px;border-radius:9px;background:var(--cbn-soft);color:var(--cbn-primary);padding:7px;flex-shrink:0}
.cb-nav .mega-link .ml-title{font-weight:600;color:var(--cbn-ink);font-size:.92rem;display:block}
.cb-nav .mega-link .ml-desc{font-size:.8rem;color:var(--cbn-slate);display:block;margin-top:1px}
.cb-nav .mega-foot{margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--cbn-line);display:flex;justify-content:space-between;align-items:center}
.cb-nav .mega-foot a{font-size:.88rem;font-weight:600;color:var(--cbn-primary);text-decoration:none}

/* ---------- icons + right-hand actions ---------- */
.cb-nav .ic{width:1em;height:1em;display:inline-block;vertical-align:-0.14em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.cb-nav .hlogin{display:inline-flex;align-items:center;gap:.4rem;padding:.62rem clamp(.4rem,.65vw,.95rem);border-radius:8px;font-weight:600;font-size:clamp(.8rem,1vw,1.2rem);color:var(--cbn-ink);white-space:nowrap;text-decoration:none}
.cb-nav .hlogin .ic{width:1.25em;height:1.25em}
.cb-nav .hlogin:hover{background:var(--cbn-soft);color:var(--cbn-primary)}
.cb-nav .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.85rem 1.5rem;border-radius:999px;font-weight:600;font-size:.98rem;transition:.18s ease;text-decoration:none}
.cb-nav .btn-primary{background:var(--cbn-primary);color:#fff;border:0;box-shadow:0 8px 20px rgba(24,90,219,.28)}
.cb-nav .btn-primary:hover{background:var(--cbn-primary-dark);color:#fff}

/* Pro pill - the same gold treatment the previous navbar used, so the upgrade
   affordance still looks familiar to anyone who already knew where it was. */
.cb-nav .pro-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .85rem;border-radius:999px;font-weight:700;font-size:.82rem;color:#14213D;background:linear-gradient(135deg,#FCA311,#e0900c);box-shadow:0 2px 10px rgba(252,163,17,.35);white-space:nowrap;text-decoration:none}
.cb-nav .pro-pill:hover{filter:brightness(1.03);color:#14213D}
.cb-nav .pro-pill .pro-badge{background:#fff;color:#14213D;border-radius:999px;font-size:.62rem;padding:.15em .45em;letter-spacing:.02em}

/* ---------- account menu ---------- */
.cb-nav .acct{position:relative}
.cb-nav .acct-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .6rem .3rem .3rem;border-radius:999px;border:1px solid var(--cbn-line);background:#fff;cursor:pointer;font-weight:600;font-size:.9rem;color:var(--cbn-ink-2);max-width:230px}
.cb-nav .acct-btn:hover,.cb-nav .acct.open .acct-btn{border-color:var(--cbn-primary);color:var(--cbn-primary)}
.cb-nav .acct-avatar{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--cbn-primary);color:#fff;font-size:.82rem;font-weight:700;letter-spacing:.02em;overflow:hidden}
.cb-nav .acct-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.cb-nav .acct-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


.cb-nav .acct-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:230px;background:#fff;border:1px solid var(--cbn-line);border-radius:12px;box-shadow:var(--cbn-shadow-lg);padding:.45rem;opacity:0;visibility:hidden;transform:translateY(6px);transition:.16s ease;z-index:20}
.cb-nav .acct.open .acct-menu{opacity:1;visibility:visible;transform:none}
.cb-nav .acct-head{padding:.6rem .7rem;border-bottom:1px solid var(--cbn-line);margin-bottom:.35rem}
.cb-nav .acct-head b{display:block;font-size:.9rem;color:var(--cbn-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cb-nav .acct-head span{display:block;font-size:.78rem;color:var(--cbn-slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cb-nav .acct-item{display:flex;align-items:center;gap:.6rem;width:100%;padding:.6rem .7rem;border:0;border-radius:8px;background:none;font-size:.92rem;font-weight:500;color:var(--cbn-ink-2);text-align:left;cursor:pointer;text-decoration:none}
.cb-nav .acct-item:hover{background:var(--cbn-tint);color:var(--cbn-primary)}
.cb-nav .acct-item.danger{color:#dc2626}
.cb-nav .acct-item.danger:hover{background:#fef2f2;color:#dc2626}
.cb-nav .acct-menu form{margin:0}

/* ---------- burger + mobile accordion ---------- */
.cb-nav .burger{display:none;width:40px;height:40px;align-items:center;justify-content:center;border-radius:8px;border:0;background:none;cursor:pointer}
.cb-nav .burger span,.cb-nav .burger span::before,.cb-nav .burger span::after{content:"";display:block;width:20px;height:2px;background:var(--cbn-ink);position:relative;transition:.2s}
.cb-nav .burger span::before{position:absolute;top:-6px}
.cb-nav .burger span::after{position:absolute;top:6px}

.cb-nav .mobile-menu{position:fixed;inset:68px 0 0 0;background:#fff;z-index:1040;overflow-y:auto;transform:translateX(100%);transition:.25s ease;padding:1.25rem}
.cb-nav .mobile-menu.open{transform:none}
.cb-nav .mm-item{border-bottom:1px solid var(--cbn-line)}
.cb-nav .mm-trigger{width:100%;display:flex;justify-content:space-between;align-items:center;padding:1rem .25rem;font-weight:600;font-size:1.02rem;border:0;background:none;cursor:pointer;color:var(--cbn-ink)}
.cb-nav .mm-trigger a{color:inherit;text-decoration:none}
.cb-nav .mm-trigger .caret{border-left-width:5.5px;border-right-width:5.5px;border-top-width:7px;border-top-color:var(--cbn-slate)}
.cb-nav .mm-panel{max-height:0;overflow:hidden;transition:max-height .22s ease}
.cb-nav .mm-item.open .mm-panel{max-height:800px}
.cb-nav .mm-link{display:block;padding:.65rem .25rem .65rem 1rem;color:var(--cbn-slate-2);font-size:.95rem;text-decoration:none}
.cb-nav .mm-cta{display:flex;flex-direction:column;gap:.6rem;margin-top:1.25rem}

.cb-nav :focus-visible{outline:3px solid rgba(24,90,219,.45);outline-offset:2px}

@media(max-width:1199px){
  .cb-nav nav.main-nav,.cb-nav .header-actions .hlogin,.cb-nav .header-actions .pro-pill{display:none}
  .cb-nav .burger{display:flex}
  .cb-nav .bar{height:68px}
}
@media(max-width:600px){
  .cb-nav .acct-name{display:none}
  .cb-nav .acct-btn{max-width:none}
}