/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ---------------------------------------------------------------------------
 * Reflow safety
 *
 * Headings and button labels are the elements most likely to establish a
 * min-content width wider than a narrow viewport once text is scaled up.
 * Letting them break keeps the page from scrolling sideways at large text
 * sizes (WCAG 1.4.4 / 1.4.10).
 * ------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
button, .button_to input[type="submit"] {
  overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------------
 * Decorative animations
 *
 * These drive the floating emoji on the landing page. They live here rather
 * than in an inline <style> so there is one definition, and so the
 * reduced-motion guard below actually covers them. Names are suffixed -soft to
 * avoid colliding with Tailwind's own `bounce` / `pulse` keyframes.
 * ------------------------------------------------------------------------- */
@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

@keyframes bounce-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

@keyframes pulse-soft {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.05; }
}

.animate-float {
  animation: float-soft 6s ease-in-out infinite;
}

.animate-bounce-slow {
  animation: bounce-soft 3s ease-in-out infinite;
}

.animate-pulse-slow {
  animation: pulse-soft 4s ease-in-out infinite;
}

/* ---------------------------------------------------------------------------
 * Reduced motion
 *
 * Deliberately targeted rather than a blanket `animation: none`. Perpetual
 * decorative motion is removed outright, and the focus-scale nudge (which
 * shifts layout on every tab) is dropped. The flash message still animates in,
 * just instantly enough not to provoke — it communicates a state change, so
 * killing it entirely would cost information.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .animate-float,
  .animate-bounce-slow,
  .animate-pulse-slow {
    animation: none;
  }

  .animate-slide-down,
  .animate-slide-up {
    animation-duration: 0.01ms;
  }

  .focus\:scale-102:focus {
    transform: none;
  }

  .sortable-item {
    transition: none;
  }
}

/* Drag and drop styles */
.sortable-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sortable-item {
  transition: opacity 0.2s ease, transform 0.2s ease, margin 0.2s ease;
  position: relative;
}

.sortable-item.opacity-40 {
  opacity: 0.4;
}

.sortable-item.dragging {
  transform: scale(0.95);
}

/* Don't disable pointer events - it blocks drop targets! */
.sortable-item.opacity-40 .drag-handle {
  pointer-events: auto !important;
}

/* Show a thick blue line above the item */
.sortable-item.drag-over-top::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 4px;
  background: #6366f1;
  border-radius: 2px;
  z-index: 10;
}

/* Show a thick blue line below the item */
.sortable-item.drag-over-bottom::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  height: 4px;
  background: #6366f1;
  border-radius: 2px;
  z-index: 10;
}

.drag-handle {
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  flex-shrink: 0;
  transition: color 0.2s ease;
}

.drag-handle:hover {
  color: #4f46e5;
}

.drag-handle:active {
  cursor: grabbing;
}