/**
 * Tankbeer Section Spacing Overrides
 * Standardizes padding, margins, and gaps across all page templates.
 */

:root {
  /* Core padding rules */
  --tb-section-pad: 40px; /* Base top/bottom padding for all sections */
  --tb-section-gap: 20px; /* Reduced gap for mobile */
  --tb-container-pad: 0 15px; /* Side padding to prevent edge touching */
  --tb-hero-min-height: 420px;
}

@media (max-width: 1024px) {
  :root {
    --tb-section-pad: 30px; /* 60px total gap */
    --tb-section-pad-sm: 15px;
    --tb-hero-min-height: 360px;
  }
}

@media (max-width: 767px) {
  :root {
    --tb-section-pad: 20px; /* 40px total gap */
    --tb-section-pad-sm: 10px;
    --tb-hero-min-height: 300px;
    --tb-container-pad: 0 16px;
  }
}

/* ==========================================================================
   1. Global Elementor Section Resets
   ========================================================================== */

/* Apply balanced padding to top sections (top and bottom) so backgrounds wrap evenly,
   using half-measures so stacked sections don't create massive double-gaps. */
.elementor-section.elementor-top-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: var(--tb-section-pad) !important;
  padding-bottom: var(--tb-section-pad) !important;
}

/* Fix boxed container padding */
.elementor-section-boxed > .elementor-container {
  padding: var(--tb-container-pad) !important;
}

/* Collapse Elementor Spacer Widgets completely */
.elementor-widget-spacer {
  display: none !important;
}

/* Hide the manual spacer sections on the home page entirely */
#how-we-work-mark,
#our-clients-mark,
#how-works-mark,
#contact-us-mark,
#tanks-separator {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ==========================================================================
   2. Hero & Header Sections
   ========================================================================== */

.single-page-header-wrapper,
.tankbeer-about-hero,
#installations-header,
#contact-header {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: var(--tb-hero-min-height) !important;
}

.tankbeer-home-hero,
#slider.elementor-top-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: unset !important;
}

#top.sticky-header {
  padding-top: 0 !important;
}

/* ==========================================================================
   3. Body Content Wrappers 
   Ensure they close gracefully if they are the last element
   ========================================================================== */
.single-page-body-wrapper,
#our-team-main-section-wrapper,
#our-story-main-section-wrapper {
  padding-top: var(--tb-section-pad) !important;
  padding-bottom: var(--tb-section-pad) !important;
}

/* Inner Sections */
.elementor-section.elementor-inner-section {
  margin-top: var(--tb-section-pad-sm) !important;
  margin-bottom: var(--tb-section-pad-sm) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* The ROI CTA Section at the bottom of pages */
.roi-cta-section {
  padding-top: var(--tb-section-pad) !important;
  padding-bottom: var(--tb-section-pad) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Contact Section (Home/Contact pages) */
#contact {
  padding-top: var(--tb-section-pad) !important;
  padding-bottom: var(--tb-section-pad) !important;
}

/* Footer */
#footer.elementor-top-section {
  padding-top: var(--tb-section-pad) !important;
  padding-bottom: var(--tb-section-pad) !important;
}

/* ==========================================================================
   3. Home Page Specific UI Tweaks
   ========================================================================== */

/* Tighten spacing specifically around the Our Clients block */
#our-clients-section {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Fix service cards crashing into the 'WE PLAN...' banner on Home Page */
#how-we-work-body {
  margin-top: 40px !important;
}

/* ==========================================================================
   4. Subpage UI Alignment Fixes
   Addresses spread-out columns and invisible lists on Services / Installations
   ========================================================================== */

/* Ensure the icon lists are styled as centered inline blocks so they don't hug left edges */
.single-page-body-icon-list-wrapper {
  text-align: center !important;
}

.single-page-body-icon-list-wrapper .elementor-icon-list-items {
  display: inline-block !important;
  text-align: left !important;
  margin: 0 auto !important;
}

/* Fix invisible checkmark icons (force FontAwesome parsing and visible color) */
.single-page-body-icon-list-wrapper .elementor-icon-list-icon i {
  color: #eeb012 !important; /* Tankbeer Orange */
  font-size: 16px !important;
  display: inline-block;
}

/* Fix "Our Tank Offer" (Page 3091) paragraph and lists floating unconstrained */
.elementor-3091 .our-tank-offer.single-page-body-paragraph {
  max-width: 600px !important;
  margin: 0 auto 20px auto !important;
  text-align: left !important;
}

.elementor-3091 .single-page-body-icon-list-wrapper {
  max-width: 600px !important;
  margin: 0 auto !important;
  text-align: left !important;
}

.elementor-3091 .single-page-body-icon-list-wrapper .elementor-icon-list-items {
  display: block !important;
  text-align: left !important;
  margin: 0 !important;
}

/* Fix subheader widths so columns don't stretch text out too wide */
.list-header {
  text-align: center !important;
  margin-bottom: 20px !important;
}

/* Hide empty gallery section on Our Tank Offer Desktop (removes massive bottom gap) */
@media (min-width: 1025px) {
  .elementor-3091 .elementor-element-7cedc3d {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* User's Exact Section Spacing Adjustments */
.elementor-element-0878545.elementor-top-section {
  padding-top: 0 !important;
}

/* Force bottom space on all GO BACK buttons across the three subpages */
/* .elementor-element-3d6cc291.elementor-inner-section,
.elementor-element-7d926849.elementor-inner-section,
.elementor-element-38887d92.elementor-inner-section,
section.go-back-button-wrapper {
  padding-bottom: 80px !important;
}
 */

/* ==========================================================================
   5. Scroll Offset for Anchor Links
   Ensures sections scroll below the sticky header when clicked from menu
   ========================================================================== */
#slider,
#benefits-section,
#benefits-icons-section,
#how-we-work-section,
#ourclients,
#it-works-section,
#contact {
  scroll-margin-top: 100px;
}

@media (max-width: 1024px) {
  #slider,
  #benefits-section,
  #benefits-icons-section,
  #how-we-work-section,
  #ourclients,
  #it-works-section,
  #contact {
    scroll-margin-top: 80px;
  }
}

@media (max-width: 767px) {
  #slider,
  #benefits-section,
  #benefits-icons-section,
  #how-we-work-section,
  #ourclients,
  #it-works-section,
  #contact {
    scroll-margin-top: 70px;
  }
}