/**
 * FNF Auto-Blog — Frontend styles for generated posts.
 *
 * Overrides for inline-style layout properties that WordPress's KSES
 * filter strips on post save (notably `display:flex` and `display:grid`).
 *
 * Targets ONLY the classes emitted by Post_Publisher::build_infographic() and
 * build_faq_html(). Safe to apply site-wide.
 */

/* ─── Infographic cards (steps / benefits / comparison / timeline) ─── */
.fnf-infographic > div:nth-child(2) > div {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 16px;
}

/* Number circle / icon bubble — left column */
.fnf-infographic > div:nth-child(2) > div > div:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
}

/* Text content — right column, must not overflow */
.fnf-infographic > div:nth-child(2) > div > div:last-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
}

.fnf-infographic > div:nth-child(2) > div > div:last-child p {
    margin: 4px 0 0;
}

/* Comparison grid (2 columns side-by-side) */
.fnf-infographic > div:nth-child(2) > div[style*="grid-template-columns"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Timeline variant */
.fnf-infographic > div:nth-child(2) .fnf-timeline-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

/* Mobile: collapse to single column for comparison grids */
@media (max-width: 600px) {
    .fnf-infographic > div:nth-child(2) > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr;
    }
    .fnf-infographic > div:nth-child(2) > div {
        gap: 10px;
    }
    .fnf-infographic > div:nth-child(2) > div > div:first-child {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        font-size: 14px !important;
    }
}

/* ─── FAQ section ─── */
.fnf-faq-section {
    display: block;
}

.fnf-faq-item {
    background: #fff;
}

.fnf-faq-item[itemprop="mainEntity"] summary,
.fnf-faq-item[itemprop="mainEntity"] .fnf-faq-q {
    cursor: pointer;
    font-weight: 600;
    padding: 14px 18px;
    display: block;
}

/* ─── TOC card ─── */
.fnf-toc ul {
    list-style: disc;
}

.fnf-toc a {
    text-decoration: none;
}

.fnf-toc a:hover {
    text-decoration: underline;
}

/* ─── Product box at end of post ─── */
.fnf-product-box {
    display: block;
    text-align: center;
}

.fnf-product-box a {
    display: inline-block;
}