/* The public masthead's menus on the Matrix home page.

   Two shapes. A flyout (Consulting, Security): a column of categories on
   the left, and the category under the pointer or the keyboard shows its
   items on the right. A mega-menu (Organizations, Researchers): every
   item at once in two columns, with a call to action along the bottom.
   Both hang from a button in .nav-links, open on hover with a short
   grace so the pointer can travel diagonally, and on click and keyboard
   for everyone else. assets/megamenu.js does the opening; the phone
   drawer (assets/nav.js) reads the same markup into accordion groups. */

.nav-links{ align-items:center; }
.nav-menu{ position:relative; }
.nav-menu-btn{
  display:inline-flex; align-items:center; gap:6px; padding:0 0 4px; border:0; background:transparent;
  font:inherit; font-weight:500; color:var(--text-dim); cursor:pointer; white-space:nowrap; position:relative;
  transition:color .18s ease;
}
.nav-menu-btn:hover, .nav-menu[data-open="true"] .nav-menu-btn{ color:var(--text); }
/* Focus is the ink ring (matrix.css, "ink, not blue"); blue means the
   NEW report state on Matrix and nothing else. */
.nav-menu-btn:focus-visible{ outline:2px solid transparent; outline-offset:0; box-shadow:var(--ring); border-radius:4px; }
.nav-menu-btn::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--text);
  transition:right .22s cubic-bezier(.16,1,.3,1);
}
.nav-menu-btn:hover::after, .nav-menu[data-open="true"] .nav-menu-btn::after{ right:0; }
.nav-menu-btn svg{ width:12px; height:12px; transition:transform .22s cubic-bezier(.16,1,.3,1); }
.nav-menu[data-open="true"] .nav-menu-btn svg{ transform:rotate(180deg); }

/* The panel. Absolutely placed under its button; a mega-menu is wider
   than its button and is pulled left so it stays inside the bar. */
.nav-panel{
  position:absolute; top:calc(100% + 14px); left:0; z-index:70;
  background:var(--void); border:1px solid var(--rule-strong, var(--hairline)); border-radius:4px;
  box-shadow:none;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .22s cubic-bezier(.16,1,.3,1), visibility 0s linear .18s;
}
.nav-menu[data-open="true"] .nav-panel{ opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s; }
/* Closed panels leave the layout entirely. nav.js measures the bar's
   real width to decide when to collapse, and a laid-out panel — even an
   invisible one — counted towards it and folded the bar on a desktop.
   @starting-style keeps the entrance animated where it is supported. */
.nav-panel[hidden]{ display:none; }
@starting-style{ .nav-menu[data-open="true"] .nav-panel{ opacity:0; transform:translateY(-6px); } }
/* A hover bridge over the gap between the button and the panel, so the
   pointer can cross it without the menu closing. */
.nav-panel::before{ content:""; position:absolute; left:0; right:0; top:-16px; height:16px; }
.nav-panel-flyout{ display:grid; grid-template-columns:250px 1fr; min-width:660px; }
.nav-panel-mega{ width:640px; padding:18px 20px 16px; }
.nav-panel-mega.is-wide{ width:720px; }
/* The one flyout the product bar keeps: the holding company's four doors, one column. */
.nav-panel-mega.is-narrow{ width:240px; padding:8px; }
.nav-panel-mega.is-narrow .nav-mega-grid{ grid-template-columns:1fr; gap:0; }

/* Flyout: categories on the left, items on the right. */
.nav-cats{ display:flex; flex-direction:column; padding:10px; border-right:1px solid var(--hairline-soft); }
.nav-cat{
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 12px; border-radius:9px;
  border:0; background:transparent; font:inherit; font-size:14px; font-weight:600; color:var(--text-dim); text-align:left; cursor:pointer;
  transition:background-color .16s ease, color .16s ease;
}
.nav-cat svg{ width:12px; height:12px; flex-shrink:0; opacity:.5; }
.nav-cat:hover, .nav-cat[aria-selected="true"]{ background:var(--panel-raised); color:var(--text); }
.nav-cat:focus-visible{ outline:2px solid transparent; outline-offset:0; box-shadow:var(--ring); }
.nav-items{ padding:14px 16px 14px 18px; }
.nav-items[hidden]{ display:none; }
.nav-items h4{ margin:0 0 8px; font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); font-weight:500; }
.nav-items a, .nav-mega a.nav-link{
  display:block; padding:8px 10px; border-radius:4px; font-size:14px; font-weight:500; color:var(--text-dim);
  white-space:nowrap; transition:background-color .16s ease, color .16s ease;
}
.nav-items a:hover, .nav-items a:focus-visible, .nav-mega a.nav-link:hover, .nav-mega a.nav-link:focus-visible{ background:var(--panel-raised); color:var(--text); }
/* Said here rather than left to the global :focus-visible rule surviving
   the cascade. */
.nav-items a:focus-visible, .nav-mega a.nav-link:focus-visible{ outline:2px solid transparent; outline-offset:0; box-shadow:var(--ring); }

/* Mega-menu: two columns and a call to action. */
.nav-mega-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px 14px; }
.nav-mega-cta{ margin-top:14px; padding-top:14px; border-top:1px solid var(--hairline-soft); display:flex; align-items:center; justify-content:space-between; gap:14px; }
.nav-mega-cta p{ margin:0; font-size:13px; color:var(--text-faint); line-height:1.45; }
.nav-mega-cta .btn{ padding:10px 16px; font-size:13px; white-space:nowrap; flex-shrink:0; }

/* Enter [matrix]: the one action on the bar. Plain text, no tracking,
   so the brackets sit tight against the word. */
.btn-enter{ white-space:nowrap; letter-spacing:0; }

/* The calls to action inside the mega-menus are buttons, not nav links:
   the bar's `.nav-links a` hover rules (text colour, the underline) must
   not reach them, or a solid button goes white-on-white on hover. */
.nav-links .nav-mega-cta .btn{ position:static; padding:10px 16px; }
.nav-links .nav-mega-cta .btn::after{ display:none; }
.nav-links .nav-mega-cta .btn-primary, .nav-links .nav-mega-cta .btn-primary:hover{ color:var(--void); }
.nav-links .nav-panel a::after{ display:none; }

/* On the phone the panels never open in place: nav.js folds each menu
   into an accordion in the drawer. */
header.nav-collapsed .nav-panel{ display:none; }
.m-drawer .m-group{ border-bottom:1px solid var(--hairline-soft); }
.m-drawer .m-group-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 2px;
  border:0; background:transparent; font:inherit; font-size:16px; font-weight:500; color:var(--text-dim); text-align:left; cursor:pointer;
}
.m-drawer .m-group-btn svg{ width:14px; height:14px; transition:transform .22s ease; }
.m-drawer .m-group[data-open="true"] .m-group-btn{ color:var(--text); }
.m-drawer .m-group[data-open="true"] .m-group-btn svg{ transform:rotate(180deg); }
.m-drawer .m-group-body{ display:none; padding:0 0 10px 12px; }
.m-drawer .m-group[data-open="true"] .m-group-body{ display:block; }
.m-drawer .m-group-body h5{ margin:10px 0 2px; font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); font-weight:500; }
.m-drawer .m-group-body a{ padding:9px 2px; font-size:14px; border-bottom:none; }

@media (prefers-reduced-motion: reduce){
  .nav-panel, .nav-menu-btn svg, .nav-menu-btn::after, .m-drawer .m-group-btn svg{ transition:none; }
}