.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hd-mobile-nav {
  display: none;
  position: relative;
}

.hd-mobile-nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem;
  color: var(--text-color, #0f172a);
  background: transparent;
  border: 1px solid var(--border-color, #ddd);
  border-radius: 0.75rem;
  cursor: pointer;
}

.hd-mobile-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 60;
  width: min(18rem, calc(100vw - 2rem));
  padding: 0.25rem;
  overflow-y: auto;
  color: var(--text-color, #0f172a);
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #ddd);
  border-radius: 0.75rem;
  box-shadow: 0 20px 35px rgba(15, 23, 42, 0.18);
  transform-origin: top right;
  transition: opacity 150ms ease, transform 150ms ease;
}

.hd-mobile-menu.hidden { display: none; }
.hd-mobile-menu.opacity-0 { opacity: 0; }
.hd-mobile-menu.opacity-100 { opacity: 1; }
.hd-mobile-menu.scale-95 { transform: scale(0.95); }
.hd-mobile-menu.scale-100 { transform: scale(1); }
.hd-mobile-menu hr { margin: 0.25rem 0; border: 0; border-top: 1px solid var(--border-color, #ddd); }
.hd-mobile-menu a { display: block; padding: 0.6rem 0.75rem; color: inherit; border-radius: 0.5rem; text-decoration: none; }
.hd-mobile-menu a:first-child { color: #fff; background: #0ea5e9; }
.hd-mobile-menu a:first-child:hover { background: #0284c7; }
.hd-mobile-menu a:not(:first-child):hover,
.hd-mobile-menu a[aria-current="page"]:not(:first-child) { background: rgba(148, 163, 184, 0.18); }

@media (max-width: 768px) {
  .hd-mobile-nav { display: block; }
}