/**
 * layout-system.css - Unified CSS Layout Framework
 * 
 * This file provides a centralized CSS layout system that works with the 
 * layout-config.js configuration. It defines CSS custom properties (variables)
 * that are derived from the configuration and implements spacing and layout
 * rules consistently across the site.
 *
 * The framework prioritizes CSS over JavaScript for layout to improve performance
 * and reduce layout shifts. It also standardizes breakpoints and responsive behavior.
 */

:root {
  /* Breakpoints - must match values in layout-config.js */
  --breakpoint-mobile: 576px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 992px;
  --breakpoint-large: 1200px;
  
  /* Header dimensions */
  --header-height-desktop: 80px; /* Reduced to match actual header height */
  --header-height-mobile: 65px;
  
  /* Layout spacing - desktop */
  --content-spacing-desktop: 80px; /* Reduced spacing to match homepage */
  --section-margin-desktop: 4rem;
  --section-padding-desktop: 32px;
  
  /* Layout spacing - mobile */
  --content-spacing-mobile: 50px;
  --content-spacing-mobile-reduced: 50px;
  --section-margin-mobile: 0.5rem;
  --section-padding-mobile: 0;
  
  /* Element spacing */
  --button-gap: 1rem;
  --card-gap: 2rem;
  --card-padding: 1.5rem;
  --form-field-gap: 1.5rem;
  --form-label-gap: 0.5rem;
}

/* Base layout container */
.layout-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}

