/* ============================================================
   Bootstrap 5 Compatibility Layer
   Bridges BS4 → BS5 grid differences to preserve existing layout
   ============================================================ */

/* --- 1. Container max-width overrides ---
   BS5 default: sm=540 md=720 lg=960 xl=1140 xxl=1320
   Original theme uses max-width:1390px at >=1201px
   We keep the theme's container sizing intact */

@media screen and (min-width: 1201px) {
  #pxl-wapper .container {
    max-width: 1390px;
  }
}
@media screen and (max-width: 1200px) {
  #pxl-wapper .container {
    max-width: 100%;
  }
}

/* --- 2. BS4 .no-gutters backward compat ---
   BS5 removed .no-gutters in favor of .g-0
   We re-add .no-gutters so existing markup still works */

.no-gutters {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}
.no-gutters > .col,
.no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

/* --- 3. Gutter alignment ---
   BS4 uses fixed padding 15px, BS5 uses var(--bs-gutter-x) = 1.5rem (24px by default)
   Override to match BS4 behavior for existing layout */

.row {
  --bs-gutter-x: 30px;
  --bs-gutter-y: 0;
}

/* --- 4. Keep existing header container width --- */
#pxl-header-default .container {
  max-width: 1775px;
}

/* --- 5. Footer container full-width --- */
#pxl-footer-elementor .footer-elementor-inner > .container {
  max-width: 100%;
}

/* ============================================================
   Bootstrap 5 Accordion Integration
   Override pxl-accordion defaults so BS5 Collapse controls visibility
   ============================================================ */

/* Let BS5 control show/hide instead of pxl's display:none */
.pxl-accordion .accordion-collapse.pxl-accordion--content {
  display: block !important;
}
.pxl-accordion .accordion-collapse.pxl-accordion--content:not(.show) {
  display: none !important;
}

/* Reset BS5 accordion-button default styles to preserve pxl theme look */
.pxl-accordion .accordion-button.pxl-accordion-btn {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  box-shadow: none;
}
.pxl-accordion .accordion-button.pxl-accordion-btn:focus {
  box-shadow: none;
  outline: none;
}
.pxl-accordion .accordion-button.pxl-accordion-btn::after {
  display: none;
}

/* Reset BS5 accordion-item default styles */
.pxl-accordion .accordion-item {
  background-color: transparent;
  border: none;
}

/* Reset BS5 accordion-body padding to match theme */
.pxl-accordion .accordion-body {
  padding: 0;
}

/* Sync pxl active states with BS5 collapse states */
.pxl-accordion .pxl--item:has(.accordion-collapse.show) {
  /* auto-add active appearance */
}
.pxl-accordion .pxl--item:not(:has(.accordion-collapse.show)) {
  /* auto-remove active appearance */
}

/* Keep pxl-icon rotation for BS5-driven accordions */
.pxl-accordion1.style5 .pxl--item .accordion-button:not(.collapsed) ~ .pxl-icon--plus,
.pxl-accordion1.style5 .pxl--item:has(.accordion-collapse.show) .pxl-icon--plus {
  transform: translate(0, -50%) rotate(-90deg);
}

/* ============================================================
   Elementor → Bootstrap 5 Container Bridge
   .e-con-inner now uses BS5 .container for width control
   instead of Elementor --content-width
   ============================================================ */

/* Neutralise BS5 .container behaviour on .e-con-inner so Elementor's
   --content-width stays in control.  The .container class is kept only
   for future progressive use; it must not override existing layout. */
.e-con-inner.container {
  max-width: var(--content-width) !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  padding-inline-start: 0 !important;
  padding-inline-end: 0 !important;
}