/* ===================================================================
   Covington Capital Corporation - Main Stylesheet
   
   This file imports all modular CSS files in the correct order.
   Edit individual files for specific changes.
   =================================================================== */

/* 1. Base - Reset, Variables, Typography */
@import url('./base.css');

/* 2. Layout - Header, Footer, Navigation, Main Content */
@import url('./layout.css');

/* 3. Components - Buttons, Cards, Forms, Modals, UI Elements */
@import url('./components.css');

/* 4. Utilities - Helper Classes and Common Patterns */
@import url('./utilities.css');

/* 5. Page-Specific Styles */
/* Admin page has its own CSS file: admin.css */

/* ===================================================================
   Custom Overrides
   
   Add any custom CSS that doesn't fit into the above categories here.
   Try to keep this section minimal and move rules to appropriate files.
   =================================================================== */

/* Benefits Section (specific to homepage) */
.benefits-section {
  background: var(--bg-secondary);
  padding: var(--spacing-3xl) var(--spacing-xl);
  border-radius: var(--radius-2xl);
  margin: var(--spacing-2xl) 0;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
}

.benefit-item {
  text-align: center;
  padding: var(--spacing-xl);
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.benefit-item::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(37, 197, 201, 0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.benefit-item:hover::before {
  opacity: 1;
}

.benefit-item:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.12);
}

.benefit-icon-wrapper {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--spacing-md);
  position: relative;
}

.benefit-icon {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(37, 197, 201, 0.2), rgba(30, 144, 255, 0.2));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  position: relative;
  box-shadow: 0 8px 24px rgba(37, 197, 201, 0.2);
  transition: all 0.3s ease;
}

.benefit-item:hover .benefit-icon {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 12px 32px rgba(37, 197, 201, 0.3);
  background: linear-gradient(135deg, rgba(37, 197, 201, 0.3), rgba(30, 144, 255, 0.3));
}

.benefit-icon::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, #25c5c9, #1e90ff);
  border-radius: 50%;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.benefit-item:hover .benefit-icon::after {
  opacity: 0.5;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.05); opacity: 0.3; }
}

.benefit-item h4 {
  color: #25c5c9;
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-xl);
  font-weight: var(--font-bold);
  letter-spacing: -0.02em;
  transition: color 0.3s ease;
}

.benefit-item:hover h4 {
  color: #1e90ff;
}

.benefit-item p {
  color: rgba(255, 255, 255, 0.8);
  line-height: var(--line-relaxed);
  font-size: var(--font-sm);
  max-width: 280px;
  margin: 0 auto;
}

/* Temporary Compatibility Classes */
/* These map old class names to new utility classes */
/* Remove these once all templates are updated */
.mt-2 { margin-top: var(--spacing-xl) !important; }
.mb-2 { margin-bottom: var(--spacing-xl) !important; }