/* The site menu, on every page (layout A, Alec's pick, 23 Sept 2026): for
   brands on the left, for factories on the right, a line under each link
   saying what is behind it, and a quiet row for the rest. js/nav.js opens and
   closes it. It carries its own colours, so it looks the same on every page
   whatever the page's palette, and each page loads it after its own
   stylesheets. Stacking (z-index) stays with each page.

   Every page asks for css/menu.css?v=N, and Cloudflare keeps each URL for a
   year. When this file changes, move N on every page that loads it
   (grep -l "css/menu.css?v=" *.html), then run tools/build_es.mjs and
   tools/build_network.mjs. deploy.sh's own check only watches the first ?v=
   in index.html, so it will not catch a page left behind.                   */

.nav-sheet.menu-a {
  --menu-ink: #14222c;
  --menu-sub: #4f5e64;
  --menu-muted: #596369;
  --menu-blue: #0866ef;
  --menu-green: #16a66a;
  --menu-paper: #f7f4ec;
  --menu-hair: rgba(20, 34, 44, 0.08);
  --menu-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  gap: 0;
  padding: 150px max(8vw, 26px) 48px;
  background: var(--menu-paper);
  overflow: auto;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}
body.nav-open .nav-sheet.menu-a { display: flex; animation: menu-in 0.2s ease both; }
body.nav-open { overflow: hidden; }
.menu-a .sheet-cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(40px, 7vw, 110px); width: 100%; max-width: 1140px; }
.menu-a .sheet-label { margin: 0 0 22px; color: var(--menu-blue); font-size: 16px; font-weight: 500; letter-spacing: 0; }
.nav-sheet.menu-a a.sheet-link { display: block; margin: 0 0 26px; padding: 0; border: 0; color: var(--menu-ink); font-size: 16px; font-weight: 400; letter-spacing: 0; text-decoration: none; }
.nav-sheet.menu-a a.sheet-link:hover { color: var(--menu-ink); }
.menu-a .sheet-link b { display: block; font-size: clamp(28px, 2.7vw, 40px); font-weight: 500; line-height: 1.1; letter-spacing: -0.045em; transition: color 0.15s; }
.menu-a .sheet-link span { display: block; margin-top: 6px; font-size: 16px; line-height: 1.5; color: var(--menu-muted); }
.menu-a .sheet-link:hover b, .menu-a .sheet-link[aria-current="page"] b { color: var(--menu-blue); }
.menu-a .sheet-link[aria-current="page"] b::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 12px; border-radius: 50%; background: var(--menu-blue); vertical-align: 0.3em; }
.menu-a .sheet-link:focus-visible, .menu-a .sheet-more a:focus-visible { outline: 3px solid var(--menu-blue); outline-offset: 6px; border-radius: 4px; }
.menu-a .sheet-more { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 34px; width: 100%; max-width: 1140px; margin: auto 0 0; padding-top: 22px; border-top: 1px solid var(--menu-hair); font-size: 16px; }
.menu-a .sheet-more a { color: var(--menu-sub); text-decoration: none; }
.menu-a .sheet-more a:hover { color: var(--menu-ink); }
.menu-a .sheet-more a[aria-current="page"] { color: var(--menu-blue); }
.menu-a .sheet-more .sheet-wa { color: var(--menu-green); }
body.nav-open .menu-a .sheet-link { animation: menu-rise 0.38s var(--menu-ease) both; animation-delay: calc(60ms + var(--i, 0) * 45ms); }
@keyframes menu-in { from { opacity: 0; } }
@keyframes menu-rise { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 640px) {
  .nav-sheet.menu-a { padding: 104px 24px 32px; }
  .menu-a .sheet-cols { grid-template-columns: 1fr; gap: 14px; }
  .menu-a .sheet-label { margin-bottom: 14px; }
  .nav-sheet.menu-a a.sheet-link { margin-bottom: 18px; }
  .menu-a .sheet-link b { font-size: 26px; }
  .menu-a .sheet-link span { font-size: 14.5px; }
}

@media (prefers-reduced-motion: reduce) {
  body.nav-open .nav-sheet.menu-a, body.nav-open .menu-a .sheet-link { animation: none; }
}

/* The header on pages that do not have the homepage's own: the menu on the
   left at every size, the wordmark in the middle, the languages on the right,
   and it stays above the menu it opens. */
.header.site-top { position: relative; z-index: 100; }
.site-top .container { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.site-top .nav-burger { display: flex; justify-self: start; width: 46px; height: 46px; margin-left: -10px; padding: 10px; gap: 5px; }
.site-top .nav-burger span { height: 2px; border-radius: 0; }
.site-top .nav-burger span:nth-child(3) { display: none; }
body.nav-open .site-top .nav-burger span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
body.nav-open .site-top .nav-burger span:nth-child(2) { opacity: 1; transform: translateY(-3.5px) rotate(-45deg); }
.site-top .nav-burger:focus-visible { outline: 3px solid #0866ef; outline-offset: 3px; }
.site-top .brand { justify-self: center; }
.site-top .header-right { justify-self: end; }
.header.site-top .lang-toggle { display: inline-flex; }