/* SwimCoach.ie — Theme Styles */
/* Shared across all pages. Replaces inline <style> blocks + directory-styles.css overrides. */

/* ============================================
   CSS Custom Properties (mirrors Tailwind config)
   ============================================ */
:root {
  --color-primary: #0D7377;
  --color-primary-dark: #065A5E;
  --color-primary-light: #E0F5F5;
  --color-accent: #FF6B6B;
  --color-accent-dark: #E85555;
  --color-accent-light: #FFE0E0;
  --color-secondary: #F5A623;
  --color-secondary-dark: #D4891A;
  --color-secondary-light: #FFF3DC;
  --color-surface: #FAF7F2;
  --color-surface-alt: #F5F0E8;
  --color-text: #1A1A2E;
  --color-text-muted: #4A4A5A;
  --color-neutral-200: #E8E8EE;
  --color-neutral-100: #F4F4F8;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ============================================
   Hero Gradient
   ============================================ */
.hero-gradient {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

/* ============================================
   Base
   ============================================ */
body {
  font-family: var(--font-sans);
  background: var(--color-surface);
  color: var(--color-text);
}

/* ============================================
   Card Components
   ============================================ */
.school-card {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: white;
  border: 1px solid var(--color-neutral-200);
}

.school-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(13, 115, 119, 0.1);
  border-color: var(--color-primary-light);
}

.card-lift {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(13, 115, 119, 0.12);
}

.stat-card {
  background: white;
  border: 1px solid var(--color-neutral-200);
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(13, 115, 119, 0.08);
}

.filter-card {
  background: white;
  border: 1px solid var(--color-neutral-200);
  backdrop-filter: blur(10px);
}

/* ============================================
   Rating Badge
   ============================================ */
.rating-badge {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
  box-shadow: 0 4px 12px rgba(245, 166, 35, 0.3);
}

/* ============================================
   Buttons
   ============================================ */
.btn-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  box-shadow: 0 4px 12px rgba(13, 115, 119, 0.3);
  transition: all 0.3s ease;
}

.btn-primary:hover {
  box-shadow: 0 6px 20px rgba(13, 115, 119, 0.4);
  transform: translateY(-2px);
}

.btn-accent {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
  transition: all 0.3s ease;
}

.btn-accent:hover {
  box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
  transform: translateY(-2px);
}

/* ============================================
   School Icon
   ============================================ */
.school-icon {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, #c8eded 100%);
  border: 2px solid #a3dfdf;
}

/* ============================================
   Feature Badges
   ============================================ */
.feature-badge {
  background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-200);
  transition: all 0.2s ease;
}

.feature-badge:hover {
  background: var(--color-primary-light);
  border-color: #a3dfdf;
}

/* ============================================
   Form Inputs
   ============================================ */
#searchInput:focus,
select:focus {
  box-shadow: 0 0 0 3px rgba(13, 115, 119, 0.15);
  border-color: var(--color-primary);
}

/* ============================================
   Wave Section Dividers
   ============================================ */
.wave-divider {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.wave-divider svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 60px;
}

.wave-divider-surface svg path {
  fill: var(--color-surface);
}

.wave-divider-white svg path {
  fill: #ffffff;
}

/* ============================================
   Animations
   ============================================ */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-soft {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.fade-in {
  animation: fadeIn 0.5s ease-out;
}

.fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

/* ============================================
   Mobile Responsive
   ============================================ */
@media (max-width: 640px) {
  .school-card .flex.items-start.justify-between {
    flex-direction: column;
    gap: 1rem;
  }

  .rating-badge {
    margin-left: 0 !important;
    align-self: flex-start;
  }

  .wave-divider svg {
    height: 40px;
  }
}