/* ============================================================================
   Shared primary navigation — How-to · Security · Pricing + "Install free".
   First-party and self-hosted; no CDN, no third-party asset.

   The site has no build step, so the markup block itself lives in every page.
   It must stay byte-identical across index.html, pricing.html,
   permissions.html, how-to-reply-with-attachments-in-outlook.html and
   404.html — only the aria-current="page" attribute differs per page.
   See DEPLOYMENT.md, section "Shared navigation block".

   Tokens used (declared by every page's :root): --paper, --line, --line-strong,
   --ink, --ink-soft, --cobalt, --cobalt-tint, --shadow-md, --serif, --sans.
   ========================================================================== */

header.nav{position:sticky;top:0;z-index:50;backdrop-filter:saturate(140%) blur(12px);
  background:rgba(243,239,230,.72);border-bottom:1px solid transparent;transition:.3s}
header.nav.scrolled{border-bottom:1px solid var(--line);background:rgba(243,239,230,.86)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:72px}
/* The bar keeps its own width on every page, so the logo and the CTA do not
   jump when the page container underneath is narrower (pricing/permissions
   1080px, 404 880px). Overrides the page's own .container width — hence the
   element+class specificity. */
header.nav .nav-inner{max-width:1180px;padding-inline:clamp(20px,5vw,40px)}

.brand{display:flex;align-items:center;gap:.6em;font-family:var(--serif);font-weight:700;font-size:1.12rem;letter-spacing:-.02em}
.brand .mark{display:block;object-fit:contain;width:34px;height:34px;border-radius:9px;flex:none;
  box-shadow:0 4px 10px -3px rgba(47,75,255,.55)}

.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a{position:relative;padding:.5em .85em;border-radius:8px;font-weight:500;font-size:.95rem;
  color:var(--ink-soft);white-space:nowrap;transition:.18s}
.nav-links a:hover{color:var(--ink);background:rgba(20,22,27,.05)}
/* Current page: weight + an underline bar, never colour on its own. */
.nav-links a[aria-current="page"]{color:var(--ink);font-weight:700}
.nav-links a[aria-current="page"]::after{content:"";position:absolute;left:.85em;right:.85em;bottom:.2em;
  height:2px;border-radius:2px;background:var(--cobalt)}

/* Keyboard focus stays visible in the bar on every page, whatever the page
   stylesheet does. */
header.nav :focus-visible{outline:3px solid var(--cobalt);outline-offset:2px;border-radius:4px}

.nav-cta{display:flex;align-items:center;gap:.6rem}
.menu-toggle{display:none;background:transparent;border:none;cursor:pointer;width:42px;height:42px;
  border-radius:10px;align-items:center;justify-content:center;color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--line-strong);transition:.2s}
.menu-toggle:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.menu-toggle svg{width:22px;height:22px}
.menu-toggle .ic-close{display:none}
.nav.open .menu-toggle .ic-open{display:none}
.nav.open .menu-toggle .ic-close{display:block}

/* Collapse into a toggle-driven panel once the bar runs out of room.
   Measured 2026-08-17: brand + the three links + the CTA need 589px and still
   fit at a 660px viewport, so 760px keeps ~100px of reserve — and leaves
   iPad portrait (768px) on the full bar instead of behind a hamburger. */
@media(max-width:760px){
  .menu-toggle{display:inline-flex}
  .nav-links{position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;
    background:var(--paper);border-bottom:1px solid var(--line);box-shadow:var(--shadow-md);
    padding:.6rem clamp(20px,5vw,40px) 1rem;display:none}
  .nav.open .nav-links{display:flex}
  .nav-links a{padding:.8em .7em;font-size:1.02rem;border-radius:9px}
  /* In the stacked panel a full-width underline reads as a separator, so the
     current page is marked by weight plus a leading bar and a tint instead. */
  .nav-links a[aria-current="page"]{background:var(--cobalt-tint);box-shadow:inset 3px 0 0 var(--cobalt)}
  .nav-links a[aria-current="page"]::after{content:none}
}
@media(max-width:560px){.brand-text{display:none}}

/* Without JavaScript the toggle cannot open the panel. The links therefore stay
   on the page as a static row underneath the header instead of disappearing.
   The three labels measure 233px together and fit one line down to 320px. */
.no-js .menu-toggle{display:none}
@media(max-width:760px){
  /* the static row makes the sticky bar taller — keep in-page anchors clear of it */
  html.no-js{scroll-padding-top:142px}
  .no-js .nav-inner{flex-wrap:wrap;height:auto;padding-block:.6rem}
  .no-js .nav-links{position:static;order:1;width:100%;display:flex;flex-direction:row;flex-wrap:wrap;
    justify-content:center;gap:2px;padding:.25rem 0 0;background:transparent;border-bottom:none;box-shadow:none}
  .no-js .nav-links a{padding:.45em .6em;font-size:.95rem}
  .no-js .nav-links a[aria-current="page"]{background:transparent;box-shadow:none}
  .no-js .nav-links a[aria-current="page"]::after{content:"";left:.6em;right:.6em}
}