/*
 * Unified Breadcrumb Design - JobReady
 *
 * Overrides both theme breadcrumb (hook.php) and WooCommerce breadcrumb
 * to enforce a single consistent design across all pages:
 *   - Background: global primary color (#2682F9)
 *   - Text: center aligned, 26px heading
 *   - Fully responsive
 */

/* ============================================
   1. FORCE PRIMARY BLUE BACKGROUND
   Remove any background images / dark overlays
   set by per-page theme options or defaults.
   ============================================ */
.custom-breadcrumb {
  background-image: none !important;
  background-color: #2682F9 !important;
  margin-bottom: 0 !important;
}

/* Kill the dark overlay layer */
.custom-breadcrumb .breadcrumb-overlay {
  background-color: transparent !important;
}

/* ============================================
   2. CONTAINER - center-align everything
   ============================================ */
.custom-breadcrumb .breadcrumb-container-inner {
  text-align: center !important;
  padding: 40px 15px !important;
}

/* ============================================
   3. HEADING TITLE - 26px, white, centered
   ============================================ */
.custom-breadcrumb .heading-title {
  font-size: 26px !important;
  color: #fff !important;
  text-align: center !important;
  margin: 0 0 8px !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
  letter-spacing: 0.3px;
  word-wrap: break-word;
  -ms-word-wrap: break-word;
  display: block !important;
  float: none !important;
}

/* ============================================
   4. BREADCRUMB TRAIL (ol.breadcrumb)
   Center the trail links below the heading.
   ============================================ */
.custom-breadcrumb .breadcrumb {
  text-align: center !important;
  margin-bottom: 0 !important;
  padding: 0;
}

.custom-breadcrumb .breadcrumb li {
  float: none !important;
  display: inline-block !important;
  color: #fff;
  font-weight: 400!important;
}
.custom-breadcrumb .breadcrumb li:last-child {
    padding-right: 0;
    color: #d1f3ff;
}
.custom-breadcrumb .breadcrumb li:after {
    content: '>';
    left: -6px;
    color: #d1f3ff;
}
.custom-breadcrumb .breadcrumb a {
  color: #fff !important;
}

.custom-breadcrumb .breadcrumb a:hover {
  /* color: var(--e-global-color-830a821) !important; */
  color: #fff !important;
  text-decoration: underline !important;
}

/* Keep text-light heading white */
.custom-breadcrumb.text-light .heading-title {
  color: #fff !important;
}

/* ============================================
   5. OVERRIDE PER-PAGE ALIGNMENT CLASSES
   Theme can set text-left / text-right per page;
   force all to center.
   ============================================ */
.custom-breadcrumb.text-left .breadcrumb-container-inner {
  text-align: center !important;
}

.custom-breadcrumb.text-right .breadcrumb-container-inner {
  text-align: center !important;
}

/* ============================================
   6. RESPONSIVE BREAKPOINTS
   ============================================ */

/* Tablet and below (≤ 991px) */
@media (max-width: 991.98px) {
  .custom-breadcrumb .breadcrumb-container-inner {
    padding: 32px 15px !important;
  }
}

/* Mobile (≤ 767px) */
@media (max-width: 767.98px) {
  .custom-breadcrumb .breadcrumb-container-inner {
    padding: 28px 15px !important;
  }
  .custom-breadcrumb .heading-title {
    font-size: 24px !important;
  }
}

/* Small mobile (≤ 575px) */
@media (max-width: 575.98px) {
  .custom-breadcrumb .breadcrumb-container-inner {
    padding: 24px 15px !important;
  }
  .custom-breadcrumb .heading-title {
    font-size: 22px !important;
  }
  .custom-breadcrumb .breadcrumb {
    font-size: 13px !important;
  }
  .custom-breadcrumb .breadcrumb li {
    padding: 0 6px !important;
    font-size: 13px !important;
  }
}

/* ============================================
   7. HOME PAGE SPECIAL CASE
   Parent theme forces float:left + 18px on
   the home page breadcrumb title. Override it.
   ============================================ */
body.home.blog .title-layout-standard .custom-breadcrumb .heading-title {
  font-size: 26px !important;
  float: none !important;
  display: block !important;
  text-align: center !important;
  margin: 0 auto !important;
}

/* ============================================
   8. WOOCOMMERCE #breadcrumb FALLBACK
   In case a secondary WooCommerce #breadcrumb
   div is rendered somewhere on the page.
   ============================================ */
.woocommerce #breadcrumb {
  background-color: #2682F9 !important;
  text-align: center !important;
  padding: 40px 15px !important;
  color: #fff !important;
}

.woocommerce #breadcrumb a {
  color: rgba(255, 255, 255, 0.85) !important;
}

.woocommerce #breadcrumb a:hover {
  color: #fff !important;
}

/* Single product page breadcrumb margin reset */
.single-product .custom-breadcrumb {
  margin-bottom: 0 !important;
}