/* ============================================================
   Chart Growth Hub — site chrome (header + footer)
   Replicates the real chartgrowthhub.com nav & footer so the
   auth/dashboard pages feel native. Pairs with site-chrome.js.
   Requires brand.css tokens. Wrap page under .cg.
   ============================================================ */
.cg .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 26px; }

/* ---- NAV ---- */
.cg .nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(16px); background: color-mix(in srgb, var(--navy-950) 78%, transparent); border-bottom: 1px solid var(--border); }
.cg .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.cg .nav .brand { display: flex; align-items: center; gap: 12px; }
.cg .brand-logo { height: 34px; width: auto; display: block; }
.cg .nav-links { display: flex; gap: 32px; align-items: center; }
.cg .nav-links a { color: var(--ink-dim); font-size: 0.94rem; font-weight: 500; transition: color .2s; position: relative; text-decoration: none; }
.cg .nav-links a::after { content:""; position:absolute; left:0; bottom:-5px; width:0; height:1.5px; background:var(--gold); transition:width .3s var(--ease); }
.cg .nav-links a:hover { color: var(--ink); }
.cg .nav-links a:hover::after { width: 100%; }
.cg .nav-dd { position: relative; }
.cg .nav-dd-btn { display:inline-flex; align-items:center; gap:6px; background:none; border:0; cursor:pointer; color:var(--ink-dim); font-family:var(--font-body); font-size:0.94rem; font-weight:500; padding:0; transition:color .2s; }
.cg .nav-dd-btn svg { transition: transform .3s var(--ease); }
.cg .nav-dd:hover .nav-dd-btn, .cg .nav-dd-btn[aria-expanded="true"] { color:var(--ink); }
.cg .nav-dd:hover .nav-dd-btn svg, .cg .nav-dd-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.cg .nav-dd-menu {
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(8px);
  display:flex; flex-direction:column; min-width:190px; padding:10px; gap:2px;
  background:var(--navy-850); border:1px solid var(--border-gold); border-radius:14px;
  box-shadow:var(--shadow); opacity:0; visibility:hidden; transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; z-index:80;
}
.cg .nav-dd-menu::before { content:""; position:absolute; top:-6px; left:50%; transform:translateX(-50%) rotate(45deg); width:12px; height:12px; background:var(--navy-850); border-left:1px solid var(--border-gold); border-top:1px solid var(--border-gold); }
.cg .nav-dd:hover .nav-dd-menu, .cg .nav-dd-menu.open { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.cg .nav-dd-menu a { padding:9px 14px; border-radius:9px; font-size:0.9rem; color:var(--ink-dim); transition:background .2s, color .2s; text-decoration:none; }
.cg .nav-dd-menu a::after { display:none; }
.cg .nav-dd-menu a:hover { background:var(--surface-2); color:var(--gold-2); }
.cg .nav-cta { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.cg .nav-cta .btn { width: auto; white-space: nowrap; flex-shrink: 0; }
.cg .menu-toggle { display: none; background: none; border: 0; color: var(--ink); cursor: pointer; }

/* ---- FOOTER ---- */
.cg .footer { border-top:1px solid var(--border); padding:64px 0 32px; background:var(--navy-900); }
.cg .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:44px; }
.cg .footer h4 { font-family:var(--font-body); font-weight:700; font-size:0.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:16px; }
.cg .footer ul { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.cg .footer a { color:var(--ink-dim); font-size:0.9rem; transition:color .2s; text-decoration:none; }
.cg .footer a:hover { color:var(--gold-2); }
.cg .footer .brand { margin-bottom:16px; display:inline-flex; }
.cg .footer .blurb { color:var(--ink-dim); font-size:0.9rem; max-width:290px; }
.cg .socials { display:flex; gap:12px; margin-top:18px; }
.cg .socials a { width:38px; height:38px; border-radius:10px; border:1px solid var(--border); display:grid; place-items:center; background:var(--surface); transition:transform .25s, border-color .25s; }
.cg .socials a:hover { transform:translateY(-3px); border-color:var(--gold); }
.cg .socials svg { width:17px; height:17px; stroke:var(--ink-dim); fill:none; }
.cg .footer .disclaimer { font-size:0.78rem; color:var(--ink-faint); line-height:1.6; border:1px solid var(--border); border-radius:var(--radius-sm); padding:18px 20px; background:var(--surface); }
.cg .footer .disclaimer strong { color:var(--ink-dim); }
.cg .footer-bottom { border-top:1px solid var(--border); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:0.82rem; color:var(--ink-faint); }

@media (max-width: 940px) {
  .cg .footer-grid { grid-template-columns:1fr 1fr; }
  .cg .nav-links { display:none; }
  .cg .menu-toggle { display:grid; place-items:center; }
  .cg .nav-links.open { display:flex; position:absolute; top:76px; left:0; right:0; flex-direction:column; align-items:flex-start; background:var(--navy-900); padding:22px 26px; gap:18px; border-bottom:1px solid var(--border); z-index:60; }
  .cg .nav-dd { width:100%; }
  .cg .nav-dd-menu { position:static; transform:none; opacity:1; visibility:visible; box-shadow:none; border:0; background:transparent; padding:6px 0 0 12px; min-width:0; }
  .cg .nav-dd-menu::before { display:none; }
}
@media (max-width: 560px) {
  .cg .nav-inner { height:64px; }
  .cg .nav-cta { gap:8px; }
  .cg .nav-cta .btn { padding:9px 14px; font-size:.86rem; }
  .cg .footer-grid { grid-template-columns:1fr; }
  .cg .footer-bottom { flex-direction:column; }
}