/* Load after css/style.css. All additions are scoped to the FAQ page. */
.faq-page .faq-section {
    background-color: #f7f4fb;
    padding: 60px 30px;
}

.faq-page .faq-list {
    max-width: 900px;
    margin: 0 auto;
}

.faq-page h2 {
    color: #084b7c;
    font-size: 32px;
    margin-top: 0;
}

.faq-page .faq-list > h2 {
    text-align: center;
    margin-bottom: 30px;
}

.faq-page .faq-item {
    background-color: white;
    margin-bottom: 16px;
    border-radius: 18px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.faq-page .faq-item summary {
    padding: 24px;
    color: #084b7c;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.5;
    cursor: pointer;
    border-radius: 18px;
    overflow-wrap: anywhere;
}

.faq-page .faq-item summary::marker {
    color: #7b5aa6;
}

.faq-page .faq-item summary:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.faq-page .faq-answer {
    padding: 0 24px 24px;
    font-size: 16px;
    line-height: 1.7;
}

.faq-page .faq-answer p:first-child { margin-top: 0; }
.faq-page .faq-answer p:last-child { margin-bottom: 0; }
.faq-page .faq-answer ul { padding-left: 24px; }
.faq-page .faq-answer li + li { margin-top: 6px; }

.faq-page nav a[aria-current="page"] {
    color: #ffd45c;
    text-decoration: underline;
    text-underline-offset: 5px;
}

.faq-page a:focus-visible,
.faq-page summary:focus-visible {
    outline: 3px solid #7b5aa6;
    outline-offset: 4px;
}

.faq-page nav a:focus-visible { outline-color: #ffd45c; }

.faq-page .skip-link {
    position: absolute;
    left: 16px;
    top: 16px;
    transform: translateY(-200%);
    background: #084b7c;
    color: white;
    padding: 12px 18px;
    z-index: 10;
}

.faq-page .skip-link:focus { transform: translateY(0); }

.faq-page .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 700px) {
    .faq-page .faq-section { padding: 40px 20px; }
    .faq-page h2 { font-size: 28px; }
    .faq-page .faq-item summary { padding: 20px; }
    .faq-page .faq-answer { padding: 0 20px 20px; }
}

@media print {
    .faq-page .faq-item { box-shadow: none; }
    .faq-page .faq-item::details-content { content-visibility: visible; }
}