/* ============================================================
   AIntelligize – Accordion Styles (scoped to .ssseo-accordion)
   ============================================================ */

.ssseo-accordion {
  --hover-background: #000;
  --item-background: #136B92;
  --item-text-color: #FFFFFF;
  --item-radius: 0.75rem;
  --item-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  --item-border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Accordion wrapper */
.ssseo-accordion {
  border: var(--item-border);
  border-radius: var(--item-radius);
  box-shadow: var(--item-shadow);
  overflow: visible;
  max-width: 100%;
  box-sizing: border-box;
}

/* Clip rounded corners per-item instead of on the wrapper */
.ssseo-accordion .accordion-item:first-of-type {
  border-top-left-radius: var(--item-radius);
  border-top-right-radius: var(--item-radius);
  overflow: hidden;
}
.ssseo-accordion .accordion-item:last-of-type {
  border-bottom-left-radius: var(--item-radius);
  border-bottom-right-radius: var(--item-radius);
  overflow: hidden;
}

/* Accordion header button */
.ssseo-accordion .accordion-button {
  background: var(--item-background) !important;
  color: var(--item-text-color) !important;
  font-weight: bold;
  border: none;
  border-radius: 0 !important;
  transition: background-color 0.2s ease-in-out;
  box-shadow: none !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  width: 100% !important;
  min-width: 0 !important;
  padding-right: 3.5rem !important;
  text-align: left !important;
}

/* Hover & focus effects */
.ssseo-accordion .accordion-button:hover,
.ssseo-accordion .accordion-button:focus {
  background-color: var(--hover-background) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Accordion item container */
.ssseo-accordion .accordion-item {
  border-bottom: var(--item-border);
}

/* Rounded corners for first & last button (background fill) */
.ssseo-accordion .accordion-item:first-of-type .accordion-button {
  border-top-left-radius: var(--item-radius) !important;
  border-top-right-radius: var(--item-radius) !important;
}

.ssseo-accordion .accordion-item:last-of-type .accordion-button.collapsed {
  border-bottom-left-radius: var(--item-radius) !important;
  border-bottom-right-radius: var(--item-radius) !important;
}

/* Accordion body content */
.ssseo-accordion .accordion-body {
  background: #ffffff;
  color: #333333;
  padding: 1rem 1.25rem;
}

/* SSSEO accordion header - fix: text span must be able to shrink */
.ssseo-accordion-header .accordion-button {
  display: flex !important;
  align-items: center !important;
}

/* The text content inside the button must shrink below its natural width */
.ssseo-accordion-header .accordion-button > span,
.ssseo-accordion-header .accordion-button > .accordion-button-text {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* FAQ heading colour override - double-class + !important beats theme & Elementor global rules */
h2.text-center.myls-faq-heading,
h2.myls-faq-heading,
h3.myls-service-faq-heading {
  color: var(--myls-faq-heading-color, inherit) !important;
}

/* ------------------------------------------------------------------
   Avada (and other BS3/4) legacy-collapse defeat.
   Avada ships Bootstrap 3/4 CSS: `.collapse{display:none}` +
   `.collapse.in{display:block}`. Bootstrap 5 opens with `.collapse.show`
   (not `.in`), so Avada's plain `.collapse{display:none}` re-hides the
   settled-open panel - the content flashes during the slide, then
   disappears. These rules restore the BS5 open/animating states with
   enough specificity (+ !important) to beat Avada's `.collapse` rule.
   Scoped to our accordion wrappers so no other theme collapse is touched.
   ------------------------------------------------------------------ */
.ssseo-accordion .accordion-collapse.show,
.myls-faq-accordion .accordion-collapse.show {
  display: block !important;
}
.ssseo-accordion .accordion-collapse.collapsing,
.myls-faq-accordion .accordion-collapse.collapsing {
  display: block !important;
}
