/*
 * File: tailwind.css  
 * Tailwind CSS stylesheet for Rockport Tire Center, LLC website
 * Author: Claude AI Assistant
 * Date: August 22, 2025
 * Company: Rockport Tire Center, LLC
 * Version: 2.0.0
 * 
 * Copyright (c) 2025 Rockport Tire Center, LLC. All rights reserved.
 */

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* Brand Colors matching the logo - Black, Red, White theme */
    --brand-primary: #D7191C;
    --brand-primary-hover: #bb0303;
    --brand-primary-dark: #a00000;
    --brand-black: #000000;
    --brand-dark-grey: #1a1a1a;
    --brand-white: #ffffff;
    --logo-grey: #9ca3af; /* light grey for tire brand logos */
  }

  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--brand-black);
    color: var(--brand-white);
  }
}

@layer components {
  /* Custom Navbar */
  .navbar {
    @apply fixed top-0 w-full z-50 transition-all duration-300;
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid var(--brand-primary);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .navbar.scrolled {
    @apply bg-black bg-opacity-95;
    backdrop-filter: blur(15px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  }

  /* Logo styling */
  .logo {
    @apply w-24 h-auto max-w-full transition-transform duration-300;
  }

  .logo:hover {
    @apply transform scale-105;
  }

  /* Logo SVGs with light grey color */
  .logo-grey {
    filter: brightness(0) saturate(100%) invert(60%) sepia(7%) saturate(1125%) hue-rotate(177deg) brightness(96%) contrast(89%);
  }

  /* Primary button */
  .btn-primary {
    @apply inline-flex items-center justify-center px-6 py-3 text-white font-semibold rounded-lg transition-all duration-300;
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-hover) 100%);
    box-shadow: 0 4px 15px rgba(215, 25, 28, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .btn-primary:hover {
    @apply transform -translate-y-1;
    background: linear-gradient(135deg, var(--brand-primary-hover) 0%, var(--brand-primary-dark) 100%);
    box-shadow: 0 8px 25px rgba(215, 25, 28, 0.4);
  }

  .btn-primary:active {
    @apply transform -translate-y-0;
  }

  /* Secondary button */
  .btn-secondary {
    @apply inline-flex items-center justify-center px-6 py-3 border-2 border-red-600 text-red-600 font-semibold rounded-lg transition-all duration-300 bg-transparent;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .btn-secondary:hover {
    @apply text-white transform -translate-y-1;
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-hover) 100%);
    border-color: var(--brand-primary);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  /* Navigation phone button */
  .nav-phone {
    @apply flex items-center ml-2 px-4 py-2 text-white text-sm font-semibold rounded-full transition-all duration-300;
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-hover) 100%);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(215, 25, 28, 0.3);
  }

  .nav-phone:hover {
    @apply text-white transform -translate-y-1;
    background: linear-gradient(135deg, var(--brand-primary-hover) 0%, var(--brand-primary-dark) 100%);
    box-shadow: 0 8px 25px rgba(215, 25, 28, 0.4);
  }

  /* Hero section */
  .hero-section {
    @apply relative w-full h-screen overflow-hidden bg-black;
  }

  .hero-content {
    @apply absolute inset-0 flex items-center justify-start z-10;
  }

  .hero-image {
    @apply absolute inset-0 w-full h-full object-cover;
  }

  .hero-caption {
    @apply text-white bottom-24 left-8 right-8 max-w-full p-8 rounded-lg border border-white border-opacity-10;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%);
    backdrop-filter: blur(10px);
  }

  /* Card styles */
  .card {
    @apply bg-white rounded-lg shadow-md transition-all duration-300 overflow-hidden border-none;
  }

  .card:hover {
    @apply shadow-lg transform -translate-y-2;
  }

  .card-img {
    @apply h-56 w-full object-cover transition-transform duration-300;
  }

  .card:hover .card-img {
    @apply transform scale-105;
  }

  /* Facebook card */
  .facebook-card {
    @apply transition-all duration-300 rounded-lg overflow-hidden shadow-md border-none bg-white;
  }

  .facebook-card:hover {
    @apply transform -translate-y-2 scale-105 shadow-xl;
  }

  /* Footer */
  .footer {
    @apply mt-auto py-12 text-white border-t-4;
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
    border-top-color: var(--brand-primary);
  }

  .footer a:hover {
    color: var(--brand-primary);
    @apply transition-colors duration-300;
  }

  /* Social icons */
  .social-icon {
    @apply inline-flex items-center justify-center w-10 h-10 mr-4 text-xl text-white rounded-full transition-all duration-300 bg-white bg-opacity-10;
  }

  .social-icon:hover {
    @apply text-white transform -translate-y-1 scale-110;
    background: var(--brand-primary);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  /* Logo scroll section */
  .logo-scroll {
    @apply relative w-full h-32 overflow-hidden py-8 border-t border-b;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-color: rgba(215, 25, 28, 0.1);
  }

  .logo-scroll-track {
    @apply flex;
    animation: scroll 45s linear infinite;
  }

  .logo-scroll-item {
    @apply flex-none w-40 h-24 px-4 flex items-center justify-center bg-white mx-2 rounded-lg shadow-sm transition-all duration-300 border-2;
    border-color: rgba(215, 25, 28, 0.1);
  }

  .logo-scroll-item:hover {
    @apply shadow-md transform -translate-y-2;
    border-color: var(--brand-primary);
  }

  .logo-scroll-item img {
    @apply max-w-full max-h-full object-contain transition-transform duration-300;
    filter: grayscale(30%);
  }

  .logo-scroll-item img:hover {
    @apply transform scale-110;
    filter: grayscale(0%);
  }

  /* Service highlights */
  .service-highlight {
    @apply text-center p-8 bg-white rounded-lg shadow-sm transition-all duration-300 border-2 relative overflow-hidden;
    border-color: rgba(215, 25, 28, 0.1);
  }

  .service-highlight::before {
    @apply absolute top-0 left-0 right-0 h-1 transform scale-x-0 transition-transform duration-300;
    content: '';
    background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-primary-hover) 100%);
  }

  .service-highlight:hover::before {
    @apply transform scale-x-100;
  }

  .service-highlight:hover {
    @apply transform -translate-y-3 shadow-lg;
    border-color: var(--brand-primary);
  }

  /* Acima section */
  .acima-section {
    @apply relative overflow-hidden;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  }

  .acima-section::before {
    @apply absolute -top-1/2 -right-1/5 w-3/5 h-full;
    content: '';
    background: radial-gradient(circle, rgba(215, 25, 28, 0.05) 0%, transparent 70%);
    transform: rotate(-15deg);
    height: 200%;
  }

  /* Navigation links */
  .nav-link {
    @apply text-white font-medium transition-all duration-300 relative px-4 py-2;
  }

  .nav-link:hover,
  .nav-link:focus {
    @apply transform -translate-y-1;
    color: var(--brand-primary);
  }

  .nav-link[aria-current="page"] {
    @apply font-semibold;
    color: var(--brand-primary);
  }
}

@layer utilities {
  /* Animation for logo scroll */
  @keyframes scroll-logos {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-168px * 7));
    }
  }

  .animate-scroll-logos {
    animation: scroll-logos 45s linear infinite;
  }

  /* Gradient fade edges for logo scroll */
  .logo-scroll::before,
  .logo-scroll::after {
    @apply absolute top-0 h-full w-24 z-10 pointer-events-none;
    content: '';
  }

  .logo-scroll::before {
    @apply left-0;
    background: linear-gradient(to right, #f8f9fa 0%, rgba(248, 249, 250, 0.8) 50%, transparent 100%);
  }

  .logo-scroll::after {
    @apply right-0;
    background: linear-gradient(to left, #f8f9fa 0%, rgba(248, 249, 250, 0.8) 50%, transparent 100%);
  }

  /* Pause animation on hover */
  .logo-scroll:hover .logo-scroll-track {
    animation-play-state: paused;
  }

  /* Reduced motion preferences */
  @media (prefers-reduced-motion: reduce) {
    .logo-scroll-track {
      animation: none;
    }
    
    * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

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

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

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

::-webkit-scrollbar-thumb:hover {
  background: var(--brand-primary-hover);
}