/* ==========================================================================
   Great Dubai — FAQ accordions
   --------------------------------------------------------------------------
   The project grew four different FAQ markups:

     1. .new-faq-*                     (shared partial + most cars pages)  <- reference
     2. .faq-list > .faq-item > button.faq-q + .faq-a   (property, jobs index)
     3. ul.accordion-box > li.accordion > .acc-btn + .acc-content  (jobs pages)
     4. .accordionns > input + .box > .box-title + .box-content    (blog details)

   This file leaves each one's open/close mechanism alone (some are pure CSS,
   some are jQuery) and only normalises the LOOK so every portal's FAQ reads
   the same: 780px column, hairline dividers, 16px/700 question, 15px/1.6
   answer, purple accent.

   Cross-browser notes: only long-supported properties are used; vendor
   prefixes are included for user-select (Safari) and appearance (Safari/FF).
   ========================================================================== */

:root {
  --gd-faq-ink: #18122B;
  --gd-faq-body: #4b5563;
  --gd-faq-line: #e8e8f0;
  --gd-faq-accent: #7E22CE;
  --gd-faq-width: 780px;
}

/* ---------- shared: the column ------------------------------------------ */
.faq-list,
.accordion-box,
.accordionns {
  max-width: var(--gd-faq-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  list-style: none;
}

/* ---------- shared: FAQ section heading ---------------------------------
   Every FAQ <h2> across the portals carries .gd-faq-title (added in the
   blade markup) so they can be matched directly. We do NOT style
   .sec-title / .sec-head here - those classes are shared with non-FAQ
   sections ("Recent News Articles", "Featured Jobs", ...), and CSS cannot
   scope to "the heading before an accordion" without :has(), which is not
   safe cross-browser.

   !important is needed because several of these headings wrap their text in
   <b style="font-size:22px"> or similar inline styling. */
.gd-faq-title {
  display: block;
  margin: 0 0 2.5rem !important;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  color: var(--gd-faq-ink) !important;
  text-align: center !important;
}

/* the inline-styled <b>/<strong>/<span> wrappers must follow the h2 */
.gd-faq-title b,
.gd-faq-title strong,
.gd-faq-title span,
.gd-faq-title font {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;
}

/* ---------- variant 2: .faq-list / button.faq-q -------------------------- */
.faq-list .faq-item {
  border-bottom: 1px solid var(--gd-faq-line);
  background: none;
  box-shadow: none;
}

.faq-list .faq-item:first-child {
  border-top: 1px solid var(--gd-faq-line);
}

.faq-list .faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: 100%;
  margin: 0;
  padding: 1.35rem 0;
  background: none;
  border: 0;
  text-align: left;
  font-size: 16px;
  font-weight: 700;
  color: var(--gd-faq-ink);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
  transition: color 0.2s ease;
}

.faq-list .faq-q:hover {
  color: var(--gd-faq-accent);
}

.faq-list .faq-q svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--gd-faq-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s ease-in-out;
}

.faq-list .faq-item.active .faq-q svg,
.faq-list .faq-item.open .faq-q svg,
.faq-list .faq-q[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.faq-list .faq-a {
  color: var(--gd-faq-body);
  font-size: 15px;
  line-height: 1.6;
}

.faq-list .faq-a p {
  margin: 0 0 8px 0;
}

/* ---------- variant 3: ul.accordion-box (jQuery theme accordion) --------- */
.accordion-box .accordion.block,
.accordion-box > li {
  border: 0;
  border-bottom: 1px solid var(--gd-faq-line);
  background: none;
  box-shadow: none;
  margin: 0;
}

.accordion-box > li:first-child {
  border-top: 1px solid var(--gd-faq-line);
}

.accordion-box .acc-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.35rem 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--gd-faq-ink);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  background: none;
  border: 0;
  transition: color 0.2s ease;
}

.accordion-box .acc-btn:hover,
.accordion-box .acc-btn.active {
  color: var(--gd-faq-accent);
}

.accordion-box .acc-btn .icon {
  position: static;
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1;
  color: var(--gd-faq-accent);
  background: none;
  border: 0;
  transition: transform 0.25s ease-in-out;
}

.accordion-box .acc-btn.active .icon {
  transform: rotate(45deg);
}

.accordion-box .acc-content {
  background: none;
  border: 0;
}

.accordion-box .acc-content .content {
  padding: 0 0 1.25rem 0;
  background: none;
  border: 0;
  color: var(--gd-faq-body);
  font-size: 15px;
  line-height: 1.6;
}

.accordion-box .acc-content .content p {
  margin: 0 0 8px 0;
  color: var(--gd-faq-body);
  font-size: 15px;
  line-height: 1.6;
}

/* ---------- variant 4: .accordionns (checkbox + .box) -------------------- */
.accordionns .box {
  background: none;
  box-shadow: none;
  border: 0;
  border-bottom: 1px solid var(--gd-faq-line);
  border-radius: 0;
}

.accordionns .box:first-of-type {
  border-top: 1px solid var(--gd-faq-line);
}

.accordionns .box-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.35rem 0;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--gd-faq-ink);
  background: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: color 0.2s ease;
}

.accordionns .box-title:hover {
  color: var(--gd-faq-accent);
}

.accordionns .box-content {
  padding: 0 0 1.25rem 0;
  color: var(--gd-faq-body);
  font-size: 15px;
  line-height: 1.6;
  background: none;
}

.accordionns .box-content p {
  margin: 0 0 8px 0;
}

/* ---------- shared responsive step-down ---------------------------------- */
@media (max-width: 768px) {
  .gd-faq-title {
    font-size: 24px !important;
    margin-bottom: 1.75rem !important;
  }

  .faq-list .faq-q,
  .accordion-box .acc-btn,
  .accordionns .box-title {
    font-size: 15px;
    padding: 1.1rem 0;
  }
}