/* ========================================
   SPACING STANDARDS - ROBOBOTICA WEBSITE
   ========================================
   
   This file standardizes spacing across all pages.
   Load AFTER style.css to override existing rules.
   
   Desktop: 1920px
   Mobile: 440px (max-width: 480px) - PRIMARY MOBILE STANDARD
   
   ======================================== */

/* ========================================
   DESKTOP STANDARDS (1920px)
   ======================================== */

/* Container Standard - ALREADY CONSISTENT ✅ */
.container,
.header-container,
[class*="container"] {
  margin: 0 auto;
  padding: 0 48px;
  max-width: 1200px;
}

/* Hero Section Standard - OVERRIDE ALL INLINE STYLES ⚠️ */
.hero,
.hero-section,
.about-hero,
.contact-hero,
.page-header,
section[style*="padding"] {
  padding: 0 0 60px 0 !important; /* NO TOP PADDING - only bottom padding */
  margin-top: 0 !important; /* Remove negative margins */
}

/* Section Standard - OVERRIDE ALL INLINE STYLES ⚠️ */
.section-padding,
section:not(.hero):not(.header):not(.footer):not(.about-hero):not(.contact-hero):not(.careers-hero):not(.page-header):not(.social-media-section):not(.faq-title-section),
section[style*="padding"],
div[style*="padding"] {
  padding: 48px 0 !important;
}

/* Special Section Exceptions */
.services-section {
  padding: 48px 0 !important; /* SYMMETRIC padding - same top and bottom */
}

.partner-section,
.contact-form-section {
  padding: 48px 0 !important; /* Standardize to match other sections */
}

/* Why Choose Us Section - Fix Desktop Spacing */
.why-choose-us {
  padding: 48px 0 !important; /* Standard section padding */
}

.why-choose-us h2 {
  margin-bottom: 48px !important; /* Increased spacing between title and cards */
}

.why-choose-us.section-padding {
  padding: 48px 0 !important; /* Override section-padding class */
}

/* Fix spacing between title and why-item cards */
.why-choose-us h2[style*="margin-bottom"] {
  margin-bottom: 48px !important; /* Override inline style with more space */
}

.why-carousel-container {
  margin-top: 0 !important; /* Remove any top margin */
}

/* Footer Standard - ALREADY CONSISTENT ✅ */
.footer,
.footer-modern,
footer {
  padding: 40px 0 10px 0 !important; /* Reduced top padding from 60px to 40px */
  margin: 0 !important;
}

/* Header Standard - ALREADY CONSISTENT ✅ */
header {
  padding: 0 !important;
  margin: 0 !important;
}

/* ========================================
   MOBILE STANDARDS (440px) - PRIMARY MOBILE STANDARD
   ======================================== */

