/**
 * GeoGolf Custom Utilities
 * Replaces inline styles for better SEO, caching, and maintainability
 * 
 * Pro tip: These classes replace inline styles flagged by SEO tools.
 * Keep this file minimal - prefer Tailwind utilities when possible.
 */

/* ============================================
   FILTERS & IMAGE EFFECTS
   ============================================ */

.hero-image-filter {
  filter: brightness(0.85) saturate(1.1);
}

/* ============================================
   TRANSFORMS
   ============================================ */

.svg-flip-y {
  transform: scaleY(-1);
}

/* ============================================
   TEXT SHADOWS (Enhanced Drop Shadows)
   ============================================ */

.text-shadow-hero-title {
  text-shadow: 
    0 6px 18px rgba(0, 0, 0, 0.9), 
    0 3px 8px rgba(0, 0, 0, 0.75);
}

.text-shadow-hero-subtitle {
  text-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.85), 
    0 2px 4px rgba(0, 0, 0, 0.7);
}

/* ============================================
   RADIAL GRADIENTS (Complex Backgrounds)
   ============================================ */

/* Gold radial gradient - top right */
.bg-radial-gold-tr {
  background: radial-gradient(
    60% 50% at 50% 35%, 
    rgba(230, 197, 71, 0.18) 0%, 
    rgba(230, 197, 71, 0.08) 35%, 
    transparent 65%
  );
}

/* Gold radial blur - decorative */
.bg-radial-gold-blur-strong {
  background: radial-gradient(
    circle at 40% 40%, 
    rgba(230, 197, 71, 0.35), 
    transparent 60%
  );
}

.bg-radial-gold-blur-medium {
  background: radial-gradient(
    circle at 40% 40%, 
    rgba(230, 197, 71, 0.25), 
    transparent 60%
  );
}

.bg-radial-gold-blur-light {
  background: radial-gradient(
    circle at 30% 30%, 
    rgba(230, 197, 71, 0.35), 
    transparent 60%
  );
}

/* Emerald radial blur - decorative */
.bg-radial-emerald-blur-medium {
  background: radial-gradient(
    circle at 60% 60%, 
    rgba(16, 185, 129, 0.25), 
    transparent 70%
  );
}

.bg-radial-emerald-blur-light {
  background: radial-gradient(
    circle at 60% 60%, 
    rgba(16, 185, 129, 0.20), 
    transparent 60%
  );
}

.bg-radial-emerald-blur-lighter {
  background: radial-gradient(
    circle at 70% 70%, 
    rgba(16, 185, 129, 0.35), 
    transparent 60%
  );
}

/* Hover gradient overlays */
.hover-radial-emerald-overlay {
  background: radial-gradient(
    120% 100% at 0% 0%, 
    rgba(16, 185, 129, 0.18), 
    transparent 70%
  );
}

.hover-radial-emerald-subtle {
  background: radial-gradient(
    120% 100% at 0% 0%, 
    rgba(16, 185, 129, 0.10), 
    transparent 70%
  );
}

.hover-radial-gold-subtle {
  background: radial-gradient(
    120% 80% at 0% 0%, 
    rgba(230, 197, 71, 0.10), 
    transparent 60%
  );
}

