/* article_faq/style.css
   Module: Article FAQ — CSS-only accordion
   Namespaced: t1-article-faq__*
   No IDs targeted. Multiple instances per page safe.
   No JS, no GPU-heavy animations, no forced reflows.
*/

/* ── Section wrapper ─────────────────────────────────────────────────────── */
.t1-article-faq {
    margin-block: 2.5rem;
}

.t1-article-faq__heading {
    margin-block-end: 1.25rem;
}

/* ── List (dl) ───────────────────────────────────────────────────────────── */
.t1-article-faq__list {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-pearl, #e8e4de);
}

/* ── Item wrapper (div inside dl — valid HTML5 for dl grouping) ──────────── */
.t1-article-faq__item {
    border-bottom: 1px solid var(--color-pearl, #e8e4de);
}

/* ── Hide the real checkbox visually but keep it accessible to CSS ───────── */
.t1-article-faq__toggle {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    margin: 0;
}

/* ── Question (dt) ───────────────────────────────────────────────────────── */
.t1-article-faq__question {
    margin: 0;
}

.t1-article-faq__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-ink, #1a1a2e);
    transition: color 0.15s ease;
    user-select: none;
    /* keyboard focus */
    outline-offset: 3px;
}

.t1-article-faq__label:hover,
.t1-article-faq__label:focus-visible {
    color: var(--color-jade, #2d7a5e);
}

/* ── Icon — pure CSS chevron, no image dependency ───────────────────────── */
.t1-article-faq__icon {
    flex-shrink: 0;
    display: inline-block;
    width: 1.125rem;
    height: 1.125rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-25%);
    transition: transform 0.2s ease;
    margin-inline-end: 0.125rem;
}

/* ── Answer (dd) — collapsed by default ─────────────────────────────────── */
.t1-article-faq__answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease;
    margin: 0;
}

/* overflow hidden required for grid row collapse trick */
.t1-article-faq__answer-inner {
    overflow: hidden;
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--color-charcoal, #3d3d4e);
    padding-block-end: 0;   /* padding applied when open, see below */
    transition: padding-block-end 0.25s ease;
}

/* ── Open state — driven by sibling checkbox ─────────────────────────────── */
.t1-article-faq__toggle:checked
    ~ .t1-article-faq__question
    .t1-article-faq__icon {
    transform: rotate(-135deg) translateY(-25%);
}

.t1-article-faq__toggle:checked
    ~ .t1-article-faq__answer {
    grid-template-rows: 1fr;
}

.t1-article-faq__toggle:checked
    ~ .t1-article-faq__answer
    .t1-article-faq__answer-inner {
    padding-block-end: 1rem;
}

/* ── Focus ring for keyboard users (label acts as button) ────────────────── */
.t1-article-faq__label:focus-visible {
    outline: 2px solid var(--color-jade, #2d7a5e);
    border-radius: 2px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .t1-article-faq__label {
        font-size: 0.9375rem;
        padding-block: 0.875rem;
    }
}

/* ========================================
   LIGHT THEME OVERRIDE
   ======================================== */

.t1-article-faq--light .t1-article-faq__list {
    border-top-color: var(--color-pearl, #e8e4de);
}

.t1-article-faq--light .t1-article-faq__item {
    border-bottom-color: var(--color-pearl, #e8e4de);
}

.t1-article-faq--light .t1-article-faq__label {
    color: var(--color-ink, #1a1a2e);
}

.t1-article-faq--light .t1-article-faq__label:hover,
.t1-article-faq--light .t1-article-faq__label:focus-visible {
    color: var(--color-jade, #2d7a5e);
}

.t1-article-faq--light .t1-article-faq__icon {
    border-right-color: currentColor;
    border-bottom-color: currentColor;
}

.t1-article-faq--light .t1-article-faq__answer-inner {
    color: var(--color-charcoal, #3d3d4e);
}

.t1-article-faq--light .t1-article-faq__label:focus-visible {
    outline-color: var(--color-jade, #2d7a5e);
}