/* Services dropdown for the shared site header.
 *
 * The Webflow bundle ships the navbar component but not the standalone
 * dropdown controller, so this is first-party: CSS opens the menu on
 * hover/focus (works with no JS at all) and assets/js/nav-dropdown.js
 * adds click/touch toggling and keyboard handling on top.
 *
 * Loaded by every chromed page via scripts/partials.py.
 */

.tj-dd { position: relative; display: inline-block; }

/* The toggle is a <button> so it is reachable and announced correctly;
   these rules strip the UA button styling back to the nav link's look. */
.tj-dd-toggle {
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.tj-dd-caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.75;
  transition: transform 0.15s ease;
}

.tj-dd--open > .tj-dd-toggle .tj-dd-caret { transform: rotate(180deg); }

.tj-dd-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 232px;
  padding: 8px 0;
  background: #FFFFFF;
  border: 1px solid #E8E6E6;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(8, 8, 53, 0.12);
  z-index: 950;
}

.tj-dd-link {
  display: block;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #080835;
  text-decoration: none;
  white-space: nowrap;
}

.tj-dd-link:hover,
.tj-dd-link:focus { background: #F7F7F9; color: #0D38D8; }

.tj-dd-sep {
  height: 1px;
  margin: 8px 14px;
  background: #E8E6E6;
}

/* Open state.
 *
 * nav-dropdown.js stamps .tj-dd--js on the wrapper once it has wired the
 * toggle, and from then on it owns the open state: an explicit click, and
 * Escape to dismiss. The hover and focus-within rules below are the
 * fallback for when that script is absent or blocked - without them the
 * menu would be unreachable, but with them active alongside JS, focus
 * returning to the toggle after Escape would hold the menu open. */
.tj-dd.tj-dd--open > .tj-dd-menu { display: block; }

.tj-dd:not(.tj-dd--js):focus-within > .tj-dd-menu { display: block; }

@media (hover: hover) and (min-width: 992px) {
  .tj-dd:not(.tj-dd--js):hover > .tj-dd-menu { display: block; }
}

/* Inside Webflow's collapsed nav panel (data-collapse="medium" = 991px)
   the menu expands inline instead of floating over the page, and inverts:
   that panel is solid brand blue, so the light-surface colours above are
   unreadable there. Webflow also centres nav text at this breakpoint, so
   alignment is restated rather than inherited. */
@media (max-width: 991px) {
  .tj-dd { display: block; }
  .tj-dd-toggle { width: 100%; justify-content: space-between; }
  .tj-dd-menu {
    position: static;
    min-width: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: rgba(0, 0, 0, 0.16);
    padding: 6px 0;
  }
  .tj-dd-link {
    color: rgba(255, 255, 255, 0.92);
    text-align: left;
    padding: 12px 20px 12px 34px;
  }
  .tj-dd-link:hover,
  .tj-dd-link:focus {
    color: #FFFFFF;
    background: rgba(0, 0, 0, 0.22);
  }
  .tj-dd-sep { background: rgba(255, 255, 255, 0.22); margin: 6px 20px 6px 34px; }
  /* JS owns the state here - a stray focus must not expand the panel. */
  .tj-dd:focus-within > .tj-dd-menu { display: none; }
  .tj-dd.tj-dd--open > .tj-dd-menu { display: block; }
}