/* ============================================================
   Factsheet Six — TipTap content styles (web display)
   Used by: post-edit.php (editor view), themes/editorial/post.php
   Custom nodes: buttons, dividers, columns
   ============================================================ */

/* ── Button node ───────────────────────────────────────────────────── */
.fs6-btn-block {
    margin: 16px 0;
}

.fs6-btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    transition: opacity .15s;
    background: #c94a2b;  /* default — overridden by inline style */
    color: #fff;
}

.fs6-btn:hover { opacity: .88; }

.fs6-btn--sm { padding: 8px 18px;  font-size: 14px; }
.fs6-btn--lg { padding: 16px 36px; font-size: 18px; }

.fs6-btn--full {
    display: block;
    text-align: center;
}

/* ── Divider node ──────────────────────────────────────────────────── */
.fs6-divider {
    border: none;
    border-top-width: 1px;
    height: 0;
    display: block;
    box-sizing: content-box;
    border-color: #e8e5e0; /* default — overridden by inline style */
}

/* Styles */
.fs6-divider--solid   { border-top-style: solid; }
.fs6-divider--dashed  { border-top-style: dashed; }
.fs6-divider--dotted  { border-top-style: dotted; }
.fs6-divider--double  { border-top-style: double; border-top-width: 3px; }

/* Widths */
.fs6-divider--full   { width: 100%; }
.fs6-divider--narrow { width: 50%;  margin-left: auto; margin-right: auto; }
.fs6-divider--wide   { width: 90%;  margin-left: auto; margin-right: auto; }

/* Spacing */
.fs6-divider--spacing-t-sm { margin-top:  8px; }
.fs6-divider--spacing-t-md { margin-top:  20px; }
.fs6-divider--spacing-t-lg { margin-top:  36px; }
.fs6-divider--spacing-b-sm { margin-bottom:  8px; }
.fs6-divider--spacing-b-md { margin-bottom:  20px; }
.fs6-divider--spacing-b-lg { margin-bottom:  36px; }

/* ── Column layout ─────────────────────────────────────────────────── */
.fs6-columns {
    display: flex;
    gap: 24px;
    margin: 24px 0;
    align-items: flex-start;
}

.fs6-columns--valign-middle { align-items: center; }
.fs6-columns--valign-bottom { align-items: flex-end; }

/* Column widths come from inline style set by renderer */
.fs6-column {
    min-width: 0;
    flex-shrink: 0;
}

/* Mobile: stack columns below 600px */
@media (max-width: 600px) {
    .fs6-columns {
        flex-direction: column;
        gap: 16px;
    }
    .fs6-column {
        width: 100% !important;
    }
}

/* ── Table ─────────────────────────────────────────────────────────── */
.fs6-table-wrap {
    overflow-x: auto;
    margin: 16px 0;
}

.fs6-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 15px;
    line-height: 1.6;
}

.fs6-table td,
.fs6-table th {
    border: 1px solid #e5e7eb;
    padding: 8px 12px;
    vertical-align: top;
}

.fs6-table th {
    background: #f9fafb;
    font-weight: 700;
    text-align: left;
    font-size: 14px;
}

.fs6-table tr:nth-child(even) td { background: #fafafa; }

/* ── YouTube embed ──────────────────────────────────────────────────── */
.fs6-youtube-wrap {
    position: relative;
    margin: 16px 0;
    max-width: 100%;
}

.fs6-youtube-wrap iframe {
    display: block;
    max-width: 100%;
    border-radius: 4px;
}

/* ── Task list ──────────────────────────────────────────────────────── */
.fs6-task-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 16px;
}

.fs6-task-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 5px;
}

.fs6-task-item label {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    cursor: default;
    line-height: 1.6;
}

.fs6-task-item input[type=checkbox] {
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: #c94a2b;
    width: 15px;
    height: 15px;
}

.fs6-task-item[data-checked=true] label {
    color: #9ca3af;
    text-decoration: line-through;
}

/* ── Section box ────────────────────────────────────────────────────── */
.fs6-section {
    /* visual properties come entirely from inline style set by renderer */
}

/* ── Images within TipTap content ──────────────────────────────────── */
.fs6-img,
.ProseMirror img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    margin: 8px 0;
}

