/* Custom CSS for Justin Time Automotive Repair */

:root {
  --midnight-900: #1e3a5f;
  --midnight-800: #2c4a6e;
  --midnight-700: #3d5a7e;
  --midnight-600: #4e6a8e;
  --midnight-400: #7e9aae;
  --midnight-300: #aebaca;
  --midnight-200: #d4dce6;
  --midnight-100: #eef1f5;
  --mint-600: #5a9e7e;
  --mint-500: #6aad8e;
  --mint-400: #8fc4a8;
  --mint-300: #b0d4be;
  --mint-200: #d0e8da;
  --mint-100: #e8f4ee;
  --mint-50: #f4faf7;
}

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

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

::-webkit-scrollbar-track {
  background: var(--midnight-100);
}

::-webkit-scrollbar-thumb {
  background: var(--midnight-400);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--midnight-600);
}

/* Selection color */
::selection {
  background: var(--mint-300);
  color: var(--midnight-900);
}

/* Body font */
body {
  font-family: 'Montserrat', sans-serif;
}

/* Serif font for headings */
.font-serif {
  font-family: 'Lora', serif;
}

/* Navbar scroll effect */
.navbar-scrolled {
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 2px 20px rgba(30, 58, 95, 0.1);
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

/* Fade in animation */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Slide in from left */
.slide-in-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slide in from right */
.slide-in-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Mobile menu animation */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

#mobile-menu.open {
  max-height: 400px;
}

/* Image hover zoom */
img {
  transition: transform 0.5s ease;
}

/* Button focus states */
button:focus,
input:focus,
textarea:focus,
a:focus {
  outline: none;
}

/* Print styles */
@media print {
  .fixed {
    position: relative !important;
  }
  
  #navbar {
    background: white !important;
  }
  
  .animate-bounce {
    display: none;
  }
}