/* WP-AllBackup site header. Shared by index.html and user-guide.html.
   The header is always the dark "ops" bar whatever the page's own colour scheme.
   States set by nav.js on .site-head: .is-scrolled, .is-open. */

:root{
  --nav-bg:#070C0B;
  --nav-panel:#0C1413;
  --nav-line:#1E2C28;
  --nav-ink:#D3E3DE;
  --nav-dim:#98AFA9;
  --nav-mint:#63D6C5;
  --nav-mono:"Cascadia Code","Cascadia Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --nav-sans:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
  --nav-disp:"Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  --nav-ease:cubic-bezier(.4,0,.2,1);
  --nav-h:66px;               /* resting height, desktop */
  --nav-h-compact:52px;       /* height once scrolled */
  --nav-max:1140px;           /* content column; a page overrides these to match its own */
  --nav-pad:22px;
}
/* resting height on purpose: a jump that starts at the top shrinks the bar mid-flight, and the difference is what lands the section exactly under the compact bar */
html{scroll-padding-top:calc(var(--nav-h) + 16px)}

.site-head{
  position:sticky;top:0;z-index:100;
  background:var(--nav-bg);color:var(--nav-ink);
  border-bottom:1px solid transparent;
  transition:background-color .32s var(--nav-ease),border-color .32s var(--nav-ease),box-shadow .32s var(--nav-ease);
}
.site-head-inner{
  max-width:var(--nav-max);margin:0 auto;padding:0 var(--nav-pad);
  height:var(--nav-h);
  display:flex;align-items:center;gap:20px;
  transition:height .32s var(--nav-ease);
}
.site-head.is-scrolled{
  background:color-mix(in srgb,var(--nav-bg) 90%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--nav-line);
  box-shadow:0 14px 34px -22px rgba(0,0,0,.75);
}
.site-head.is-scrolled .site-head-inner{height:var(--nav-h-compact)}
@supports not (backdrop-filter:blur(1px)){
  .site-head.is-scrolled{background:color-mix(in srgb,var(--nav-bg) 96%,transparent)}
}

/* logo */
.site-logo{
  display:flex;align-items:center;gap:10px;flex:0 0 auto;
  font-family:var(--nav-disp);font-weight:740;font-size:18px;letter-spacing:-.01em;
  color:#fff;text-decoration:none;white-space:nowrap;
  transition:font-size .32s var(--nav-ease);
}
.site-logo>svg{width:26px;height:26px;flex:none;transition:width .32s var(--nav-ease),height .32s var(--nav-ease)}
.site-head.is-scrolled .site-logo{font-size:17px}
.site-head.is-scrolled .site-logo>svg{width:23px;height:23px}

/* the free build's name, written over the top right of the wordmark. Drawn as
   paths, not a webfont: the site loads from one host and keeps it that way. */
.site-logo .okl-word{position:relative;display:inline-block}
.site-logo .okl-sig{
  position:absolute;right:-.24em;top:-.62em;
  width:2.66em;height:.98em;overflow:visible;pointer-events:none;
  color:var(--nav-mint);
}

