/* nav-flyout.css
   Nested flyout submenu for the penetration-testing landing pages, sitting under
   the "Penetration Testing" item inside the Services dropdown.

   On desktop the flyout opens to the side on hover or keyboard focus; on mobile
   (max-width 680px, matching the main nav breakpoint) it stacks inline within the
   open menu, indented a step deeper than the first-level dropdown items. It is
   CSS-only, so no JavaScript is required and the site's Content-Security-Policy
   is unaffected. Kept in its own file rather than styles.css so it can ship
   without rewriting the shared stylesheet. Loaded after styles.css, so the
   flyout rules win ties against the base dropdown rules by source order. */

.nav__links .has-flyout { position: relative; }

/* Higher specificity than `.nav__links .dropdown a { display:block }` so the
   trigger actually becomes a flex row; otherwise the block-level chevron SVG
   (global `svg { display:block }`) drops onto its own line. */
.nav__links .dropdown a.nav__flyout-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.nav__flyout-trigger .chev-r { flex: none; transition: transform .16s ease; }
.has-flyout:hover .nav__flyout-trigger .chev-r,
.has-flyout:focus-within .nav__flyout-trigger .chev-r { transform: translateX(2px); }

.nav__links .flyout {
  list-style: none; margin: 0; padding: .4rem;
  position: absolute; top: -.4rem; left: 100%;
  min-width: 232px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateX(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 80;
}
.nav__links .has-flyout:hover > .flyout,
.nav__links .has-flyout:focus-within > .flyout {
  opacity: 1; visibility: visible; transform: translateX(0);
}
.nav__links .flyout a {
  display: block; padding: .62rem .7rem; border-radius: 4px;
  font-family: var(--font-mono); font-size: .8rem; color: var(--ink-2); white-space: nowrap;
}
.nav__links .flyout a::after { display: none; }
.nav__links .flyout a:hover,
.nav__links .flyout a:focus-visible { background: var(--paper); color: var(--ink); }
.nav__links .flyout a[aria-current="page"] { background: var(--paper); color: var(--ink); }

/* Mobile: stack the flyout inline inside the open menu, one indent deeper than
   the first-level dropdown items. Mirrors the base dropdown's mobile treatment,
   including pinning the hover transform back to none on touch. */
@media (max-width: 680px) {
  .nav__links .has-flyout { position: static; }
  .nav__flyout-trigger .chev-r { display: none; }
  .nav__links .flyout {
    position: static; transform: none; opacity: 1; visibility: visible;
    min-width: 0; background: transparent; border: 0; box-shadow: none;
    padding: 0; margin: 0;
  }
  .nav__links .flyout li { border-top: 1px solid var(--line); }
  .nav__links .flyout a { padding: .95rem 0 .95rem 2rem; }
  .nav__links .has-flyout:hover > .flyout,
  .nav__links .has-flyout:focus-within > .flyout { transform: none; }
}