/* nav.css — the unified GrowthMastery navigation (Joe, 2026-07-29).
 *
 * One nav across every page of the site, SaasRise-style: three dropdowns that go DEEP
 * (AICRO Membership deep-links into the offer page's sections; Programs holds the other
 * offers; Resources holds everything else) plus one conversion CTA. This replaces the
 * old per-page navs whose links only pointed at sections of their own page — the thing
 * that stranded visitors the moment they crossed pages.
 *
 * Desktop: hover, click, or keyboard focus opens a panel. Mobile (<=860px): the existing
 * hamburger opens the .links column and each group becomes an accordion (the hamburger
 * band runs to 980px — keep this breakpoint in sync with styles.css / growth-room.css).
 * Behavior lives in /assets/nav.js. Load both on every page that has the nav.
 */

.ndrop{position:relative}
.ndrop-btn{display:inline-flex;align-items:center;gap:7px;background:none;border:none;cursor:pointer;
  font-family:'Poppins',sans-serif;font-size:.86rem;font-weight:500;color:var(--slate);
  padding:3px 0;white-space:nowrap;transition:color .2s}
.ndrop-btn:hover{color:var(--gold-light)}
.ndrop-btn .car{width:9px;height:9px;flex-shrink:0;transition:transform .22s}
.ndrop:hover .ndrop-btn .car,.ndrop.open .ndrop-btn .car,.ndrop:focus-within .ndrop-btn .car{transform:rotate(180deg)}

/* the panel */
.nmenu{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);
  margin-top:14px;min-width:238px;padding:8px;z-index:70;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 24px 48px -18px rgba(22,32,47,.3)}
/* invisible bridge so the pointer can travel from button to panel without it closing */
.nmenu::before{content:"";position:absolute;top:-15px;left:0;right:0;height:15px}
.ndrop:hover .nmenu,.ndrop.open .nmenu,.ndrop:focus-within .nmenu{display:block}
.nmenu a{display:block;padding:10px 14px;border-radius:8px;font-size:.88rem;font-weight:500;
  color:var(--ink);white-space:nowrap;transition:background .15s,color .15s}
.nmenu a:hover{background:hsl(48 38% 95%);color:var(--ink)}
.nmenu a small{display:block;font-size:.74rem;font-weight:400;color:var(--slate);margin-top:1px}

/* dark header variant (every page currently uses nav-dark) */
nav.nav.nav-dark .ndrop-btn{color:hsl(145 18% 78%)}
nav.nav.nav-dark .ndrop-btn:hover{color:var(--gold-light)}
nav.nav.nav-dark .nmenu{background:hsl(160 45% 7% / .98);border-color:hsl(150 30% 22% / .7);
  box-shadow:0 24px 48px -18px rgba(0,0,0,.65)}
nav.nav.nav-dark .nmenu a{color:hsl(145 22% 86%)}
nav.nav.nav-dark .nmenu a:hover{background:hsl(152 40% 12%);color:var(--gold-light)}
nav.nav.nav-dark .nmenu a small{color:hsl(145 16% 62%)}

/* mobile: groups become accordions inside the hamburger column */
@media(max-width:980px){
  .ndrop{width:100%}
  .ndrop-btn{width:100%;justify-content:space-between;padding:14px 4px;font-size:1.02rem;color:var(--ink);
    border-bottom:1px solid var(--mist-2)}
  nav.nav.nav-dark .ndrop-btn{color:hsl(145 22% 84%);border-bottom-color:hsl(152 30% 14%)}
  .nmenu{position:static;transform:none;margin:0;min-width:0;display:none;
    background:transparent;border:none;border-radius:0;box-shadow:none;padding:0 0 8px 14px}
  .nmenu::before{display:none}
  /* accordion: only an explicit tap opens a group on mobile (hover/focus would pop
     every group open as you tab through the column) */
  .ndrop:hover .nmenu,.ndrop:focus-within .nmenu{display:none}
  .ndrop.open .nmenu{display:block}
  .nmenu a{white-space:normal;padding:11px 4px;border-bottom:1px solid hsl(152 30% 12%)}
  .nmenu a:last-child{border-bottom:none}
  nav.nav.nav-dark .nmenu a:hover{background:transparent}
}

/* WCAG 2.2: comfortable targets on touch */
@media(pointer:coarse){
  .ndrop-btn{min-height:44px}
  .nmenu a{min-height:44px;display:flex;flex-direction:column;justify-content:center}
}

/* --- Member login (Joe, 2026-08-04) ---------------------------------------
 * The door back in for people who already pay us. It sits immediately left of
 * the gold CTA and stays quiet on purpose: outlined instead of filled, mint
 * instead of gold. A returning member scans the top-right corner and finds it;
 * a first-time visitor's eye still lands on "Start for free", because that is
 * the only solid warm shape in the bar.
 *
 * It belongs on EVERY page — the nav is hand-copied into 20+ files, so
 * scripts/check_site_nav.sh fails when a page loses it (playbook #269).
 */
nav.nav .links a.nav-login{display:inline-flex;align-items:center;justify-content:center;
  padding:8px 15px;border:1px solid var(--line);border-radius:6px;background:transparent;
  font-family:'Poppins',sans-serif;font-size:.84rem;font-weight:500;color:var(--slate);
  white-space:nowrap;transition:color .2s,border-color .2s,background .2s}
nav.nav .links a.nav-login:hover{color:var(--ink);border-color:var(--slate);background:hsl(48 38% 96%)}
nav.nav .links a.nav-login:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

nav.nav.nav-dark .links a.nav-login{color:hsl(145 20% 82%);border-color:hsl(150 30% 28% / .9)}
nav.nav.nav-dark .links a.nav-login:hover{color:var(--gold-light);
  border-color:hsl(45 70% 58% / .7);background:hsl(150 40% 12% / .6)}

@media(max-width:980px){
  /* inside the hamburger column it stays a button, directly above the gold CTA,
     so both doors are visible the moment the menu opens */
  nav.nav .links a.nav-login{margin-top:12px;padding:12px 16px;font-size:.98rem;text-align:center}
  nav.nav.nav-dark .links a.nav-login{color:hsl(145 20% 84%);border-color:hsl(150 30% 30% / .95)}
}
@media(pointer:coarse){nav.nav .links a.nav-login{min-height:44px}}