/*
 * 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.
 */

.club-info-title {
  font-size: clamp(2.5rem, 7vw, 6rem);
  line-height: 1.05;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.7), 0 1px 0 #000;
}

.span-club-info-title {
  color: '#d6ff00';
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.1;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.soft-neon-background-pattern {
  background: linear-gradient(to bottom, #000, #000 50%, #000 100%);
  opacity: 0.07;
}

.featured-post-image-2-3 {
  width: 66vw;
  height: 100%;
  max-width: 1024px;
}

.featured-post-image-1-3 {
  width: 33vw;
  height: 100%;
  max-width: 1024px;
}

/* Event Card Styling */
.event-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.event-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.event-image {
  transition: transform 0.3s ease-in-out;
}

.event-card:hover .event-image {
  transform: scale(1.05);
}

/* Line clamp utility */
.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;
}

/* Smooth scroll for anchor links */
html {
  scroll-behavior: smooth;
}

/* Custom animation for buttons */
.btn-hover-lift {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Loading animation for form submissions */
.loading {
  opacity: 0.7;
  pointer-events: none;
}

.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid #ffffff;
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Custom focus styles */
.focus-red:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(132, 204, 22, 0.3);
  border-color: rgb(132, 204, 22);
}

/* Enhanced card shadows */
.card-shadow {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s ease-in-out;
}

.card-shadow:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Clean up button_to styling for inline delete buttons */
form[method="post"] {
  display: inline;
}

form[method="post"] button[data-turbo-confirm] {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

/* Style default Pagy pagination */
#pagy-nav {
  margin-top: 2rem;
}

#pagy-nav a,
#pagy-nav span {
  @apply px-3 py-2 mx-1 text-sm border rounded-lg transition-all duration-200;
}

#pagy-nav a {
  @apply text-custom-white bg-white border-gray-300 hover:bg-red-50 hover:text-red-700 hover:border-red-300;
}

#pagy-nav .current {
  @apply text-white bg-custom-red border-red-500 font-medium;
}

#pagy-nav .gap {
  @apply text-gray-500 bg-gray-50 border-gray-300;
}

/* Cookie Banner Styles */
.cookie-banner {
  transition: transform 0.3s ease-in-out;
}

.banner-visible {
  transform: translateY(0) !important;
  display: block !important;
}

.banner-hidden {
  transform: translateY(100%) !important;
}

.banner-hidden.banner-fade-out {
  display: none !important;
}

/* Success Message Animation */
.cookie-success-message {
  transition: transform 0.3s ease-in-out;
}

.cookie-success-message.translate-x-full {
  transform: translateX(100%);
}

/* Cookie Preferences Page Enhancements */
.cookie-category-card {
  transition: border-color 0.2s ease-in-out;
}

.cookie-category-card:hover {
  border-color: #3b82f6;
}

/* Banner z-index fix for overlays */
.cookie-banner {
  z-index: 9999;
}