/* The site header's shared behavior, for every page with the full top menu: the header fit, then the
   Products menu (Tenon, MachLinx, more later). Each value falls back to the homepage token, because
   the News pages define a smaller token set. */

/* Header fit. Nav labels never wrap. Between 901 and 1080 px the row tightens. If it still doesn't
   fit (a wider fallback font, a longer label), site-nav.js adds .nav-tight and the header uses the
   burger menu, the same as below 900 px. Above 900 px the logo box keeps its width, so a squeeze shows
   up as overflow the script can see, never as nav links sliding under the logo. */
.site-header .nav-links > a, .site-header .nav-menu-btn { white-space: nowrap; }
@media (min-width: 901px) { .site-header .brand-logo { flex: none; } }
@media (min-width: 901px) and (max-width: 1080px) {
  .site-header .nav-links { gap: 14px; }
  .site-header .nav-links > a, .site-header .nav-menu-btn { font-size: 13.5px; }
  .site-header .brand-logo .logo-header { height: 21px; width: 240px; }
}
.site-header.nav-tight .nav-links { display: none; }
.site-header.nav-tight .nav-burger { display: inline-flex; }
.site-header.nav-tight.nav-open .nav-links {
  display: flex; position: absolute; top: 100%; left: 0; right: 0;
  flex-direction: column; align-items: stretch; gap: 0;
  background: var(--bg); border-bottom: 1px solid var(--border);
  padding: var(--s2, 16px) var(--s3, 24px) var(--s3, 24px); margin: 0;
}
.site-header.nav-tight.nav-open .nav-links > a { padding: 12px 4px; border-bottom: 1px solid var(--border); font-size: 16px; box-shadow: none; }
.site-header.nav-tight.nav-open .nav-links > a:last-child { border-bottom: 0; }
.site-header.nav-tight.nav-open .nav-menu { display: block; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.site-header.nav-tight.nav-open .nav-menu-btn { width: 100%; padding: 12px 4px 4px; font-size: 16px; box-shadow: none; border-bottom: 0; }
.site-header.nav-tight.nav-open .nav-menu-list {
  position: static; opacity: 1; visibility: visible; transform: none; min-width: 0;
  padding: 0 0 0 12px; background: none; border: 0; box-shadow: none;
}
.site-header.nav-tight.nav-open .nav-menu-list::before { display: none; }
.site-header.nav-tight.nav-open .nav-links .nav-menu-list a { padding: 10px 4px; border-bottom: 0; font-size: 16px; }

/* The Products menu. "Products" links to the homepage's Products section; the menu opens on hover/focus */
.nav-menu { position: relative; display: flex; align-items: center; }
.nav-menu-btn {
  display: inline-flex; align-items: center; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--muted); font-size: 14.5px; font-weight: 500; white-space: nowrap; text-decoration: none;
}
.nav-menu-btn:hover, .nav-menu:hover .nav-menu-btn, .nav-menu:focus-within .nav-menu-btn { color: var(--text); text-decoration: none; }
.nav-menu-btn.is-current { color: var(--text); box-shadow: inset 0 -1px 0 var(--accent, #8ed7ff); padding-bottom: 3px; }
.nav-menu-list {
  position: absolute; top: calc(100% + 18px); left: -14px; min-width: 188px; z-index: 30;
  display: flex; flex-direction: column; padding: 6px;
  background: var(--bg-panel, #16191d); border: 1px solid var(--border); border-radius: var(--radius-lg, 4px);
  box-shadow: var(--shadow-card, 0 12px 32px -16px rgba(0, 0, 0, 0.4));
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.16s;
}
.nav-menu-list::before { content: ""; position: absolute; left: 0; right: 0; top: -19px; height: 19px; }
.nav-menu:hover .nav-menu-list, .nav-menu:focus-within .nav-menu-list {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
/* Escape hides it until the pointer or focus leaves (site-nav.js) */
@media (min-width: 901px) {
  .nav-menu.is-dismissed .nav-menu-list { opacity: 0; visibility: hidden; transform: translateY(-4px); }
}
.nav-links .nav-menu-list a {
  display: block; padding: 10px 12px; border-radius: var(--radius-md, 3px); color: var(--muted);
  font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
}
.nav-links .nav-menu-list a:hover, .nav-links .nav-menu-list a:focus-visible {
  color: var(--text); background: var(--bg-panel-2, #1e2329); text-decoration: none;
}
:root[data-theme="light"] .nav-links .nav-menu-list a:hover,
:root[data-theme="light"] .nav-links .nav-menu-list a:focus-visible { background: var(--bg-panel-2, #efece5); }
/* the current product: ice blue with a soft glow */
.nav-links .nav-menu-list a[aria-current="page"] {
  color: var(--accent, #8ed7ff); box-shadow: none; padding-bottom: 10px;
  text-shadow: 0 0 12px rgba(142, 215, 255, 0.55);
}
:root[data-theme="light"] .nav-links .nav-menu-list a[aria-current="page"] {
  color: var(--accent, #2a7fb8); text-shadow: 0 0 10px rgba(42, 127, 184, 0.25);
}
@media (min-width: 901px) and (max-width: 1080px) { .nav-menu-btn { font-size: 13.5px; } }
/* in the burger menu, "Products" heads the list and its items sit under it */
@media (max-width: 900px) {
  .nav-open .nav-menu { display: block; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
  .nav-open .nav-links .nav-menu-btn { width: 100%; padding: 12px 4px 4px; font-size: 16px; box-shadow: none; border-bottom: 0; }
  .nav-open .nav-menu-list {
    position: static; opacity: 1; visibility: visible; transform: none; min-width: 0;
    padding: 0 0 0 12px; background: none; border: 0; box-shadow: none;
  }
  .nav-open .nav-menu-list::before { display: none; }
  .nav-open .nav-links .nav-menu-list a { padding: 10px 4px; border-bottom: 0; font-size: 16px; }
}