/* ============================================================
   TSconsult: Solutions dropdown in the top bar, shared by every page
   (index.html, service pages, insights, and the article template in _worker.js).
   Opens on hover, and on keyboard focus for accessibility.
   ============================================================ */
nav.main-nav .nav-drop{ position:relative; display:flex; align-items:center; }
nav.main-nav .nav-drop-btn{ display:inline-flex; align-items:center; gap:6px; }
nav.main-nav .nav-drop-btn svg{ transition:transform .35s var(--ease, ease); opacity:.8; }
nav.main-nav .nav-drop:hover .nav-drop-btn svg,
nav.main-nav .nav-drop:focus-within .nav-drop-btn svg{ transform:rotate(180deg); }

/* the panel; padding-top bridges the gap so the menu stays open while the pointer moves down */
nav.main-nav .nav-drop-menu{
  position:absolute; top:100%; left:50%; z-index:260;
  padding-top:16px; width:320px;
  opacity:0; visibility:hidden; transform:translate(-50%, 6px);
  transition:opacity .25s var(--ease, ease), transform .35s var(--ease, ease), visibility 0s linear .25s;
}
nav.main-nav .nav-drop:hover .nav-drop-menu,
nav.main-nav .nav-drop:focus-within .nav-drop-menu{
  opacity:1; visibility:visible; transform:translate(-50%, 0);
  transition:opacity .25s var(--ease, ease), transform .35s var(--ease, ease), visibility 0s;
}
nav.main-nav .nav-drop-panel{
  background:rgba(7,15,26,.96); border:1px solid rgba(199,219,234,.16); border-radius:14px;
  padding:8px; display:grid; gap:2px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.65);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
/* menu items: undo the uppercase, underlined top-bar link style */
nav.main-nav .nav-drop-panel a{
  display:grid; grid-template-columns:34px 1fr; gap:2px 12px; align-items:center;
  padding:11px 12px; border-radius:10px;
  text-transform:none; letter-spacing:0; font-size:inherit; color:#fff;
  transition:background .25s;
}
nav.main-nav .nav-drop-panel a::after{ display:none; }
nav.main-nav .nav-drop-panel a:hover,
nav.main-nav .nav-drop-panel a:focus-visible{ background:rgba(199,219,234,.08); outline:none; }
nav.main-nav .nav-drop-panel a.current{ background:rgba(46,111,214,.18); }
nav.main-nav .nav-drop-panel .ico{
  grid-row:span 2; width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  background:rgba(46,111,214,.16); color:#8fb3d1;
}
nav.main-nav .nav-drop-panel b{ font-family:var(--display, sans-serif); font-weight:600; font-size:15px; letter-spacing:.005em; }
nav.main-nav .nav-drop-panel small{ font-family:var(--body, sans-serif); font-size:12.5px; color:#8fb3d1; line-height:1.35; }
nav.main-nav .nav-drop-panel .tag{
  font-family:var(--mono, monospace); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background:#2e6fd6; border-radius:999px; padding:2px 7px; margin-left:8px; vertical-align:2px;
}

/* mobile overlay: Solutions with its three tools listed underneath */
.mobile-overlay{ overflow-y:auto; }
.mobile-overlay .mo-group{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.mobile-overlay .mo-sub{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.mobile-overlay .mo-sub a{ font-family:var(--mono, monospace); font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:#8fb3d1; }
@media (max-height: 760px){ .mobile-overlay{ justify-content:flex-start; padding:90px 0 40px; gap:20px; } .mobile-overlay a{ font-size:24px; } }