/* ═══ GLOBAL NAV CSS ═══ */

/* Article pages: nav is dynamically injected into #nav-container.
   Make the CONTAINER sticky so it holds its space in document flow
   and stays fixed at top for the full page scroll. */
#nav-container {
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 56px; /* reserve space before JS injects nav */
}
/* When nav is inside #nav-container, override its own sticky — container handles it */
#nav-container > nav {
    position: static;
}

nav {
    position: sticky; top: 0; left: 0; right: 0; z-index: 100;
    padding: 0 32px; height: 56px;
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(10,12,16,0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.nav-logo { display: flex; align-items: center; gap: 10px; font-size: 23px; font-weight: 700; letter-spacing: -0.03em; text-decoration: none; }
.nav-logo:hover { text-decoration: none !important; }
.nav-logo-img { height: 32px; width: auto; object-fit: contain; display: block; }
.nav-logo .w { color: #fff; }
.nav-logo .a { color: #D4922A; }
.nav-links { display: flex; align-items: center; gap: 22px; list-style: none; }
.nav-links a { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.75); transition: color 0.3s; text-decoration: none; }
.nav-links a:hover { color: #fff; text-decoration: none !important; }
.nav-cta { padding: 6px 16px; background: linear-gradient(135deg, rgba(212,146,42,0.95), rgba(212,146,42,0.6)); border: 1px solid rgba(212,146,42,0.3); border-radius: 999px; color: #111 !important; font-weight: 700 !important; font-size: 12px !important; text-decoration: none; }
.nav-cta:hover { text-decoration: none !important; opacity: 0.9; }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; background: none; border: none; }
.hamburger span { display: block; width: 22px; height: 2px; background: rgba(255,255,255,0.8); border-radius: 2px; transition: all 0.3s; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ═══ CTA BANNER (shared across all article templates) ═══ */
.cta-banner{margin-top:0;background:#0a0c10;padding:64px 32px 40px;text-align:center;position:relative;overflow:hidden;}
.cta-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(600px 300px at 30% 50%,rgba(212,146,42,0.18),transparent 55%),radial-gradient(500px 300px at 80% 50%,rgba(26,122,109,0.15),transparent 55%);pointer-events:none;}
.cta-banner-inner{position:relative;z-index:2;max-width:700px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:14px;}
.cta-banner-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#E8A840;margin-bottom:4px;}
.cta-banner-heading{font-size:clamp(26px,4vw,44px);font-weight:900;color:#f3f4f6;letter-spacing:-.03em;line-height:1.2;margin:0;}
.cta-banner-heading .accent{color:#E8A840;display:block;}
.cta-banner-sub{font-size:14px;color:rgba(255,255,255,0.55);margin-top:0;max-width:500px;text-align:center;line-height:1.6;}
/* Primary CTA button — matches money-page hero button */
.cta-primary-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;background:linear-gradient(135deg,#E8A840 0%,#D4922A 100%);border:1px solid #D4922A;border-radius:999px;color:#111;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;text-decoration:none;box-shadow:0 4px 20px rgba(212,146,42,0.35);transition:all 0.3s;margin-top:4px;}
.cta-primary-btn:hover{transform:translateY(-2px);box-shadow:0 6px 28px rgba(212,146,42,0.5);text-decoration:none;color:#111;}
/* Trust row — 4 cols on desktop, 2×2 on mobile (like money page) */
.cta-trust-row{display:flex;gap:8px 20px;flex-wrap:wrap;justify-content:center;margin-top:4px;}
.cta-trust-row span{font-size:12px;color:rgba(255,255,255,0.5);}
/* Legacy 3-button style (fallback) */
.cta-cat-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);border-radius:999px;color:#f3f4f6;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;}
@media(max-width:768px){
    .cta-banner{padding:48px 20px 36px;}
    .cta-banner-heading{font-size:clamp(24px,7vw,32px);}
    .cta-primary-btn{width:100%;max-width:320px;justify-content:center;font-size:16px;padding:15px 24px;border-radius:12px;}
    .cta-trust-row{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 12px;max-width:280px;}
    .cta-trust-row span{text-align:left;}
    .cta-cat-btn{padding:6px 12px;font-size:12px;gap:4px;}
}
@media (max-width: 768px) {
    .hamburger { display: flex !important; }
    .nav-links { display: none !important; position: fixed; top: 56px; left: 0; right: 0; background: rgba(10,12,16,0.97); backdrop-filter: blur(20px); flex-direction: column; padding: 16px; gap: 0; border-bottom: 1px solid rgba(255,255,255,0.07); z-index: 9999; }
    .nav-links.open { display: flex !important; }
    .nav-links li { width: 100%; }
    .nav-links a { display: block !important; padding: 14px 16px; font-size: 15px; border-bottom: 1px solid rgba(255,255,255,0.07); color: rgba(255,255,255,0.85) !important; }
    .nav-cta { margin: 12px 16px 4px; width: calc(100% - 32px); text-align: center; border-radius: 8px !important; padding: 12px !important; font-size: 14px !important; }
    nav { padding: 0 16px; }
}