/*
Theme Name: Bridge Street Automotive
Author: Corby Wenzelbach
Description: Professional automotive repair shop theme for Bridge Street Automotive in Belleville
Version: 1.0.1
Text Domain: autoshop
*/

/* ============================================
   TABLE OF CONTENTS
   ============================================
   1. Reset & Base Styles
   2. Header & Logo
   3. Navigation Menu
   4. Main Content
   5. Typography
   6. Article Styles
   7. Lists
   8. Footer
   9. Services Grid
   10. Buttons
   11. Hero Section
   12. Content Sections
   13. Links
   14. Scroll to Top Button
   15. Responsive Design
   ============================================ */

/* ============================================
   IMPORTS
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');

/* ============================================
   1. RESET & BASE STYLES
   ============================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.7;
  color: #2c3e50;
  background: linear-gradient(to bottom, #f8f9fa 0%, #e9ecef 100%);
  font-weight: 400;
  min-height: 100vh;
}

/* ============================================
   2. HEADER & LOGO
   ============================================ */
header {
  background: #1e3a8a;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

/* Main Header */
.main-header {
  background: #1e3a8a;
  padding: 1.5rem 0;
  border-bottom: 3px solid #dc3545;
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.logo-text {
  font-size: 2.25rem;
  font-weight: 800;
  margin-bottom: 0.25rem;
  line-height: 1.1;
  font-family: 'Inter', sans-serif;
}

.logo-text a {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo-text {
  background: rgba(255, 255, 255, 0.12);
  padding: 0.65rem 1.3rem;
  border-radius: 8px;
  display: inline-block;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.1);
  text-align: center;
  border: 2px solid rgba(255, 215, 0, 0.4);
  border-bottom: 3px solid #dc3545;
  position: relative;
  backdrop-filter: blur(10px);
}

.logo-text::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ffd700, transparent);
  border-radius: 1px;
}

.logo-bridge {
  color: #fbbf24;
  font-size: 1.95rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  line-height: 1.1;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
  display: block;
  text-align: center;
}

.logo-automotive {
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
  display: block;
  margin-top: 0.15rem;
  text-align: center;
}

