/* Fault Codex — persistent sticky top navigation (server-rendered by fmp_nav_html(), * enhanced by assets/js/10-header.js). * * The palette tokens (--fmp-*) are declared on :root (see 00-base.css), so the nav * inherits them whether it renders inside .fmp-app (About/Contact) or on the full-page * portal (templates/portal.php) directly under . No per-scope redeclaration. */ .fmp-nav{ position:sticky; top:0; z-index:100; /* above page content (combobox list is 40); below modals (9999) */ background:#fff; border-bottom:1px solid var(--fmp-border); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } .fmp-nav *,.fmp-nav *::before,.fmp-nav *::after{box-sizing:border-box} .fmp-nav-inner{ max-width:1080px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:16px; } /* Logo (left) */ .fmp-nav-logo{display:inline-flex;align-items:center;line-height:0;flex:0 0 auto} .fmp-nav-logo img{display:block;height:34px;width:auto} /* Primary links (center) */ .fmp-nav-links{display:flex;align-items:center;gap:4px;flex:1 1 auto;flex-wrap:wrap;min-width:0} .fmp-nav-link{ text-decoration:none; color:var(--fmp-navy); font-weight:700; font-size:14.5px; line-height:1; white-space:nowrap; padding:8px 12px; border-radius:8px; transition:background .15s,color .15s; } .fmp-nav-link:hover{background:#eef5f6;color:var(--fmp-teal)} .fmp-nav-link:focus-visible{outline:2px solid var(--fmp-teal);outline-offset:2px} .fmp-nav-link.active,.fmp-nav-link[aria-current="page"]{background:#eef2f7;color:var(--fmp-navy)} /* Right actions (language dropdown + login/sign-up, or the injected account menu) */ .fmp-nav-right{display:flex;align-items:center;gap:10px;flex:0 0 auto;margin-left:auto} .fmp-nav-right:empty{display:none} .fmp-nav-cta{white-space:nowrap} /* Keep the account dropdown menu anchored to the right edge inside the nav. */ .fmp-nav-right .fmp-acct-menu{left:auto;right:0} /* Responsive: stack the primary links onto their own row on narrow screens. */ @media (max-width:720px){ .fmp-nav-inner{flex-wrap:wrap;gap:10px;padding:10px 12px} .fmp-nav-logo{order:1} .fmp-nav-right{order:2} .fmp-nav-links{order:3;flex-basis:100%;justify-content:flex-start;gap:2px} .fmp-nav-logo img{height:30px} .fmp-nav-link{padding:7px 10px;font-size:14px} } @media (max-width:420px){ .fmp-nav-cta{padding:9px 12px;font-size:13.5px} }