/* ==========================================================================
   nx-nav-layout.css — NAV-2026-10 menu rearrangement (visibility pass).
   --------------------------------------------------------------------------
   Measured problem: "Security Tools" held 49 links in a single 520px column,
   620px tall with 2,175px of content, so roughly three quarters of it sat
   below an inner scrollbar. Blog, Manual, Support and Contact were at the
   very bottom of a TOOLS menu.

   This layer lays the menus out as labelled columns:
     - Product   → 2 columns (what it does · get started)
     - Tools     → 4 columns across the bar (popular · email/domain ·
                   analysis · Pro & post-quantum), search and "All tools" on
                   top, the two index pages in a footer row
     - Resources → 2 columns (learn · help and company)

   Scoped to .nv-* classes plus the existing .nd-menu-mega element, so other
   menus (Account, language) are untouched. Loads after the other global
   layers and before $PAGE_CSS. No JavaScript changes: main.js still drives
   the mobile accordion through .nd-open and inline display styles.
   ========================================================================== */

/* ---- shared panel content --------------------------------------------- */
.nav .nv-panel { gap: 0; padding: 14px 16px 12px; }
.nav .nv-cols { display: grid; grid-template-columns: 1fr; gap: 2px 0; }
.nav .nv-col { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nav .nv-title {
  display: flex; align-items: center; gap: 8px;
  margin: 2px 10px 6px; padding: 0; border: 0;
  font-size: .75rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted, #98A2B3);
}
.nav .nv-title--sub { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft, rgba(255,255,255,.08)); }
.nav .nv-title .nd-tier { float: none; margin: 0; letter-spacing: .02em; }
.nav .nv-panel a { line-height: 1.35; }
.nav .nv-panel a .nd-tier { margin-left: 10px; }

