/* ==========================================================================
   Versalis - FAQ / Schema / Open Graph support styles
   Added alongside the FAQPage structured data applied to every page.
   Works with the Bootstrap 3 grid already used across the site.
   ========================================================================== */

.faq-section {
    padding: 40px 0;
    background: #f7f9fb;
    border-top: 1px solid #ececec;
}

.faq-section .faq-heading {
    margin: 0 0 6px;
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #222;
}

.faq-section .faq-subheading {
    margin: 0 0 26px;
    font-size: 15px;
    color: #777;
}

.faq-item {
    margin-bottom: 14px;
    background: #fff;
    border: 1px solid #e6e9ee;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.faq-item:last-child {
    margin-bottom: 0;
}

/* The heading is a flex row: the question text takes the free space and the
   chevron is pushed to the far right edge. Flexbox does not depend on the
   source order of the children, so the arrow stays right-aligned even when the
   question wraps onto several lines. */
.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 20px 18px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
    color: #222;
    background: #fff;
    border: 0;
    cursor: pointer;
}

.faq-question .faq-text {
    flex: 1 1 auto;
    min-width: 0;
}

.faq-question:hover,
.faq-question:focus {
    color: #0a66c2;
    outline: none;
}

.faq-question .faq-icon {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 14px;
    line-height: 1;
    color: #0a66c2;
    transition: transform 0.25s ease;
}

.faq-question[aria-expanded="true"] .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    margin: 0;
    padding: 0 18px 16px;
    font-size: 15px;
    line-height: 1.7;
    color: #555;
}

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

@media (max-width: 767px) {
    .faq-section {
        padding: 28px 0;
    }

    .faq-section .faq-heading {
        font-size: 22px;
    }

    .faq-question {
        font-size: 15px;
    }

    .faq-answer {
        font-size: 14px;
    }
}