/* Use max-width: 480px to ensure 440px is the standard for all mobile */
@media (max-width: 480px) {
  
  /* Container Standard - IMPROVE UX ⚠️ */
  .container,
  .header-container,
  [class*="container"] {
    margin: 0 auto;
    padding: 0 16px !important; /* Change from 8px to 16px for better UX */
  }
  
  /* Hero Section Standard - OVERRIDE ALL INLINE STYLES ⚠️ */
  .hero,
  .hero-section,
  .about-hero,
  .contact-hero,
  .page-header,
  section[style*="padding"] {
    padding: 0 0 40px 0 !important; /* NO TOP PADDING - only bottom padding */
    margin: 0 !important;
  }
  
  /* Section Standard - OVERRIDE ALL INLINE STYLES ⚠️ */
  .section-padding,
  section:not(.hero):not(.header):not(.footer):not(.about-hero):not(.contact-hero):not(.careers-hero):not(.page-header):not(.social-media-section):not(.faq-title-section),
  section[style*="padding"],
  div[style*="padding"] {
    padding: 32px 0 !important; /* Standardize all sections */
  }
  
  /* Special Section Exceptions */
  .services-section {
    padding: 32px 0 !important; /* SYMMETRIC padding - same top and bottom */
  }
  
  .partner-section,
  .contact-form-section {
    padding: 32px 0 !important; /* Standardize to match other sections */
  }
  
  /* Social Media Section - NO BOTTOM PADDING - HIGHER SPECIFICITY */
  section.social-media-section,
  .social-media-section {
    padding-top: 40px !important; /* Smaller top padding for mobile */
    padding-bottom: 0 !important; /* NO bottom padding */
  }
  
  /* Footer Standard - ALREADY CONSISTENT ✅ */
  .footer,
  .footer-modern,
  footer {
    padding: 40px 0 10px 0 !important;
  }
  
  /* Header Standard - ALREADY CONSISTENT ✅ */
  header {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Internal spacing for mobile */
  h1, h2, h3, h4, h5, h6 {
    margin-top: 0 !important;
    margin-bottom: 20px !important; /* Slightly smaller spacing for mobile */
  }
  
  .btn, .about-cta-btn, .btn-dark, .btn-outline, .btn-light {
    margin-top: 20px !important; /* Match mobile heading bottom margin */
    margin-bottom: 0 !important;
  }
  
  .about-cta h2 {
    margin-bottom: 20px !important;
  }
  
  .about-cta .about-cta-btn {
    margin-top: 20px !important;
    margin-bottom: 0 !important;
  }
}

/* ========================================
   TABLET STANDARDS (481px - 768px)
   ======================================== */

@media (min-width: 481px) and (max-width: 768px) {
  
  /* Container Standard */
  .container,
  .header-container,
  [class*="container"] {
    margin: 0 auto;
    padding: 0 24px !important; /* --spacing-md */
  }
  
  /* Hero Section Standard */
  .hero,
  .hero-section,
  .about-hero,
  .contact-hero,
  .page-header {
    padding: 0 0 50px 0 !important; /* NO TOP PADDING - only bottom padding */
    margin: 0 !important;
  }
  
  /* Section Standard */
  .section-padding,
  section:not(.hero):not(.header):not(.footer):not(.about-hero):not(.contact-hero):not(.careers-hero):not(.page-header):not(.social-media-section):not(.faq-title-section) {
    padding: 40px 0 !important;
  }
  
  /* Special Section Exceptions */
  .services-section {
    padding: 40px 0 !important; /* SYMMETRIC padding */
  }
  
  .partner-section,
  .contact-form-section {
    padding: 40px 0 !important;
  }
  
  /* Social Media Section - NO BOTTOM PADDING - HIGHER SPECIFICITY */
  section.social-media-section,
  .social-media-section {
    padding-top: 48px !important; /* Medium top padding for tablet */
    padding-bottom: 0 !important; /* NO bottom padding */
  }
  
  /* Footer Standard */
  .footer,
  .footer-modern,
  footer {
    padding: 35px 0 10px 0 !important; /* Reduced top padding for tablet */
  }
  
  /* Internal spacing for tablet */
  h1, h2, h3, h4, h5, h6 {
    margin-top: 0 !important;
    margin-bottom: 22px !important; /* Medium spacing for tablet */
  }
  
  .btn, .about-cta-btn, .btn-dark, .btn-outline, .btn-light {
    margin-top: 22px !important; /* Match tablet heading bottom margin */
    margin-bottom: 0 !important;
  }
  
  .about-cta h2 {
    margin-bottom: 22px !important;
  }
  
  .about-cta .about-cta-btn {
    margin-top: 22px !important;
    margin-bottom: 0 !important;
  }
}

/* ========================================
   LARGE TABLET STANDARDS (769px - 1024px)
   ======================================== */

@media (min-width: 769px) and (max-width: 1024px) {
  
  /* Container Standard */
  .container,
  .header-container,
  [class*="container"] {
    margin: 0 auto;
    padding: 0 32px !important; /* --spacing-lg */
  }
  
  /* Hero Section Standard */
  .hero,
  .hero-section,
  .about-hero,
  .contact-hero,
  .page-header {
    padding: 0 0 55px 0 !important; /* NO TOP PADDING - only bottom padding */
    margin: 0 !important;
  }
  
  /* Section Standard */
  .section-padding,
  section:not(.hero):not(.header):not(.footer):not(.about-hero):not(.contact-hero):not(.careers-hero):not(.page-header):not(.social-media-section):not(.faq-title-section) {
    padding: 44px 0 !important;
  }
  
  /* Special Section Exceptions */
  .services-section {
    padding: 44px 0 !important; /* SYMMETRIC padding */
  }
  
  .partner-section,
  .contact-form-section {
    padding: 44px 0 !important;
  }
  
  /* Social Media Section - NO BOTTOM PADDING - HIGHER SPECIFICITY */
  section.social-media-section,
  .social-media-section {
    padding-top: 52px !important; /* Larger top padding for large tablet */
    padding-bottom: 0 !important; /* NO bottom padding */
  }
  
  /* Footer Standard */
  .footer,
  .footer-modern,
  footer {
    padding: 30px 0 10px 0 !important; /* Reduced top padding for large tablet */
  }
  
  /* Internal spacing for large tablet */
  h1, h2, h3, h4, h5, h6 {
    margin-top: 0 !important;
    margin-bottom: 23px !important; /* Slightly larger spacing for large tablet */
  }
  
  .btn, .about-cta-btn, .btn-dark, .btn-outline, .btn-light {
    margin-top: 23px !important; /* Match large tablet heading bottom margin */
    margin-bottom: 0 !important;
  }
  
  .about-cta h2 {
    margin-bottom: 23px !important;
  }
  
  .about-cta .about-cta-btn {
    margin-top: 23px !important;
    margin-bottom: 0 !important;
  }
}

/* ========================================
   INTERNAL SECTION SPACING STANDARDS
   ======================================== */

/* Standardize spacing between elements within sections */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0 !important;
  margin-bottom: 24px !important; /* Consistent bottom margin for all headings */
}

