/* 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;
  }
}

/* Footer image section - background fills area with more height */
[data-element-id="elm_m5oZardRLrWe7WjZM5gm0g"] { 
  background-size: cover !important; 
  background-position: center !important;
  min-height: 300px !important;
}

/* Logo container - position at bottom left */
[data-element-id="elm_m5oZardRLrWe7WjZM5gm0g"] > .zpcontainer {
  position: relative !important;
  min-height: 300px !important;
}
[data-element-id="elm_m5oZardRLrWe7WjZM5gm0g"] .zpelem-image {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
}

/* Make images responsive - remove fixed sizes */
[data-element-type="image"] img {
  max-width: 100% !important;
  height: auto !important;
  width: auto !important;
}

/* Keep homepage gallery as-is */
.zpalbum img,
.zpgallery img {
  max-width: none !important;
  height: auto !important;
}

/* LOGO SIZE - must come AFTER general image rules to override */
/* Footer logo at 15% - HIGHER specificity to beat inline styles */
/* Position bottom-left */
[data-element-id="elm_m5oZardRLrWe7WjZM5gm0g"] .zpimage-container {
  text-align: left !important;
}
[data-element-id="elm_m5oZardRLrWe7WjZM5gm0g"] .zpimage-container figure {
  margin: 0 !important;
  display: inline-block !important;
}

@media (min-width: 992px) {
  [data-element-id="elm_m5oZardRLrWe7WjZM5gm0g"][data-element-type="image"] .zpimage-container figure img.zpimage {
    width: 25% !important;
    height: auto !important;
  }
}
@media (max-width: 991px) and (min-width: 768px) {
  [data-element-id="elm_m5oZardRLrWe7WjZM5gm0g"][data-element-type="image"] .zpimage-container figure img.zpimage {
    width: 25% !important;
    height: auto !important;
  }
}
@media (max-width: 767px) {
  [data-element-id="elm_m5oZardRLrWe7WjZM5gm0g"][data-element-type="image"] .zpimage-container figure img.zpimage {
    width: 25% !important;
    height: auto !important;
  }
}