/* Dropdown styles for the rewritten main nav.
   The React app's <nav> has overflow:auto (to allow mobile menu scroll),
   so a position:absolute dropdown gets clipped. We escape that by making
   the nav allow overflow when a dropdown is open. */
nav:has(.rrff-main-dd.is-open),
nav:has(.rrff-main-dd:hover),
nav:has(.rrff-main-dd:focus-within) {
  overflow: visible !important;
}
.rrff-main-dd { position: relative; }
.rrff-main-dd-btn {
  background: none; border: 0; cursor: pointer; font-family: inherit;
  padding: 0; display: inline-flex; align-items: center; gap: 4px;
}
.rrff-main-dd-btn::after {
  content: ''; display: inline-block; width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); margin-bottom: 3px; margin-left: 2px; opacity: 0.7;
  transition: transform 0.2s;
}
.rrff-main-dd.is-open .rrff-main-dd-btn::after { transform: rotate(-135deg); margin-bottom: -2px; }
.rrff-main-dd-menu {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(4px);
  min-width: 230px;
  background: hsl(0, 0%, 7%);
  border: 1px solid hsla(0, 0%, 100%, 0.08);
  border-radius: 12px; padding: 8px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
  box-shadow: 0 18px 40px -16px hsla(0,0%,0%,0.7);
  z-index: 60;
}
.rrff-main-dd:hover .rrff-main-dd-menu,
.rrff-main-dd:focus-within .rrff-main-dd-menu,
.rrff-main-dd.is-open .rrff-main-dd-menu {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.rrff-main-dd-menu a {
  display: block; padding: 10px 12px;
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  border-radius: 8px; line-height: 1.3;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.rrff-main-dd-menu a:hover {
  background: hsla(43, 75%, 55%, 0.10);
  color: hsl(43, 75%, 60%);
}