/* ==================================================
   FAQ ACCORDION
   Purpose:
   The question-and-answer component used on the homepage,
   the dedicated FAQ page and the tail of every service,
   technology, industry and location page.

   Built from <button> triggers and controlled regions
   rather than <details>, so the open/close behaviour,
   ARIA state and single-open logic in js/faq.js stay
   consistent across browsers. Without JavaScript every
   answer renders open and readable.
================================================== */

.faq-list {
  display: grid;
  gap: var(--s-3);
}

.faq-list--bordered {
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--surface);
}

/* ==================================================
   FAQ ITEM
================================================== */

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--surface);
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.faq-list--bordered .faq-item {
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
}

.faq-list--bordered .faq-item:last-child { border-bottom: none; }

.faq-item.is-open {
  border-color: var(--brand-200);
  box-shadow: var(--shadow-sm);
}

.faq-list--bordered .faq-item.is-open {
  border-color: transparent;
  border-bottom-color: var(--color-border);
  box-shadow: none;
  background-color: var(--surface-muted);
}

/* ==================================================
   QUESTION TRIGGER
================================================== */

.faq-item__question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-5) var(--s-6);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-snug);
  line-height: 1.45;
  color: var(--ink-800);
  text-align: left;
  transition: color var(--transition-fast);
}

.faq-item__question:hover { color: var(--brand-700); }
.faq-item.is-open .faq-item__question { color: var(--brand-700); }

/* Plus / minus indicator. */
.faq-item__indicator {
  position: relative;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  margin-top: 2px;
  border-radius: 50%;
  background-color: var(--surface-sunken);
  transition: background-color var(--transition-fast), transform var(--transition-normal);
}

.faq-item.is-open .faq-item__indicator {
  background-color: var(--brand-500);
  transform: rotate(180deg);
}

.faq-item__indicator::before,
.faq-item__indicator::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--ink-600);
  border-radius: 2px;
  transition: background-color var(--transition-fast), opacity var(--transition-fast);
}

.faq-item__indicator::before {
  width: 12px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.faq-item__indicator::after {
  width: 2px;
  height: 12px;
  transform: translate(-50%, -50%);
}

.faq-item.is-open .faq-item__indicator::before,
.faq-item.is-open .faq-item__indicator::after {
  background-color: #FFFFFF;
}

/* The vertical stroke disappears to turn the plus into a minus. */
.faq-item.is-open .faq-item__indicator::after { opacity: 0; }

/* ==================================================
   ANSWER REGION

   Animated with max-height rather than the
   grid-template-rows 0fr/1fr trick. That trick is
   tidier, but an `fr` track resolves against indefinite
   free space here and collapses to zero in some engines,
   which leaves the answer permanently closed. max-height
   is less elegant and completely dependable.

   The ceiling is deliberately far larger than any answer
   on the site; overflow stays hidden so nothing spills
   while the transition runs, and opacity carries the
   perceived timing so the slightly loose easing of an
   over-large max-height is not noticeable.
================================================== */

.faq-item__answer {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: max-height var(--transition-normal),
              opacity 180ms ease-out,
              visibility var(--transition-normal);
}

.faq-item.is-open .faq-item__answer {
  max-height: 80rem;
  opacity: 1;
  visibility: visible;
}

.faq-item__answer-inner {
  min-height: 0;
}

.faq-item__answer-body {
  padding: 0 var(--s-6) var(--s-5);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--ink-500);
  max-width: 72ch;
}

.faq-item__answer-body > * + * { margin-top: var(--s-4); }

.faq-item__answer-body a {
  text-decoration: underline;
  text-decoration-color: var(--brand-200);
  text-underline-offset: 0.16em;
}

/* No-JavaScript fallback: answers are open and the toggle chrome is hidden. */
.no-js .faq-item__answer {
  max-height: none;
  opacity: 1;
  visibility: visible;
}

.no-js .faq-item__indicator { display: none; }

/* ==================================================
   DARK VARIANT
================================================== */

.section--dark .faq-item {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

.section--dark .faq-item.is-open { border-color: rgba(78, 155, 255, 0.4); }
.section--dark .faq-item__question { color: #FFFFFF; }
.section--dark .faq-item__answer-body { color: var(--color-on-dark-muted); }

.section--dark .faq-item__indicator { background-color: rgba(255, 255, 255, 0.1); }
.section--dark .faq-item__indicator::before,
.section--dark .faq-item__indicator::after { background-color: #FFFFFF; }

/* ==================================================
   FAQ PAGE LAYOUT
   Category navigation beside the question list.
================================================== */

.faq-layout {
  display: grid;
  gap: clamp(2rem, 1.6rem + 2.4vw, 3.5rem);
  align-items: start;
}

@media (min-width: 960px) {
  .faq-layout { grid-template-columns: 250px minmax(0, 1fr); }

  .faq-layout__nav {
    position: sticky;
    top: calc(var(--header-height) + var(--s-6));
  }
}

.faq-category-nav { display: grid; gap: var(--s-1); }

.faq-category-nav__link {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--ink-600);
  border-left: 2px solid transparent;
  transition: background-color var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast);
}

.faq-category-nav__link:hover {
  background-color: var(--surface-muted);
  color: var(--brand-700);
}

.faq-category-nav__link.is-active {
  background-color: var(--brand-50);
  border-left-color: var(--brand-500);
  color: var(--brand-700);
}

.faq-group + .faq-group { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }

.faq-group__title {
  font-size: var(--fs-h3);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--color-border);
  scroll-margin-top: calc(var(--header-height) + var(--s-6));
}