/* Copyright (c) 2026, CTO Resources LLC
 *
 * Shared navigation dropdowns (Solutions, Programs) and the small-screen menu
 * toggle. Every page keeps its own nav/.nav-link styles inline; this file adds
 * only what the dropdowns need, so it is loaded alongside cookie-consent.css.
 * Behaviour is in /site-nav.js; without JavaScript the <details> menus still
 * open and close, and the nav simply wraps as it always has.
 */

.nav-dd { position: relative; }
.nav-dd > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: none;
  border: 0;
  font-family: inherit;
}
.nav-dd > summary::-webkit-details-marker { display: none; }
.nav-dd > summary::after {
  content: '';
  width: .38rem;
  height: .38rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .15s;
}
.nav-dd[open] > summary { color: var(--ink, #0f172a); }
.nav-dd[open] > summary::after { transform: translateY(1px) rotate(-135deg); }

.nav-dd-panel {
  position: absolute;
  top: calc(100% + .7rem);
  left: 50%;
  transform: translateX(-50%);
  min-width: 15rem;
  background: #fff;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(15,23,42,.14);
  padding: .9rem;
  z-index: 60;
}
.nav-dd-panel.nav-dd-wide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .25rem 1.25rem;
  min-width: 34rem;
}
.nav-dd-group { min-width: 0; }
.nav-dd-heading {
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-light, #64748b);
  padding: .25rem .6rem .35rem;
}
.nav-dd-panel ul { list-style: none; margin: 0; padding: 0; }
.nav-dd-panel a {
  display: block;
  padding: .45rem .6rem;
  border-radius: 7px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--ink-mid, #334155);
  text-decoration: none;
  white-space: nowrap;
}
.nav-dd-panel a:hover,
.nav-dd-panel a:focus-visible { background: var(--blue-wash, #eff6ff); color: var(--blue-dark, #1d4ed8); }
.nav-dd-panel a small {
  display: block;
  font-size: .74rem;
  font-weight: 500;
  color: var(--ink-light, #64748b);
  white-space: normal;
}
.nav-dd-foot {
  grid-column: 1 / -1;
  border-top: 1px solid var(--border, #e2e8f0);
  margin-top: .35rem;
  padding-top: .35rem;
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: .45rem;
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  color: var(--ink-mid, #334155);
  background: none;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 8px;
  padding: .35rem .75rem;
  cursor: pointer;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 14px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after { content: ''; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -4px; }
.nav-toggle-bars::after { top: 4px; }

/* Small screens: the dropdowns become in-flow accordions. With JavaScript the
   whole menu also collapses behind the Menu button. */
@media (max-width: 899px) {
  .nav-dd-panel,
  .nav-dd-panel.nav-dd-wide {
    position: static;
    transform: none;
    min-width: 0;
    display: block;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--border, #e2e8f0);
    border-radius: 0;
    padding: .25rem 0 .25rem .75rem;
    margin: .35rem 0 .25rem;
  }
  .nav-dd-panel a { white-space: normal; }
  .nav-dd-group + .nav-dd-group { margin-top: .5rem; }

  nav.js-nav .nav-toggle { display: inline-flex; }
  nav.js-nav .nav-right {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .25rem 0 .75rem;
  }
  nav.js-nav.nav-open .nav-right { display: flex; }
  nav.js-nav .nav-right > .nav-link,
  nav.js-nav .nav-right > .nav-dd > summary {
    padding: .7rem .25rem;
    font-size: .95rem;
    border-bottom: 1px solid var(--border, #e2e8f0);
    width: 100%;
  }
  nav.js-nav .nav-right > .nav-dd > summary { justify-content: space-between; }
}