/* Navigation chrome — sheet animations, safe-area utilities, mobile tap fixes.
   Imported by application.tailwind.css via the responsive_navbar generator. */

/* --- Base interactive cursor ------------------------------------------- */
/* Tailwind v4's reset removed the default `cursor: pointer` for buttons.
   Put it back so the hamburger / collapse toggle / dropdowns feel clickable. */
@layer base {
  button:not(:disabled), [role="button"]:not(:disabled) {
    cursor: pointer;
  }
}

/* --- Sheet animations (slide in/out from left, fade backdrop) ----------- */
@keyframes sheet-slide-left {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}
@keyframes sheet-slide-left-out {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
@keyframes sheet-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sheet-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.sheet-enter-left    { animation: sheet-slide-left 220ms cubic-bezier(0.32, 0.72, 0, 1); }
.sheet-exit-left     { animation: sheet-slide-left-out 200ms cubic-bezier(0.32, 0.72, 0, 1) forwards; }
.sheet-backdrop-enter { animation: sheet-fade-in 220ms ease-out; }
.sheet-backdrop-exit  { animation: sheet-fade-out 200ms ease-in forwards; }

/* --- Mobile touch interaction fixes ------------------------------------- */
/* iOS Safari auto-zooms when focusing form fields under 16px. */
input, select, textarea {
  font-size: 16px;
}

/* Eliminate the legacy 300ms double-tap-zoom delay on interactive elements. */
button, a, [role="button"], input[type="submit"], input[type="button"],
label[for], summary, select {
  touch-action: manipulation;
}

/* Avoid the sticky tap-highlight gray on iOS without losing active state. */
a, button, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

/* Native-feeling momentum scroll on mobile scroll containers. */
html, body {
  -webkit-overflow-scrolling: touch;
}

/* --- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sheet-enter-left,
  .sheet-exit-left,
  .sheet-backdrop-enter,
  .sheet-backdrop-exit {
    animation-duration: 0.01ms !important;
  }
}