/* EVERfor Website Styles */

/* Custom Properties */
:root {
    --gold: #E6B73A;
    --gold-light: #F4D03F;
    --navy: #2C3E50;
    --deep-charcoal: #1a1a1a;
    --cream: #F5F5DC;
    --soft-beige: #F5F5DC;
    --warm-gray: #9CA3AF;
}

/* Tailwind Custom Colors */
.text-gold { color: var(--gold); }
.bg-gold { background-color: var(--gold); }
.border-gold { border-color: var(--gold); }

.text-navy { color: var(--navy); }
.bg-navy { background-color: var(--navy); }
.border-navy { border-color: var(--navy); }

.text-deep-charcoal { color: var(--deep-charcoal); }
.bg-deep-charcoal { background-color: var(--deep-charcoal); }

.text-cream { color: var(--cream); }
.bg-cream { background-color: var(--cream); }

.text-soft-beige { color: var(--soft-beige); }
.bg-soft-beige { background-color: var(--soft-beige); }

.text-warm-gray { color: var(--warm-gray); }
.bg-warm-gray { background-color: var(--warm-gray); }

/* Typography */
.font-playfair {
    font-family: 'Playfair Display', serif;
}

.font-inter {
    font-family: 'Inter', sans-serif;
}

/* Navigation */
.nav-link {
    @apply text-gray-600 hover:text-gray-900 px-3 py-2 text-sm font-medium transition-colors duration-200;
}

.nav-link-dark {
    @apply text-cream hover:text-gold px-3 py-2 text-sm font-medium transition-colors duration-200;
}

.mobile-nav-link {
    @apply block px-3 py-2 text-base font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-md transition-colors duration-200;
}

.mobile-nav-link-dark {
    @apply block px-3 py-2 text-base font-medium text-cream hover:text-gold hover:bg-deep-charcoal rounded-md transition-colors duration-200;
}

/* Buttons */
.btn-primary {
    @apply bg-gold hover:bg-gold-light text-white font-semibold py-3 px-6 rounded-lg transition-all duration-200 transform hover:scale-105 hover:shadow-lg;
}

.btn-primary-dark {
    @apply bg-gold hover:bg-gold-light text-navy font-semibold py-3 px-6 rounded-lg transition-all duration-200 transform hover:scale-105 hover:shadow-lg;
}

.btn-secondary {
    @apply bg-white hover:bg-gray-50 text-gray-900 font-semibold py-3 px-6 rounded-lg border-2 border-gray-300 hover:border-gray-400 transition-all duration-200 transform hover:scale-105 hover:shadow-lg;
}

/* Service Cards */
.service-card-hover {
    @apply hover:shadow-2xl hover:-translate-y-2;
}

/* Video Cards */
.video-card {
    @apply bg-cream rounded-xl p-6 shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1;
}

/* Form Elements */
.form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gold focus:border-transparent transition-all duration-200;
}

.form-input:focus {
    @apply outline-none;
}

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

/* Mobile Menu Animation */
#mobile-menu {
    transition: all 0.3s ease-in-out;
}

#mobile-menu.hidden {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

#mobile-menu:not(.hidden) {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

/* Hover Effects */
.service-card:hover {
    @apply shadow-2xl;
}

.video-card:hover {
    @apply shadow-xl;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.5rem;
    }
    
    .service-card {
        margin-bottom: 2rem;
    }
}

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

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

/* Enhanced Service Card Styling */
.service-card-hover {
    @apply hover:shadow-2xl hover:-translate-y-2;
}

/* Golden Border Effect for Featured Card */
.border-gold {
    border-color: var(--gold);
}

/* Enhanced Button Styling */
.btn-gradient {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
}

/* Enhanced Typography */
.font-playfair {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
}

/* Enhanced Form Styling */
.form-input-enhanced {
    @apply w-full px-4 py-3 border border-gold/20 rounded-lg focus:ring-2 focus:ring-gold focus:border-transparent transition-all duration-200 bg-cream text-deep-charcoal;
}

.form-input-enhanced:focus {
    @apply outline-none ring-2 ring-gold ring-opacity-50;
}

/* New gradient and hero styles */
.bg-gradient-gold {
    background: linear-gradient(135deg, #E6B73A 0%, #F4D03F 100%);
}

.hero-gradient {
    background: linear-gradient(135deg, #1a1a1a 0%, #2C3E50 100%);
}

/* Enhanced service card hover effects */
.service-card-hover {
    transition: all 0.3s ease;
}

.service-card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Loading States */
.btn-primary:disabled {
    @apply opacity-50 cursor-not-allowed;
}

/* Focus States for Accessibility */
.btn-primary:focus,
.btn-secondary:focus,
.form-input:focus {
    @apply outline-none ring-2 ring-gold ring-opacity-50;
}

/* Print Styles */
@media print {
    .btn-primary,
    .btn-secondary,
    #mobile-menu-button,
    #mobile-menu {
        display: none !important;
    }
    
    body {
        color: black !important;
        background: white !important;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    :root {
        --gold: #B8860B;
        --gold-light: #DAA520;
    }
    
    .btn-primary {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    html {
        scroll-behavior: auto;
    }
}

/* Dark Mode Support (Optional) */
@media (prefers-color-scheme: dark) {
    /* You can add dark mode styles here if desired */
}

/* Image Enhancements */
.hero-background {
    filter: brightness(0.7);
}

.profile-image {
    transition: transform 0.3s ease;
}

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

.family-image {
    transition: all 0.3s ease;
}

.family-image:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gold-light);
}

/* Selection Color */
::selection {
    background: var(--gold);
    color: white;
}

::-moz-selection {
    background: var(--gold);
    color: white;
}

/* Ensure proper text contrast on light backgrounds */
.bg-cream .text-deep-charcoal,
.bg-white .text-deep-charcoal {
    color: var(--deep-charcoal);
}

.bg-cream .text-warm-gray,
.bg-white .text-warm-gray {
    color: var(--warm-gray);
}

/* Testimonials section specific styling */
#testimonials .text-deep-charcoal {
    color: var(--deep-charcoal);
}

#testimonials .text-warm-gray {
    color: var(--warm-gray);
}