/* ============================================================
   Site Chrome - shared Nav and Footer styles
   ============================================================
   Extracted directly from the already-working, already-approved
   goal-planning.html nav/footer CSS - preserved exactly (Option A from the
   nav/footer extraction strategy: relocate, don't redesign), not
   reconstructed from memory or "improved" along the way. This is what
   makes every page's nav genuinely, provably identical going forward,
   rather than a fresh opportunity for the exact divergence bug already
   found and fixed once (Section 34 of the baseline checklist).

   Depends on these CSS custom properties already being defined in each
   page's own <style> block: --line, --gold, --navy, --ink, --cream,
   --paper, --max.
   ============================================================ */

header{position:sticky;top:0;z-index:50;background:rgba(251,249,244,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0;max-width:var(--max);margin:0 auto;padding-left:24px;padding-right:24px;}
.brand{font-size:1.05rem;font-weight:600;display:flex;align-items:center;gap:10px;}
.brand img{height:56px;width:auto;}
.nav-links{display:flex;align-items:center;gap:28px;font-size:.9rem;font-weight:500;}
.nav-links a{position:relative;padding:4px 0;color:var(--navy);}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--gold);transition:width .2s ease;
}
.nav-links a:hover::after{width:100%;}

.nav-dropdown{position:relative;}
.nav-dropdown-trigger{
  background:none;border:none;font:inherit;font-weight:500;color:var(--navy);opacity:.85;
  display:flex;align-items:center;gap:6px;cursor:pointer;padding:4px 0;
}
.nav-dropdown-trigger:hover{opacity:1;}
.nav-dropdown-trigger svg{width:11px;height:11px;flex:none;transition:transform .2s ease;}
.nav-dropdown.is-open .nav-dropdown-trigger svg{transform:rotate(180deg);}
.nav-dropdown-menu{
  display:none;
  position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%);
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 18px 40px rgba(14,42,77,.14);
  padding:8px;min-width:170px;z-index:70;
}
.nav-dropdown.is-open .nav-dropdown-menu{display:block;}
.nav-dropdown-menu a{
  display:block;padding:10px 14px;border-radius:8px;font-size:.9rem;color:var(--ink);white-space:nowrap;opacity:1;
}
.nav-dropdown-menu a:hover{background:var(--cream);}
.menu-toggle{display:none;background:none;border:none;font-size:1.6rem;color:var(--navy);cursor:pointer;line-height:1;padding:4px;}

footer{background:var(--navy-deep);color:#8FA0B7;padding:44px 0 26px;font-size:.85rem;text-align:center;}
footer .disclaimer-foot{max-width:720px;margin:0 auto 18px;font-size:.76rem;color:#6E7F94;line-height:1.7;}
footer a{color:#9FAEC2;}
footer a:hover{color:#fff;}

@media (max-width:640px){
  .nav{position:relative;}
  .nav-links{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);
    border:1px solid var(--line);
    border-top:none;
    border-radius:0 0 14px 14px;
    box-shadow:0 18px 30px rgba(14,42,77,.1);
    padding:8px 24px 16px;
    z-index:60;
  }
  .nav-links.is-open{display:flex;}
  .nav-links a{padding:12px 0;border-bottom:1px solid var(--line);}
  .nav-links a:last-child{border-bottom:none;}
  .nav-links a::after{display:none;}
  .menu-toggle{display:block;}

  .nav-dropdown{width:100%;}
  .nav-dropdown-trigger{width:100%;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);}
  .nav-dropdown-menu{
    display:none;
    position:static;transform:none;
    box-shadow:none;border:none;border-radius:0;
    padding:0 0 0 16px;margin:0;min-width:0;
  }
  .nav-dropdown-menu a{padding:10px 0;border-bottom:1px solid var(--line);border-radius:0;}
  .nav-dropdown.is-open .nav-dropdown-trigger svg{transform:rotate(0deg);}
}