/*
 * RI FAQ — frontend styling. Variables (--ri-faq-q-bg, etc.) are set
 * inline by the renderer based on saved settings.
 *
 * Native <details>/<summary> open/close. No JavaScript.
 */

.ri-faq {
    width: 75%;
    margin: 20px auto;
}

@media screen and (max-width: 600px) {
    .ri-faq {
        width: 100%;
        margin: 20px auto;
    }
}

.ri-faq-item {
    background: #eeebe6;
    border: 1px solid #999;
    border-radius: 4px;
    margin-bottom: 16px;
    overflow: hidden;
}

.ri-faq-q {
    background: var(--ri-faq-q-bg, #477c36);
    color:      var(--ri-faq-q-fg, #eeebe6);
    padding: 10px 16px;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    position: relative;
    user-select: none;
    transition: background-color 125ms ease;
}

.ri-faq-q::-webkit-details-marker { display: none; }
.ri-faq-q::marker                 { content: ''; }

.ri-faq-q:hover {
    background: var(--ri-faq-q-bg, #477c36);
    filter: brightness(1.08);
}

/* Optional open/close indicator (controlled by .ri-faq--indicator) */
.ri-faq--indicator .ri-faq-q {
    padding-right: 40px;
}
.ri-faq--indicator .ri-faq-q::after {
    content: '+';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    line-height: 1;
    font-weight: 700;
}
.ri-faq--indicator .ri-faq-item[open] .ri-faq-q::after {
    content: '−';
}

.ri-faq-a {
    background: var(--ri-faq-a-bg, #eeebe6);
    color: #2a2a2a;
}

.ri-faq-a-content {
    padding: 12px 16px;
}

.ri-faq-a-content p {
    margin: 0 0 10px;
    line-height: 1.55;
}

.ri-faq-a-content p:last-child {
    margin-bottom: 0;
}

.ri-faq-thumb {
    width: 100%;
    height: auto;
    display: block;
}

.ri-faq--empty {
    color: #777;
}

.ri-faq-group {
    margin: 24px 0;
}

.ri-faq-group-title {
    margin: 0 0 12px;
    text-align: center;
    color: #446633;
    font-family: "Asap Condensed", Roboto, sans-serif;
    font-weight: 600;
    letter-spacing: 0;
}

/* Hide an entire FAQ group (heading + items) when every .faq_item inside has
   been JS-hidden by the page-level search filter. The group is the whole
   shortcode output — heading and items live in the same element. */
.ri-faq-group:not(:has(.faq_item:not([style*="display: none"]))) {
    display: none;
}