/* ============================================
   MARTIN'S BICYCLE - MODERN CSS ENHANCEMENT
   Keep your blue theme, modernize the design
   ============================================ */

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

/* ============================================
   NAVIGATION IMPROVEMENTS
   ============================================ */

/* Modern navigation hover effects */
nav a,
.navigation a,
#navigation a {
  transition: all 0.3s ease;
  position: relative;
}

nav a:hover,
.navigation a:hover,
#navigation a:hover {
  transform: translateY(-1px);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Add subtle underline animation on hover */
nav a::after,
.navigation a::after,
#navigation a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

nav a:hover::after,
.navigation a:hover::after,
#navigation a:hover::after {
  width: 80%;
}

/* ============================================
   STORE HOURS BAR - CLEANER DESIGN
   ============================================ */

/* Make store hours more subtle and modern */
.store-hours,
[class*="hours"],
div[style*="12:00pm"] {
  font-size: 0.9em !important;
  letter-spacing: 0.3px;
  opacity: 0.95;
  padding: 8px 20px !important;
}

/* ============================================
   BUTTONS - MODERN STYLING
   ============================================ */

/* Modern button effects */
button,
.button,
input[type="submit"],
input[type="button"],
a.btn,
.add-to-cart,
[class*="btn"] {
  transition: all 0.3s ease;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

button:hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
a.btn:hover,
.add-to-cart:hover,
[class*="btn"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(30, 58, 138, 0.3);
}

button:active,
.button:active,
input[type="submit"]:active,
input[type="button"]:active {
  transform: translateY(0);
}

/* ============================================
   SEARCH BAR - MODERN STYLING
   ============================================ */

/* Better search input styling */
input[type="search"],
input[type="text"].search,
.search-input {
  transition: all 0.3s ease;
  border-radius: 4px;
}

input[type="search"]:focus,
input[type="text"].search:focus,
.search-input:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  transform: scale(1.02);
}

/* ============================================
   LINKS - BETTER HOVER STATES
   ============================================ */

/* Smooth link transitions */
a {
  transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover {
  opacity: 0.8;
}

/* Product links get subtle lift */
.product-link,
.product-item a,
[class*="product"] a {
  transition: all 0.3s ease;
}

.product-link:hover,
.product-item a:hover,
[class*="product"] a:hover {
  transform: translateY(-2px);
}

/* ============================================
   CARDS & PRODUCT ITEMS - MODERN SHADOWS
   ============================================ */

/* Better card styling */
.card,
.product-card,
.product-item,
[class*="item-"] {
  transition: all 0.3s ease;
  border-radius: 6px;
}

.card:hover,
.product-card:hover,
.product-item:hover,
[class*="item-"]:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}

/* ============================================
   IMAGES - SMOOTH LOADING
   ============================================ */

/* Smooth image hover effects */
img {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.product-image img,
.product-item img {
  transition: transform 0.4s ease;
}

.product-image:hover img,
.product-item:hover img {
  transform: scale(1.05);
}

/* ============================================
   FORMS - MODERN INPUT STYLING
   ============================================ */

/* Better form input styling */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
  transition: all 0.3s ease;
  border-radius: 4px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  border-color: #3b82f6;
  outline: none;
}

/* ============================================
   HEADER IMPROVEMENTS
   ============================================ */

/* Reduce excessive white space in header */
header,
.header,
#header {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
}

/* Logo area tighter spacing */
.logo,
#logo,
[class*="logo"] {
  margin: 10px 0 !important;
}

/* ============================================
   UTILITY IMPROVEMENTS
   ============================================ */

/* Better focus states for accessibility */
*:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Smooth animations for dropdowns */
.dropdown-menu,
[class*="dropdown"],
[class*="submenu"] {
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   MOBILE IMPROVEMENTS
   ============================================ */

@media (max-width: 768px) {
  /* Better mobile navigation */
  nav,
  .navigation {
    padding: 10px 5px !important;
  }
  
  /* Adjust button sizes for mobile */
  button,
  .button,
  [class*="btn"] {
    padding: 10px 16px !important;
    font-size: 0.95em !important;
  }
  
  /* Mobile store hours */
  .store-hours,
  [class*="hours"] {
    font-size: 0.75em !important;
    padding: 6px 10px !important;
  }
}

/* ============================================
   LOADING STATES - SMOOTH TRANSITIONS
   ============================================ */

/* Fade in content smoothly */
.page-content,
main,
#main-content {
  animation: fadeInContent 0.4s ease;
}

@keyframes fadeInContent {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   BANNER ENHANCEMENTS
   ============================================ */

/* Your shipping banner gets a nice hover effect */
a[href*="store-policies"] {
  transition: all 0.3s ease;
}

a[href*="store-policies"]:hover {
  filter: brightness(1.1);
  transform: scale(1.01);
}

/* ============================================
   END OF CUSTOM CSS
   ============================================ */