.faq-item {
  background-color: #dadada;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid #c4c4c4;
  border-left: 4px solid #3789AD;
  border-radius: 24px;
  margin-bottom: 12px;
  max-width: 100%;
}

.faq-item summary {
  font-weight: bold;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 14px 20px;
  box-sizing: border-box;
  border-radius: 50px;
  transition: all 0.2s ease;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-icon {
  width: 10px;
  height: 10px;
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.3s ease;
  transform: rotate(-90deg);
}

.faq-icon path {
  stroke: currentColor;
}

.faq-item.expanded .faq-icon {
  transform: rotate(0deg);
}

.faq-answer {
  padding: 0 20px;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}

.faq-item[open] .faq-answer {
  padding: 0 20px 16px;
  max-height: 500px;
  opacity: 1;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

/* Override global article ul/ol margin for FAQ lists - multiple selectors for higher specificity */
.main-content article section .faq-answer ul:last-child,
.main-content article section .faq-answer ol:last-child,
.main-content article .faq-answer ul:last-child,
.main-content article .faq-answer ol:last-child,
.faq-answer ul:last-child,
.faq-answer ol:last-child {
  margin-bottom: 0 !important;
}

/* Also override all ul/ol inside faq-answer, not just last-child */
.main-content article section .faq-answer ul,
.main-content article section .faq-answer ol,
.main-content article .faq-answer ul,
.main-content article .faq-answer ol {
  margin-bottom: 0 !important;
}

/* Inline code styling for FAQ sections - slightly lighter than FAQ background */
/* Only apply to inline code, not code inside pre blocks or command blocks */
.faq-answer p code,
.faq-answer li code,
.faq-answer td code,
.faq-answer th code {
  background-color: #e7e7e7 !important;
  border: 1px solid #d0d0d0 !important;
  border-radius: 8px !important;
  padding: 0.2em 0.4em !important;
}

/* Remove styling from code inside command blocks in FAQ */
.faq-answer .single-line-copyable-code code,
.faq-answer .code-block code,
.faq-answer pre code {
  background: none !important;
  border: none !important;
  padding: 0 !important;
}