.nav .nv-head {
  display: flex; flex-direction: column; gap: 6px;
  padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1px solid var(--line-soft, rgba(255,255,255,.08));
}
.nav .nv-head .nd-search { padding: 0; margin: 0; border: 0; }
.nav .nv-all { color: var(--ink, #E8ECF3); }
.nav .nv-foot {
  display: flex; flex-wrap: wrap; gap: 4px 8px;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--line-soft, rgba(255,255,255,.08));
}
.nav .nv-foot a { color: var(--muted, #98A2B3); }

:lang(ja) .nav .nv-title { letter-spacing: .02em; text-transform: none; font-size: .8125rem; }

/* ---- desktop: real columns, nothing hidden behind an inner scrollbar ---- */
@media (min-width: 981px) {
  .nav .nv-panel--2 { min-width: min(500px, calc(100vw - 32px)); }
  .nav .nv-panel--2 .nv-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .nav .nv-col + .nv-col {
    border-left: 1px solid var(--line-soft, rgba(255,255,255,.08));
    padding-left: 12px; margin-left: 12px;
  }

  /* Tools: anchor to the header bar, not the label, so four columns fit and
     never hang off either edge. The topbar is sticky, i.e. positioned. */
  .nav .nd.nv-host--wide { position: static; }
  .nav .nd-menu.nd-menu-mega.nv-panel--4 {
    columns: auto;                         /* retire the old columns:2 flow */
    top: 100%;
    left: max(16px, calc(50% - 560px));
    right: auto;
    width: min(1120px, calc(100vw - 32px));
    min-width: 0; max-width: none;
    max-height: calc(100vh - 72px);        /* safety net for very short windows */
    overflow-y: auto;
  }
  .nav .nv-panel--4 .nv-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nav .nv-panel--4 .nv-head { flex-direction: row; align-items: center; gap: 16px; }
  .nav .nv-panel--4 .nv-head .nd-search { flex: 1 1 auto; max-width: 420px; }
  /* Hover bridge across the gap between the label and the bar-anchored panel. */
  .nav .nv-panel--4::before {
    content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
  }

  /* Resources sits towards the right: open it leftwards. */
  .nav .nd.nv-host--end .nd-menu { left: auto; right: 0; }
}

/* 981-1180px: keep four columns (two rows would push the panel past a 768px
   screen) and tighten the gutters instead. */
@media (min-width: 981px) and (max-width: 1180px) {
  .nav .nv-col + .nv-col { padding-left: 6px; margin-left: 6px; }
  .nav .nv-panel--4 .nv-panel a, .nav .nv-panel--4 a { padding-left: 8px; padding-right: 6px; }
}

/* ---- mobile drawer: one column, one scroll container -------------------- */
@media (max-width: 980px) {
  .nav .nv-panel { padding: 8px 4px; }
  .nav .nd-menu.nd-menu-mega.nv-panel--4 { columns: auto; max-height: none; overflow: visible; }
  .nav .nv-col + .nv-col {
    border-top: 1px solid var(--line-soft, rgba(255,255,255,.08));
    margin-top: 8px; padding-top: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav .nv-panel { transition: none; }
}
@media (forced-colors: active) {
  .nav .nv-col + .nv-col, .nav .nv-head, .nav .nv-foot { border-color: CanvasText; }
}

/* Long labels (e.g. "Security and vulnerability disclosure") wrap inside their
   column instead of running past the panel edge. */
.nav .nv-panel a { white-space: normal; overflow-wrap: anywhere; }
@media (min-width: 981px) {
  .nav .nv-panel--2 { width: min(540px, calc(100vw - 32px)); max-width: none; }
}

/* ---- top bar: labels never wrap onto two lines -------------------------
   Measured on the production build: at 1024-1279px "How It Works",
   "Sample Report", "Security Tools", "Trust Center" and "Sign in" each broke
   onto two lines and the brand was truncated. The rearranged bar has one
   item fewer; these rules keep every label on one line down to 981px, signed in or out, in both languages. */
@media (min-width: 981px) {
  .topbar .nav > a, .topbar .nav .nd-label { white-space: nowrap; }
  .topbar .brand { flex-shrink: 0; }
}
@media (min-width: 981px) and (max-width: 1359px) {
  .topbar { padding-left: 16px; padding-right: 16px; }
  .topbar .nav { gap: 0; font-size: .9375rem; }
  .topbar .nav > a, .topbar .nav .nd-label { padding-left: 8px; padding-right: 8px; }
  .topbar .nav .nav-cta { margin-left: 4px; }
  .topbar .brand b { display: none; }       /* "Quantum X" returns at 1360px+ */
}
/* Phones: show the brand name whole rather than "NeoShield Security Quan…". */
@media (max-width: 430px) {
  .topbar .brand b { display: none; }
}

/* Narrow desktops (981-1359px): the language control shows its code (EN / JA)
   and, below 1180px, the brand shows the logo only. The link keeps its
   aria-label, so its accessible name is unchanged. */
.topbar .nv-lang-short { display: none; }
@media (min-width: 981px) and (max-width: 1359px) {
  .topbar .nd-lang .nv-lang-long { display: none; }
  .topbar .nd-lang .nv-lang-short { display: inline; }
}
@media (min-width: 981px) and (max-width: 1179px) {
  .topbar .brand > span { display: none; }
}
@media (max-width: 980px) {
  .topbar .nd-lang .nv-lang-short { display: none; }
}

/* Account menu: account links, plus the admin links in a second column for
   administrators (previously one ~22-row column). */
@media (min-width: 981px) {
  .nav .nv-panel--acct { width: max-content; max-width: min(560px, calc(100vw - 32px)); }
  .nav .nv-panel--acct .nv-cols { grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); }
  .nav .nv-panel--acct .nd-signout { margin-top: 6px; }
}

/* Header "Scan Free" buttons (desktop and mobile). Measured on production:
   dark #04141b text on the solid #2E6FE0 fill = 3.98:1, below the 4.5:1 AA
   minimum for this 13-15px text, and on hover the fill switched to the old
   cyan gradient. (nx-nav-contrast.css chose dark text when the fill WAS that
   gradient; nx-pro.css later made the fill solid blue.) White on #2E6FE0 is
   4.6:1 and on the hover blue #2559C4 6.2:1, matching the homepage buttons. */
.topbar .nav a.nav-cta, .topbar a.btn.nav-cta-mobile {
  color: #fff; background-color: #2E6FE0; background-image: none;
}
.topbar .nav a.nav-cta:hover, .topbar .nav a.nav-cta:focus-visible, .topbar .nav a.nav-cta:active,
.topbar a.btn.nav-cta-mobile:hover, .topbar a.btn.nav-cta-mobile:focus-visible, .topbar a.btn.nav-cta-mobile:active {
  color: #fff; background-color: #2559C4; background-image: none;
}

/* JUNE-2027 IA: Free Tools and Resources are three-column bar-anchored panels;
   Trust is a single column. Same rules as the former four-column panel. */
@media (min-width: 981px) {
  .nav .nd-menu.nd-menu-mega.nv-panel--3 {
    columns: auto; top: 100%;
    left: max(16px, calc(50% - 420px)); right: auto;
    width: min(840px, calc(100vw - 32px));
    min-width: 0; max-width: none; max-height: calc(100vh - 72px); overflow-y: auto;
  }
  .nav .nv-panel--3 .nv-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nav .nv-panel--3 .nv-head { flex-direction: row; align-items: center; gap: 16px; }
  .nav .nv-panel--3 .nv-head .nd-search { flex: 1 1 auto; max-width: 420px; }
  .nav .nv-panel--3::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
}