/* Cratefox site navigation, one source of truth.
   Every public page loads this and carries the identical menu, so the top bar
   never changes shape when you move between pages. Selectors are class-based on
   purpose: pages still carry their own inline `header nav{...}` element rules,
   and a class (0,1,x) always outranks those (0,0,x) whatever the load order.
   Colours are literal, not page variables, so the bar renders the same on pages
   whose :root palettes drifted apart. */

/* Sticky headers used to swallow the top of every #anchor target. */
html{ scroll-padding-top:84px }

.cfnav{ --cfn-text:#E8EDF2; --cfn-muted:#9AA3AD; --cfn-accent:#22D3EE;
        --cfn-accent-hover:#4FE3F5; --cfn-ink:#07222a;
        position:sticky; top:0; z-index:60 }

/* Subpage row. The homepage keeps its own .wrap/.nav row and only borrows the
   burger + mobile panel below. width:100% matters where the header itself is a
   flex container (install page): without it the row shrinks to fit. */
.cfnav-row{ display:flex; align-items:center; gap:10px; width:100%;
  max-width:880px; margin:0 auto; padding:0 24px; min-height:64px }

.cfnav .cfnav-brand{ display:flex; align-items:center; gap:10px;
  text-decoration:none; flex:0 0 auto }
.cfnav .cfnav-brand:hover{ text-decoration:none }
.cfnav .cfnav-brand img{ height:18px; width:auto; display:block }

.cfnav-row .cfnav-menu{
  margin:0 0 0 auto; display:flex; align-items:center; gap:22px;
  font-size:14px; line-height:1 }
.cfnav .cfnav-menu a{
  color:var(--cfn-muted); text-decoration:none; white-space:nowrap;
  padding:4px 0; transition:color .14s ease }
.cfnav .cfnav-menu a:hover{ color:var(--cfn-text); text-decoration:none }
/* You are here. A bar that never moves is also a map, so mark the spot. */
.cfnav .cfnav-menu a[aria-current="page"]{ color:var(--cfn-text);
  box-shadow:0 1px 0 0 var(--cfn-accent) }

/* One CTA, same label and shape on every page. */
.cfnav .cfnav-menu a.cfnav-cta{
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; padding:0 15px; border-radius:10px;
  background:var(--cfn-accent); color:var(--cfn-ink);
  font-weight:600; white-space:nowrap; text-decoration:none;
  transition:background-color .16s ease, transform .16s ease }
.cfnav .cfnav-menu a.cfnav-cta:hover{ background:var(--cfn-accent-hover);
  color:var(--cfn-ink); transform:translateY(-1px) }
.cfnav .cfnav-menu a.cfnav-cta:active{ transform:none }
.cfnav .cfnav-menu a.cfnav-cta[aria-current="page"]{ box-shadow:none; color:var(--cfn-ink) }

/* Burger, desktop-hidden. */
.cfnav .cfnav-burger{
  display:none; margin-left:auto; width:40px; height:40px; padding:0;
  align-items:center; justify-content:center; flex-direction:column; gap:4px;
  background:transparent; border:1px solid rgba(232,237,242,.14);
  border-radius:10px; cursor:pointer; flex:0 0 auto }
.cfnav .cfnav-burger span{
  display:block; width:16px; height:1.5px; background:var(--cfn-text);
  border-radius:2px; transition:transform .18s ease, opacity .18s ease }
.cfnav .cfnav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg) }
.cfnav .cfnav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.cfnav .cfnav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg) }

@media(max-width:880px){
  .cfnav .cfnav-burger{ display:flex }
  .cfnav .cfnav-menu{
    position:absolute; left:0; right:0; top:100%;
    margin:0; display:none; flex-direction:column; align-items:stretch; gap:0;
    padding:8px 24px 18px;
    /* solid on purpose: the panel is a child of a header that already has a
       backdrop-filter, so a nested one silently no-ops and content bleeds through */
    background:#0b0d13;
    border-bottom:1px solid rgba(232,237,242,.08) }
  .cfnav .cfnav-menu.is-open{ display:flex }
  .cfnav .cfnav-menu a{ font-size:16px; padding:13px 0;
    border-bottom:1px solid rgba(232,237,242,.06) }
  .cfnav .cfnav-menu a[aria-current="page"]{ color:var(--cfn-accent); box-shadow:none }
  .cfnav .cfnav-menu a.cfnav-cta{ margin-top:14px; height:44px;
    border-bottom:0; font-size:15px }
}

/* ---- footer map: the way back, on every page ---- */
.cfmap{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px;
  max-width:880px; margin:70px auto 0; padding:22px 24px 0; font-size:13px;
  border-top:1px solid rgba(232,237,242,.08) }
.cfmap a{ color:#7B8494; text-decoration:none; white-space:nowrap }
.cfmap a:hover{ color:#E8EDF2; text-decoration:none }