/* ===== Shared site navigation (Home · Platforms ▾ · Guide · About · Contact) ===== */
/* Loaded after each page's inline styles so it standardises the header everywhere. */

header.nav{position:sticky;top:0;z-index:50;background:rgba(243,243,240,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);}
.navrow{display:flex;align-items:center;justify-content:space-between;height:64px;gap:20px;}
.brand{display:flex;align-items:center;gap:10px;flex:none;}
.brand img{width:28px;height:28px;border-radius:7px;}
.brand b{font-weight:600;font-size:16px;letter-spacing:-0.02em;color:var(--ink);}

.navlinks{display:flex;align-items:center;gap:2px;}
.navlinks>a,.dbtn{font-family:var(--mono);font-size:12.5px;color:var(--ink60);padding:8px 11px;border-radius:7px;transition:color .15s ease,background-color .15s ease;background:transparent;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:5px;line-height:1;letter-spacing:0;}
.navlinks>a:hover,.dbtn:hover{color:var(--ink);background:var(--paper2);}
.navlinks>a.active,.dbtn.active{color:var(--green);}
.navlinks>a:focus-visible,.dbtn:focus-visible,.dmenu a:focus-visible{outline:2px solid rgba(40,119,92,.45);outline-offset:2px;}

/* Click to open; stays anchored until you click away or press Escape (no hover-off flicker). */
.dropdown{position:relative;}
.dbtn .chev{transition:transform .15s ease;}
.dropdown.open .dbtn .chev{transform:rotate(180deg);}
.dropdown.open .dbtn{color:var(--ink);background:var(--paper2);}
.dmenu{position:absolute;top:calc(100% + 8px);left:0;min-width:186px;background:var(--paper);border:1px solid var(--border);border-radius:12px;padding:6px;box-shadow:0 22px 46px -24px rgba(0,0,0,.32);display:none;flex-direction:column;gap:2px;z-index:60;}
/* invisible bridge so the pointer can travel from the button into the menu */
.dmenu::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px;}
.dropdown.open .dmenu{display:flex;}
.dmenu a{font-family:var(--mono);font-size:12.5px;color:var(--ink60);padding:9px 12px;border-radius:8px;white-space:nowrap;transition:color .15s ease,background-color .15s ease;}
.dmenu a:hover{color:var(--ink);background:var(--paper2);}
.dmenu a.active{color:var(--green);}

.burger{display:none;width:40px;height:40px;border-radius:8px;background:var(--paper2);align-items:center;justify-content:center;cursor:pointer;color:var(--ink);border:0;}

@media (max-width:820px){
  .navlinks{display:none;}
  .navlinks.open{display:flex;position:absolute;top:64px;left:16px;right:16px;flex-direction:column;align-items:stretch;background:var(--paper);border:1px solid var(--border);border-radius:14px;padding:10px;gap:2px;box-shadow:0 24px 50px -20px rgba(0,0,0,.25);z-index:60;}
  .burger{display:flex;}
  .navlinks.open>a,.navlinks.open .dbtn{padding:12px 12px;font-size:13px;justify-content:flex-start;width:100%;border-radius:9px;}
  .dropdown{position:static;}
  .dropdown:hover .dmenu,.dropdown:focus-within .dmenu{display:none;}
  .dmenu{position:static;display:none;box-shadow:none;border:0;border-radius:0;padding:2px 0 4px 16px;background:transparent;min-width:0;}
  .dropdown.open .dmenu{display:flex;}
  .dmenu a{padding:10px 10px;font-size:12.5px;}
}
@media (prefers-reduced-motion:reduce){.dbtn .chev{transition:none;}}