/* =========================================================
   SINGLE BELT TEMPLATE STYLES (refactored)
   Scope: single belt pages only
   Goals:
   - Keep your tight mobile layout
   - Avoid fragile selectors (e.g. :has())
   - Ensure header dropdown menus always appear above page content
   - Respect Elementor responsive visibility classes
   - ENSURE ALL MINIMUM PULLEY CHART COLUMNS VISIBLE ON MOBILE
   ========================================================= */

/* -------------------------
   1) Header dropdown stacking (critical)
   ------------------------- */
/* Elementor header wrapper */
body.single-belt .elementor-location-header {
  position: relative;
  z-index: 10000 !important;
}

/* Common Elementor dropdown containers */
body.single-belt .elementor-location-header .elementor-nav-menu--dropdown,
body.single-belt .elementor-location-header .elementor-nav-menu__container,
body.single-belt .elementor-location-header .elementor-nav-menu {
  position: relative;
  z-index: 10001 !important;
}

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

/* -------------------------
   2) Mobile: page layout & spacing
   ------------------------- */

@media (max-width: 767px) {

  /* Reduce side margins on belt spec pages for more content space */
  body.single-belt .elementor-section:not(.elementor-location-header):not(.elementor-location-footer),
  body.single-belt .e-con:not(.elementor-location-header):not(.elementor-location-footer) {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100vw !important;
  }

  /* Reduce padding on inner content */
  body.single-belt .elementor-widget-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Remove spacing from sections on belt pages */
  body.single-belt .elementor-section,
  body.single-belt .e-con {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Keep spacing below header (adjust to taste) */
  body.single-belt .elementor-location-header ~ .elementor-section:first-of-type,
  body.single-belt .elementor-location-header ~ .e-con:first-of-type {
    margin-top: 70px !important;
    padding-top: 5px !important;
  }

  /* If a specific container holds the media gallery, keep it tight */
  body.single-belt .mb-media-gallery,
  body.single-belt .mb-media-gallery__tabs,
  body.single-belt .elementor-widget-shortcode {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

@media (max-width: 480px) {
  body.single-belt .elementor-section:not(.elementor-location-header):not(.elementor-location-footer),
  body.single-belt .e-con:not(.elementor-location-header):not(.elementor-location-footer) {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100vw !important;
  }
}

/* -------------------------
   3) Gray banner (Part Number Heading)
   ------------------------- */

@media (max-width: 767px) {

  /* Target your known element id (keep, since you already use it) */
  body.single-belt .elementor-element-35d0bc8b {
    --padding-top: 15px !important;
    --padding-bottom: 15px !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    min-height: auto !important;
  }

  body.single-belt .elementor-element-35d0bc8b .e-con-inner {
    --padding-top: 0px !important;
    --padding-bottom: 0px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: auto !important;
  }

  body.single-belt .elementor-element-35d0bc8b .elementor-widget-heading {
    margin: 0 !important;
    padding: 0 !important;
  }

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

  /* Full width banner (your original intent) */
  body.single-belt .elementor-element-35d0bc8b {
    margin-left: -10px !important;
    margin-right: -10px !important;
    width: calc(100% + 20px) !important;
    max-width: calc(100% + 20px) !important;
  }

  body.single-belt .elementor-element-35d0bc8b .e-con-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 480px) {
  body.single-belt .elementor-element-35d0bc8b {
    margin-left: -5px !important;
    margin-right: -5px !important;
    width: calc(100% + 10px) !important;
    max-width: calc(100% + 10px) !important;
  }
}

/* -------------------------
   4) Specifications layout
   ------------------------- */

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

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

/* -------------------------
   5) Related fabrications table spacing
   ------------------------- */

body.single-belt .mb-related-fabs {
  margin-top: 20px;
}

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

/* =========================================================
   6) MINIMUM PULLEY CHART - COMPLETE STYLING
   CRITICAL: Ensures ALL columns visible on ALL viewports
   ========================================================= */

/* Container spacing */
body.single-belt .minimum-pulley-chart-container {
  margin: 20px 0;
  overflow-x: auto; /* Allow horizontal scroll if absolutely needed */
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
  body.single-belt .minimum-pulley-chart-container {
    margin: 15px 0;
  }
}

/* Base table styles - ALL VIEWPORTS */
body.single-belt .minimum-pulley-chart {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 14px;
  line-height: 1.4;
  table-layout: auto;
}

/* CRITICAL: Force ALL columns to display as table-cell */
body.single-belt .minimum-pulley-chart th,
body.single-belt .minimum-pulley-chart td {
  display: table-cell !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding: 10px 12px;
  text-align: center;
  border: 1px solid #ddd;
  vertical-align: middle;
}

/* CRITICAL: Override any hiding of metric-units class */
body.single-belt .minimum-pulley-chart .metric-units,
body.single-belt .minimum-pulley-chart th.metric-units,
body.single-belt .minimum-pulley-chart td.metric-units,
body.single-belt .minimum-pulley-chart .metric-units.min-pulley-dia-header,
body.single-belt .minimum-pulley-chart .metric-units.min-pulley-dia {
  display: table-cell !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  max-width: none !important;
  overflow: visible !important;
}

/* CRITICAL: Override any hiding of imperial-units class */
body.single-belt .minimum-pulley-chart .imperial-units,
body.single-belt .minimum-pulley-chart th.imperial-units,
body.single-belt .minimum-pulley-chart td.imperial-units,
body.single-belt .minimum-pulley-chart .imperial-units.min-pulley-dia-header,
body.single-belt .minimum-pulley-chart .imperial-units.min-pulley-dia {
  display: table-cell !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  max-width: none !important;
  overflow: visible !important;
}

/* Header row styling */
body.single-belt .minimum-pulley-chart thead th {
  background-color: #f5f5f5;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
}

/* Tension rating column - allow wrapping */
body.single-belt .minimum-pulley-chart .tension-rating,
body.single-belt .minimum-pulley-chart .tension-rating-header {
  text-align: left;
  white-space: normal;
  min-width: 80px;
}

/* Color-coded tension rows (matching your existing gradient indicators) */
body.single-belt .minimum-pulley-chart .tension-over-80 .tension-rating {
  border-left: 4px solid #ff4444;
}

body.single-belt .minimum-pulley-chart .tension-60-80 .tension-rating {
  border-left: 4px solid #ffaa00;
}

body.single-belt .minimum-pulley-chart .tension-40-60 .tension-rating {
  border-left: 4px solid #88cc00;
}

body.single-belt .minimum-pulley-chart .tension-below-40 .tension-rating {
  border-left: 4px solid #00aa44;
}

/* Alternating row colors for readability */
body.single-belt .minimum-pulley-chart tbody tr:nth-child(even) {
  background-color: #fafafa;
}

body.single-belt .minimum-pulley-chart tbody tr:hover {
  background-color: #f0f7f0;
}

/* -------------------------
   6b) Minimum Pulley Chart - TABLET (768px - 1024px)
   ------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
  body.single-belt .minimum-pulley-chart {
    font-size: 13px;
  }

  body.single-belt .minimum-pulley-chart th,
  body.single-belt .minimum-pulley-chart td {
    padding: 8px 10px;
  }

  /* REPEAT: Force all columns visible on tablet */
  body.single-belt .minimum-pulley-chart .metric-units,
  body.single-belt .minimum-pulley-chart .imperial-units {
    display: table-cell !important;
    visibility: visible !important;
  }
}

/* -------------------------
   6c) Minimum Pulley Chart - MOBILE (< 768px)
   CRITICAL SECTION - Forces ALL columns visible
   ------------------------- */
@media (max-width: 767px) {
  /* Wrapper allows horizontal scroll if table is too wide */
  body.single-belt .minimum-pulley-chart-container,
  body.single-belt .elementor-widget-container:has(.minimum-pulley-chart) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin-left: -5px;
    margin-right: -5px;
    padding-left: 5px;
    padding-right: 5px;
  }

  /* Reduce font size and padding for mobile */
  body.single-belt .minimum-pulley-chart {
    font-size: 12px;
    min-width: 320px; /* Ensure minimum width to fit all columns */
  }

  body.single-belt .minimum-pulley-chart th,
  body.single-belt .minimum-pulley-chart td {
    padding: 6px 8px;
    display: table-cell !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* CRITICAL MOBILE OVERRIDE: Force metric column visible */
  body.single-belt .minimum-pulley-chart .metric-units,
  body.single-belt .minimum-pulley-chart th.metric-units,
  body.single-belt .minimum-pulley-chart td.metric-units,
  body.single-belt .minimum-pulley-chart .metric-units.min-pulley-dia-header,
  body.single-belt .minimum-pulley-chart .metric-units.min-pulley-dia {
    display: table-cell !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
    position: static !important;
    clip: auto !important;
    height: auto !important;
  }

  /* CRITICAL MOBILE OVERRIDE: Force imperial column visible */
  body.single-belt .minimum-pulley-chart .imperial-units,
  body.single-belt .minimum-pulley-chart th.imperial-units,
  body.single-belt .minimum-pulley-chart td.imperial-units,
  body.single-belt .minimum-pulley-chart .imperial-units.min-pulley-dia-header,
  body.single-belt .minimum-pulley-chart .imperial-units.min-pulley-dia {
    display: table-cell !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
    position: static !important;
    clip: auto !important;
    height: auto !important;
  }

  /* Header text can wrap on mobile if needed */
  body.single-belt .minimum-pulley-chart thead th {
    white-space: normal;
    font-size: 11px;
    line-height: 1.3;
  }

  /* Keep header text abbreviated for mobile */
  body.single-belt .minimum-pulley-chart .min-pulley-dia-header {
    min-width: 60px;
  }

  /* Tension rating column adjustments */
  body.single-belt .minimum-pulley-chart .tension-rating {
    min-width: 70px;
    font-size: 11px;
  }
}

/* -------------------------
   6d) Minimum Pulley Chart - SMALL MOBILE (< 480px)
   Further optimization for very small screens
   ------------------------- */
@media (max-width: 480px) {
  body.single-belt .minimum-pulley-chart {
    font-size: 11px;
    min-width: 300px;
  }

  body.single-belt .minimum-pulley-chart th,
  body.single-belt .minimum-pulley-chart td {
    padding: 5px 6px;
    display: table-cell !important;
    visibility: visible !important;
  }

  body.single-belt .minimum-pulley-chart thead th {
    font-size: 10px;
  }

  /* Still force ALL columns visible */
  body.single-belt .minimum-pulley-chart .metric-units,
  body.single-belt .minimum-pulley-chart .imperial-units {
    display: table-cell !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

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

/* =========================================================
   8) FORCE MINIMUM CONTENT PADDING - SINGLE BELT
   Ensures at least 10px left/right at all viewport sizes
   ========================================================= */

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

/* Inner widgets must respect the rail */
body.single-belt .elementor-widget-container {
  padding-left: max(10px, var(--padding-left, 0px)) !important;
  padding-right: max(10px, var(--padding-right, 0px)) !important;
  box-sizing: border-box !important;
}

/* =========================================================
   9) GLOBAL OVERRIDE FOR UNIT VISIBILITY
   In case minimum-pulley-charts.css is hiding units globally
   ========================================================= */

/* These selectors target any rules that might hide metric/imperial
   units based on a global toggle. For single-belt pages, we always
   want BOTH unit systems visible in the pulley chart. */

body.single-belt table.minimum-pulley-chart .metric-units {
  display: table-cell !important;
  visibility: visible !important;
}

body.single-belt table.minimum-pulley-chart .imperial-units {
  display: table-cell !important;
  visibility: visible !important;
}

/* Override any :not() or nth-child selectors that might hide columns */
body.single-belt .minimum-pulley-chart tr > *:nth-child(3) {
  display: table-cell !important;
  visibility: visible !important;
}

/* Ensure table elements don't get hidden via attribute selectors */
body.single-belt .minimum-pulley-chart [class*="metric"],
body.single-belt .minimum-pulley-chart [class*="units"] {
  display: table-cell !important;
  visibility: visible !important;
}

/* =========================================================
   END OF SINGLE BELT STYLES
   ========================================================= */