/* nav (desktop) */
.site-nav{margin-left:auto;display:flex;align-items:center;gap:22px}
.site-nav-list{display:flex;align-items:center;gap:22px;list-style:none;margin:0;padding:0}
.site-nav-list a{
  position:relative;display:inline-block;padding:6px 0;
  font-family:var(--nav-mono);font-size:14px;color:var(--nav-dim);text-decoration:none;
  transition:color .18s ease;
}
.site-nav-list a::after{
  content:"";position:absolute;left:0;right:0;bottom:1px;height:2px;border-radius:2px;
  background:var(--nav-mint);transform:scaleX(0);transform-origin:50% 50%;
  transition:transform .22s var(--nav-ease);
}
.site-nav-list a:hover,.site-nav-list a:focus-visible,.site-nav-list a.is-active,.site-nav-list a[aria-current="page"]{color:var(--nav-ink)}
.site-nav-list a:hover::after,.site-nav-list a.is-active::after,.site-nav-list a[aria-current="page"]::after{transform:scaleX(1)}
.site-nav-actions{display:flex;align-items:center;gap:22px}
.site-nav-login{font-family:var(--nav-mono);font-size:14px;color:var(--nav-mint);text-decoration:none;white-space:nowrap}
.site-nav-login:hover{color:#fff}
.site-nav-dl{
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  color:#04120f;background:var(--nav-mint);padding:8px 15px;border-radius:8px;
  font-family:var(--nav-sans);font-weight:640;font-size:14px;text-decoration:none;
  transition:transform .12s ease,filter .15s ease;
}
.site-nav-dl:hover{transform:translateY(-1px);filter:brightness(1.06)}
.site-head a:focus-visible,.nav-toggle:focus-visible{outline:2px solid var(--nav-mint);outline-offset:3px;border-radius:6px}

/* progress line along the bottom edge; a page opts in with data-progress on .site-head (the guide does, the front page's section underline already says where you are) */
.site-progress{display:none}
.site-head[data-progress] .site-progress{
  display:block;position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  background:var(--nav-mint);transform:scaleX(0);transform-origin:0 50%;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
.site-head.is-scrolled .site-progress{opacity:.9}

/* hamburger, hidden on desktop */
.nav-toggle{
  display:none;margin-left:auto;flex:0 0 auto;
  width:44px;height:44px;padding:0;border:0;border-radius:10px;
  background:transparent;color:var(--nav-ink);cursor:pointer;
  align-items:center;justify-content:center;
}
.nav-toggle-box{position:relative;display:block;width:22px;height:16px}
.nav-toggle-box i{
  position:absolute;left:0;width:22px;height:2px;border-radius:2px;background:currentColor;
  transition:transform .28s var(--nav-ease),opacity .2s ease,top .28s var(--nav-ease);
}
.nav-toggle-box i:nth-child(1){top:0}
.nav-toggle-box i:nth-child(2){top:7px}
.nav-toggle-box i:nth-child(3){top:14px}
.site-head.is-open .nav-toggle-box i:nth-child(1){top:7px;transform:rotate(45deg)}
.site-head.is-open .nav-toggle-box i:nth-child(2){opacity:0;transform:scaleX(.2)}
.site-head.is-open .nav-toggle-box i:nth-child(3){top:7px;transform:rotate(-45deg)}
.nav-backdrop{
  position:fixed;inset:0;z-index:99;background:rgba(3,8,7,.55);
  opacity:0;visibility:hidden;transition:opacity .28s ease,visibility 0s linear .28s;
}

/* ---------- mobile ---------- */
@media (max-width:900px){
  :root{--nav-h:58px;--nav-h-compact:50px}
  .site-head-inner{gap:12px}
  .nav-toggle{display:inline-flex;margin-right:-11px}
  .site-head.is-open ~ .nav-backdrop{opacity:1;visibility:visible;transition-delay:0s}

  .site-nav{
    position:absolute;left:0;right:0;top:100%;margin:0;
    display:block;
    background:var(--nav-panel);border-bottom:1px solid var(--nav-line);
    box-shadow:0 30px 50px -20px rgba(0,0,0,.7);
    max-height:calc(100vh - var(--nav-h-compact));max-height:calc(100dvh - var(--nav-h-compact));overflow:auto;
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .2s var(--nav-ease),transform .22s var(--nav-ease),visibility 0s linear .22s;
  }
  .site-head.is-open .site-nav{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .site-nav-list{display:block;padding:8px 0 4px}
  .site-nav-list li{
    opacity:0;transform:translateY(-6px);
    transition:opacity .17s ease,transform .2s var(--nav-ease);
  }
  .site-head.is-open .site-nav-list li{opacity:1;transform:none}
  .site-nav-list li:nth-child(2){transition-delay:.02s}
  .site-nav-list li:nth-child(3){transition-delay:.04s}
  .site-nav-list li:nth-child(4){transition-delay:.06s}
  .site-nav-list li:nth-child(5){transition-delay:.08s}
  .site-nav-list a{
    display:block;padding:13px max(var(--nav-pad),18px);font-size:16px;color:var(--nav-ink);
    border-left:2px solid transparent;
  }
  .site-nav-list a::after{display:none}
  .site-nav-list a:hover,.site-nav-list a.is-active,.site-nav-list a[aria-current="page"]{
    color:var(--nav-mint);border-left-color:var(--nav-mint);
    background:color-mix(in srgb,var(--nav-mint) 7%,transparent);
  }
  .site-nav-actions{
    display:flex;gap:10px;padding:12px max(var(--nav-pad),18px) 18px;border-top:1px solid var(--nav-line);margin-top:6px;
    opacity:0;transform:translateY(-6px);
    transition:opacity .17s ease .09s,transform .2s var(--nav-ease) .09s;
  }
  .site-head.is-open .site-nav-actions{opacity:1;transform:none}
  .site-nav-login,.site-nav-dl{flex:1 1 0;justify-content:center;text-align:center;padding:12px 14px;border-radius:9px;font-size:15px}
  .site-nav-login{display:inline-flex;align-items:center;border:1px solid var(--nav-line);color:var(--nav-mint)}
  .site-nav-dl{font-weight:680}
}

/* tablet: the same panel as a sheet hanging under the button, not a full-width bar */
@media (min-width:601px) and (max-width:900px){
  .site-nav{
    left:auto;right:12px;width:min(440px,calc(100% - 24px));
    border:1px solid var(--nav-line);border-top:0;border-radius:0 0 14px 14px;
    transform-origin:top right;
  }
}

@media (prefers-reduced-motion:reduce){
  .site-head,.site-head *,.site-head *::after,.nav-backdrop{transition:none !important}
}
@media print{
  .site-head,.site-head.is-scrolled,.site-head *{transition:none !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;box-shadow:none !important}
  .site-head,.site-head.is-scrolled{position:static;background:#fff;color:#000;border-bottom:1px solid #ccc}
  .site-head.is-scrolled .site-head-inner{height:var(--nav-h)}
  .site-nav,.nav-toggle,.site-progress{display:none !important}
  .site-logo,.site-head.is-scrolled .site-logo{color:#000;font-size:18px}
}