/* Services dropdown in the main nav, shared by index.html and the inner pages.
   Pattern after 21st.dev's "Rich Navigation Menu": icon, name and one-line description per link. */
.nav-links { align-items: center; }

.nav-links > a[aria-current="page"] { color: #0F172A; }

.nav-drop { position: relative; }

.nav-drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: color 180ms;
}

.nav-drop-btn:hover, .nav-drop.is-open .nav-drop-btn, .nav-drop-btn.is-current { color: #0F172A; }
.nav-drop-btn svg { width: 0.75rem; height: 0.75rem; transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1); }
.nav-drop.is-open .nav-drop-btn svg { transform: rotate(180deg); }

.nav-panel {
  position: absolute;
  top: calc(100% + 1rem);
  left: 50%;
  z-index: 60;
  width: 22rem;
  padding: 0.5rem;
  border: 1px solid #E2E8F0;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 30px 60px -24px rgba(15, 23, 42, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px);
  transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1), transform 200ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 200ms;
}

/* hover gap bridge so the panel doesn't close on the way down */
.nav-panel::before { content: ""; position: absolute; inset: -1rem 0 auto; height: 1rem; }

.nav-drop.is-open .nav-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }

.nav-links .nav-panel a::after { display: none; }

.nav-item {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0.875rem;
  align-items: center;
  padding: 0.75rem !important;
  border-radius: 0.75rem;
  color: #0F172A;
  transition: background 150ms;
}

.nav-item:hover, .nav-item:focus-visible, .nav-item[aria-current="page"] { background: #F1F5F9; }
.nav-item b { display: block; font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.01em; }
.nav-item small { display: block; color: #64748B; font-size: 0.8125rem; line-height: 1.4; }

.nav-ico { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 0.625rem; }
.nav-ico svg { width: 1.25rem; height: 1.25rem; }
.nav-ico.blue { background: #DBEAFE; color: #1D4ED8; }
.nav-ico.pink { background: #FCE7F3; color: #BE185D; }
.nav-ico.yellow { background: #FEF9C3; color: #854D0E; }

.nav-panel-foot {
  display: flex !important;
  justify-content: space-between;
  margin-top: 0.375rem;
  padding: 0.75rem !important;
  border-top: 1px solid #E2E8F0;
  border-radius: 0 0 0.625rem 0.625rem;
  color: #1D4ED8;
  font-size: 0.875rem;
  font-weight: 600;
}

.nav-panel-foot:hover { background: #F8FAFC; }

/* phone menu: grouped list, no extra taps */
.mobile-menu .menu-label { padding: 1rem 0 0.25rem; color: #64748B; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.mobile-menu .menu-label:first-child { padding-top: 0.25rem; }
.mobile-menu a small { display: block; color: #64748B; font-size: 0.875rem; font-weight: 500; }
.mobile-menu a[aria-current="page"] { color: #1D4ED8; }

@media (prefers-reduced-motion: reduce) {
  .nav-panel, .nav-drop-btn svg { transition: none; }
}