/**
 * Qing FAQ widget.
 *
 * A hairline-ruled accordion built on native <details>/<summary>, so it opens
 * and closes, and is keyboard reachable, with no script at all. Ported from
 * the static contact page (.faq / .faq__item / .faq__q / .faq__a).
 *
 * Control-driven values are read from CSS custom properties, declared here as
 * the standalone defaults so an untouched control falls back to these rather
 * than to nothing.
 *
 * Size rules double the class name to reach (0,2,x). Elementor's frontend.css
 * carries `.elementor <element>` resets at (0,1,1) that load after this file
 * and win on a tie -- that is what killed the image height control on the
 * Story widget, so it is pre-empted here.
 */

.qing-faq {
    /* ---- Defaults, overridden by the controls ---- */
    --qing-faq-accent: #b3946f;
    --qing-faq-ink: #2f2b28;
    --qing-faq-muted: #7a736c;
    --qing-faq-line: #eae5df;

    --qing-faq-q-pad-y: 24px;
    --qing-faq-a-pad-b: 26px;
    /* Right gutter reserves room for the marker so long questions never run
       underneath it. Shared by the question and the answer so their text
       edges line up. */
    --qing-faq-gutter: 44px;

    --qing-faq-mark-size: 13px;
    --qing-faq-mark-weight: 1.5px;
    --qing-faq-mark-right: 6px;

    border-top: 1px solid var(--qing-faq-line);
}

.qing-faq--noTopRule {
    border-top: 0;
}

.qing-faq .qing-faq__item {
    border-bottom: 1px solid var(--qing-faq-line);
}

/* ============================================================
 * Question
 * ============================================================ */
.qing-faq .qing-faq__q {
    position: relative;
    padding: var(--qing-faq-q-pad-y) var(--qing-faq-gutter) var(--qing-faq-q-pad-y) 0;
    font-family: Georgia, "Songti SC", "SimSun", serif;
    font-size: 1.12rem;
    line-height: 1.45;
    color: var(--qing-faq-ink);
    cursor: pointer;
    /* Removes the default triangle so the custom marker can be used. */
    list-style: none;
}

/* Safari needs the vendor pseudo-element as well as list-style. */
.qing-faq .qing-faq__q::-webkit-details-marker {
    display: none;
}

.qing-faq .qing-faq__item[open] > .qing-faq__q {
    color: var(--qing-faq-accent);
}

.qing-faq--noOpenAccent .qing-faq__item[open] > .qing-faq__q {
    color: var(--qing-faq-ink);
}

/* Keyboard focus has to stay visible: the marker alone does not say which row
   is focused. */
.qing-faq .qing-faq__q:focus-visible {
    outline: 2px solid var(--qing-faq-accent);
    outline-offset: 2px;
}

/* ============================================================
 * Marker
 *
 * Plus sign drawn from two crossed gradients rather than glyphs, so it stays
 * optically centred at any size and inherits the accent colour. Open state
 * drops the vertical stroke, leaving a minus, and spins the pair.
 * ============================================================ */
.qing-faq .qing-faq__q::after {
    content: "";
    position: absolute;
    top: 50%;
    right: var(--qing-faq-mark-right);
    width: var(--qing-faq-mark-size);
    height: var(--qing-faq-mark-size);
    /* Half the height, negated: centres the marker on the first line rather
       than on the block, which matters once a question wraps. */
    margin-top: calc( var(--qing-faq-mark-size) / -2 );
    background:
        linear-gradient(var(--qing-faq-accent), var(--qing-faq-accent)) center / 100% var(--qing-faq-mark-weight) no-repeat,
        linear-gradient(var(--qing-faq-accent), var(--qing-faq-accent)) center / var(--qing-faq-mark-weight) 100% no-repeat;
    transition: transform 0.25s ease;
}

