/* Solutions dropdown in the site nav.
   Desktop: opens on hover and on keyboard focus; the chevron button opens it on touch screens.
   Phones: the mobile menu uses a collapsible <details> group instead.
   Needs the site tokens (--ink, --line, --cream, --gold) that every page defines. */

.has-dd { position: relative; display: flex; align-items: center; gap: 2px; }

.dd-btn {
  width: 22px; height: 22px; padding: 0;
  display: inline-grid; place-items: center;
  background: none; border: 0; border-radius: 6px;
  color: #C9D4E3; cursor: pointer;
}
.dd-btn:hover { color: #fff; }
.dd-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.dd-btn svg { width: 12px; height: 12px; transition: transform .15s ease; }
.has-dd:hover .dd-btn svg, .has-dd.open .dd-btn svg { transform: rotate(180deg); }

.dd-panel {
  position: absolute;
  top: 100%; left: 50%;
  transform: translate(-50%, 6px);
  margin-top: 30px;
  min-width: 270px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 48px -20px rgba(11,31,58,0.55);
  max-height: calc(100vh - 110px);
  overflow: auto;
  z-index: 60;
  visibility: hidden;
  opacity: 0;
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
/* Invisible bridge so the pointer can travel from the label down to the panel. It lives on the wrapper,
   not on the panel, because the panel's overflow:auto would clip anything outside its own box. */
.has-dd:hover::after { content: ""; position: absolute; left: -14px; right: -14px; top: 100%; height: 36px; }

.has-dd:hover .dd-panel,
.has-dd.open .dd-panel,
.has-dd:has(:focus-visible) .dd-panel { visibility: visible; opacity: 1; transform: translate(-50%, 0); }
/* just clicked a link: stay closed until the pointer leaves */
.has-dd.closed .dd-panel { visibility: hidden; opacity: 0; transform: translate(-50%, 6px); }

nav.links .dd-panel a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 500;
}
nav.links .dd-panel a:hover,
nav.links .dd-panel a:focus-visible { background: var(--cream); color: var(--ink); }
nav.links .dd-panel a:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
nav.links .dd-panel a.dd-all { font-weight: 600; }
.dd-sep { height: 1px; background: var(--line); margin: 6px 4px; }

/* ---------- mobile menu: collapsible Solutions group ---------- */
.mnav details { border-bottom: 1px solid rgba(255,255,255,.07); }
.mnav summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 4px; font-size: 16px; color: #E6ECF5;
}
.mnav summary::-webkit-details-marker { display: none; }
.mnav summary::after {
  content: ""; width: 8px; height: 8px; margin-right: 6px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .15s ease;
}
.mnav details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.mnav details a { display: block; padding: 11px 4px 11px 18px; font-size: 15px; color: #C9D4E3; border-bottom: 0; }
.mnav details a.dd-all { font-weight: 600; color: #E6ECF5; }
.mnav summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .dd-panel, .dd-btn svg, .mnav summary::after { transition: none; }
}