/* FAQ page-specific styles (kept minimal, leveraging base.css) */

.faq-hero {
  background: linear-gradient(135deg, color-mix(in oklab, var(--color-danger) 16%, transparent), color-mix(in oklab, var(--color-primary) 12%, transparent));
  padding-block: var(--space-14);
}
.faq-hero-inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-10); align-items: center; }
.faq-hero-copy p { color: var(--gray-700); }
.faq-hero-media img { border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); }

.faq-search { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); margin-top: var(--space-5); }

.faq-quick-nav { margin-top: var(--space-4); }
.quick-list { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.quick-list a { display: inline-flex; align-items: center; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-full); color: var(--color-text); background: var(--color-surface); }
.quick-list a:hover { text-decoration: none; outline: none; box-shadow: var(--shadow-md); }

.section { padding-block: var(--space-14); }
.section-intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }

.howto-list { counter-reset: step; display: grid; gap: 10px; list-style: none;padding: 0; }
.howto-list li { position: relative; padding-left: 40px; }
.howto-list li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: var(--radius-full);
  background: var(--color-primary); color: #fff; display: inline-grid; place-items: center; font-weight: 800; box-shadow: var(--shadow-md);
}

.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.faq-item { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.faq-item[open] { box-shadow: var(--shadow-lg); }

.faq-item summary { list-style: none; cursor: pointer; font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-weight: 800; color: var(--color-primary); transition: transform var(--transition-base) var(--ease-in-out); }
.faq-item[open] summary::after { content: "–"; transform: rotate(180deg); }

.faq-content { margin-top: var(--space-3); color: var(--gray-700); }

.faq-copy { appearance: none; border: 1px solid var(--color-border); background: transparent; color: var(--gray-700); padding: 6px 10px; border-radius: var(--radius-sm); font-weight: 600; }
.faq-copy:hover { box-shadow: var(--shadow-md); }

.faq-bulk-actions { display: inline-flex; gap: var(--space-3); }

.faq-figure { margin-top: var(--space-8); }
.faq-figure img { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }

.resource-list { display: grid; gap: 10px; }
.cta-wrap { margin-top: var(--space-6); display: inline-flex; gap: var(--space-4); }

.feedback-actions { margin-top: var(--space-4); display: inline-flex; gap: var(--space-3); }

/* Empty state */
#faq-empty { color: var(--gray-600); margin-top: var(--space-5); }

/* Responsive */
@media (max-width: 1024px) {
  .faq-hero-inner { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; }
}