/* Collaborative Leadership Project — shared navigation (all pages)
   Depends on --eo, --accent, .disp, .mono and .root * { box-sizing } from the page stylesheet. */

/* bar */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:center;padding:18px 32px 0;pointer-events:none;transition:transform .55s var(--eo)}
.navin{pointer-events:auto;width:100%;max-width:1376px;display:flex;align-items:center;gap:28px;padding:10px 12px 10px 20px;border-radius:16px;background-color:rgba(8,26,50,0);border:1px solid rgba(255,255,255,0);transition:max-width .5s var(--eo),padding .5s var(--eo),border-radius .5s var(--eo),background-color .45s ease,border-color .45s ease,box-shadow .5s ease}
.nav.compact .navin{max-width:860px;padding:6px 6px 6px 10px;border-radius:999px;background-color:rgba(8,26,50,.88);border-color:rgba(255,255,255,.12);box-shadow:0 14px 40px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.nav.hide{transform:translateY(-130%)}
.brand{display:flex;align-items:center;gap:12px;color:#F1F4F8;flex:none}
.brand:hover{color:#FFFFFF}
.nav.compact .brand{gap:0}
.wm{display:flex;flex-direction:column;gap:4px;line-height:1;overflow:hidden;max-width:220px;white-space:nowrap;transition:max-width .5s var(--eo),opacity .3s ease}
.nav.compact .wm{max-width:0;opacity:0}
.navlinks{flex:1;display:flex;align-items:center;justify-content:center;gap:26px}
.navlinks a{color:#DCE3EC;font-size:14px;font-weight:500;padding:14px 2px;transition:color .2s}
.navlinks a:hover{color:#F2B134}
.navcta{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:999px;background:var(--accent);color:#061427;font-size:14px;font-weight:600;flex:none;transition:background-color .25s}
.navcta:hover{color:#061427;background:#FFC857}
.navmask{position:fixed;top:0;left:0;right:0;height:112px;z-index:55;pointer-events:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-mask-image:linear-gradient(#000 30%,transparent);mask-image:linear-gradient(#000 30%,transparent);opacity:0;transition:opacity .45s ease}
.navmask.on{opacity:1}
.navlinks a[aria-current],.navmobile a[aria-current]:not(.navmobile-cta){color:#F2B134}

/* About ▾ disclosure */
.navdd{position:relative}
.navdd-btn{display:inline-flex;align-items:center;gap:6px;margin:0;padding:14px 2px;border:0;background:none;color:#DCE3EC;font:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:color .2s}
.navdd-btn:hover,.navdd-btn[aria-expanded="true"]{color:#F2B134}
.navdd-btn svg{transition:transform .25s var(--eo)}
.navdd-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.navdd-menu{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);min-width:236px;margin:0;padding:8px;list-style:none;border-radius:18px;background:rgba(8,26,50,.94);border:1px solid rgba(255,255,255,.12);box-shadow:0 14px 40px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);animation:navddIn .22s var(--eo) both}
.navdd-menu[hidden]{display:none}
.navdd-menu a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;color:#DCE3EC;font-size:14px;font-weight:500;white-space:nowrap}
.navdd-menu a:hover,.navdd-menu a:focus-visible{background:rgba(255,255,255,.08);color:#F2B134}
@keyframes navddIn{from{opacity:0;transform:translate(-50%,-6px)}}

/* hamburger + mobile panel (hidden on desktop) */
.navburger{display:none;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:none;color:#F1F4F8;cursor:pointer;flex:none}
.navburger path{transform-origin:center;transition:transform .25s var(--eo),opacity .2s}
.navburger[aria-expanded="true"] .b1{transform:translateY(5px) rotate(45deg)}
.navburger[aria-expanded="true"] .b2{opacity:0}
.navburger[aria-expanded="true"] .b3{transform:translateY(-5px) rotate(-45deg)}
.navmobile{display:none}
.navmobile[hidden]{display:none}

/* focus */
.nav :is(a,button):focus-visible{outline:2px solid #F2B134;outline-offset:3px;border-radius:8px}
.navcta:focus-visible,.navmobile-cta:focus-visible{outline-color:#FFFFFF}

@media (max-width: 1100px){
.nav{padding:12px 12px 0;flex-wrap:wrap}
.navlinks,.wm{display:none}
.navin{gap:12px;padding:8px 8px 8px 12px}
.navburger{display:inline-flex}
.navmobile{display:block;width:100%;max-width:1376px;margin-top:8px;padding:8px;pointer-events:auto;border-radius:18px;background:#081A32;border:1px solid rgba(255,255,255,.12);box-shadow:0 14px 40px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);max-height:calc(100vh - 96px);max-height:calc(100dvh - 96px);overflow:auto;animation:navmobIn .22s var(--eo) both}
.navmobile[hidden]{display:none}
.navmobile nav{display:flex;flex-direction:column;gap:2px}
.navmobile a{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:10px;color:#F1F4F8;font-size:16px;font-weight:500}
.navmobile a:hover,.navmobile a:focus-visible{background:rgba(255,255,255,.08);color:#F2B134}
.navmobile-h{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8FA0B5;padding:10px 14px 4px}
.navmobile-rule{display:block;height:1px;margin:6px 8px;background:rgba(255,255,255,.12)}
.navmobile-cta{margin-top:6px;justify-content:center;background:var(--accent);color:#061427;font-weight:600}
.navmobile-cta:hover{background:#FFC857;color:#061427}
}
@media (max-width: 420px){.navcta svg{display:none}}
@keyframes navmobIn{from{opacity:0;transform:translateY(-6px)}}

@media (prefers-reduced-motion: reduce){
.nav,.navin,.wm,.navdd-btn svg,.navburger path{transition:none}
.navdd-menu,.navmobile{animation:none}
}