.tagline {
  color: #e2e8f0;
  font-size: 0.95rem;
  font-weight: 500;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Header CTA */
.header-cta {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.cta-text {
  text-align: right;
  line-height: 1.3;
}

.cta-text span {
  display: block;
  color: #cbd5e0;
  font-size: 0.875rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.cta-text strong {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.cta-button {
  background: #dc3545;
  color: white;
  padding: 0.875rem 1.5rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(220,53,69,0.4);
  border: 2px solid rgba(255, 255, 255, 0.2);
  letter-spacing: 0.3px;
}

.cta-button:hover {
  background: #b91c2a;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(220, 53, 69, 0.5);
  border-color: rgba(255, 255, 255, 0.4);
}

/* ============================================
   3. NAVIGATION MENU
   ============================================ */
body:not(.wp-admin) .main-nav {
  background: #2d3748;
  border-top: none;
  border-bottom: none;
  box-shadow: 0 6px 15px rgba(0,0,0,0.25);
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.main-nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  gap: 0;
}

.main-nav ul li {
  margin: 0;
  position: relative;
}

.main-nav ul li a {
  color: #e2e8f0;
  text-decoration: none;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  padding: 1.2rem 2rem;
  display: block;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.8px;
  transition: all 0.2s ease;
  position: relative;
}

/* Simple bottom border on hover */
.main-nav ul li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: #dc3545;
  transition: width 0.3s ease;
}

.main-nav ul li a:hover {
  color: #ffffff;
  background: rgba(30, 58, 138, 0.25);
}

.main-nav ul li a:hover::after {
  width: 100%;
}

/* Active/Current page styling */
.main-nav ul li a.current-menu-item,
.main-nav ul li.current-menu-item > a {
  color: #ffffff;
  background: rgba(30, 58, 138, 0.35);
  font-weight: 600;
}

.main-nav ul li a.current-menu-item::after,
.main-nav ul li.current-menu-item > a::after {
  width: 100%;
  background: #dc3545;
}

/* Mobile Navigation */
@media (max-width: 768px) {
  .header-container {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
  }
  
  .logo-text {
    padding: 0.4rem 0.8rem;
  }
  
  .logo-bridge {
    font-size: 1.4rem;
    letter-spacing: 1px;
  }
  
  .logo-automotive {
    font-size: 1rem;
    letter-spacing: 2px;
  }
  
  .header-cta {
    justify-content: center;
  }
  
  .cta-text {
    text-align: center;
  }
  
  /* Mobile menu styling */
  .nav-container {
    padding: 0.5rem 15px;
  }
  
  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  
  .main-nav ul li {
    width: 100%;
    border-bottom: 1px solid #e2e8f0;
  }
  
  .main-nav ul li:last-child {
    border-bottom: none;
  }
  
  .main-nav ul li a {
    padding: 1.1rem 1rem;
    text-align: center;
    width: 100%;
  }
  
  .main-nav ul li a::after {
    width: 0;
    height: 3px;
    transition: width 0.3s ease;
  }
  
  .main-nav ul li a:hover {
    color: #ffffff;
    background: rgba(30, 58, 138, 0.25);
  }
  
  .main-nav ul li a:hover::after {
    width: 100%;
  }
}

/* ============================================
   4. MAIN CONTENT
   ============================================ */
main {
  max-width: 1200px;
  margin: 2.5rem auto;
  padding: 3rem 3rem;
  background: white;
  border-radius: 10px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.12);
  border-top: 5px solid #1e3a8a;
  border-left: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

/* ============================================
   5. TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: #1a202c;
  margin-bottom: 1rem;
  line-height: 1.3;
}

h1 { 
  font-size: 2.5rem;
  color: #1e3a8a;
  position: relative;
}
h2 { 
  font-size: 2rem;
  color: #1e3a8a;
}
h3 { 
  font-size: 1.5rem;
  color: #2d3748;
}
h4 { 
  font-size: 1.25rem;
  color: #2d3748;
}

/* Article Styles */
article {
  padding: 1rem 0;
  border-bottom: 1px solid #e2e8f0;
}

article:last-child {
  border-bottom: none;
}

article h2 {
  color: #1e3a8a;
  font-size: 1.875rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid #dc3545;
}

article p {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  color: #4a5568;
}

/* List Styles */
ul, ol {
  margin: 1rem 0 1.5rem 0;
  padding-left: 1.5rem;
}

ul li, ol li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
  color: #4a5568;
}

ul {
  list-style-type: disc;
}

/* Ensure proper indentation for nested content */
.footer-section ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.footer-section ul li {
  padding-left: 0;
  margin-left: 0;
}

/* Footer */
footer {
  background: linear-gradient(135deg, #1e3a8a 0%, #2d3748 100%);
  color: #e2e8f0;
  padding: 2.5rem 0 1rem;
  margin-top: 3rem;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
  border-top: 3px solid #dc3545;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.footer-section h3 {
  color: #ffd700;
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
}

.footer-section p, .footer-section li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
  color: #cbd5e0;
}

.footer-section strong {
  color: #ffffff;
  font-weight: 600;
}

.footer-section address {
  font-style: normal;
  color: #cbd5e0;
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.footer-section a[href^="tel:"] {
  color: #ffd700;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-section a[href^="tel:"]:hover {
  color: #ffffff;
  text-decoration: underline;
}

.footer-section ul {
  list-style: none;
}

.footer-section ul li a {
  color: #a0aec0;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-section ul li a:hover {
  color: #ffd700;
}

.footer-bottom {
  border-top: 1px solid #4a5568;
  margin-top: 2rem;
  padding-top: 1rem;
  text-align: center;
  color: #a0aec0;
}

.footer-bottom a {
  color: #ffd700;
}

.footer-bottom a:hover {
  color: #ffffff;
}

/* Services Grid */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

.service-card {
  background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
  padding: 2rem;
  border-radius: 10px;
  border: 2px solid #e2e8f0;
  box-shadow: 0 3px 12px rgba(0,0,0,0.06);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #1e3a8a, #dc3545);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(30, 58, 138, 0.18);
  border-color: #1e3a8a;
  background: #ffffff;
}

.service-card:hover::before {
  transform: scaleX(1);
}

.service-card h3 {
  color: #1e3a8a;
  font-size: 1.25rem;
  margin-bottom: 1rem;
  font-weight: 600;
  transition: color 0.3s ease;
}

.service-card:hover h3 {
  color: #dc3545;
}

.service-card p {
  color: #4a5568;
  line-height: 1.6;
  margin-bottom: 0;
}

/* Buttons */
.btn {
  display: inline-block;
  background: #dc3545;
  color: white;
  padding: 0.875rem 2rem;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
  text-align: center;
}

.btn:hover {
  background: #b91c2a;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(220,53,69,0.35);
}

.btn-secondary {
  background: #1e3a8a;
  color: white;
  border: 2px solid transparent;
}

.btn-secondary:hover {
  background: #1e40af;
  box-shadow: 0 6px 18px rgba(30,58,138,0.35);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

/* Improved Spacing and Layout */

.hero-section {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
  padding: 4rem 2rem;
  border-radius: 8px;
  text-align: center;
  margin-bottom: 3rem;
  border: 3px solid #dc3545;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.hero-section h1 {
  color: #ffd700;
  font-size: 3rem;
  margin-bottom: 1rem;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.hero-section p {
  font-size: 1.25rem;
  color: #e2e8f0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Content Sections */
.content-section {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
  color: white;
  padding: 4rem 2rem;
  border-radius: 8px;
  margin-bottom: 3rem;
  box-shadow: 0 6px 25px rgba(30, 58, 138, 0.2);
  border: 2px solid rgba(220, 53, 69, 0.3);
}

.content-section h2 {
  color: #ffd700;
  font-size: 2.5rem;
  margin-bottom: 2rem;
  text-align: center;
}

/* Improved Text Formatting */
strong {
  font-weight: 600;
  color: #2d3748;
}

/* Better Link Styling */
a {
  color: #1e3a8a;
  text-decoration: underline;
  text-decoration-color: rgba(30, 58, 138, 0.3);
  text-underline-offset: 2px;
  transition: all 0.2s ease;
}

a:hover {
  color: #dc3545;
  text-decoration-color: #dc3545;
}

/* Scroll to Top Button */
.scroll-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 50px;
  height: 50px;
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: bold;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(220,53,69,0.3);
  transition: all 0.3s ease;
  z-index: 1000;
}

.scroll-to-top:hover {
  background: #c82333;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(220,53,69,0.4);
}

.scroll-to-top.show {
  display: flex;
  animation: slideIn 0.3s ease;
}

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

/* Responsive Design */
@media (max-width: 768px) {
  .header-container {
    flex-direction: column;
    text-align: center;
    padding: 0 15px;
  }
  
  .contact-info {
    text-align: center;
    margin-top: 1rem;
  }
  
  .contact-info p {
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
  }
  
  .logo-section h1 {
    font-size: 1.8rem;
  }
  
  .business-name {
    font-size: 0.9rem;
    padding: 0.4rem 0.8rem;
  }
  
  main {
    margin: 1rem auto;
    padding: 1.5rem;
  }
  
  article {
    padding: 1rem 0;
  }
  
  article h2 {
    font-size: 1.5rem;
  }
  
  .hero-section {
    padding: 2rem 1rem;
  }
  
  .hero-section h1 {
    font-size: 2rem;
  }
  
  .services-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .footer-container {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
  
  .footer-section {
    margin-bottom: 1rem;
  }
  
  .scroll-to-top {
    bottom: 4rem;
    right: 1rem;
    width: 45px;
    height: 45px;
    font-size: 1.1rem;
  }
}