/* FAQ Page Styles — PolskaGameCenter (Towaga: Among Shadows) */

.faq-hero {
  margin-top: var(--space-8);
}

.faq-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-6);
  align-items: center;
}

@media (max-width: 960px) {
  .faq-hero-grid { grid-template-columns: 1fr; }
}

.faq-hero-copy p { color: var(--color-text-secondary); }

.faq-hero-cta { display: flex; gap: var(--space-4); margin-top: var(--space-4); flex-wrap: wrap; }

.breadcrumb { margin-top: var(--space-6); }
.breadcrumb ol { display: flex; gap: var(--space-2); align-items: center; color: var(--color-text-muted); }
.breadcrumb li + li::before { content: '/'; margin: 0 var(--space-2); color: var(--color-neutral-500); }

.faq-search { margin-top: var(--space-8); }
.faq-search-controls { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; }
.faq-search-actions { display: inline-flex; gap: var(--space-3); }

.faq-section { margin-top: var(--space-8); }

.faq-grid { margin-top: var(--space-4); }

.faq-list { display: grid; gap: var(--space-3); }

.faq-steps { display: grid; gap: var(--space-3); padding-left: var(--space-4); }
.faq-steps li { list-style: decimal; margin-left: var(--space-4); }

.faq-qa { display: grid; gap: var(--space-3); }

.faq-item {
  background-color: var(--color-background-elevated);
  border: 1px solid var(--color-neutral-700);
  border-radius: var(--radius-base);
  padding: var(--space-3) var(--space-4);
}

.faq-item[open] { box-shadow: var(--shadow-base); border-color: var(--color-primary); }

.faq-q { font-weight: var(--font-weight-semibold); cursor: pointer; }
.faq-a { margin-top: var(--space-3); color: var(--color-text-secondary); }

.faq-hero-sub { margin-top: var(--space-2); }

/* Small helpers */
.gap-6 { gap: var(--space-6); }
.items-center { align-items: center; }

/* Smooth animation for details */
.faq-item > .faq-a { transition: opacity var(--transition-base); }
.faq-item[open] > .faq-a { opacity: 1; }

/* Search highlight (basic) */
mark.faq-hit { background: var(--color-primary-glow); color: var(--color-primary-light); border-radius: var(--radius-sm); padding: 0 .2em; }