/*
 * Question and answer icons in a post's FAQ section. Markup from lib/faq.mjs;
 * base.njk loads this only on posts that have one.
 *
 * The icon spans are empty and carry role="img" with aria-label "Question" or
 * "Answer"; the letter is drawn here so it never enters heading ids, the table
 * of contents or the search index. It hangs in the left padding, so wrapped
 * lines of a question or answer stay aligned with its first line.
 */

/* Sized from the post's body text (--ee-post-text, ee-post.css), not from
   the element, so an h3 question gets the same icon and indent as the
   answers under it. */
.ee-faq-q,
.ee-faq-a {
    --ee-faq-unit: var(--ee-post-text, 1rem);
    position: relative;
    padding-left: calc(var(--ee-faq-unit) * 2.25);
}

/* Keep each answer next to its question; the space after the answer still
   separates one pair from the next. Beats ee-post.css's paragraph margin. */
article.post .entry-content p.ee-faq-q:not(.ee_caption) {
    margin-bottom: 0.5em;
}

.ee-faq-icon {
    position: absolute;
    left: 0;
    /* Centered on the first line: body text is 1.5 lines high, so
       (1.5 - 1.4) / 2. */
    top: calc(var(--ee-faq-unit) * 0.05);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--ee-faq-unit) * 1.4);
    height: calc(var(--ee-faq-unit) * 1.4);
    border: 2px solid var(--ee-blue);
    border-radius: 50%;
    font-family: 'Lato', sans-serif;
    font-size: calc(var(--ee-faq-unit) * 0.8);
    font-style: normal;
    font-weight: 700;
    line-height: 1;
}

/* An h3 line is 1.25 x 1.3 body text high: (1.625 - 1.4) / 2. */
h3.ee-faq-q .ee-faq-icon {
    top: calc(var(--ee-faq-unit) * 0.11);
}

/* Question and answer share one look, brand blue on white (about 10:1), so
   only the letter tells them apart. A white Q on a filled disc read as a
   magnifying glass: Lato's round Q inside a solid circle is the search icon. */
.ee-faq-icon {
    background: #fff;
    color: var(--ee-blue);
}
.ee-faq-icon--q::before {
    content: "Q";
}
.ee-faq-icon--a::before {
    content: "A";
}

@media (forced-colors: active) {
    .ee-faq-icon {
        border-color: CanvasText;
    }
}