/* The homepage's top nav (home.html), for pages built on policy.css, so the
   product menus stay one click away. home.html keeps its own inline copy of
   these rules and of the markup: change the two together. */

.site-nav {
  --sn-ink: #0B0C0E;
  --sn-ink-2: #3A3D42;
  --sn-mute: #6E7178;
  --sn-soft: #F4F5F7;
  --sn-steel: #4C6485;
  --sn-line: rgba(11, 12, 14, 0.09);
  --sn-line-strong: rgba(11, 12, 14, 0.18);
  --sn-ease: cubic-bezier(.2, .7, .2, 1);
  position: sticky; top: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 28px;
  padding: 16px 40px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--sn-line);
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  line-height: 1.55;
}
.site-nav .brand { display: inline-flex; align-items: center; text-decoration: none; }
.site-nav .brand img { height: 17px; width: auto; display: block; }
.site-nav .nav-links { display: flex; align-items: center; gap: 44px; }
.site-nav .nav-links a { font-size: 16px; color: var(--sn-ink-2); text-decoration: none; transition: color .2s; }
.site-nav .nav-links a:hover { color: var(--sn-ink); }
.site-nav .nav-sensor { white-space: nowrap; }
/* product menus: hover or keyboard focus drops a panel of that line's robots */
.site-nav .nav-menu { position: relative; }
.site-nav .nav-top { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; }
.site-nav .nav-top::after {
  content: ''; width: 5px; height: 5px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: .55; transition: transform .2s var(--sn-ease);
}
.site-nav .nav-menu:hover .nav-top, .site-nav .nav-menu:focus-within .nav-top { color: var(--sn-ink); }
.site-nav .nav-menu:hover .nav-top::after, .site-nav .nav-menu:focus-within .nav-top::after { transform: translateY(2px) rotate(225deg); }
.site-nav .nav-drop {
  position: absolute; top: 100%; left: 50%; z-index: 60;
  padding-top: 12px;                          /* keeps the hover alive between label and panel */
  transform: translate(-50%, 6px); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s, transform .25s var(--sn-ease), visibility 0s .25s;
}
.site-nav .nav-menu:hover .nav-drop, .site-nav .nav-menu:focus-within .nav-drop {
  transform: translate(-50%, 0); opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .18s, transform .25s var(--sn-ease), visibility 0s;
}
.site-nav .nav-drop-inner {
  min-width: 340px; padding: 8px; display: grid; gap: 2px;
  background: #fff; border: 1px solid var(--sn-line); border-radius: 16px;
  box-shadow: 0 24px 48px -20px rgba(11, 12, 14, .28);
}
.site-nav .nav-links .nav-item {
  display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 14px;
  padding: 8px 14px 8px 8px; border-radius: 10px; color: var(--sn-ink); transition: background .15s;
}
.site-nav .nav-links .nav-item:hover, .site-nav .nav-links .nav-item:focus-visible { background: var(--sn-soft); }
.site-nav .nav-item img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--sn-soft); }
.site-nav .nav-item b { display: block; font-family: 'Space Grotesk', -apple-system, system-ui, sans-serif; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.site-nav .nav-item small { display: block; font-size: 12px; color: var(--sn-mute); white-space: nowrap; }
.site-nav .nav-item em { font-style: normal; font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace; font-size: 12px; color: var(--sn-ink-2); }
.site-nav .nav-links .nav-more { padding: 10px 14px 8px; font-size: 13px; color: var(--sn-steel); border-top: 1px solid var(--sn-line); margin-top: 4px; }
.site-nav .nav-right { justify-self: end; display: flex; align-items: center; gap: 18px; }
.site-nav .nav-note { font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sn-mute); }
.site-nav .nav-cart { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--sn-ink); text-decoration: none; border: 1px solid var(--sn-line-strong); border-radius: 999px; padding: 9px 12px 9px 16px; transition: border-color .2s; }
.site-nav .nav-cart:hover { border-color: var(--sn-ink); }
.site-nav .nav-cart span { min-width: 20px; height: 20px; border-radius: 999px; background: var(--sn-ink); color: #fff; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
.site-nav .btn {
  display: inline-flex; align-items: center; white-space: nowrap; text-decoration: none;
  font-size: 14px; font-weight: 500; padding: 10px 20px; border-radius: 999px;
  background: var(--sn-ink); color: #fff; border: 1px solid var(--sn-ink); transition: background .25s;
}
.site-nav .btn:hover { background: #2A2D33; border-color: #2A2D33; }
/* /buy keeps its "Back to site" link here */
.site-nav .back {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: #4A4D53; text-decoration: none; white-space: nowrap; transition: color .3s;
}
.site-nav .back:hover { color: var(--sn-ink); }

/* Hide the deposit note and labs link before the product links.
   On small screens, the footer keeps Sensor Pack and Team accessible. */
@media (max-width: 1760px) { .site-nav .nav-note { display: none; } }
@media (max-width: 1360px) { .site-nav .nav-links { gap: 34px; } }
@media (max-width: 1280px) { .site-nav .nav-links > a:not(.nav-sensor, .nav-team) { display: none; } }
@media (min-width: 901px) and (max-width: 1100px) {
  .site-nav { padding-inline: 22px; column-gap: 18px; }
  .site-nav .brand img { height: 15px; }
  .site-nav .nav-links { gap: 20px; }
  .site-nav .nav-right { gap: 8px; }
  .site-nav .btn { padding-inline: 13px; }
}
@media (max-width: 900px) {
  .site-nav { padding: 12px 20px; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; }
  .site-nav .brand img { max-width: 100%; object-fit: contain; object-position: left; }
  .site-nav .nav-links { display: none; }
}
@media (max-width: 600px) {
  .site-nav { padding-inline: 16px; column-gap: 12px; }
  .site-nav .nav-right { gap: 8px; }
  .site-nav .btn { padding: 8px 12px; font-size: 12px; }
  .site-nav .nav-cart { padding: 7px 8px; gap: 5px; font-size: 12px; }
}