No functionality is accessible only via hover

CSS :hover does not fire reliably on touch devices — there is no cursor, so hover states either never trigger or trigger on first tap and then persist, breaking the interaction model. Dropdown menus that only open on hover are completely inaccessible on touch screens. Tooltips that only appear on hover convey information that touch and keyboard users never receive — a WCAG 2.2 SC 2.1.1 (Keyboard) and SC 1.4.13 (Content on Hover or Focus) violation. The practical business impact is that users on iPhone or Android simply cannot reach menu items, card actions, or contextual controls gated behind hover states.

Convert hover-gated interactions to explicit click/tap handlers. Replace pure CSS hover dropdowns with a controlled open/close state:

const [open, setOpen] = useState(false)
return (
  <div
    onMouseEnter={() => setOpen(true)}
    onMouseLeave={() => setOpen(false)}
    onClick={() => setOpen(o => !o)}
  >
    <button aria-expanded={open}>{label}</button>
    {open && <DropdownMenu />}
  </div>
)

For card action overlays, ensure they are always visible on mobile via src/app/globals.css:

.card-actions { opacity: 0; transition: opacity 0.15s; }
.card:hover .card-actions { opacity: 1; }
@media (max-width: 640px) { .card-actions { opacity: 1; } }