/* Page-only FAQ styles (simple, accessible) */
.page-faq{margin:20px 0;padding:20px;border-radius:12px;background:var(--card-bg,#fff);border:1px solid rgba(2,6,23,0.04)}
/* Force visible white text for FAQ title — overrides parent theme's
   `.section-title { -webkit-background-clip: text; color: transparent }` rule. */
.page-faq .section-header{display:flex;justify-content:center;align-items:center}
.page-faq .section-title{display:inline-block;padding:6px 14px;border-radius:999px;background:linear-gradient(90deg,#06b6d4 0%,#60a5fa 60%);color:#ffffff !important;-webkit-text-fill-color:#ffffff !important;font-weight:800;box-shadow:0 8px 24px rgba(2,6,23,0.18);text-shadow:0 2px 6px rgba(2,6,23,0.35);border:1px solid rgba(255,255,255,0.06);-webkit-background-clip:padding-box !important;background-clip:padding-box !important;position:relative;z-index:1;-webkit-font-smoothing:antialiased;transform:translateY(4px);margin-top:4px;margin-bottom:8px;transition:transform .18s cubic-bezier(.2,.8,.2,1)}
@media (max-width:720px){
  .page-faq .section-title{transform:translateY(3px);margin-top:3px;margin-bottom:6px}
}
.page-faq .faq-content{max-width:980px;margin:12px auto;color:var(--muted,#6b7280)}
.page-faq details.faq-item{margin-bottom:12px;border-radius:10px;padding:0}
.page-faq summary{cursor:pointer;padding:12px 14px;font-weight:700;display:block;border-radius:8px;background:transparent;border:1px solid rgba(2,6,23,0.03)}

/* homepage FAQ uses .faq rather than .page-faq; ensure opened items show overflow */
#faq .faq-item, .page-faq .faq-item{overflow:hidden;}
#faq .faq-item.opened, .page-faq .faq-item.opened{overflow:visible;}
#faq .faq-item .faq-body, #faq [itemprop="acceptedAnswer"], #faq [itemprop="text"] { max-height: none !important; }

.page-faq summary:focus{outline:2px solid rgba(59,130,246,0.12);outline-offset:3px}
.page-faq .faq-body{padding:12px 14px;border-left:3px solid rgba(2,6,23,0.02);background:transparent;color:var(--text,#0b1220);}
.page-faq details[open] summary{background:rgba(6,182,212,0.03)}
@media (max-width:720px){ .page-faq .faq-content{padding:0 8px} }

/* mobile: dark blue/green gradient background for FAQ */
@media (max-width:600px){
  .page-faq, #faq { background: linear-gradient(135deg, #0a0f1c 0%, #0a1c1f 40%, #10302a 100%); }
  .page-faq .faq-body, #faq .faq-body, #faq [itemprop="text"] { color: #e0e7ff; }
}