/* ============================================================================
   Shared primary navigation — single source of truth (paired with nav.js).
   Loaded by index.html, articles.html, and every generated post page.
   Uses CSS variables defined per page (with fallbacks for the few that some
   pages don't declare).
   ============================================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 22px 40px;
  background: transparent;
  transition: transform 0.32s cubic-bezier(.4,0,.2,1);
}
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(244, 244, 242, 0.85);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  /* Multi-stop ease-out for a smooth fade (linear gradients show a kink). */
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%, #000 40%, rgba(0,0,0,0.96) 55%, rgba(0,0,0,0.85) 67%,
    rgba(0,0,0,0.65) 78%, rgba(0,0,0,0.38) 88%, rgba(0,0,0,0.15) 95%, transparent 100%);
          mask-image: linear-gradient(to bottom,
    #000 0%, #000 40%, rgba(0,0,0,0.96) 55%, rgba(0,0,0,0.85) 67%,
    rgba(0,0,0,0.65) 78%, rgba(0,0,0,0.38) 88%, rgba(0,0,0,0.15) 95%, transparent 100%);
  pointer-events: none;
}
.nav > * { position: relative; z-index: 1; }
.nav.nav-hide { transform: translateY(-100%); }

.nav .brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.nav .brand img { height: 22px; width: auto; display: block; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 44px;
  justify-self: center;
}
.nav-links .link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft, #2a2a2a);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px 0;
  transition: color 0.18s ease;
}
.nav-links .link:hover { color: var(--ink); }
/* Current page — highlighted and not clickable. */
.nav-links .link.active {
  color: var(--ink);
  font-weight: 600;
  pointer-events: none;
  cursor: default;
}
.nav-links .link .caret {
  width: 10px; height: 10px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  margin-top: 1px;
  opacity: 0.7;
}

/* Use Cases dropdown — light panel to match the site. */
.nav-item { position: relative; display: inline-flex; align-items: center; }
.nav-item .caret { transition: transform 0.2s ease; }
.nav-item:hover .caret,
.nav-item:focus-within .caret { transform: rotate(180deg); }
.use-cases-menu {
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 14px;              /* transparent bridge so hover doesn't drop */
  transform: translateY(-6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 50;
}
.nav-item:hover .use-cases-menu,
.nav-item:focus-within .use-cases-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.use-cases-card {
  display: flex;
  flex-direction: column;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 10px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.12);
}
.use-cases-card a {
  padding: 11px 16px;
  border-radius: 11px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
  transition: background 0.15s ease;
}
.use-cases-card a:hover { background: var(--bg); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
}
/* Small button (used in the primary nav). Pair with .btn-outline / .btn-primary. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 20px;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.btn-outline { border-color: #cfcfcd; background: transparent; }
.btn-outline:hover { border-color: var(--ink); }
.btn-primary { background: var(--accent); }
.btn-primary:hover { background: var(--accent-deep, #9bdb00); }

/* ---------- Mobile hamburger + overlay menu ---------- */
.nav-burger {
  display: none;               /* shown only on mobile (below) */
  justify-self: end;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;         /* optically align the icon to the edge */
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
}
.nav-burger svg,
.nav-menu-close svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
}

.nav-menu {
  position: fixed;
  inset: 0;
  z-index: 10;                 /* above the bar's own logo/burger (.nav > * = z1) so it fully covers them */
  display: flex;
  flex-direction: column;
  padding: 0 0 40px;
  background: var(--bg);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s;
}
.nav-menu.open { opacity: 1; visibility: visible; }

/* Top bar inside the overlay — logo left, close button right (mirrors the
   real nav bar so the menu reads as an extension of it). */
.nav-menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
}
.nav-menu-top .brand { line-height: 0; }
.nav-menu-top .brand img { height: 22px; width: auto; display: block; }
.nav-menu-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
}

.nav-menu-list {
  list-style: none;
  margin: 40px 24px 0;
  padding: 0;
  border-bottom: 1px solid var(--hairline);
}
.nav-menu-item { border-top: 1px solid var(--hairline); }
.nav-menu-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 26px 0;
  font-family: var(--font-body);
  font-size: 26px;
  font-weight: 400;
  color: var(--ink);
  background: none;
  border: 0;
  text-align: center;
  cursor: pointer;
}
.nav-menu-link.active { color: var(--ink); font-weight: 600; cursor: default; }
.nav-menu-link .caret {
  width: 13px; height: 13px;
  stroke: currentColor; stroke-width: 2; fill: none;
  transition: transform 0.2s ease;
}
.nav-menu-item.open .nav-menu-toggle .caret { transform: rotate(180deg); }

/* Accordion: collapse/expand by transitioning max-height (overflow:hidden on
   the sub clips the inner, including its padding, so it fully closes). The
   expanded cap comfortably exceeds the 5-item content height. */
.nav-menu-sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(.4,0,.2,1);
}
.nav-menu-item.open .nav-menu-sub { max-height: 280px; }
.nav-menu-sub-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-bottom: 22px;
}
.nav-menu-sub a {
  padding: 9px 0;
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--muted);
}

.nav-menu-actions {
  display: flex;
  gap: 12px;
  margin: 32px 24px 0;
}
.nav-menu-actions .btn { flex: 1; height: 54px; font-size: 16px; }

@media (max-width: 700px) {
  .nav { grid-template-columns: 1fr auto; padding: 16px 20px; }
  .nav-links,
  .nav-actions { display: none; }   /* links + buttons move into the menu */
  .nav-burger { display: inline-flex; }
  /* Slightly larger logo on phones. */
  .nav .brand img,
  .nav-menu-top .brand img { height: 28px; }
  /* At the page bottom the bar is force-revealed showing just the logo
     (the footer logo moved here on mobile) — drop the hamburger, and let the
     green footer show through behind the logo (no light blur backdrop). */
  .nav.nav-at-bottom .nav-burger { display: none; }
  .nav.nav-at-bottom::before { opacity: 0; }
}