/* ============================================================
   Shared nav dropdowns — used by the homepage nav (#navbar in
   parts/home-body.php) and the public nav (.tc-nav--public in
   parts/nav-public.php). Enqueued globally.

   Desktop: hover / keyboard-focus reveals an absolute menu under
   the parent link (the parent itself still navigates to its page).
   Mobile (inside the hamburger panel): the menu becomes a static,
   always-visible indented sub-list — no extra tap needed, so no JS.
   Brand tokens (--navy, --pumpkin) come from home.css on the front
   page and brand.css/main.css everywhere else.
   ============================================================ */
.tc-dd { position: relative; }
.tc-dd__toggle { display: inline-flex; align-items: center; gap: 6px; }
.tc-dd__caret { font-size: 0.62em; line-height: 1; transition: transform 0.2s; }
.tc-dd:hover .tc-dd__caret,
.tc-dd:focus-within .tc-dd__caret { transform: rotate(180deg); }

.tc-dd__menu {
  position: absolute; top: 100%; left: 0; min-width: 190px;
  display: none; z-index: 200;
  background: #fff; border-radius: 12px;
  border-top: 10px solid transparent; /* visual gap with no hover dead-zone */
  background-clip: padding-box;
  box-shadow: 0 14px 30px rgba(0,0,0,0.14);
  padding: 8px;
}
.tc-dd:hover > .tc-dd__menu,
.tc-dd:focus-within > .tc-dd__menu { display: block; }

/* Menu item appearance — qualified to beat each nav's base link color. */
.nav-links .tc-dd__menu a,
.tc-nav--public .tc-nav__links .tc-dd__menu a {
  display: block; padding: 10px 14px; border-radius: 8px;
  color: var(--navy); font-size: 14px; font-weight: 500;
  white-space: nowrap; text-decoration: none; border-bottom: 0;
}
.nav-links .tc-dd__menu a:hover,
.nav-links .tc-dd__menu a:focus,
.tc-nav--public .tc-nav__links .tc-dd__menu a:hover,
.tc-nav--public .tc-nav__links .tc-dd__menu a:focus {
  background: rgba(27,45,91,0.06); color: var(--pumpkin);
}

/* ---- Homepage nav: hamburger panel shows only the top-level links ---- */
/* Mobile keeps the menu short: the top-level links only (About / Research / Resources /
   Network) plus the Join Us CTA. The submenu items and the Start Talking link are dropped
   so the panel never outgrows the screen. Desktop dropdowns are unchanged. */
@media (max-width: 768px) {
  .nav-links .tc-dd { width: 100%; }
  .nav-links .tc-dd__toggle { justify-content: space-between; }
  .nav-links .tc-dd__caret { display: none; }
  .nav-links .tc-dd__menu { display: none; }
  .nav-links .nav-start-talking { display: none; }
}

/* ---- Public nav: hamburger panel shows only the top-level links ---- */
@media (max-width: 760px) {
  .tc-nav--public .tc-nav__links .tc-dd { width: 100%; }
  .tc-nav--public .tc-nav__links .tc-dd__caret { display: none; }
  .tc-nav--public .tc-nav__links .tc-dd__menu { display: none; }
  /* Start Talking is the only non-dropdown item in the list — drop it on mobile too. */
  .tc-nav--public .tc-nav__links > li:not(.tc-dd) { display: none; }
}