/* Five Five Auto Repair — Custom Styles */

/* Custom property definitions for consistency */
:root {
    --burgundy: #7f1d3a;
    --burgundy-dark: #561226;
    --blush: #ffece8;
    --cream: #faf7f5;
    --charcoal: #2c2c2c;
}

/* Base reset and typography enhancements */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Smooth focus states for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--burgundy);
    outline-offset: 2px;
}

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

/* Print styles */
@media print {
    nav, .hero-gradient, #testimonials, .map-container iframe {
        display: none;
    }
    
    body {
        color: black;
        background: white;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .fade-up {
        opacity: 1;
        transform: none;
    }
    
    .animate-bounce {
        animation: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .service-card {
        border-width: 2px;
        border-color: var(--charcoal);
    }
    
    .nav-link::after {
        background: var(--charcoal);
    }
}

/* Tablet and above adjustments */
@media (min-width: 768px) {
    .mobile-menu {
        display: none;
    }
}

/* Large desktop adjustments */
@media (min-width: 1200px) {
    .hero-gradient h1 {
        letter-spacing: -0.02em;
    }
}

/* Touch device optimizations */
@media (hover: none) {
    .service-card:hover {
        transform: none;
        box-shadow: none;
    }
    
    .service-card::before {
        display: none;
    }
    
    .img-zoom:hover img {
        transform: none;
    }
    
    .btn-primary:hover::before {
        display: none;
    }
}