/* Button spacing standardization */
.btn, .about-cta-btn, .btn-dark, .btn-outline, .btn-light {
  margin-top: 24px !important; /* Match heading bottom margin */
  margin-bottom: 0 !important; /* Remove bottom margin for consistency */
}

/* Special cases for CTA sections */
.about-cta h2 {
  margin-bottom: 24px !important; /* Consistent spacing */
}

.about-cta .about-cta-btn {
  margin-top: 24px !important; /* Match heading bottom margin */
  margin-bottom: 0 !important; /* Remove the 40px bottom margin */
}

/* ========================================
   OVERRIDE INLINE STYLES
   ======================================== */

/* Override any remaining inline padding styles */
[style*="padding"] {
  /* These will be handled by the specific selectors above */
}

/* Specific inline style overrides */
.plans-wrapper[style*="padding"] {
  padding: 48px 0 !important;
}

/* Mobile override for plans-wrapper bottom padding */
@media (max-width: 768px) {
  .plans-wrapper[style*="padding"],
  .plans-wrapper.responsive-grid {
    padding: 0 0 10px 0 !important;
  }
}

/* Remove top padding and bottom margin from CTA banner */
.cta-banner-simple.section-padding {
  padding-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Remove top margin from how-title in mobile view */
@media (max-width: 768px) {
  .how-title {
    margin-top: 20px !important;
  }
  
  /* Override for HAVE QUESTIONS title */
  h2[style*="HAVE QUESTIONS"] {
    margin-top: 7px !important;
  }
  
  /* Maximum specificity override for HAVE QUESTIONS title */
  section[style*="background:#1976ed"] h2[style*="HAVE QUESTIONS"] {
    margin-top: 7px !important;
  }
  
  /* Target the specific class */
  .have-questions-title {
    margin-top: 7px !important;
  }
}

/* Custom padding for FAQ modern section */
.faq-modern.section-padding {
  padding: 52px 0 !important;
}

/* Mobile-specific FAQ padding override */
@media (max-width: 480px) {
  .faq-modern.section-padding {
    padding: 52px 0 !important;
  }
}

/* Additional FAQ padding override for all mobile breakpoints */
@media (max-width: 768px) {
  .faq-modern.section-padding {
    padding: 52px 0 !important;
  }
}

/* FINAL OVERRIDE - Maximum specificity for FAQ padding */
.faq-modern.section-padding,
section.faq-modern.section-padding,
.faq-modern[class*="section-padding"] {
  padding: 52px 0 !important;
}

@media (max-width: 768px) {
  .faq-modern.section-padding,
  section.faq-modern.section-padding,
  .faq-modern[class*="section-padding"] {
    padding: 52px 0 !important;
  }
}

@media (max-width: 480px) {
  .faq-modern.section-padding,
  section.faq-modern.section-padding,
  .faq-modern[class*="section-padding"] {
    padding: 52px 0 !important;
  }
}

/* ULTIMATE OVERRIDE - Must come after the general section-padding rule */
section.faq-modern.section-padding {
  padding: 52px 0 !important;
}

@media (max-width: 768px) {
  section.faq-modern.section-padding {
    padding: 52px 0 !important;
  }
}

@media (max-width: 480px) {
  section.faq-modern.section-padding {
    padding: 52px 0 !important;
  }
}

.container[style*="padding-top"] {
  padding-top: 0 !important;
}

/* Contact Us Feedback Section - Fix Mobile Gaps */
.about-cta .feedback-text {
  margin-top: 0 !important;
  margin-bottom: 16px !important; /* Reduced spacing */
  padding: 0 !important;
  text-align: center !important; /* Force center alignment */
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  width: 100% !important;
  max-width: 85% !important; /* Prevent text from being too wide */
}

.about-cta .about-cta-btn {
  margin-top: 0 !important; /* Remove top margin since text has bottom margin */
  margin-bottom: 0 !important;
}

/* Override inline styles in contact-us page */
.about-cta[style*="background"] {
  padding: 32px 0 !important; /* Reduced section padding */
}

.about-cta .container[style*="display"] {
  display: block !important; /* Simplify layout */
  text-align: center !important;
}

.about-cta div[style*="display:flex"] {
  display: block !important; /* Remove flex gaps */
  margin-bottom: 0 !important;
}

/* Feedback section specific spacing */
.about-cta h2 {
  margin-top: 0 !important; /* Remove top margin */
  margin-bottom: 16px !important; /* Reduced bottom margin */
}

.about-cta .about-cta-btn {
  margin-top: 0 !important; /* Remove top margin since text has bottom margin */
  margin-bottom: 0 !important; /* Remove bottom margin */
}

/* ========================================
   FINAL OVERRIDE - HIGHEST SPECIFICITY
   ======================================== */

/* Social Media Section - ABSOLUTE OVERRIDE */
section.social-media-section,
.social-media-section,
section[class*="social-media"] {
  padding-bottom: 0 !important; /* FORCE NO BOTTOM PADDING */
}

@media (max-width: 480px) {
  section.social-media-section,
  .social-media-section,
  section[class*="social-media"] {
    padding-bottom: 0 !important; /* FORCE NO BOTTOM PADDING ON MOBILE */
  }
  
  /* Mobile Feedback Section - Fix Gaps */
  .about-cta .feedback-text {
    margin-bottom: 12px !important; /* Even smaller spacing for mobile */
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
    text-align: center !important; /* Force center alignment */
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 90% !important; /* Prevent text from being too wide */
  }
  
  .about-cta h2 {
    margin-bottom: 12px !important; /* Reduced bottom margin for mobile */
  }
  
  .about-cta[style*="background"] {
    padding: 24px 0 !important; /* Even smaller section padding for mobile */
  }
  
  /* Why Choose Us Section - Mobile */
  .why-choose-us {
    padding: 32px 0 !important; /* Standard mobile section padding */
  }
  
  .why-choose-us h2 {
    margin-bottom: 32px !important; /* Increased spacing between title and cards on mobile */
  }
  
  .why-choose-us.section-padding {
    padding: 32px 0 !important; /* Override section-padding class on mobile */
  }
  
  /* Fix mobile spacing between title and why-item cards */
  .why-choose-us h2[style*="margin-bottom"] {
    margin-bottom: 32px !important; /* Override inline style on mobile with more space */
  }
  
  .why-carousel-container {
    margin-top: 0 !important; /* Remove any top margin on mobile */
  }
  
  .about-cta .about-cta-btn {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  
  .about-cta div[style*="display:flex"] {
    margin-bottom: 0 !important; /* Remove flex gaps on mobile */
  }
}

/* ========================================
   DEBUGGING HELPERS (Remove in production)
   ======================================== */

/* Uncomment to see which elements are being affected */
/*
.container { border: 2px solid red !important; }
.hero, .hero-section, .about-hero, .contact-hero, .careers-hero, .page-header { border: 2px solid blue !important; }
.section-padding { border: 2px solid green !important; }
.footer, .footer-modern { border: 2px solid orange !important; }
*/