/* =========================================================
   SINGLE FABRICATION TEMPLATE STYLES
   Scope: Single fabrication pages only (body.single-fabrication)
   For: fabrication_new single post template (Elementor)
   Loaded only on single fabrication pages
   ========================================================= */

/* -------------------------
   1) Header dropdown stacking (critical)
   FIXED: Sticky header must stay above scrolling content
   ------------------------- */
   
/* Elementor header wrapper */
body.single-fabrication .elementor-location-header {
  position: relative;
  z-index: 10000 !important;
}

/* When header becomes sticky, increase z-index even more */
body.single-fabrication .elementor-location-header.elementor-sticky,
body.single-fabrication .elementor-location-header .elementor-sticky,
body.single-fabrication .elementor-location-header [data-settings*="sticky"] {
  z-index: 99999 !important;
}

/* Sticky wrapper from Elementor Pro */
body.single-fabrication .elementor-sticky__wrapper {
  z-index: 99999 !important;
}

/* Common Elementor dropdown containers — z-index only;
   do NOT set position (Elementor needs absolute for overlays) */
body.single-fabrication .elementor-location-header .elementor-nav-menu--dropdown,
body.single-fabrication .elementor-location-header .elementor-nav-menu__container,
body.single-fabrication .elementor-location-header .elementor-nav-menu {
  z-index: 10001 !important;
}

/* If your theme uses the "e-con" header layout */
body.single-fabrication .elementor-location-header .e-con,
body.single-fabrication .elementor-location-header .e-con-inner {
  position: relative;
  z-index: 10000 !important;
}

/* CRITICAL: Ensure page content stays below sticky header */
body.single-fabrication .elementor-section:not(.elementor-location-header),
body.single-fabrication .e-con:not(.elementor-location-header) {
  z-index: 1 !important;
  position: relative;
}

/* Re-elevate header internals — the rule above catches .e-con children
   INSIDE the header (they don't have .elementor-location-header class).
   Without this override the nav dropdown is trapped at z-index:1. */
body.single-fabrication .elementor-location-header .e-con,
body.single-fabrication .elementor-location-header .e-con-inner,
body.single-fabrication .elementor-location-header .elementor-section {
  z-index: auto !important;
}

/* Ensure main content area respects z-index */
body.single-fabrication main,
body.single-fabrication #main,
body.single-fabrication .site-content {
  position: relative;
  z-index: 1 !important;
}

