/* ============================================
   SERVICES PAGE SPACING FIXES
   Consistent spacing throughout the page
   Zoom-friendly and responsive
   ============================================ */

/* ============================================
   1. NAVBAR-AWARE SPACING VARIABLES
   ============================================ */

/* Navbar height variables for proper spacing calculation */
/* Top navbar: ~38px (2.375rem) + Main navbar: ~70px (4.375rem) = ~108px (6.75rem) */
:root {
  --services-top-navbar-height: 2.375rem;  /* 38px */
  --services-main-navbar-height: 4.375rem; /* 70px */
  --services-total-navbar-height: 6.75rem; /* 108px - accounts for both navbars */
}

/* ============================================
   2. HERO SECTION SPACING
   ============================================ */

/* Services Hero Header - Proper top spacing to account for navbar */
/* Use rem units for zoom-friendly scaling */
/* Formula: navbar height (6.75rem) + comfortable spacing (2-5rem) */
.services-hero-header {
  padding-top: clamp(8.75rem, calc(6.75rem + 5vw), 12rem) !important; /* 6.75rem navbar + 2-5rem spacing */
  padding-bottom: clamp(3rem, 6vw, 5rem) !important;
  margin-top: 0 !important;
  scroll-margin-top: 6.75rem; /* For anchor links - accounts for navbar */
  min-height: auto !important; /* Let content determine height */
}

/* Services Hero Content - Proper internal spacing */
.services-hero-content {
  padding: clamp(1.25rem, 4vw, 2.5rem) !important;
  padding-top: clamp(2.5rem, 6vw, 3.75rem) !important;
  margin: 0 !important;
}

/* Services Badge - Consistent spacing */
.services-badge {
  margin-bottom: clamp(1.5rem, 2vw, 1.75rem) !important;
  margin-top: 0 !important;
  padding: clamp(0.625rem, 1vw, 1.25rem) clamp(1.25rem, 2vw, 1.5rem) !important;
}

/* Services Main Title - Proper spacing */
.services-main-title {
  margin-top: 0 !important;
  margin-bottom: clamp(1.25rem, 2vw, 1.5rem) !important;
  padding: 0 !important;
}

