/* SafeBrowz unified nav (2026-08-03)
   Ports the homepage "Products" mega-dropdown to every other page so the menu
   is identical site-wide. Loaded AFTER the page stylesheet (blog-styles.css or
   the page's inline styles), so equal-specificity ties resolve to these rules.

   Token bridge: the homepage rules use --dim/--ink/--panel/... which only the
   homepage defines. Here they are mapped from the shared blog tokens, scoped to
   the nav so nothing else on the page can be affected. Both themes flow
   automatically because the blog tokens already swap under [data-theme]. */

nav .nav-links{
  --dim:var(--text-dim);
  --ink:var(--text);
  --mute:var(--text-mute);
  --panel:var(--surface);
  --panel2:var(--surface-2);
  --line:var(--border);
  --brand:var(--green);
  --safe-dim:rgba(16,185,129,.12);
  --safe-line:rgba(16,185,129,.42);
}
[data-theme="light"] nav .nav-links{
  --safe-dim:rgba(15,157,114,.10);
  --safe-line:rgba(15,157,114,.35);
}

/* Desktop: homepage link treatment (padded pill hover) for every item */
@media (min-width: 861px){
  nav .nav-links{gap:2px;align-items:center}
  nav .nav-links a{color:var(--dim);font-size:14px;font-weight:500;padding:8px 11px;border-radius:8px;transition:color .15s,background .15s}
  nav .nav-links a:hover{color:var(--ink);background:var(--panel2)}
}

nav .nav-item{position:relative}
nav .nav-trigger{display:inline-flex;align-items:center;gap:5px;color:var(--dim);font-size:14px;font-weight:500;padding:8px 11px;border-radius:9px;border:1px solid transparent;cursor:pointer;background:none;font-family:inherit;transition:color .15s,background .15s}
nav .nav-item:hover .nav-trigger,nav .nav-item:focus-within .nav-trigger{color:var(--ink);background:var(--panel);border-radius:12px 12px 0 0;position:relative;z-index:61}
nav .nav-trigger .car{width:10px;height:10px;transition:transform .2s;opacity:.7}
nav .nav-item:hover .car,nav .nav-item:focus-within .car{transform:rotate(180deg)}

nav .nav-panel{position:absolute;top:100%;margin-top:-1px;left:0;width:620px;background:var(--panel);border-radius:0 16px 16px 16px;padding:12px;box-shadow:0 8px 30px rgba(0,0,0,.12);border:1px solid var(--line);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s cubic-bezier(.2,.7,.2,1),transform .2s cubic-bezier(.2,.7,.2,1),visibility .2s;z-index:60}
nav .nav-item:hover .nav-panel,nav .nav-item:focus-within .nav-panel{opacity:1;visibility:visible;transform:none}
nav .nav-panel::before{content:"";position:absolute;top:-11px;left:0;right:0;height:11px}
[dir="rtl"] nav .nav-panel{left:auto;right:0;border-radius:16px 0 16px 16px}

nav .nav-panel a{padding:0;border-bottom:none}
/* a.np-link needs the boosted selector: the reset above is (0,1,2) and a bare
   .np-link rule (0,1,1) loses to it, which stripped the row padding on the four
   anchor entries while the two div entries kept theirs (owner spotted the
   cramped rows). */
nav .np-link,nav .nav-panel a.np-link{display:flex;gap:11px;align-items:flex-start;padding:9px 10px;border-radius:9px;transition:background .15s}
nav .np-link:hover,nav .nav-panel a.np-link:hover{background:var(--panel2)}
nav .np-ic{width:32px;height:32px;flex:none;border-radius:8px;display:grid;place-items:center;color:var(--brand);background:var(--safe-dim);border:1px solid var(--safe-line)}
nav .np-ic svg{width:16px;height:16px}
nav .np-t{font-size:.88rem;font-weight:600;color:var(--ink);display:block}
nav .np-d{font-size:.75rem;color:var(--mute);margin-top:1px;display:block}
nav .nav-panel.mega{padding:10px}
nav .mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
nav .np-browsers:hover{background:transparent}
nav .np-row{display:flex;gap:8px;margin-top:9px}
nav .br-ic{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;background:var(--panel2);border:1px solid var(--line);transition:border-color .2s,background .2s,transform .2s}
nav .br-ic img{width:21px;height:21px;display:block}
nav .br-ic:hover{transform:translateY(-4px) scale(1.06);border-color:var(--safe-line);background:var(--safe-dim)}

/* Store-icon slide-in replay on panel open - same motion the homepage runs via
   JS (120ms hold, then drop+pop, cubic-bezier(.2,.85,.25,1)). Done in pure CSS
   here: the animation restarts every time :hover/:focus-within re-matches, so
   no script had to be added to 465 pages. Desktop only; on mobile the panel is
   statically open inside the menu. */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference){
  nav .nav-item:hover .br-ic,nav .nav-item:focus-within .br-ic{animation:sbBrIn .48s cubic-bezier(.2,.85,.25,1) .12s backwards}
  @keyframes sbBrIn{from{opacity:0;transform:translateY(-12px) scale(.5)}to{opacity:1;transform:none}}
}

/* Mobile (matches the 860px collapse in blog-styles.css): the panel sits
   statically inside the dropdown menu, exactly like the homepage at <=980px. */
@media (max-width: 860px){
  /* The mega content makes the menu taller than a phone screen; the panel is
     absolute inside the fixed nav, so without this the lower items are
     unreachable. Neither the homepage nor blog-styles needed it before because
     8 flat rows fit. */
  nav .nav-links.open{max-height:calc(100vh - 70px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  nav .nav-item{width:100%}
  nav .nav-trigger{width:100%;justify-content:flex-start;display:flex;padding:14px 24px;font-size:16px;color:var(--ink);border-bottom:1px solid var(--line);border-radius:0}
  nav .nav-item:hover .nav-trigger,nav .nav-item:focus-within .nav-trigger{background:transparent;border-radius:0}
  nav .nav-item .nav-panel{position:static;width:100%;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;border-bottom:1px solid var(--line);border-radius:0;margin-top:0;background:transparent}
  nav .mega-grid{grid-template-columns:1fr}
  nav .nav-links .np-link{display:flex;padding:9px 24px;border-bottom:none;font-size:inherit}
  nav .nav-links .np-row a{display:grid;padding:0;border-bottom:none;margin:0}
}