/* Misaq nav bar. One bar on every page.
 *
 * The markup lives in each page's HTML rather than being injected, so it is
 * there with JavaScript off, it is crawlable, and it does not shift the page
 * on load. assets/js/misaq-nav.js adds behaviour on top.
 *
 * Every colour is a token with a literal fallback, because only three of the
 * sixty-two pages define the Misaq palette; the rest carry their own CSS and
 * would otherwise render an unstyled bar.
 */

.nb{position:sticky;top:0;z-index:60;border-bottom:1px solid transparent;background:transparent;
  font-family:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;
  transition:background .3s ease, color .3s ease, border-color .3s ease}

/* data-tone is the tone of whatever sits behind the bar. A nav bar blends
   into it. Opaque by default, because on most pages the bar is a block in
   normal flow above the header rather than an overlay on it, so transparent
   would show the body colour instead of the header. */
.nb[data-tone="dark"]{background:var(--night,#300B1D);color:var(--night-ink,#FDFBEF)}
.nb[data-tone="light"]{background:var(--cream,#FDFBEF);color:var(--ink,#1E0913)}

/* Pinned, it becomes a glass plate over whatever it is covering. */
.nb.stuck{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.nb.stuck,.nb.open{border-bottom-color:color-mix(in srgb, currentColor 14%, transparent)}
.nb.stuck[data-tone="dark"]{background:color-mix(in srgb, var(--night,#300B1D) 90%, transparent)}
.nb.stuck[data-tone="light"]{background:color-mix(in srgb, var(--cream,#FDFBEF) 92%, transparent)}
/* With the sheet open the bar is that sheet's header, so it takes the sheet's
   flat colour. Left as glass it reads a shade lighter and a seam shows where
   the two meet. These must stay after the .stuck pair: equal specificity. */
.nb.open[data-tone="dark"]{background:var(--night,#300B1D);backdrop-filter:none;-webkit-backdrop-filter:none}
.nb.open[data-tone="light"]{background:var(--cream,#FDFBEF);backdrop-filter:none;-webkit-backdrop-filter:none}

.nb-in{width:min(1240px, 100% - 48px);margin-inline:auto;display:flex;align-items:center;gap:16px;height:66px}
.nb-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;font-size:21px;font-weight:600;letter-spacing:-.025em}
/* Both marks ship in the HTML and one is hidden, so the swap on tone change
   is a display toggle rather than a network request mid-scroll. */
.nb-m{width:30px;height:30px;display:none}
.nb[data-tone="dark"] .nb-m-w{display:block}
.nb[data-tone="light"] .nb-m-b{display:block}

.nb-links{display:flex;align-items:center;gap:2px;margin-left:auto}
.nb-links a[hidden]{display:none}
.nb-links a{display:block;color:inherit;text-decoration:none;font-size:16px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;padding:9px 14px;border-radius:999px;opacity:.72;transition:opacity .2s ease, background .2s ease}
.nb-links a:not(.nb-cta):hover,.nb-links a:not(.nb-cta):focus-visible{opacity:1;background:color-mix(in srgb, currentColor 11%, transparent)}
.nb-links a.on{opacity:1;font-weight:600;background:color-mix(in srgb, currentColor 11%, transparent)}
/* a.nb-cta, not .nb-cta: it has to outrank ".nb-links a", which carries the
   dimmed opacity the other links want. */
.nb-links a.nb-cta{opacity:1;font-weight:600;margin-left:8px;padding:11px 20px;transition:transform .15s ease}
.nb[data-tone="dark"] .nb-cta{background:var(--night-ink,#FDFBEF);color:var(--night,#300B1D)}
.nb[data-tone="light"] .nb-cta{background:var(--btn,#1E0913);color:var(--btn-ink,#FDFBEF)}
.nb-cta:hover{transform:translateY(-1px)}

.nb-burger{display:none;margin-left:auto;width:44px;height:44px;padding:0;background:none;border:0;color:inherit;cursor:pointer;border-radius:13px;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nb-burger span{display:block;width:20px;height:2px;border-radius:2px;background:currentColor;transition:transform .25s ease}
.nb-burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nb-burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* Anchors land below the bar instead of under it, on every page rather than
   only the ones that remembered to set scroll-margin on their sections. */
html{scroll-padding-top:88px}

/* Below this the seven items no longer fit on one line, so they become a
   sheet. It is absolutely positioned inside .nb, which is sticky and therefore
   a containing block, so it hangs off the bar whether or not the bar is pinned. */
@media (max-width:1000px){
  html{scroll-padding-top:70px}
  .nb-in{height:58px}
  .nb-burger{display:flex}
  .nb-links{position:absolute;top:100%;left:0;right:0;margin:0;flex-direction:column;align-items:stretch;gap:2px;
    padding:10px 16px calc(14px + env(safe-area-inset-bottom));
    max-height:calc(100dvh - 58px);overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .22s ease, transform .22s ease, visibility .22s}
  .nb.open .nb-links{opacity:1;visibility:visible;transform:none}
  /* Opaque. At 97% the page behind still ghosted through the links, because
     the sheet hangs outside .nb's box and so gets none of its blur. */
  .nb-links{border-bottom:1px solid color-mix(in srgb, currentColor 14%, transparent)}
  .nb[data-tone="dark"] .nb-links{background:var(--night,#300B1D)}
  .nb[data-tone="light"] .nb-links{background:var(--cream,#FDFBEF)}
  .nb-links a{font-size:18px;padding:14px 16px;border-radius:14px;opacity:1}
  .nb-cta{margin:8px 0 0;text-align:center;padding:15px 20px}
}
@media (prefers-reduced-motion: reduce){
  .nb,.nb-links,.nb-links a,.nb-burger span{transition:none}
}