/* Additional Mobile Spacing Optimizations - December 2025 */

/* Global mobile spacing tightening for all pages */
@media (max-width: 768px) {
  
  /* Main content container - remove excessive top margin */
  #main-content,
  main,
  .main-content,
  .centered-container {
    margin-top: 0 !important;
    padding-top: 0.5rem !important;
  }

  /* Hero sections - ultra-compact for mobile */
  .hero,
  .modern-hero,
  .hero-section,
  .page-hero {
    margin-top: 0.25rem !important;
    margin-bottom: 0.5rem !important;
    padding: 0.5rem 0.5rem !important;
    min-height: auto !important;
  }

  /* Section spacing - reduce gaps between sections */
  section + section,
  .section + .section {
    margin-top: 0.75rem !important;
  }

  /* Three pillars and grid sections */
  .three-pillars,
  .grid-section,
  .services-grid {
    margin: 0.75rem auto !important;
    padding: 0.5rem !important;
  }

  /* Card grids - tighter gaps */
  .three-pillars > div,
  .grid-section > div {
    gap: 1rem !important;
  }

  /* Individual cards - minimal margin */
  .pillar-card,
  .service-card,
  .feature-card {
    margin: 0.5rem 0 !important;
    padding: 0.75rem !important;
  }

  /* Hero CTA buttons */
  .hero-cta-buttons,
  .hero-actions {
    margin: 0.75rem 0 !important;
    gap: 0.5rem !important;
  }

  /* Button sizing for mobile */
  .btn-hero,
  .cta-button,
  .btn-primary {
    padding: 0.6rem 1rem !important;
    font-size: 0.9rem !important;
    min-height: 40px !important;
  }

  /* Stats section */
  .stats-section {
    margin: 1rem auto !important;
    padding: 1rem 0.75rem !important;
  }

  /* Brand story and CTA sections */
  .brand-story,
  .cta-banner,
  .ai-differentiator {
    margin: 1rem auto !important;
    padding: 1.25rem 1rem !important;
  }

  /* Contact section spacing */
  .contact-section {
    margin: 1rem auto 0.5rem auto !important;
    padding: 1rem 0.75rem !important;
  }

  /* Blog page specific */
  .blog-hero,
  .blog-header {
    padding: 1rem 0.75rem !important;
    margin: 0.5rem 0 !important;
  }

  .blog-main,
  .blog-content {
    padding: 0.5rem !important;
    margin-top: 0.5rem !important;
  }

  /* Products/Services pages */
  .services-hero,
  .products-hero {
    padding: 1rem 0.75rem !important;
    margin: 0.5rem 0 !important;
  }

  /* Remove excessive spacing from inline styles */
  section[style*="margin: 2rem"],
  section[style*="margin: 3rem"],
  section[style*="margin: 4rem"] {
    margin: 0.75rem auto !important;
  }

  section[style*="padding: 2rem"],
  section[style*="padding: 3rem"] {
    padding: 1rem 0.75rem !important;
  }

  /* Header spacing after navigation */
  header + main,
  nav + main,
  .sticky-nav + main {
    margin-top: 0 !important;
  }

  /* Typography spacing reduction */
  h1 {
    margin: 0.5rem 0 0.4rem 0 !important;
    line-height: 1.2 !important;
  }

  h2 {
    margin: 0.75rem 0 0.4rem 0 !important;
    line-height: 1.3 !important;
  }

  h3, h4 {
    margin: 0.5rem 0 0.3rem 0 !important;
  }

  /* Lists and content blocks */
  ul, ol {
    margin: 0.5rem 0 !important;
    padding-left: 1.25rem !important;
  }

  li {
    margin: 0.25rem 0 !important;
  }

  /* Images and media */
  img {
    margin: 0.5rem 0 !important;
  }

  /* Badges and verification elements */
  .hero-badges,
  .badge-group {
    margin: 0.5rem 0 !important;
    gap: 0.5rem !important;
  }

  .badge {
    padding: 0.4rem 0.7rem !important;
    font-size: 0.85rem !important;
  }

  /* Google verified badge and similar elements */
  div[style*="margin-bottom: 1.5rem"] {
    margin-bottom: 0.75rem !important;
  }

  /* Logo and icon sizing */
  .hero-logo,
  .logo-icon {
    margin-bottom: 0.5rem !important;
  }

  /* Footer spacing */
  footer,
  .site-footer {
    margin-top: 1rem !important;
    padding: 1rem 0.75rem !important;
  }
}

/* Extra small screens - even tighter spacing */
@media (max-width: 480px) {
  
  #main-content,
  main {
    padding-top: 0.25rem !important;
  }

  section {
    padding: 0.5rem 0.5rem !important;
    margin: 0.5rem auto !important;
  }

  .hero-content {
    padding: 0.75rem 0.5rem !important;
  }

  .hero-title {
    font-size: 1.25rem !important;
    margin-bottom: 0.4rem !important;
  }

  .hero-subtitle {
    font-size: 0.9rem !important;
    margin-bottom: 0.5rem !important;
  }

  .btn-hero,
  .cta-button {
    padding: 0.5rem 0.85rem !important;
    font-size: 0.85rem !important;
  }

  h1 { font-size: 1.4rem !important; }
  h2 { font-size: 1.2rem !important; }
  h3 { font-size: 1.05rem !important; }

  p, li {
    font-size: 0.95rem !important;
  }
}

/* Landscape mobile - optimize for horizontal viewing */
@media (max-width: 896px) and (max-height: 414px) and (orientation: landscape) {
  
  .hero,
  .modern-hero {
    min-height: 150px !important;
    padding: 0.5rem !important;
  }

  .hero-content {
    padding: 0.75rem !important;
  }

  .hero-logo {
    width: 50px !important;
    height: 50px !important;
    margin-bottom: 0.25rem !important;
  }

  .hero-title {
    font-size: 1.2rem !important;
    margin-bottom: 0.25rem !important;
  }

  .hero-subtitle {
    font-size: 0.85rem !important;
    margin-bottom: 0.5rem !important;
  }
}