/* CodeHero PRO — shared site navigation (loaded by every page of codeheropro.ai).
   Colours are the site palette; no page tokens are required. Source of the markup: scripts/site_nav.py */
html { scroll-padding-top: 80px; }
body { padding-top: 64px; }
.sitenav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 64px;
    background: rgba(7, 7, 13, 0.82);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(99, 102, 241, 0.15);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.sitenav-inner { max-width: 1200px; margin: 0 auto; height: 100%; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.sitenav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; padding: 7px 0; }
.sitenav-word { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.3px; line-height: 1;
    background: linear-gradient(135deg, #fff 0%, #22d3ee 50%, #6366f1 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.sitenav-pro { background: linear-gradient(135deg, #d4af37, #b8962e); color: #000; font-size: 0.62rem; font-weight: 700; padding: 3px 7px; border-radius: 4px; margin-left: 2px; line-height: 1; box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4); }
/* mascot: same construction as the hero character, at 30px */
.sitenav-mascot { position: relative; width: 26px; height: 30px; display: block; }
.sitenav-mascot span { position: absolute; left: 50%; transform: translateX(-50%); }
.sitenav-mascot .m-body { bottom: 0; width: 13px; height: 17px; background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%); border-radius: 3px 3px 2px 2px; box-shadow: 0 0 8px rgba(99, 102, 241, 0.4); }
.sitenav-mascot .m-head { bottom: 15px; width: 11px; height: 11px; background: linear-gradient(180deg, #818cf8 0%, #6366f1 100%); border-radius: 50%; }
.sitenav-mascot .m-mask { top: 3px; width: 8px; height: 3px; background: #0f0f23; border-radius: 2px; }
.sitenav-mascot .m-mask::before, .sitenav-mascot .m-mask::after { content: ''; position: absolute; top: 0.5px; width: 2px; height: 2px; background: #22d3ee; border-radius: 1px; }
.sitenav-mascot .m-mask::before { left: 1px; } .sitenav-mascot .m-mask::after { right: 1px; }
.sitenav-mascot .m-cape { bottom: 2px; width: 19px; height: 19px; background: linear-gradient(180deg, #a78bfa 0%, #7c3aed 100%); clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 50% 80%, 0% 100%); }
.sitenav-menu { display: flex; align-items: center; gap: 22px; }
.sitenav-menu a { color: #94a3b8; text-decoration: none; font-size: 0.92rem; font-weight: 500; white-space: nowrap; transition: color 0.2s ease; padding: 6px 0; }
.sitenav-menu a:hover, .sitenav-menu a:focus-visible { color: #e2e8f0; text-decoration: none; }
.sitenav-menu a.sitenav-cta { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color: #fff; padding: 9px 18px; border-radius: 10px; font-weight: 600; box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.sitenav-menu a.sitenav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(99, 102, 241, 0.45); }
.sitenav-toggle { display: none; width: 44px; height: 44px; border: 1px solid rgba(99, 102, 241, 0.25); border-radius: 10px; background: rgba(18, 18, 32, 0.7); cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.sitenav-toggle span { display: block; width: 20px; height: 2px; background: #e2e8f0; border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
.sitenav.open .sitenav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sitenav.open .sitenav-toggle span:nth-child(2) { opacity: 0; }
.sitenav.open .sitenav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
:focus-visible { outline: 2px solid #22d3ee; outline-offset: 2px; }
@media (max-width: 960px) {
    .sitenav-toggle { display: flex; }
    .sitenav-menu { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 20px 20px; background: rgba(7, 7, 13, 0.97); border-bottom: 1px solid rgba(99, 102, 241, 0.2); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); }
    .sitenav.open .sitenav-menu { display: flex; }
    .sitenav-menu a { padding: 14px 4px; font-size: 1.05rem; border-bottom: 1px solid rgba(99, 102, 241, 0.12); }
    .sitenav-menu a.sitenav-cta { margin-top: 14px; text-align: center; padding: 14px 18px; border-bottom: none; }
}
/* pages with a fixed left sidebar (guide, training): everything moves below the bar */
body.sitenav-docs .sidebar { top: 64px; height: calc(100vh - 64px); }
body.sitenav-docs .sidebar-overlay { top: 64px; }
body.sitenav-docs .hamburger { top: 76px; }
@media (prefers-reduced-motion: reduce) {
    .sitenav-menu a, .sitenav-toggle span { transition: none; }
}