/* Company page specific radial gradient */
.bg-radial-company-contracts {
  background: radial-gradient(
    1200px 600px at 10% -10%, 
    rgba(16, 185, 129, 0.12), 
    rgba(16, 185, 129, 0) 60%
  ), 
  linear-gradient(to bottom right, #0f172a 0%, #0b1320 100%);
}

/* ============================================
   DOT PATTERNS (Subtle Backgrounds)
   ============================================ */

.bg-dot-pattern-light {
  background-image: radial-gradient(
    circle at 2px 2px, 
    rgba(16, 185, 129, 0.4) 1px, 
    transparent 1px
  );
  background-size: 32px 32px;
}

.bg-dot-pattern-white-sm {
  background-image: radial-gradient(
    white 1px, 
    transparent 1px
  );
  background-size: 18px 18px;
}

.bg-dot-pattern-white-md {
  background-image: radial-gradient(
    #ffffff 1px, 
    transparent 1px
  );
  background-size: 24px 24px;
}

.bg-dot-pattern-white-lg {
  background-image: radial-gradient(
    circle at 1px 1px, 
    white 1px, 
    transparent 0
  );
  background-size: 20px 20px;
}

/* ============================================
   COMPLEX GRADIENT OVERLAYS
   ============================================ */

/* 
 * NOTE: Home page roles & news sections use inline styles
 * due to dynamic PHP image paths. See:
 * - app/Views/pages/home.php line 778 (roles background)
 * - app/Views/pages/home.php line 1213 (news background)
 */

/* News page background (with image) */
.bg-overlay-news-page {
  background: linear-gradient(
    135deg, 
    rgba(255, 255, 255, 0.90), 
    rgba(248, 250, 252, 0.85)
  ), 
  url('/assets/img/backgrounds/golf-course-landscape.jpg') center/cover no-repeat fixed;
}

/* Search page pattern overlay */
.bg-golf-pattern {
  background-image: url('/assets/img/golf-pattern.svg');
  background-size: 100px 100px;
}

/* ============================================
   SIZING CONSTRAINTS
   ============================================ */

.max-w-logo {
  max-width: 16rem;
}

.max-w-content {
  width: max-content;
}

/* ============================================
   SCROLLING & OVERFLOW
   ============================================ */

.scroll-touch-pan-y {
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.overflow-visible-important {
  overflow: visible !important;
}

/* ============================================
   ANIMATION DELAYS (Stagger Effects)
   ============================================ */

/* Animation delay utilities - use sparingly, prefer Alpine :style for dynamic delays */
@media (prefers-reduced-motion: no-preference) {
  .animate-delay-50 { animation-delay: 50ms; }
  .animate-delay-100 { animation-delay: 100ms; }
  .animate-delay-200 { animation-delay: 200ms; }
  .animate-delay-300 { animation-delay: 300ms; }
  .animate-delay-500 { animation-delay: 500ms; }
  .animate-delay-1000 { animation-delay: 1000ms; }
  .animate-delay-1500 { animation-delay: 1500ms; }
  
  .transition-delay-50 { transition-delay: 50ms; }
  .transition-delay-100 { transition-delay: 100ms; }
  .transition-delay-200 { transition-delay: 200ms; }
  .transition-delay-300 { transition-delay: 300ms; }
  .transition-delay-400 { transition-delay: 400ms; }
}

/* Specific transition combinations */
.transition-all-600-0 { transition: all 0.6s ease-out 0s; }
.transition-all-600-100 { transition: all 0.6s ease-out 0.1s; }
.transition-all-600-200 { transition: all 0.6s ease-out 0.2s; }
.transition-all-800-300 { transition: all 0.8s ease-out 0.3s; }
.transition-all-800-400 { transition: all 0.8s ease-out 0.4s; }

/* ============================================
   WORD WRAPPING & TEXT FORMATTING
   ============================================ */

.word-wrap-hyphens {
  word-wrap: break-word;
  hyphens: auto;
  white-space: normal;
}

/* ============================================
   OPACITY UTILITIES (Non-Tailwind Values)
   ============================================ */

.opacity-3 { opacity: 0.03; }
.opacity-6 { opacity: 0.06; }

/* ============================================
   ANIMATION DURATIONS
   ============================================ */

.animate-duration-8s {
  animation-duration: 8s;
}

/* ============================================
   TRANSITION UTILITIES
   ============================================ */

.transition-transform-1500 {
  transition: transform 1.5s ease-out;
}

.transition-all-600 {
  transition: all 0.6s ease-out;
}

.transition-all-800 {
  transition: all 0.8s ease-out;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 640px) {
  /* Mobile-specific overrides if needed */
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .hero-image-filter,
  .bg-radial-gold-tr,
  .bg-radial-gold-blur-strong,
  .bg-radial-emerald-blur-medium {
    /* Simplify for print */
    filter: none;
    background: none;
  }
}