/* Services Subtitle - Proper spacing */
.services-subtitle {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

/* ============================================
   3. SERVICES GRID SECTION SPACING
   ============================================ */

/* Pricing Plans Section - Start right after navbar */
/* Use rem units for zoom-friendly scaling */
.pricing-plans {
  padding-top: clamp(calc(6.75rem + 2rem), calc(6.75rem + 4vw), calc(6.75rem + 3rem)) !important; /* Navbar + spacing */
  padding-bottom: clamp(3.75rem, 8vw, 6.25rem) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  scroll-margin-top: 6.75rem; /* For anchor links */
}

/* Pricing Grid - Consistent gap between cards */
.pricing-grid {
  gap: clamp(1.5rem, 3vw, 2rem) !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Pricing Card - Internal spacing */
.pricing-card {
  padding: clamp(1.75rem, 3vw, 2.25rem) !important;
  margin: 0 !important;
}

/* Service Card Image Wrapper - Proper spacing */
.service-card-image-wrapper,
.service-card-icon-wrapper {
  margin-bottom: clamp(1.25rem, 2vw, 1.5rem) !important;
  margin-top: 0 !important;
}

/* Pricing Card Header - Proper spacing */
.pricing-card-header {
  margin-top: 0 !important;
  margin-bottom: clamp(1.125rem, 2vw, 1.25rem) !important;
  padding: 0 !important;
}

/* Pricing Card Icon - Proper spacing */
.pricing-card-icon {
  margin-bottom: clamp(0.875rem, 1.5vw, 1rem) !important;
  margin-top: 0 !important;
}

/* Pricing Card Title - Proper spacing */
.pricing-card-title {
  margin-top: 0 !important;
  margin-bottom: clamp(0.625rem, 1vw, 0.75rem) !important;
  padding: 0 !important;
}

/* Pricing Card Description - Proper spacing */
.pricing-card-description {
  margin-top: 0 !important;
  margin-bottom: clamp(1.25rem, 2vw, 1.5rem) !important;
  padding: 0 !important;
}

/* Pricing Features - Proper spacing */
.pricing-features {
  margin-top: 0 !important;
  margin-bottom: clamp(1.5rem, 2vw, 1.75rem) !important;
  padding: 0 !important;
}

.pricing-features li {
  padding: clamp(0.625rem, 1vw, 0.75rem) 0 !important;
  margin: 0 !important;
  gap: clamp(0.625rem, 1vw, 0.75rem) !important;
}

/* Pricing Card Button - Proper spacing */
.pricing-card-btn {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: clamp(0.875rem, 1.5vw, 1rem) clamp(1.25rem, 2vw, 1.5rem) !important;
}

/* ============================================
   4. PAGINATION SPACING
   ============================================ */

/* Pricing Pagination - Proper spacing */
.pricing-pagination {
  margin-top: clamp(2.5rem, 5vw, 3.75rem) !important;
  margin-bottom: 0 !important;
  padding: clamp(1rem, 2vw, 1.25rem) !important;
  gap: clamp(0.875rem, 1.5vw, 1rem) !important;
}

/* Pagination Button - Proper spacing */
.pagination-btn {
  padding: clamp(0.625rem, 1vw, 0.75rem) clamp(1.25rem, 2vw, 1.5rem) !important;
  gap: clamp(0.5rem, 1vw, 0.625rem) !important;
}

/* Pagination Info - Proper spacing */
.pagination-info {
  padding: clamp(0.625rem, 1vw, 0.75rem) clamp(1.125rem, 1.5vw, 1.25rem) !important;
  margin: 0 !important;
}

/* ============================================
   5. CONTAINER SPACING
   ============================================ */

/* Container - Consistent horizontal padding */
.pricing-plans .container,
.services-hero-header .container {
  padding-left: clamp(1rem, 4vw, 2rem) !important;
  padding-right: clamp(1rem, 4vw, 2rem) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ============================================
   6. LOADING STATES SPACING
   ============================================ */

/* Loading Wrapper - Proper spacing */
.loading-wrapper {
  padding: clamp(3.75rem, 6vw, 5rem) clamp(1rem, 2vw, 1.25rem) !important;
  margin: 0 !important;
}

/* Loading Container - Proper spacing */
.loading-container {
  gap: clamp(1.25rem, 2vw, 1.5rem) !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ============================================
   7. MOBILE SPACING FIXES
   ============================================ */

@media (max-width: 768px) {
  /* Mobile: Top navbar is hidden, only main navbar (~64px = 4rem) */
  :root {
    --services-total-navbar-height: 4rem; /* Only main navbar on mobile */
  }
  
  /* Hero Section - Reduced spacing on mobile */
  .services-hero-header {
    padding-top: clamp(10.25rem, calc(4rem + 8vw), 12.75rem) !important; /* 4rem navbar + 6.25-8.75rem spacing */
    padding-bottom: clamp(2.5rem, 6vw, 3.75rem) !important;
    min-height: clamp(15rem, 20vw, 23.75rem) !important; /* 240px-380px */
    scroll-margin-top: 4rem; /* Only main navbar on mobile */
  }
  
  /* Hero Content - Reduced padding on mobile */
  .services-hero-content {
    padding: clamp(1rem, 3vw, 1.5rem) !important;
    padding-top: clamp(1.875rem, 5vw, 3.125rem) !important;
  }
  
  /* Services Grid - Start right after navbar on mobile */
  .pricing-plans {
    padding-top: clamp(calc(4rem + 1.5rem), calc(4rem + 3vw), calc(4rem + 2.5rem)) !important; /* Navbar + spacing */
    padding-bottom: clamp(3rem, 6vw, 4rem) !important;
    scroll-margin-top: 4rem; /* Only main navbar on mobile */
  }
  
  /* Pricing Grid - Reduced gap on mobile */
  .pricing-grid {
    gap: clamp(1.25rem, 2vw, 1.5rem) !important;
  }
  
  /* Pricing Card - Reduced padding on mobile */
  .pricing-card {
    padding: clamp(1.5rem, 2.5vw, 1.75rem) !important;
  }
  
  /* Container - Reduced padding on mobile */
  .pricing-plans .container,
  .services-hero-header .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

@media (max-width: 480px) {
  /* Small mobile: Minimal spacing */
  :root {
    --services-total-navbar-height: 3.5rem; /* Slightly smaller navbar on small screens */
  }
  
  /* Hero Section - Minimal spacing on small mobile */
  .services-hero-header {
    padding-top: clamp(8.5rem, calc(3.5rem + 7vw), 11rem) !important; /* 3.5rem navbar + 5-7.5rem spacing */
    padding-bottom: clamp(1.875rem, 5vw, 3.125rem) !important;
    min-height: clamp(12.5rem, 18vw, 20rem) !important; /* 200px-320px */
    scroll-margin-top: 3.5rem; /* Smaller navbar on small screens */
  }
  
  /* Hero Content - Minimal padding on small mobile */
  .services-hero-content {
    padding: clamp(0.75rem, 2vw, 1rem) !important;
    padding-top: clamp(1.5rem, 4vw, 2.5rem) !important;
  }
  
  /* Services Grid - Start right after navbar on small mobile */
  .pricing-plans {
    padding-top: clamp(calc(3.5rem + 1rem), calc(3.5rem + 2vw), calc(3.5rem + 2rem)) !important; /* Navbar + spacing */
    padding-bottom: clamp(2.5rem, 5vw, 3.125rem) !important;
    scroll-margin-top: 3.5rem; /* Smaller navbar on small screens */
  }
  
  /* Pricing Grid - Minimal gap on small mobile */
  .pricing-grid {
    gap: clamp(1rem, 2vw, 1.25rem) !important;
  }
  
  /* Pricing Card - Minimal padding on small mobile */
  .pricing-card {
    padding: clamp(1.25rem, 2vw, 1.5rem) !important;
  }
  
  /* Container - Minimal padding on small mobile */
  .pricing-plans .container,
  .services-hero-header .container {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
  }
}

/* ============================================
   8. ZOOM-FRIENDLY SPACING & RESPONSIVE BEHAVIOR
   ============================================ */

/* Ensure all spacing scales properly with browser zoom */
html {
  font-size: 16px; /* Base font size - scales with zoom */
}

/* ============================================
   9. ZOOM-LEVEL SPECIFIC ADJUSTMENTS
   ============================================ */

/* Small zoom (50-75%) - Slightly reduce spacing to prevent overflow */
@media screen and (min-width: 1200px) {
  .pricing-grid {
    gap: clamp(1.25rem, 2.5vw, 1.75rem) !important;
  }
  
  .services-hero-header {
    padding-top: clamp(13rem, calc(6.75rem + 8vw), 16.75rem) !important; /* 6.75rem navbar + 6.25-10rem spacing */
  }
}

/* Large zoom (125-150%) - Maintain proportional spacing */
@media screen and (min-width: 800px) and (max-width: 1200px) {
  .pricing-grid {
    gap: clamp(1.5rem, 3vw, 1.875rem) !important;
  }
}

/* Extra large zoom (175-200%+) - Ensure content doesn't get too cramped */
@media screen and (max-width: 800px) {
  .pricing-grid {
    gap: clamp(1.25rem, 2.5vw, 1.5rem) !important;
  }
}

/* ============================================
   10. VIEWPORT HEIGHT ADJUSTMENTS
   ============================================ */

/* Tall viewports - Add more spacing */
@media (min-height: 900px) {
  .pricing-plans {
    padding-top: clamp(4.5rem, 9vw, 7rem) !important;
    padding-bottom: clamp(4.5rem, 9vw, 7rem) !important;
  }
}

/* Short viewports - Reduce spacing to fit content */
@media (max-height: 700px) {
  .pricing-plans {
    padding-top: clamp(2.5rem, 5vw, 3.5rem) !important;
    padding-bottom: clamp(2.5rem, 5vw, 3.5rem) !important;
  }
  
  .services-hero-header {
    padding-top: clamp(11.75rem, calc(6.75rem + 7vw), 14.75rem) !important; /* 6.75rem navbar + 5-8rem spacing */
    padding-bottom: clamp(2.5rem, 5vw, 3.5rem) !important;
  }
}

/* ============================================
   11. REMOVE UNNECESSARY MARGINS/PADDING
   ============================================ */

/* Remove any default margins from sections */
section {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Ensure no double spacing */
.pricing-plans .container,
.services-hero-header .container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Remove spacing from loading states */
.loading-wrapper,
.loading-container {
  margin: 0 !important;
}

/* ============================================
   12. HIGH DPI / RETINA DISPLAYS
   ============================================ */

@media (min-resolution: 1.5dppx) {
  /* High DPI displays - maintain spacing ratios */
  .services-hero-header,
  .pricing-plans {
    /* Spacing already uses rem, will scale automatically */
  }
  
  /* Ensure crisp rendering at high DPI */
  .pricing-card,
  .services-hero-content {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* ============================================
   13. PRINT & ACCESSIBILITY
   ============================================ */

/* Print styles - remove excessive spacing */
@media print {
  .services-hero-header {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  .pricing-plans {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  .pricing-grid {
    gap: 1.5rem !important;
  }
}

/* Reduced motion - maintain spacing but remove animations */
@media (prefers-reduced-motion: reduce) {
  .services-hero-header,
  .pricing-card,
  .pricing-grid {
    transition: none !important;
    animation: none !important;
  }
}