/* FAQ page — page-specific styles only.
   Shared header/nav/sidebar/footer/buttons live in Resources/css/shared.css */

header { width: 100%; height: 96px; position: relative; background: var(--color-surface); }

.title {
    width: min(90%, 700px);
    margin: var(--space-9) auto var(--space-7);
    text-align: center;
}
.title h1 { font-size: var(--fs-2xl); margin-bottom: var(--space-4); }
.title h5 { font-weight: var(--fw-regular); color: var(--color-ink-700); line-height: 1.7; }

.container { width: min(90%, 760px); margin: 0 auto var(--space-9); }

.faq-list { display: flex; flex-direction: column; gap: var(--space-3); }

.faq-item {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: var(--space-4) var(--space-5);
    transition: box-shadow var(--duration-base) ease;
}
.faq-item:hover { box-shadow: var(--shadow-lift); }
.faq-item__q {
    cursor: pointer;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-md);
    color: var(--color-ink-900);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::after {
    content: '+';
    color: var(--color-gold-600);
    font-size: var(--fs-lg);
    font-weight: var(--fw-regular);
    margin-left: var(--space-4);
    transition: transform .2s ease;
}
.faq-item[open] .faq-item__q::after { transform: rotate(45deg); }
.faq-item__a {
    color: var(--color-ink-700);
    line-height: 1.7;
    margin-top: var(--space-3);
}

@media (max-width: 780px) {
    header { height: 64px; margin-top: 64px; }
    .title { margin-top: var(--space-6); }
}