/* ===== Strong, CSP-safe, Tailwind-proof dropdown styles ===== */

/* Container & Trigger */
header nav ul > li.nav-drop { position: relative !important; display: inline-block !important; }
header nav ul > li.nav-drop > .nav-btn {
  display:inline-flex !important; align-items:center !important; gap:.5rem !important;
  padding:.5rem .75rem !important; border-radius:.375rem !important;
}
header nav ul > li.nav-drop > .nav-btn:hover { background: rgb(30 41 59 / .7) !important; } /* slate-800/70 */

/* Panel (default hidden) */
header nav ul > li.nav-drop > .nav-panel {
  position:absolute !important; left:0 !important; top:100% !important;
  margin-top:.25rem !important; min-width:220px !important;
  background:#fff !important; color:#0f172a !important;
  border-radius:.375rem !important;
  box-shadow:0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1) !important;
  outline:1px solid rgb(0 0 0 / .05) !important;
  z-index:50 !important;

  /* override any Tailwind hidden/display utilities */
  display:none !important;
  opacity:0 !important; transform:translateY(4px) !important;
  visibility:hidden !important; pointer-events:none !important;

  transition:opacity 160ms cubic-bezier(.2,.8,.2,1),
             transform 160ms cubic-bezier(.2,.8,.2,1),
             visibility 0s linear 160ms !important;
  white-space:nowrap !important;
}

/* Open on hover & keyboard focus */
header nav ul > li.nav-drop:hover > .nav-panel,
header nav ul > li.nav-drop:focus-within > .nav-panel {
  display:block !important;
  opacity:1 !important; transform:translateY(0) !important;
  visibility:visible !important; pointer-events:auto !important;
  transition-delay:0ms !important;
}
/* slightly slower hide */
header nav ul > li.nav-drop > .nav-panel { transition-duration:220ms !important; }

/* Hover bridge to forgive diagonal moves */
header nav ul > li.nav-drop > .nav-panel > .nav-bridge {
  content:""; position:absolute; top:-10px; left:0; right:0; height:10px;
}

/* Items */
header nav ul > li.nav-drop > .nav-panel a.dd-item {
  display:block !important; padding:.5rem 1rem !important; font-size:.875rem !important;
  color:inherit !important; text-decoration:none !important; white-space:nowrap !important;
}
header nav ul > li.nav-drop > .nav-panel a.dd-item:hover { background:#f1f5f9 !important; } /* slate-100 */

/* Ensure nothing clips the dropdown */
header, header * { overflow: visible !important; }