/* ===========================================================================
   Innocepts Solar - FAQ accordion
   One component for every FAQ on the site, replacing seven different
   hand-rolled versions. Light by default; add .faq-x--dark when the section
   sits on a dark background.
   =========================================================================== */

.faq-x {
  --faq-accent: #16a34a;
  --faq-accent-soft: #dcfce7;
  --faq-ink: #0f172a;
  --faq-muted: #475569;
  --faq-surface: #ffffff;
  --faq-line: #e6ebf1;
  --faq-ring: rgba(22, 163, 74, 0.35);

  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  text-align: left;
}

.faq-x-item {
  background: var(--faq-surface);
  border: 1px solid var(--faq-line);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.faq-x-item:hover {
  border-color: rgba(22, 163, 74, 0.45);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07);
}

.faq-x-item.is-open {
  border-color: var(--faq-accent);
  box-shadow: 0 10px 30px rgba(22, 163, 74, 0.12);
}

/* ---------- question ---------- */
.faq-x-q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  background: none;
  border: 0;
  margin: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--faq-ink);
  transition: background-color .2s ease;
}

.faq-x-q:hover { background: rgba(22, 163, 74, 0.04); }

.faq-x-q:focus-visible {
  outline: 3px solid var(--faq-ring);
  outline-offset: -3px;
  border-radius: 14px;
}

.faq-x-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.45;
  /* the old markup wrapped questions in <h3>; keep those looking identical */
  margin: 0;
}

.faq-x-text h3,
h3.faq-x-text { font-size: inherit; font-weight: inherit; line-height: inherit; margin: 0; color: inherit; }

.faq-x-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--faq-accent-soft);
  color: var(--faq-accent);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), background-color .25s ease, color .25s ease;
}

.faq-x-icon svg { width: 16px; height: 16px; display: block; }

.faq-x-item.is-open .faq-x-icon {
  transform: rotate(180deg);
  background: var(--faq-accent);
  color: #ffffff;
}

/* ---------- answer ----------
   Animating grid-template-rows from 0fr to 1fr gives a smooth open/close
   without having to measure the content height in JavaScript. */
.faq-x-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s cubic-bezier(.4, 0, .2, 1);
}

.faq-x-item.is-open .faq-x-a { grid-template-rows: 1fr; }

.faq-x-a > .faq-x-a-inner {
  overflow: hidden;
  min-height: 0;
}

.faq-x-a-inner > .faq-x-a-body {
  padding: 0 22px 22px 70px;
  color: var(--faq-muted);
  font-size: 1rem;
  line-height: 1.75;
}

.faq-x-a-body > :first-child { margin-top: 0; }
.faq-x-a-body > :last-child { margin-bottom: 0; }
.faq-x-a-body p { margin: 0 0 12px 0; color: inherit; }
.faq-x-a-body ul,
.faq-x-a-body ol { margin: 0 0 12px 0; padding-left: 20px; }
.faq-x-a-body li { margin-bottom: 6px; }
.faq-x-a-body a { color: var(--faq-accent); }
.faq-x-a-body strong { color: var(--faq-ink); }

/* ---------- dark sections ---------- */
.faq-x--dark {
  --faq-accent: #34d399;
  --faq-accent-soft: rgba(52, 211, 153, 0.16);
  --faq-ink: #ffffff;
  --faq-muted: rgba(255, 255, 255, 0.82);
  --faq-surface: rgba(255, 255, 255, 0.05);
  --faq-line: rgba(255, 255, 255, 0.14);
  --faq-ring: rgba(52, 211, 153, 0.55);
}

.faq-x--dark .faq-x-item:hover {
  border-color: rgba(52, 211, 153, 0.5);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.25);
}

.faq-x--dark .faq-x-item.is-open {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.faq-x--dark .faq-x-q:hover { background: rgba(255, 255, 255, 0.05); }
.faq-x--dark .faq-x-item.is-open .faq-x-icon { color: #06281c; }
.faq-x--dark .faq-x-a-body strong { color: #ffffff; }

/* ---------- small screens ---------- */
@media (max-width: 640px) {
  .faq-x { gap: 12px; }
  .faq-x-q { padding: 16px 16px; gap: 12px; }
  .faq-x-text { font-size: 0.98rem; }
  .faq-x-icon { width: 28px; height: 28px; }
  .faq-x-a-inner > .faq-x-a-body { padding: 0 16px 18px 16px; font-size: 0.95rem; }
}

/* ---------- respect a reduced-motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  .faq-x-item,
  .faq-x-q,
  .faq-x-icon,
  .faq-x-a { transition: none; }
}

/* Before faq.js runs, every answer is closed. If scripting is unavailable the
   answers would be unreachable, so open them all instead. */
.no-js .faq-x-a { grid-template-rows: 1fr; }
.no-js .faq-x-icon { display: none; }