/**
 * Elle Gourmet Blocks — FAQ
 * Always-visible Q&A pairs. Not an accordion.
 * BEM hooks intentionally minimal — Chris's design sheet can target these.
 *
 * Uses dl/dt/dd for semantics. Reset browser dd indent here; style dt
 * to match h3-level visual weight via explicit values (no CSS variables
 * needed — theme heading font will cascade once Chris targets .elg-faq__question).
 */

/* ==========================================================================
   Block wrapper
   ========================================================================== */
.elg-faq {
    margin: 1.5rem 0;
    padding: 0;
    width: 100%;
}

.elg-faq__heading {
    margin: 0 0 1rem;
}

.elg-faq__list {
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   Individual item — valid HTML5: div wrapping dt+dd inside dl
   ========================================================================== */
.elg-faq__item {
    margin: 0 0 1.25rem;
    padding: 0;
}

.elg-faq__item:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Question — dt styled as heading-level text, not a heading tag.
   font-size intentionally unset: inherits body size to match article text.
   ========================================================================== */
.elg-faq .elg-faq__question {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-style: normal;
    line-height: 1.35;
    color: inherit;
    margin: 0 0 0.4rem;
    padding: 0;
}

/* ==========================================================================
   Answer — reset dd browser indent; size inherits to match article body.
   ========================================================================== */
.elg-faq .elg-faq__answer {
    display: block;
    line-height: 1.65;
    color: inherit;
    margin: 0;
    padding: 0;
    margin-inline-start: 0; /* browser default: 40px — reset */
}

/* ==========================================================================
   Editor-only utilities
   ========================================================================== */
.elg-faq__item-header {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.elg-faq__item-header .elg-faq__question {
    flex: 1 1 auto;
    margin-bottom: 0;
}

.elg-faq__remove {
    flex: 0 0 auto;
    opacity: 0;
    transition: opacity 0.1s;
}

.elg-faq__item:hover .elg-faq__remove,
.elg-faq__item:focus-within .elg-faq__remove {
    opacity: 1;
}

.elg-faq__add {
    margin-top: 0.75rem;
}