/* ==========================================================================
   FAQ accordion (<details>/<summary>), home page. Loaded via $extra_css.
   Same system as styles-home.css: Jost (--mg-font), --mg-ink, --mg-green, --home-gap rhythm.
   The plans section above already ends with its own bottom padding, so the top padding here
   is the remainder: one --home-gap between the plan cards and this title.
   ========================================================================== */
.home-faq {
    padding: calc(var(--home-gap) - var(--mg-section-space-sm)) var(--mg-space-6) var(--mg-section-space-sm);
}

.faq-list {
    max-width: 760px;
    margin: var(--mg-space-10) auto 0;
    border-top: 1px solid var(--mg-line);
    font-family: var(--mg-font);
    color: var(--mg-ink);
}

.faq-item {
    border-bottom: 1px solid var(--mg-line);
}

.faq-item__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mg-space-6);
    padding: var(--mg-space-6) var(--mg-space-1);
    list-style: none;
    cursor: pointer;
    font: 500 var(--mg-fs-h4)/var(--mg-lh-h4) var(--mg-font);
    color: var(--mg-ink);
    border-radius: var(--mg-radius-sm);
}

.faq-item__q::-webkit-details-marker {
    display: none;
}

/* Drawn chevron: two ink borders, rotated; flips when open. */
.faq-item__q::after {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin-right: var(--mg-space-2);
    border-right: 2px solid rgba(var(--mg-ink-rgb), 0.6);
    border-bottom: 2px solid rgba(var(--mg-ink-rgb), 0.6);
    transform: translateY(-2px) rotate(45deg); /* optical centring of the rotated square */
    transition: transform 0.4s var(--mg-ease), border-color 0.25s var(--mg-ease);
}

.faq-item__q:hover::after,
.faq-item__q:focus-visible::after {
    border-color: var(--mg-ink);
}

.faq-item[open] .faq-item__q::after {
    border-color: var(--mg-ink);
    transform: translateY(2px) rotate(225deg);
}

.faq-item__q:focus-visible {
    outline: 2px solid var(--mg-ink);
    outline-offset: 2px;
}

.faq-item__a {
    max-width: 68ch;
    margin: 0;
    padding: 0 var(--mg-space-12) var(--mg-space-8) var(--mg-space-1);
    font: 400 var(--mg-fs-body)/var(--mg-lh-body) var(--mg-font);
    color: rgba(var(--mg-ink-rgb), 0.8);
    text-wrap: pretty;
}

.faq-item[open] .faq-item__a {
    animation: faq-in 0.5s var(--mg-ease);
}

@keyframes faq-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
}

@media (max-width: 768px) {
    .faq-list {
        margin-top: var(--mg-space-8);
    }

    .faq-item__q {
        padding: var(--mg-space-5) 0;
        font-size: var(--mg-fs-lead);
    }

    .faq-item__a {
        padding: 0 0 var(--mg-space-6);
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq-item[open] .faq-item__a {
        animation: none;
    }

    .faq-item__q::after {
        transition: none;
    }
}