/* nav-dropdown.css — category dropdown menus for the site-wide nav-cats bar */
.nav-cats { position: relative; }
.nav-cat-item { position: relative; }
.nav-cat-link { display: flex; align-items: center; gap: 4px; }
.nav-cat-link .caret { font-size: 9px; transition: transform .15s; opacity: .7; }
.nav-cat-item.open .nav-cat-link .caret { transform: rotate(180deg); }

.nav-cat-dropdown {
  display: none;
  position: absolute; top: 100%; left: 0;
  background: #fff; border: 1px solid #e8ecf0; border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.14);
  min-width: 230px; max-width: 320px;
  padding: 8px; z-index: 500;
  flex-direction: column; gap: 1px;
  max-height: 380px; overflow-y: auto;
}
.nav-cat-item.open > .nav-cat-dropdown,
.nav-cat-item:hover > .nav-cat-dropdown { display: flex; }

.nav-cat-dropdown a {
  padding: 8px 10px; border-radius: 6px; font-size: 13px;
  color: #374151; text-decoration: none; white-space: normal; line-height: 1.3;
}
.nav-cat-dropdown a:hover { background: #f0f4ff; color: #1a56db; }
.nav-cat-dropdown a.nav-cat-viewall {
  font-weight: 700; color: #1a56db; border-top: 1px solid #e8ecf0;
  margin-top: 4px; padding-top: 10px;
}

@media (max-width: 768px) {
  .nav-cat-dropdown {
    position: static; box-shadow: none; border: none; max-height: none;
  }
  .nav-cat-item:hover > .nav-cat-dropdown { display: none; }
  .nav-cat-item.open > .nav-cat-dropdown { display: flex; }
}

/* The category bar itself uses overflow-x:auto so it can scroll on narrow
   screens; that implicitly forces overflow-y to 'auto' too (CSS spec: a
   non-'visible' overflow-x makes 'visible' overflow-y compute to 'auto'),
   which clips the absolutely-positioned dropdown panel below it. Above the
   mobile breakpoint the bar never needs to scroll, so drop the clipping
   there and let dropdowns render outside the bar's own box.
   !important because most pages also carry their own inline
   `.nav-cats{overflow-x:auto}` rule (same specificity, later in the
   cascade) that would otherwise win back the clipping. */
@media (min-width: 769px) {
  .nav-cats, .prc-nav-cats { overflow: visible !important; }
}