/* CookCase FAQ page-specific styles */

/* Layout */
.breadcrumbs { padding: var(--space-4) 0; color: var(--gray-700); }
.breadcrumbs ol { display: flex; gap: var(--space-2); align-items: center; font-size: var(--fs-sm); }
.breadcrumbs li+li::before { content: '\203A'; margin: 0 var(--space-2); color: var(--gray-500); }

.faq-hero { display: grid; gap: var(--space-8); align-items: center; padding-block: var(--space-12); }
.faq-hero__content { max-width: 720px; }
.faq-hero__media img { width: 100%; height: auto; object-fit: cover; }

.faq-search { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.faq-search__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.faq-results { color: var(--gray-700); font-size: var(--fs-sm); }

.faq-quicklinks { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.75rem; border-radius: var(--radius-pill); background: var(--gray-100); border: 1px solid var(--gray-200); font-size: var(--fs-sm); }
.chip:hover { background: var(--gray-200); }

.faq-sections { padding-block: var(--space-12); }
.faq-section { display: grid; gap: var(--space-4); margin-bottom: var(--space-12); }
.faq-section__media { max-width: 100%; }
.media-rounded img, .media-rounded picture, .media-rounded video {
    width: 100%;
}
/* Accordion */
details[data-faq] { background: var(--color-surface); border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 0; box-shadow: var(--shadow-sm); }

details[data-faq] + details[data-faq] { margin-top: var(--space-3); }

summary { list-style: none; cursor: pointer; padding: 1rem 3rem 1rem 1rem; font-weight: 600; position: relative; }
summary::-webkit-details-marker { display: none; }

/* Chevron */
details[data-faq] summary::after { content: '\f107'; /* fa-chevron-down */ font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%) rotate(0deg); transition: transform var(--duration-base) var(--ease-standard); color: var(--gray-700); }

details[open][data-faq] summary::after { transform: translateY(-50%) rotate(180deg); }

.faq-a { padding: 0 1rem 1rem 1rem; color: var(--gray-900); }
.faq-a p { margin: 0; }

/* CTA and back to top */
.faq-cta { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.back-to-top { margin-top: var(--space-8); display: flex; justify-content: center; }

/* Responsive */
@media (min-width: 960px) {
  .faq-hero { grid-template-columns: 1.2fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  details[data-faq] summary::after { transition: none; }
}

/* Filtered state */
[data-faq][hidden] { display: none !important; }