/* Responsive Design Enhancements for Sparky4u Electric */
/* Ensures proper scaling across all devices */

/* Base responsive styles */
* {
  box-sizing: border-box;
}

/* Ensure images are responsive */
img {
  max-width: 100%;
  height: auto;
}

/* MINIMUM FONT SIZE 20px - Global override */
body, 
p, 
span, 
div,
.zpelem-text,
.zptext,
.zpelem-text p,
.zptext p,
.zpelem-text div,
.zptext div,
.zpelem-heading,
.zpheading,
.zpelem-heading h1,
.zpelem-heading h2,
.zpelem-heading h3,
.zpelem-heading h4,
.zpelem-heading h5,
.zpelem-heading h6 {
  font-size: 20px !important;
  line-height: 1.5 !important;
}

/* Headings should be larger */
h1 {
  font-size: 40px !important;
}

h2 {
  font-size: 32px !important;
}

h3 {
  font-size: 28px !important;
}

h4 {
  font-size: 24px !important;
}

h5, h6 {
  font-size: 22px !important;
}

/* Override any inline font-size that's smaller than 20px */
[style*="font-size:"],
[style*="font-size: "],
style*="font-size:1" {
  font-size: 20px !important;
}

/* Specifically target small inline sizes */
span[style*="font-size: 12px"],
span[style*="font-size:14px"],
span[style*="font-size: 14px"],
span[style*="font-size:16px"],
span[style*="font-size: 16px"],
span[style*="font-size:18px"],
span[style*="font-size: 18px"] {
  font-size: 20px !important;
}

p[style*="font-size: 12px"],
p[style*="font-size:14px"],
p[style*="font-size: 14px"],
p[style*="font-size:16px"],
p[style*="font-size: 16px"],
p[style*="font-size:18px"],
p[style*="font-size: 18px"] {
  font-size: 20px !important;
}

/* Enhanced media queries for better responsiveness */
@media screen and (max-width: 768px) {
  .zpcontainer {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  .theme-content-area, .theme-header-area {
    overflow-x: hidden;
  }
  
  .zpbutton {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Keep minimum sizes on mobile too */
  body, p, span, div {
    font-size: 18px !important;
  }
}

@media screen and (max-width: 480px) {
  body {
    font-size: 16px !important;
  }
  
  h1 { font-size: 32px !important; }
  h2 { font-size: 28px !important; }
  h3 { font-size: 24px !important; }
}

/* Ensure gallery images scale properly */
.hb-grid-item img {
  width: 100%;
  height: auto;
}

/* Responsive adjustments for the navigation */
@media screen and (max-width: 992px) {
  .theme-navigation-and-icons {
    flex-direction: column;
  }
}