.qing-faq .qing-faq__item[open] > .qing-faq__q::after {
    /* Vertical stroke dropped, so a minus is left behind. */
    background:
        linear-gradient(var(--qing-faq-accent), var(--qing-faq-accent)) center / 100% var(--qing-faq-mark-weight) no-repeat;
    transform: rotate(180deg);
}

/* ---- Chevron variant ---- */
.qing-faq--markChevron .qing-faq__q::after {
    background: none;
    width: calc( var(--qing-faq-mark-size) * 0.62 );
    height: calc( var(--qing-faq-mark-size) * 0.62 );
    margin-top: calc( var(--qing-faq-mark-size) / -3 );
    border-right: var(--qing-faq-mark-weight) solid var(--qing-faq-accent);
    border-bottom: var(--qing-faq-mark-weight) solid var(--qing-faq-accent);
    transform: rotate(45deg);
}

.qing-faq--markChevron .qing-faq__item[open] > .qing-faq__q::after {
    background: none;
    transform: rotate(-135deg);
}

/* ---- No marker ---- */
.qing-faq--markNone .qing-faq__q {
    padding-right: 0;
}

.qing-faq--markNone .qing-faq__q::after {
    display: none;
}

/* ---- Marker on the left ---- */
.qing-faq--markLeft .qing-faq__q {
    padding-right: 0;
    padding-left: var(--qing-faq-gutter);
}

.qing-faq--markLeft .qing-faq__q::after {
    right: auto;
    left: var(--qing-faq-mark-right);
}

.qing-faq--markLeft .qing-faq__a {
    padding-right: 0;
    padding-left: var(--qing-faq-gutter);
}

/* ============================================================
 * Answer
 * ============================================================ */
.qing-faq .qing-faq__a {
    padding: 0 var(--qing-faq-gutter) var(--qing-faq-a-pad-b) 0;
}

.qing-faq .qing-faq__a p {
    margin: 0;
    color: var(--qing-faq-muted);
    line-height: 1.8;
}

.qing-faq .qing-faq__a p + p {
    margin-top: 14px;
}

.qing-faq .qing-faq__a a {
    color: var(--qing-faq-accent);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.qing-faq .qing-faq__a ul,
.qing-faq .qing-faq__a ol {
    margin: 14px 0 0;
    padding-left: 20px;
    color: var(--qing-faq-muted);
    line-height: 1.8;
}

/* ============================================================
 * Reveal on open
 *
 * A slide is not possible on <details> without scripting the height, so the
 * answer fades and lifts instead. Purely additive: with the animation
 * unsupported or suppressed the panel simply appears.
 * ============================================================ */
.qing-faq--animate .qing-faq__item[open] > .qing-faq__a {
    animation: qing-faq-in 0.28s ease both;
}

@keyframes qing-faq-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ============================================================
 * Responsive
 * ============================================================ */
@media (max-width: 599px) {

    .qing-faq.qing-faq {
        --qing-faq-gutter: 32px;
        --qing-faq-q-pad-y: 20px;
    }

    .qing-faq.qing-faq .qing-faq__q {
        font-size: 1.02rem;
    }
}

/* The marker spin and the panel fade are both decorative. */
@media (prefers-reduced-motion: reduce) {

    .qing-faq .qing-faq__q::after {
        transition-duration: 0.01ms;
    }

    .qing-faq--animate .qing-faq__item[open] > .qing-faq__a {
        animation: none;
    }
}/* ============================================================
 * Question inner tag
 *
 * The question text sits in its own element so the HTML tag can be a real
 * heading when the FAQ is a section of the page outline. A heading arrives
 * with its own margin, font-size and weight from the browser and from
 * Elementor's resets, all of which would break the row rhythm -- so it is
 * flattened back to inheriting from the summary.
 *
 * Doubled class to reach (0,2,0): Elementor's frontend.css carries heading
 * resets that load after this file and would otherwise win on a tie.
 * ============================================================ */
.qing-faq .qing-faq__qText.qing-faq__qText {
    display: inline;
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
}