/* ========= FAQ (Schema FAQ) — Modern Theme-Integrated Design ========= */

/* Default Light Mode Variables - More subtle colors */
:root {
  --faq-accent: #007cba;           /* professional blue */
  --faq-border: rgba(0,0,0,0.1);   /* subtle border */
  --faq-hover-bg: rgba(0,124,186,0.05); /* very light blue tint */
  --faq-shadow: rgba(0,0,0,0.08);  /* softer shadow */
  --faq-radius: 8px;               /* modern radius */
}

/* Dark Mode Variables */
[data-theme="dark"] {
  --faq-accent: #4a9eff !important;
  --faq-border: rgba(255,255,255,0.1) !important;
  --faq-hover-bg: rgba(74,158,255,0.08) !important;
  --faq-shadow: rgba(0,0,0,0.3) !important;
}

/* System dark mode fallback */
@media (prefers-color-scheme: dark) {
  :root {
    --faq-accent: #4a9eff;
    --faq-border: rgba(255,255,255,0.1);
    --faq-hover-bg: rgba(74,158,255,0.08);
    --faq-shadow: rgba(0,0,0,0.3);
  }
}

/* Override system dark when theme is light */
[data-theme="default"] {
  --faq-accent: #007cba !important;
  --faq-border: rgba(0,0,0,0.1) !important;
  --faq-hover-bg: rgba(0,124,186,0.05) !important;
  --faq-shadow: rgba(0,0,0,0.08) !important;
}

/* Main FAQ Container - Minimal styling to blend with content */
.single-post article :where(.entry-content, .post-content, .single-content, .content-entry, .the-content, .post-inner) .schema-faq {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  width: 100% !important;
  margin: 2rem 0 !important;
  box-shadow: none !important;
  font-family: inherit !important;
}

/* FAQ Section Spacing */
.single-post article :where(.entry-content, .post-content, .single-content, .content-entry, .the-content, .post-inner) .schema-faq-section {
  margin-bottom: 1rem !important;
}

.single-post article :where(.entry-content, .post-content, .single-content, .content-entry, .the-content, .post-inner) .schema-faq-section:last-child {
  margin-bottom: 0 !important;
}

/* Question Styling - Clean and minimal */
.single-post article :where(.entry-content, .post-content, .single-content, .content-entry, .the-content, .post-inner) .schema-faq-question {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 1rem !important;
  padding: 1.25rem !important;
  background: transparent !important;
  color: inherit !important;
  border: 1px solid var(--faq-border) !important;
  border-radius: var(--faq-radius) !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  font-size: 1.05em !important;
  line-height: 1.5 !important;
  transition: all 0.2s ease !important;
  position: relative !important;
  outline: none !important;
}

/* Question Hover State */
.single-post article :where(.entry-content, .post-content, .single-content, .content-entry, .the-content, .post-inner) .schema-faq-question:hover {
  background: var(--faq-hover-bg) !important;
  border-color: var(--faq-accent) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px var(--faq-shadow) !important;
}

/* Focus State for Accessibility */
.single-post article :where(.entry-content, .post-content, .single-content, .content-entry, .the-content, .post-inner) .schema-faq-question:focus-visible {
  outline: 2px solid var(--faq-accent) !important;
  outline-offset: 2px !important;
}

/* Modern Arrow Icon */
.single-post article :where(.entry-content, .post-content, .single-content, .content-entry, .the-content, .post-inner) .schema-faq-question::after {
  content: '+' !important;
  font-size: 1.5rem !important;
  color: var(--faq-accent) !important;
  transition: transform 0.2s ease !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  min-width: 1.5rem !important;
  text-align: center !important;
}

/* Active State - Arrow becomes minus */
.single-post article :where(.entry-content, .post-content, .single-content, .content-entry, .the-content, .post-inner) .schema-faq-question.active::after {
  content: '−' !important;
  transform: none !important;
}

/* Active Question State */
.single-post article :where(.entry-content, .post-content, .single-content, .content-entry, .the-content, .post-inner) .schema-faq-question.active {
  border-color: var(--faq-accent) !important;
  background: var(--faq-hover-bg) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Answer Styling - Seamless connection */
.single-post article :where(.entry-content, .post-content, .single-content, .content-entry, .the-content, .post-inner) .schema-faq-answer {
  background: transparent !important;
  color: inherit !important;
  opacity: 0.9 !important;
  border: 1px solid var(--faq-border) !important;
  border-top: none !important;
  margin: 0 !important;
  border-radius: 0 0 var(--faq-radius) var(--faq-radius) !important;
  padding: 0 1.25rem !important;
  overflow: hidden !important;
  max-height: 0 !important;
  transition: max-height 0.3s ease, padding-top 0.3s ease, padding-bottom 0.3s ease !important;
  font-size: 0.95em !important;
  line-height: 1.6 !important;
}

/* Answer Content Styling */
.single-post article :where(.entry-content, .post-content, .single-content, .content-entry, .the-content, .post-inner) .schema-faq-answer p {
  margin: 0 !important;
  padding: 0 !important;
}

.single-post article :where(.entry-content, .post-content, .single-content, .content-entry, .the-content, .post-inner) .schema-faq-answer p:not(:last-child) {
  margin-bottom: 0.75rem !important;
}

/* When Answer is Open */
.single-post article :where(.entry-content, .post-content, .single-content, .content-entry, .the-content, .post-inner) .schema-faq-question.active + .schema-faq-answer {
  max-height: 1000px !important;
  padding-top: 1.25rem !important;
  padding-bottom: 1.25rem !important;
  border-color: var(--faq-accent) !important;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .single-post article :where(.entry-content, .post-content, .single-content, .content-entry, .the-content, .post-inner) .schema-faq-question,
  .single-post article :where(.entry-content, .post-content, .single-content, .content-entry, .the-content, .post-inner) .schema-faq-answer,
  .single-post article :where(.entry-content, .post-content, .single-content, .content-entry, .the-content, .post-inner) .schema-faq-question::after {
    transition: none !important;
  }
  
  .single-post article :where(.entry-content, .post-content, .single-content, .content-entry, .the-content, .post-inner) .schema-faq-question:hover {
    transform: none !important;
  }
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
  .single-post article :where(.entry-content, .post-content, .single-content, .content-entry, .the-content, .post-inner) .schema-faq-question {
    padding: 1rem !important;
    font-size: 1rem !important;
  }
  
  .single-post article :where(.entry-content, .post-content, .single-content, .content-entry, .the-content, .post-inner) .schema-faq-answer {
    padding: 0 1rem !important;
  }
  
  .single-post article :where(.entry-content, .post-content, .single-content, .content-entry, .the-content, .post-inner) .schema-faq-question.active + .schema-faq-answer {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
}