/* -------------------------
   2) Mobile: Reduce header spacing
   FIXED: Reduce padding but maintain logo size
   ------------------------- */


  /* FIX STICKY HEADER DUPLICATION AND MARGINS */
  body.single-fabrication .elementor-location-header {
    position: relative !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  body.single-fabrication .elementor-location-header.elementor-sticky--active {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Reduce header section padding ONLY - not logo size */
  body.single-fabrication .elementor-location-header .elementor-section,
  body.single-fabrication .elementor-location-header .e-con {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    min-height: auto !important;
  }
  
  /* Reduce inner container padding */
  body.single-fabrication .elementor-location-header .elementor-container,
  body.single-fabrication .elementor-location-header .e-con-inner {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    min-height: auto !important;
  }
  
  /* Tighten logo widget margins - but DON'T change logo size */
  body.single-fabrication .elementor-location-header .elementor-widget-image {
    margin: 0 !important;
    padding: 5px 0 !important;
  }
  
  /* REMOVED: Logo sizing - let Elementor control this */
}

@media (max-width: 767px) {
  /* Even tighter padding on mobile */
  body.single-fabrication .elementor-location-header .elementor-section,
  body.single-fabrication .elementor-location-header .e-con {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  
  /* REMOVED: Logo sizing - let Elementor control this */
}

/* -------------------------
   3) Mobile: Page layout & spacing
   ------------------------- */

@media (max-width: 767px) {
  /* Remove side margins - full width content */
  body.single-fabrication .elementor-section:not(.elementor-location-header):not(.elementor-location-footer),
  body.single-fabrication .e-con:not(.elementor-location-header):not(.elementor-location-footer) {
    margin-left: 0px !important;
    margin-right: 0px !important;
    max-width: 100vw !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  
  /* Widget containers: no extra padding — section rail is enough */
  body.single-fabrication .elementor-widget-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* If a specific container holds the media gallery, keep it tight */
  body.single-fabrication .mb-media-gallery,
  body.single-fabrication .mb-media-gallery__tabs,
  body.single-fabrication .elementor-widget-shortcode {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

@media (max-width: 480px) {
  /* Full width on very small screens */
  body.single-fabrication .elementor-section:not(.elementor-location-header):not(.elementor-location-footer),
  body.single-fabrication .e-con:not(.elementor-location-header):not(.elementor-location-footer) {
    margin-left: 0px !important;
    margin-right: 0px !important;
    max-width: 100vw !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
  }
}

/* -------------------------
   4) Gray banner (Part Number / Fabrication Title)
   Similar to belt pages
   ------------------------- */

@media (max-width: 767px) {
  /* Target the heading container (adjust element ID if different) */
  /* If fabrications use a similar gray banner, add the element ID here */
  body.single-fabrication .elementor-widget-heading:first-of-type {
    --padding-top: 15px !important;
    --padding-bottom: 15px !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    min-height: auto !important;
  }

  body.single-fabrication .elementor-heading-title {
    margin: 0 !important;
    padding: 8px 0 !important;
    line-height: 1.2 !important;
  }
}

/* -------------------------
   5) Specifications layout
   ------------------------- */

body.single-fabrication .fabrication-specifications {
  padding: 15px;
}

@media (max-width: 767px) {
  body.single-fabrication .fabrication-specifications {
    padding: 10px 5px;
  }
}

/* -------------------------
   6) Related products/items spacing
   ------------------------- */

body.single-fabrication .related-items,
body.single-fabrication .mb-related-items {
  margin-top: 20px;
}

@media (max-width: 767px) {
  body.single-fabrication .related-items,
  body.single-fabrication .mb-related-items {
    margin-top: 15px;
  }
}

/* -------------------------
   7) Media Gallery spacing
   Same pattern as belts
   ------------------------- */

@media (max-width: 767px) {
  /* Remove spacing from title banner area */
  body.single-fabrication .elementor-widget-heading,
  body.single-fabrication .elementor-heading-title {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }
}

/* -------------------------
   8) Unit Toggle Widget
   Ensure proper display on fabrication pages
   ------------------------- */

body.single-fabrication .unit-toggle {
  margin: 15px auto;
  padding: 8px 12px;
  text-align: left;
  box-sizing: border-box;
  display: inline-block;
}

body.single-fabrication .unit-system-toggle {
  display: inline-flex !important;
  justify-content: left;
  align-items: left;
  gap: 12px;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

@media (max-width: 767px) {
  body.single-fabrication .unit-toggle {
    padding: 6px 10px;
    font-size: 14px;
  }
  
  body.single-fabrication .unit-system-toggle {
    justify-content: flex-start !important;
    gap: 8px !important;
  }
}

@media (max-width: 767px) {
  .elementor-147791 .elementor-element.elementor-element-33584628 {
    --width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
  }

  /* Optional: if it’s being centered and you want it to “stick” full width */
  .elementor-147791 .elementor-element.elementor-element-33584628.e-con {
    align-self: stretch !important;
  }
}


/* -------------------------
   6b) Related sections: heading wrap + dropdown readability
   Prevents heading truncation and ensures filter dropdown is legible
   ------------------------- */

/* Headings in related-items sections must wrap, never truncate */
body.single-fabrication .mb-fabriction-container h2,
body.single-fabrication .mb-fabriction-container h3,
body.single-fabrication .mb-belt-table-container h2,
body.single-fabrication .mb-belt-table-container h3,
body.single-fabrication .mb-related-items h2,
body.single-fabrication .mb-related-items h3 {
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  overflow: visible !important;
  text-overflow: unset !important;
  max-width: 100% !important;
}

/* Custom dropdown panel — readable font, adequate width */
body.single-fabrication #dropdown-options,
body.single-fabrication #custom-dropdown .dropdown-options,
body.single-fabrication [id*="dropdown-options"] {
  font-size: 15px !important;
  min-width: 220px !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Individual dropdown options — readable padding and font */
body.single-fabrication .dropdown-option,
body.single-fabrication #dropdown-options label,
body.single-fabrication #dropdown-options .dropdown-option {
  font-size: 15px !important;
  padding: 8px 12px !important;
  line-height: 1.4 !important;
}

/* Native <select> elements in related sections */
body.single-fabrication .mb-fabriction-container select,
body.single-fabrication .mb-belt-table-container select,
body.single-fabrication .mb-related-items select {
  font-size: 16px !important; /* 16px prevents iOS zoom on focus */
  padding: 8px 10px !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Ensure the custom-dropdown container doesn't clip */
body.single-fabrication #custom-dropdown {
  max-width: 100% !important;
  width: 100% !important;
  overflow: visible !important;
}

/* Mobile Content Spacing */
@media (max-width: 767px) {
    .mb-fabriction-container, 
    .mb-belt-table-container {
        margin-left: 5px;
        margin-right: 5px;
        width: calc(100% - 10px) !important;
    }
}

#fab-menu {
margin-top: 70px !important
}


/* =========================================================
   FORCE MINIMUM CONTENT PADDING – SINGLE FABRICATION
   Ensures a small safety rail at all viewport sizes.
   Padding lives on the OUTER container only — widget
   containers are zeroed so padding never stacks.
   ========================================================= */

body.single-fabrication
.elementor-section:not(.elementor-location-header):not(.elementor-location-footer),
body.single-fabrication
.e-con:not(.elementor-location-header):not(.elementor-location-footer) {
  padding-left: max(5px, var(--padding-left, 0px)) !important;
  padding-right: max(5px, var(--padding-right, 0px)) !important;
  box-sizing: border-box !important;
}

/* Widget containers: NO extra padding — the section rail is enough */
body.single-fabrication .elementor-widget-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}