/* Custom styles for Cazares Driving School */

  :root {
    --navy-900: #0a1628;
    --navy-800: #0d1f3c;
    --navy-700: #112a4a;
    --gold-400: #e6c040;
    --gold-500: #b8860b;
  }

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
  }

  body {
    overflow-x: hidden;
  }

  /* Scrollbar */
  ::-webkit-scrollbar {
    width: 8px;
  }
  ::-webkit-scrollbar-track {
    background: var(--navy-900);
  }
  ::-webkit-scrollbar-thumb {
    background: var(--gold-500);
    border-radius: 4px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--gold-400);
  }

  /* Selection */
  ::selection {
    background: rgba(184, 134, 11, 0.3);
    color: #f0d060;
  }

  /* Service card shimmer */
  .service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(230, 192, 64, 0.03), transparent);
    transition: left 0.6s ease;
    border-radius: inherit;
  }
  .service-card:hover::before {
    left: 100%;
  }

  /* Select styling */
  select option {
    background: #0d1f3c;
    color: white;
  }

  /* Mobile menu transition */
  #mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
  }
  #mobile-menu.open {
    max-height: 400px;
  }

  /* Gold accent line animation on scroll sections */
  @keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    .service-card,
    .group {
      transition: none;
    }
    .service-card:hover {
      transform: none;
    }
    .group:hover {
      transform: none;
    }
    a:hover {
      transform: none;
    }
  }

  /* Focus visible for accessibility */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 2px solid var(--gold-400);
    outline-offset: 2px;
  }