/* ─────────────────────────────────────────────────────────────
   Shared nav layer: Services dropdown + Lead Machine badge.

   Loaded by every page, so it has to render identically under BOTH
   stylesheet dialects:
     - /styles/site.css  uses --fg2, --alpine-700, --border-med, --abyss
     - the 8 inline-CSS pages use --fg2, --ember, --line-med, --ink
   Every custom property below therefore carries a fallback chain ending
   in a literal, so nothing depends on which sheet is present.

   Breakpoints differ too (site.css switches at 860px, the inline pages
   at 900px), so the mobile layout is keyed off `.nav-right.open` (a class
   only ever present when the hamburger menu is actually open) rather than
   a width guess. Between 861 and 900px on a site.css page the nav is still
   horizontal and `.open` is absent, so the panel correctly stays absolute.
   ───────────────────────────────────────────────────────────── */

/* ---------- Services dropdown ---------- */
.nav-drop { position: relative; display: flex; align-items: center; }

.nav-drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  font-size: .94rem;
  line-height: inherit;
  color: var(--fg2, #4A5568);
  transition: color .2s;
}
.nav-drop-btn:hover,
.nav-drop-btn[aria-expanded="true"] { color: var(--alpine-700, var(--ember, #1F5E7A)); }
.nav-drop-btn svg { width: 10px; height: 10px; flex: none; transition: transform .22s ease; }
.nav-drop-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav-drop-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: -18px;
  min-width: 266px;
  padding: 14px 0 10px;
  background: #fff;
  border: 1px solid var(--border-med, var(--line-med, #DDD6CC));
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 18px 44px -18px rgba(16, 24, 40, .28), 0 2px 8px -2px rgba(16, 24, 40, .1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  z-index: 70;
}
/* Bridges the gap between button and panel so the pointer can travel down. */
.nav-drop-panel::before {
  content: "";
  position: absolute;
  top: -16px; left: 0; right: 0; height: 16px;
}
.nav-drop:hover > .nav-drop-panel,
.nav-drop:focus-within > .nav-drop-panel,
.nav-drop-panel[data-open] {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav-drop-label {
  display: block;
  padding: 8px 20px 5px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .6rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ridge, #8A94A6);
}
.nav-drop-label + .nav-drop-label { margin-top: 6px; }
.nav-drop-panel > a {
  display: block;
  padding: 9px 20px;
  font-size: .93rem;
  font-weight: 500;
  color: var(--fg1, var(--ink, #1A2436));
  text-decoration: none;
  transition: background .16s, color .16s;
}
.nav-drop-panel > a:hover,
.nav-drop-panel > a:focus-visible {
  background: var(--parchment-dark, rgba(31, 94, 122, .07));
  color: var(--alpine-700, var(--ember, #1F5E7A));
}
.nav-drop-sep { display: block; height: 1px; margin: 8px 20px; background: var(--border-soft, rgba(0, 0, 0, .08)); }

/* ---------- Lead Machine entry + badge ---------- */
.nav-lm { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.nav-badge {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(184, 113, 90, .14);
  border: 1px solid rgba(184, 113, 90, .34);
  color: var(--summit-dark, var(--ember, #B8715A));
  line-height: 1.4;
}

/* ---------- Mobile: stacked accordion inside the open hamburger menu ---------- */
.nav-right.open .nav-drop { display: block; }

.nav-right.open .nav-drop-btn {
  width: 100%;
  justify-content: space-between;
  padding: 14px 4px;
  font-size: 1.02rem;
  border-bottom: 1px solid var(--border-soft, var(--line-soft, rgba(0, 0, 0, .08)));
}

.nav-right.open .nav-drop-panel {
  position: static;
  min-width: 0;
  padding: 4px 0 8px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  /* Collapsed by default on mobile; the button opens it explicitly. */
  display: none;
  opacity: 1;
  visibility: visible;
  transform: none;
}
.nav-right.open .nav-drop-panel::before { display: none; }
.nav-right.open .nav-drop-panel[data-open] { display: block; }
/* Hover must not open it on touch, only the explicit toggle. */
.nav-right.open .nav-drop:hover > .nav-drop-panel:not([data-open]),
.nav-right.open .nav-drop:focus-within > .nav-drop-panel:not([data-open]) { display: none; }

.nav-right.open .nav-drop-panel > a {
  padding: 11px 4px 11px 18px;
  font-size: .98rem;
  border-bottom: 1px solid var(--border-soft, var(--line-soft, rgba(0, 0, 0, .06)));
}
.nav-right.open .nav-drop-label { padding: 10px 4px 4px 18px; }
.nav-right.open .nav-lm {
  padding: 14px 4px;
  font-size: 1.02rem;
  border-bottom: 1px solid var(--border-soft, var(--line-soft, rgba(0, 0, 0, .08)));
}

@media (prefers-reduced-motion: reduce) {
  .nav-drop-panel, .nav-drop-btn svg { transition: none; }
}