/* BeerMe custom CSS - supplements Tailwind CDN */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Line clamp utilities */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Leaflet map full height */
#pub-map {
  width: 100%;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #b45309; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #92400e; }

/* HTMX loading indicator */
.htmx-indicator {
  opacity: 0;
  transition: opacity 200ms ease-in;
}
.htmx-request .htmx-indicator,
.htmx-indicator.htmx-request {
  opacity: 1;
}

/* Alpine x-cloak: hide elements until Alpine initialises */
[x-cloak] {
  display: none !important;
}

/* Improve tap targets on mobile - ensure minimum 44px touch areas */
@media (max-width: 768px) {
  .tap-target {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Prevent content shift when scrollbar appears/disappears */
html {
  scrollbar-gutter: stable;
}

/* Better focus styles for accessibility */
:focus-visible {
  outline: 2px solid #f59e0b;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Map loading spinner animation */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animate-spin {
  animation: spin 1s linear infinite;
}

/* Pulse animation for loading bar */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.animate-pulse {
  animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}