/* FAQ accordion on the concept detail page (see ConceptDetail.razor).
   Styles the native <details>/<summary> element rather than a JS widget, so
   everything here is presentation only — open/close is the browser's job. */

.pp-faq {
    background-color: #f7f7f7;
}

.pp-faq-item {
    border-bottom: 1px solid #e2e2e2;
    padding: 0;
}

.pp-faq-item:first-child {
    border-top: 1px solid #e2e2e2;
}

.pp-faq-item > summary {
    cursor: pointer;
    padding: 18px 40px 18px 0;
    position: relative;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    /* The default disclosure triangle is replaced by the +/- below. Both
       properties are needed: WebKit uses the pseudo-element, everyone else
       honours list-style. */
    list-style: none;
}

.pp-faq-item > summary::-webkit-details-marker {
    display: none;
}

/* Keyboard focus must stay visible — the summary is the only focusable thing
   in this section, and removing the marker above also removes the most obvious
   cue that it is interactive. */
.pp-faq-item > summary:focus-visible {
    outline: 2px solid #777;
    outline-offset: 2px;
}

.pp-faq-item > summary::after {
    content: "+";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    opacity: 0.55;
}

.pp-faq-item[open] > summary::after {
    content: "\2212"; /* minus sign, not a hyphen — matches the + optically */
}

.pp-faq-answer {
    padding: 0 40px 20px 0;
    line-height: 1.7;
}

/* The answer is admin-authored rich text, so it can contain anything the
   sanitiser allows. Keep the common blocks from inheriting odd margins from
   the surrounding legacy theme. */
.pp-faq-answer > *:first-child {
    margin-top: 0;
}

.pp-faq-answer > *:last-child {
    margin-bottom: 0;
}

.pp-faq-answer ul,
.pp-faq-answer ol {
    padding-left: 22px;
}

.pp-faq-answer img {
    max-width: 100%;
    height: auto;
}

/* --- Spec sheet (see ConceptDetail.razor) -------------------------------- */
/* Two columns from a <dl>: the markup stays semantically correct (name/value
   pairs, announced as pairs by screen readers) while reading as a table. */

.pp-spec-list {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(8rem, 40%) 1fr;
    row-gap: 0;
    column-gap: 24px;
}

.pp-spec-list > dt,
.pp-spec-list > dd {
    padding: 12px 0;
    margin: 0;
    border-bottom: 1px solid #e2e2e2;
    line-height: 1.5;
}

.pp-spec-list > dt {
    font-weight: 600;
}

/* Single column on narrow screens: a 40% label column leaves the value with
   too little room to be readable on a phone. */
@media (max-width: 600px) {
    .pp-spec-list {
        grid-template-columns: 1fr;
        column-gap: 0;
    }

    .pp-spec-list > dt {
        padding-bottom: 0;
        border-bottom: 0;
    }
}