/* Site chrome — the menu on every public page, and the footer on every public page but the
   landing (which keeps its design's own). Loaded LAST by layouts/site, layouts/migrate and
   layouts/home, so these rules win over each page's own link colours.

   Self-contained on purpose: it declares its own font, colours and sizes rather than
   inheriting them, so the chrome looks the same on the dark pages and on the light blog. */

.sc{
  --sc-bg:#000;
  --sc-line:#fff;
  --sc-text:#d6d6d0;
  --sc-faint:#6f6f68;
  --sc-rule:#4a4a44;
  --sc-accent:#ff7a1a;
  --sc-link:#7aa5ff;
  --sc-link-bg:#1b2440;
  --sc-mono:'IBM Plex Mono','Courier New',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sc-max:975px;

  font-family:var(--sc-mono); font-size:15px; line-height:1.6; color:var(--sc-text);
}

/* Visited links keep the unvisited colour — the footer stays one colour as people browse. */
.sc a,
.sc a:visited{ color:var(--sc-link); text-decoration:underline; text-underline-offset:2px; }
.sc a:hover{ color:#fff; background:var(--sc-link-bg); }

/* ---------- menu (shared/_site_nav) ---------- */
/* The landing design's nav (pgrun-export 3), on every public page. Its look is inline in
   the partial; this only supplies the ground those inline styles assume — the landing's
   near-black and IBM Plex Mono — and what inline styles cannot express. Not sticky, as
   designed. */
header.site-menu{
  background:#0b0d0f;
  font-family:'IBM Plex Mono','Courier New',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:400; line-height:1.6;
}

/* landing.css zooms body.lp to 1.1 on every page that loads it; zoom the menu back out so it
   is the landing's exact size everywhere. The blog resets body zoom itself. */
body.lp header.site-menu{ zoom:0.90909; }
body.lp.blog-mono header.site-menu{ zoom:1; }

/* The pages' own link rules (.lp a, .d a) underline and tint on hover. Colours are inline
   and already win; this cancels the rest. */
header.site-menu a,
header.site-menu a:visited,
header.site-menu a:hover{ text-decoration:none; background:none; }

@keyframes flashBW{ 0%{ background:#000; border-color:#000; } 100%{ background:#fff; border-color:#fff; } }
@keyframes siteMenuFadeIn{ from{ opacity:0; transform:translateY(-3px); } to{ opacity:1; transform:translateY(0); } }

.site-menu .products-dropdown{ display:none; }
.site-menu .products-wrap:hover .products-dropdown,
.site-menu .products-wrap:focus-within .products-dropdown{ display:flex; animation:siteMenuFadeIn .15s ease-out; }
.site-menu .products-trigger:focus-visible{ outline:1px solid oklch(0.72 0.11 235); outline-offset:4px; border-radius:3px; }
/* Beats `header.site-menu a:hover{background:none}` on specificity (three classes). */
.site-menu .products-item:hover,
.site-menu .products-item:focus-visible{ background:oklch(0.2 0.008 250); outline:none; }

/* The blog's light/dark switch, in the same outline style as the landing demo's "<>" key. */
.site-menu .site-menu-theme{
  width:28px; height:28px; display:flex; align-items:center; justify-content:center; padding:0;
  font:inherit; font-size:14px; line-height:1; cursor:pointer;
  color:oklch(0.66 0.01 250); background:none; border:1px solid oklch(0.32 0.008 250); border-radius:6px;
}
.site-menu .site-menu-theme:hover{ color:oklch(0.92 0.005 250); border-color:oklch(0.48 0.01 250); }

/* Phones: the single row would run off-screen, so it wraps. !important because the padding
   it overrides is inline. */
@media (max-width:720px){
  .site-menu .site-menu-bar{ flex-wrap:wrap; row-gap:12px; padding:18px 20px !important; }
}

/* ---------- footer ---------- */
footer.sc-foot{ margin-top:52px; background:var(--sc-bg); padding:0 20px; }
/* Same rule as the nav: gutter outside the bordered box, so the line and the first link
   start at the same x. */
.sc-foot-in{
  max-width:var(--sc-max); margin:0 auto; padding:16px 0 28px;
  display:flex; flex-wrap:wrap; gap:6px 10px; font-size:14px; color:var(--sc-faint); align-items:center;
  border-top:1px solid var(--sc-line);
}
.sc .sc-status,
.sc .sc-status:visited{ margin-left:auto; display:flex; align-items:center; gap:7px; text-decoration:none; color:var(--sc-accent); background:none; }
.sc .sc-status:hover{ background:none; color:var(--sc-accent); text-decoration:none; }
.sc-status i{ width:7px; height:7px; background:var(--sc-accent); display:inline-block; }
.sc-copy{ width:100%; color:var(--sc-rule); padding-top:6px; }

.sc .sc-foot-x,
.sc .sc-foot-x:visited{
  display:inline-flex; align-items:center; gap:6px; color:var(--sc-faint);
  text-decoration:none; background:none;
}
.sc .sc-foot-x:hover{ color:var(--sc-accent); background:none; }
.sc-foot-x svg{ flex:none; }