/* Header styling */
.site-header {
  background-color: var(--color-primary, #0a3d62);
  color: white;
  padding: 0;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

/* Header spacing to prevent content overlap */
.header-spacing {
  height: var(--header-height-desktop);
  width: 100%;
  display: block;
}

/* Mobile header spacing */
.mobile-header-spacing {
  height: var(--header-height-mobile);
  width: 100%;
  display: none;
}

/**
 * First Content Section Spacing
 * These classes control the spacing of the first content section after the header
 */

/* Base styling for all page sections */
section {
  position: relative;
  width: 100%;
}

/* Hero section */
.hero-section {
  margin-top: var(--content-spacing-desktop); /* Use header spacing to prevent overlap */
  padding-top: var(--section-padding-desktop);
  margin-bottom: var(--section-margin-desktop);
}

/* Page header and hero section - first content after dynamic header (higher specificity) */
.page-header,
.hero-section {
  margin-top: var(--content-spacing-desktop) !important; /* Use header spacing to prevent overlap */
  padding-top: var(--section-padding-desktop);
  margin-bottom: var(--section-margin-desktop);
}

/* Content sections (about, faq, etc.) - very minimal spacing after page-header */
.about-section,
.faq-section,
.cars-section:not(.page-header),
.cars-listing-section,
.contact-section,
.blog-section,
.apply-section {
  margin-top: 0.25rem; /* Very minimal spacing between page-header and main content */
  padding-top: var(--section-padding-desktop);
  margin-bottom: var(--section-margin-desktop);
}

/* Subsequent sections */
.featured-cars-section,
.why-choose-section,
.testimonials-section {
  margin-top: var(--section-margin-desktop);
  padding-top: 0;
  margin-bottom: var(--section-margin-desktop);
}

/* CTA Section */
.cta-section {
  margin-top: var(--section-margin-desktop);
  padding-top: var(--section-margin-desktop);
  margin-bottom: 0;
}

/**
 * Responsive Styles
 */

/* Tablet and smaller devices */
@media (max-width: 992px) {
  .header-spacing {
    height: calc(var(--header-height-desktop) * 0.8);
  }
  
  .hero-section,
  .page-header {
    padding-top: calc(var(--section-padding-desktop) * 0.8);
  }
  
  .about-section,
  .faq-section,
  .cars-section,
  .cars-listing-section,
  .contact-section,
  .blog-section,
  .apply-section {
    padding-top: calc(var(--section-padding-desktop) * 0.8);
  }
}

/* Mobile devices */
@media (max-width: 768px) {
  /* Switch header spacing */
  .header-spacing {
    display: none;
  }
  
  .mobile-header-spacing {
    display: block;
  }
  
  /* Force mobile header spacing to be minimal - prevent content overlap */
  .mobile-header-spacing {
    height: 0;
  }
  
  /* Ensure page titles are visible on mobile */
  h1, h2, h3,
  .page-title, .page-subtitle,
  section h1, section h2, section .section-title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Add default top margin to page titles */
  section h1:first-child,
  section h2:first-child,
  section .page-title:first-child {
    margin-top: 50px !important;
  }
  
  /* Force all first content sections to have proper spacing */
  section:first-of-type:not(.site-header) {
    margin-top: var(--content-spacing-mobile) !important;
    padding-top: 15px !important;
  }
  
  /* Hero section mobile styling */
  .hero-section {
    margin-top: var(--content-spacing-mobile);
    padding-top: 0;
    margin-bottom: var(--section-margin-mobile);
  }
  
  /* Reduced spacing for specific pages */
  .about-section.reduced-spacing,
  .faq-section.reduced-spacing {
    margin-top: var(--content-spacing-mobile-reduced);
    padding-top: 0;
  }
  
  /* Standard content section spacing */
  .about-section:not(.reduced-spacing),
  .faq-section:not(.reduced-spacing),
  .cars-section,
  .cars-listing-section,
  .contact-section,
  .blog-section,
  .apply-section {
    margin-top: var(--content-spacing-mobile);
    padding-top: 0;
    margin-bottom: var(--section-margin-mobile);
  }
  
  /* Subsequent sections with minimal spacing */
  .featured-cars-section,
  .why-choose-section,
  .testimonials-section {
    margin-top: var(--section-margin-mobile);
    padding-top: var(--section-padding-mobile);
    margin-bottom: var(--section-margin-mobile);
  }
  
  /* CTA section compact spacing */
  .cta-section {
    margin-top: var(--section-margin-mobile);
    padding-top: 1rem;
    margin-bottom: 0;
  }
  
  /* Stack buttons for better mobile layout */
  .hero-buttons {
    flex-direction: column;
    gap: var(--button-gap);
    margin-top: 20px;
    padding: 0 15px;
  }
  
  .hero-buttons .btn {
    width: 100%;
    margin: 0 !important;
    display: block !important;
  }
  
  /* Add space between image and buttons - same as button gap */
  .hero-image {
    margin-bottom: var(--button-gap);
    margin-top: var(--button-gap);
  }
  
  /* Ensure the image column has proper spacing on mobile */
  .col-lg-6:has(.hero-image),
  .col-lg-6 .hero-image {
    margin-top: var(--button-gap) !important;
  }
  
  /* Add spacing between CTA sections and footer on mobile */
  .faq-cta,
  .text-center.mt-5,
  section:last-of-type {
    margin-bottom: var(--button-gap) !important;
    padding-bottom: var(--button-gap) !important;
  }
  
  /* Reduce spacing between page header and content on mobile */
  .page-header {
    margin-bottom: 0.5rem !important;
    padding-bottom: 0 !important;
  }
  /* Mobile-specific title display (will be created dynamically by JS if needed) */
  .mobile-title-container {
    display: block !important;
    text-align: center;
    margin: 50px 0 20px 0;
    padding: 0 15px;
  }
  
  .mobile-title-container h1,
  .mobile-title-container h2 {
    font-size: 24px;
    margin-bottom: 5px;
    color: #0a3d62;
  }
  
  .mobile-title-container p {
    font-size: 16px;
    margin-bottom: 15px;
    color: #333;
  }
}

/**
 * Utility classes for spacing consistency
 */

/* Margins */
.mt-layout-xs { margin-top: 0.5rem !important; }
.mt-layout-sm { margin-top: 1rem !important; }
.mt-layout-md { margin-top: 2rem !important; }
.mt-layout-lg { margin-top: 3rem !important; }
.mt-layout-xl { margin-top: 4rem !important; }

.mb-layout-xs { margin-bottom: 0.5rem !important; }
.mb-layout-sm { margin-bottom: 1rem !important; }
.mb-layout-md { margin-bottom: 2rem !important; }
.mb-layout-lg { margin-bottom: 3rem !important; }
.mb-layout-xl { margin-bottom: 4rem !important; }

/* Paddings */
.pt-layout-xs { padding-top: 0.5rem !important; }
.pt-layout-sm { padding-top: 1rem !important; }
.pt-layout-md { padding-top: 2rem !important; }
.pt-layout-lg { padding-top: 3rem !important; }
.pt-layout-xl { padding-top: 4rem !important; }

.pb-layout-xs { padding-bottom: 0.5rem !important; }
.pb-layout-sm { padding-bottom: 1rem !important; }
.pb-layout-md { padding-bottom: 2rem !important; }
.pb-layout-lg { padding-bottom: 3rem !important; }
.pb-layout-xl { padding-bottom: 4rem !important; }

/* Responsive aware margin utilities */
@media (max-width: 768px) {
  .mt-layout-responsive { margin-top: var(--section-margin-mobile) !important; }
  .mb-layout-responsive { margin-bottom: var(--section-margin-mobile) !important; }
  .pt-layout-responsive { padding-top: var(--section-padding-mobile) !important; }
  .pb-layout-responsive { padding-bottom: var(--section-padding-mobile) !important; }
}

@media (min-width: 769px) {
  .mt-layout-responsive { margin-top: var(--section-margin-desktop) !important; }
  .mb-layout-responsive { margin-bottom: var(--section-margin-desktop) !important; }
  .pt-layout-responsive { padding-top: var(--section-padding-desktop) !important; }
  .pb-layout-responsive { padding-bottom: var(--section-padding-desktop) !important; }
}

/**
 * Page-specific overrides
 * These rules handle special cases for specific pages
 */

/* Homepage */
body.homepage .hero-section {
  margin-top: 0;
}

/* FAQ page - special case for filter area */
.faq-filter {
  margin-bottom: 1rem;
}

/* Cars listing */
.cars-listing-section .row {
  margin-top: 2rem;
}

/* Contact form spacing */
.contact-form .form-group {
  margin-bottom: var(--form-field-gap);
}

.contact-form .form-label {
  margin-bottom: var(--form-label-gap);
}

/* Force high specificity to override dynamic-header.js inline styles */
body section.reduced-spacing[style*="margin-top"],
body section.faq-section.reduced-spacing[style*="margin-top"],
body section.about-section.reduced-spacing[style*="margin-top"] {
  margin-top: var(--content-spacing-mobile-reduced) !important;
  padding-top: 0 !important;
}