/* Shared main-menu dropdown (2026-10). Each page keeps its own nav styles; this file only adds the
   services submenu. Colors fall back across the studio tokens (--bg2, --ink…) and the blog tokens
   (--surface, --text…), so the menu matches whichever page it's on. */
.has-sub { position: relative; display: inline-flex; align-items: center; }
.has-sub > .sub-toggle {
  font: inherit; font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: .72rem; line-height: 1;
  color: var(--ink2, var(--text-muted, inherit)); background: none; border: 0; padding: 8px 6px 8px 0; cursor: pointer;
}
.has-sub > .sub-toggle:hover { color: var(--cool, var(--accent, inherit)); }
.has-sub > .sub-toggle[aria-expanded="true"] { color: var(--ink, var(--text, inherit)); }
.submenu {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 50;
  width: min(19rem, calc(100vw - 32px)); padding: 6px;
  background: var(--bg2, var(--surface, var(--bg, #fff)));
  border: 1px solid var(--line2, var(--border, rgba(127,127,127,.35)));
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}
.has-sub:hover > .submenu,
.has-sub:focus-within > .submenu,
.has-sub > .sub-toggle[aria-expanded="true"] + .submenu { display: grid; gap: 2px; }
/* An invisible bridge so the menu doesn't close while the pointer crosses the gap. */
.has-sub > .submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.submenu a {
  display: grid; gap: 2px; padding: 10px 12px !important; text-decoration: none; box-shadow: none !important;
  font-family: var(--sans, var(--body, -apple-system, sans-serif)) !important; font-size: .9rem !important;
  color: var(--ink, var(--text, inherit)) !important; text-transform: none; letter-spacing: 0;
}
.submenu a small { font-size: .78rem; color: var(--ink2, var(--text-muted, inherit)); line-height: 1.35; }
.submenu a:hover, .submenu a:focus-visible { background: var(--bg3, var(--code-bg, rgba(127,127,127,.12))); color: var(--cool, var(--accent, inherit)) !important; }
.submenu a[aria-current="page"] { color: var(--cool, var(--accent, inherit)) !important; }
.submenu hr { border: 0; border-top: 1px solid var(--line, var(--border, rgba(127,127,127,.3))); margin: 4px 6px; }
@media (max-width: 560px) {
  .submenu { position: fixed; left: 16px; right: 16px; width: auto; margin-top: 0; }
}
@media (hover: none) {
  /* On touch screens the arrow button opens the menu; hover is unreliable there. */
  .has-sub:hover > .submenu { display: none; }
  .has-sub > .sub-toggle[aria-expanded="true"] + .submenu { display: grid; }
}