/* plugins/faq/public/assets/css/home-section.css */
/* Accordion (shared by homepage and /faq) + homepage layout. */

.faq-list { display: grid; gap: 12px; }
.faq-item {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.faq-item[open] { border-color: rgba(var(--accent-rgb), 0.35); box-shadow: var(--shadow); }
.faq-item summary {
    position: relative;
    display: block;
    padding: 20px 60px 20px 24px;
    font-weight: 600;
    font-size: 1.02rem;
    cursor: pointer;
    list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "";
    position: absolute;
    right: 24px;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -7px;
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(45deg);
    transition: transform 0.2s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 16px; }
.faq-answer { padding: 0 24px 22px; color: var(--text-muted); }
.faq-answer p { margin: 0; }

.faq-home-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: start; }
.faq-home .section-head { margin-bottom: 0; position: sticky; top: calc(var(--header-h) + 24px); }
.faq-home .section-head .btn { margin-top: 8px; }

@media (max-width: 900px) {
    .faq-home-grid { grid-template-columns: 1fr; gap: 28px; }
    .faq-home .section-head { position: static; }
}
@media (max-width: 640px) {
    .faq-item summary { padding: 18px 52px 18px 18px; font-size: 0.98rem; }
    .faq-answer { padding: 0 18px 18px; }
    .faq-item summary::after { right: 20px; }
}