/* ── Callout / quote blocks ─────────────────────────────────────────── */
.fs6-callout {
    border-radius:  8px;
    padding:        1rem 1.1rem 1rem 1.25rem;
    margin:         0 0 1.2em;
    font-size:      .95em;
    line-height:    1.6;
}
.fs6-callout[data-type="classic"] {
    border-left:    4px solid #d1d5db;
    background:     #f9f9f9;
    color:          #374151;
    border-radius:  0 6px 6px 0;
}
.fs6-callout[data-type="note"] {
    border-left:    4px solid #60a5fa;
    background:     #eff6ff;
    color:          #1e3a5f;
}
.fs6-callout[data-type="tip"] {
    border-left:    4px solid #34d399;
    background:     #ecfdf5;
    color:          #064e3b;
}
.fs6-callout[data-type="warning"] {
    border-left:    4px solid #fbbf24;
    background:     #fffbeb;
    color:          #78350f;
}
.fs6-callout[data-type="danger"] {
    border-left:    4px solid #f87171;
    background:     #fef2f2;
    color:          #7f1d1d;
}
.fs6-callout[data-type="pullquote"] {
    border:         none;
    background:     transparent;
    text-align:     center;
    padding:        1.5rem 2rem;
    font-size:      1.4em;
    font-style:     italic;
    color:          #1a1a1a;
    border-top:     2px solid #0f0e0d;
    border-bottom:  2px solid #0f0e0d;
    border-radius:  0;
}
.fs6-callout[data-type="openquote"] {
    border:         none;
    background:     transparent;
    padding:        0.25rem 0 1rem 0;
    border-radius:  0;
}

.fs6-callout-icon {
    display:        inline-block;
    font-style:     normal;
    margin-right:   .4em;
    font-size:      1em;
}
.fs6-callout[data-type="pullquote"] .fs6-callout-icon {
    display:        block;
    font-size:      3em;
    line-height:    .75;
    margin:         0 0 .15em;
    opacity:        .55;
    font-family:    Georgia, 'Times New Roman', serif;
    font-weight:    700;
}
.fs6-callout[data-type="openquote"] .fs6-callout-icon {
    display:        block;
    font-size:      4.5em;
    line-height:    .65;
    margin:         0 0 .1em;
    color:          #c94a2b;
    font-family:    Georgia, 'Times New Roman', serif;
    font-weight:    700;
    font-style:     normal;
    opacity:        .9;
}

.fs6-callout-content {
    display:        block;
}
.fs6-callout[data-type="pullquote"] .fs6-callout-content,
.fs6-callout[data-type="openquote"] .fs6-callout-content {
    font-style:     italic;
    font-size:      1.15em;
    line-height:    1.5;
}

/* ── Table of Contents (rendered from [tableofcontents] placeholder) ── */
.fs6-toc {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    border:         1px solid #e5e7eb;
    border-radius:  6px;
    padding:        .75rem 1rem;
    margin:         1.5rem 0;
    background:     #fafafa;
}
.fs6-toc::before {
    content:        'Contents';
    display:        block;
    font-size:      .75rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color:          #9ca3af;
    margin-bottom:  .5rem;
}
.fs6-toc-item {
    display:        block;
    font-size:      1rem;
    line-height:    1.5;
    color:          #374151;
    text-decoration: none;
    padding:        .15rem 0;
    transition:     color .12s;
}
.fs6-toc-item:hover { color: #111827; text-decoration: underline; }
.fs6-toc-level-1 { padding-left: 0; }
.fs6-toc-level-2 { padding-left: 1rem; }
.fs6-toc-level-3 { padding-left: 2rem; }
.fs6-toc-level-4 { padding-left: 3rem; }
.fs6-toc-level-5 { padding-left: 3.75rem; }
.fs6-toc-level-6 { padding-left: 4.5rem; }

/* ── Inline image figcaption ────────────────────────────────────────── */
figcaption {
    font-size:      .88rem;
    color:          #6b7280;
    text-align:     center;
    margin-top:     .35rem;
    margin-bottom:  1rem;
    line-height:    1.4;
}
figcaption a { color: inherit; text-decoration: underline; }