/* FAQ block — debtor portal (Block 8, frontend-prototypes #14).
   Placed in a NAVY band that matches the countdown block (.landing-debitor-area),
   so it blends into the navy footer at the bottom of the page. The heading reuses
   the portal's <header class="box-title"> (turns white on the navy band). Native
   <details>/<summary> accordion, no JS. Built on the shipped site.css tokens + Inter. */

/* navy band — same navy + intent as the countdown block */
.faq-section {
    background: var(--navy);
    color: #fff;
    padding: 56px 0 64px;
}

.faq-section .box-title {
    color: #fff;
}

.faq-item {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.faq-item:first-of-type {
    border-top: none;
}

.faq-question {
    list-style: none;
    cursor: pointer;
    display: block;
    padding: 16px 0;
    font-size: var(--text-body);
    font-weight: 600;
    color: #fff;
    line-height: 1.4;
}

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

/* chevron — inline marker after the text, light on navy */
.faq-question::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 9px;
    vertical-align: middle;
    border-right: 2px solid rgba(255, 255, 255, 0.6);
    border-bottom: 2px solid rgba(255, 255, 255, 0.6);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.faq-item[open] .faq-question::after {
    transform: rotate(-135deg);
}

.faq-answer {
    margin: 0 0 14px;
    font-size: var(--text-label);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.78);
}

.faq-answer:last-of-type {
    margin-bottom: 18px;
}

.faq-answer a {
    color: #a8c5f0;
    text-decoration: underline;
}

summary:focus-visible {
    outline: 2px solid #a8c5f0;
    outline-offset: 2px;
    border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .faq-question::after {
        transition: none;
    }
}