/* =========================================
   FAQ PAGE (#faq, faq.js): questions grouped by area, each answer a .calc-explain card
   ========================================= */

.faq-page { max-width: 1100px; }
.faq-subtitle { margin-top: 4px; font-size: 0.88rem; color: var(--text-secondary); }
.faq-loading { padding: 40px 0; text-align: center; color: var(--text-secondary); font-size: 0.9rem; }

.faq-search-wrap { position: relative; max-width: 460px; margin-bottom: 24px; }
.faq-search-wrap svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.faq-search-wrap .faq-search { width: 100%; height: 40px; padding: 0 14px 0 38px; border-radius: 10px; font-size: 0.88rem; }

.faq-section { margin-bottom: 28px; }
.faq-section-title {
  margin-bottom: 10px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-secondary);
}
.faq-section .calc-explain { margin-bottom: 10px; scroll-margin-top: calc(var(--topbar-height) + 16px); }
.faq-empty { padding: 30px 0; text-align: center; color: var(--text-secondary); font-size: 0.9rem; }

/* Brief highlight on the answer a page link jumped to */
.calc-explain.faq-flash { animation: faq-flash 1.6s ease-out; }
@keyframes faq-flash {
  0%, 30% { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
  100% { border-color: var(--border-color); box-shadow: none; }
}