/*
 * Financing page stylesheet — this page sits at the top level (not under
 * /services), so it doesn't inherit services.css and needs its own copies of
 * the small list/card/FAQ patterns used elsewhere on the site. Kept minimal:
 * only what this one page actually uses.
 */

/*#region Check list*/
/*
 * Same recipe as services.css's .checklist: the tick is written into the
 * markup by [icon name="check"] with no label, so it's aria-hidden and the
 * list still reads as a plain list to a screen reader.
 */
.check-list {
    display: grid;
    gap: 14px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.check-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
}

.check-list .icon {
    margin-top: 0.2em;
    font-size: 1.15em;
    color: var(--color-accent-dark);
}

/*#endregion*/


/*#region Info grid*/
/*
 * Three short blocks side by side — accessibility/how-to/next-step copy that
 * doesn't need the full weight of a numbered process.
 */
.info-grid {
    display: grid;
    gap: 32px;
    margin-top: 40px;
}

.info-grid__item {
    padding-top: 20px;
    border-top: 3px solid var(--color-accent);
}

.info-grid__item h3 {
    margin-bottom: 0.4em;
    font-size: 1.3em;
}

.info-grid__item p:last-child {
    margin-bottom: 0;
}

@media (min-width: 800px) {
    .info-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/*#endregion*/


/*#region FAQ*/
/*
 * Same accordion pattern as services.css's .faq (dental-implants FAQ) — real
 * <button> + aria-expanded/aria-controls/hidden, toggled by main.js's
 * [data-accordion-trigger] handler. Kept identical on purpose so both FAQs
 * on the site look and behave the same.
 */
.faq {
    display: grid;
    gap: 20px;
    margin-top: 32px;
}

.faq__item {
    padding-top: 20px;
    border-top: 1px solid var(--color-bg-muted-dark);
}

.faq__question {
    margin: 0;
    font-size: 1.2em;
}

.faq__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.faq__icon {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--color-accent-dark);
    transition: transform 0.2s ease;
}

.faq__trigger[aria-expanded="true"] .faq__icon {
    transform: rotate(180deg);
}

.faq__answer {
    margin-top: 12px;
}

.faq__answer p:last-child {
    margin-bottom: 0;
}

/*#endregion*/