/* ==========================================================================
   Direct Homes – FAQ
   JS:     Bootstrap 4 collapse (data-toggle="collapse", data-parent) – no custom JS
   ========================================================================== */

section.dh-faq {
  padding: 4.6rem 0 3.6rem;
  background: #fff;
  overflow: hidden; /* the illustration sticks out to the left */
}

.dh-faq .cs_gap_y_40 {
  row-gap: 40px;
}

.dh-faq .dh-sec-head {
  margin-bottom: 0;
}

/* Illustration */
.dh-faq__img {
  width: fit-content;
  max-width: 100%;
  margin-top: 10px;
  margin-left: -120px;
}

.dh-faq__img img {
  display: block;
  width: 100%;
  max-width: 620px;
  height: auto;
}

/* Accordion (Bootstrap 4 collapse – markup: .accordion > .dh-faq__item) */
.dh-faq__item {
  border-bottom: 1px solid var(--dh-sand);
}

.dh-faq__q {
  margin: 0;
}

.dh-faq__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 24px 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

/* No black box after a mouse click – keep a ring for keyboard users only */
.dh-faq__toggle:focus {
  outline: none;
  box-shadow: none;
}

.dh-faq__toggle:focus-visible .dh-faq__icon {
  box-shadow: 0 0 0 3px rgba(var(--dh-accent-rgb), 0.35);
}

.dh-faq__title {
  font-family: var(--dh-font-heading);
  font-size: clamp(18px, calc(16px + 0.35vw), 22px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--dh-primary);
  transition: color 0.25s ease;
}

.dh-faq__toggle:hover .dh-faq__title {
  color: var(--dh-accent);
}

/* Round +/− icon */
.dh-faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid var(--dh-sand);
  border-radius: 50%;
  background: transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.dh-faq__icon::before,
.dh-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--dh-primary);
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease, background-color 0.3s ease;
}

/* "+" made of two bars */
.dh-faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* open: the "+" turns 45° into a cross "×" on a green circle */
.dh-faq__toggle:not(.collapsed) .dh-faq__icon {
  border-color: var(--dh-primary);
  background: var(--dh-primary);
  transform: rotate(45deg);
}

.dh-faq__toggle:not(.collapsed) .dh-faq__icon::before,
.dh-faq__toggle:not(.collapsed) .dh-faq__icon::after {
  background: #fff;
}

.dh-faq__a {
  padding: 0 56px 24px 0;
  font-family: var(--dh-font-body);
  font-size: 15px;
  line-height: 1.7;
  color: #555;
}

/* Smoother open/close than Bootstrap's default 0.35s ease */
.dh-faq__list .collapsing {
  transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 991px) {
  .dh-faq__img {
    display: none;
  }

  .dh-faq__a {
    padding-right: 0;
  }
}