/**
 * Content Block Styles - Tistory-style Writing Format Boxes
 *
 * Provides reusable content formatting boxes for blog posts and pages.
 * - HTML direct insertion: Use .nexfolio-box, .nexfolio-pros-cons, etc.
 * - Gutenberg block styles: Use Paragraph styles (Info/Tip/Warning/Check/Summary boxes)
 * - Gutenberg block patterns: Use Patterns tab for Pros/Cons, Steps, FAQ
 *
 * @package Nexfolio
 * @since 1.5.0
 */

/* ==================================
   BASE BOX STYLES (HTML direct + Gutenberg Paragraph styles)
   ================================== */

.nexfolio-box,
.wp-block-html .nexfolio-box,
.is-style-nexfolio-info-box,
.is-style-nexfolio-tip-box,
.is-style-nexfolio-warning-box,
.is-style-nexfolio-check-box,
.is-style-nexfolio-summary-box {
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
    border-radius: 6px;
    border-left: 4px solid;
    background-color: var(--color-gray-100);
    font-size: 0.95rem;
    line-height: 1.7;
}

.nexfolio-box > strong:first-child,
.wp-block-html .nexfolio-box > strong:first-child,
.is-style-nexfolio-info-box > strong:first-child,
.is-style-nexfolio-tip-box > strong:first-child,
.is-style-nexfolio-warning-box > strong:first-child,
.is-style-nexfolio-check-box > strong:first-child,
.is-style-nexfolio-summary-box > strong:first-child {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 1rem;
    color: inherit;
}

/* ==================================
   INFO BOX (Blue theme)
   HTML: .nexfolio-box.nexfolio-box--info
   Gutenberg: Paragraph style → "Info Box (Blue)"
   ================================== */

.nexfolio-box--info,
.is-style-nexfolio-info-box {
    border-left-color: #2563EB;
    background-color: #EFF6FF;
    color: #1E40AF;
}

.nexfolio-box--info::before,
.is-style-nexfolio-info-box::before {
    content: 'ℹ️';
    display: inline-block;
    margin-right: 0.5rem;
    font-size: 1.1em;
}

.nexfolio-box--info > strong:first-child,
.is-style-nexfolio-info-box > strong:first-child {
    color: #1E3A8A;
}

/* ==================================
   TIP BOX (Green theme)
   HTML: .nexfolio-box.nexfolio-box--tip
   Gutenberg: Paragraph style → "Tip Box (Green)"
   ================================== */

.nexfolio-box--tip,
.is-style-nexfolio-tip-box {
    border-left-color: #059669;
    background-color: #ECFDF5;
    color: #065F46;
}

.nexfolio-box--tip::before,
.is-style-nexfolio-tip-box::before {
    content: '💡';
    display: inline-block;
    margin-right: 0.5rem;
    font-size: 1.1em;
}

.nexfolio-box--tip > strong:first-child,
.is-style-nexfolio-tip-box > strong:first-child {
    color: #064E3B;
}

/* ==================================
   WARNING BOX (Red theme)
   HTML: .nexfolio-box.nexfolio-box--warning
   Gutenberg: Paragraph style → "Warning Box (Red)"
   ================================== */

.nexfolio-box--warning,
.is-style-nexfolio-warning-box {
    border-left-color: #DC2626;
    background-color: #FEF2F2;
    color: #991B1B;
}

.nexfolio-box--warning::before,
.is-style-nexfolio-warning-box::before {
    content: '⚠️';
    display: inline-block;
    margin-right: 0.5rem;
    font-size: 1.1em;
}

.nexfolio-box--warning > strong:first-child,
.is-style-nexfolio-warning-box > strong:first-child {
    color: #7F1D1D;
}

/* ==================================
   CHECK BOX (Purple theme)
   HTML: .nexfolio-box.nexfolio-box--check
   Gutenberg: Paragraph style → "Check Box (Purple)"
   ================================== */

.nexfolio-box--check,
.is-style-nexfolio-check-box {
    border-left-color: #7C3AED;
    background-color: #F5F3FF;
    color: #5B21B6;
}

.nexfolio-box--check::before,
.is-style-nexfolio-check-box::before {
    content: '✓';
    display: inline-block;
    margin-right: 0.5rem;
    font-size: 1.1em;
    font-weight: 700;
}

.nexfolio-box--check > strong:first-child,
.is-style-nexfolio-check-box > strong:first-child {
    color: #4C1D95;
}

/* ==================================
   SUMMARY BOX (Gray theme)
   HTML: .nexfolio-box.nexfolio-box--summary
   Gutenberg: Paragraph style → "Summary Box (Gray)"
   ================================== */

.nexfolio-box--summary,
.is-style-nexfolio-summary-box {
    border-left-color: #4B5563;
    background-color: #F9FAFB;
    color: #374151;
    border-left-width: 5px;
}

.nexfolio-box--summary::before,
.is-style-nexfolio-summary-box::before {
    content: '📋';
    display: inline-block;
    margin-right: 0.5rem;
    font-size: 1.1em;
}

.nexfolio-box--summary > strong:first-child,
.is-style-nexfolio-summary-box > strong:first-child {
    color: #111827;
}

/* ==================================
   CHECKLIST
   HTML: ul.nexfolio-checklist
   Gutenberg: List style → "Checklist"
   ================================== */

.nexfolio-checklist,
.is-style-nexfolio-checklist {
    list-style: none;
    padding-left: 0;
    margin: 1.5rem 0;
}

.nexfolio-checklist li,
.is-style-nexfolio-checklist li {
    padding: 0.5rem 0 0.5rem 2rem;
    position: relative;
    margin-bottom: 0.25rem;
    line-height: 1.6;
}

.nexfolio-checklist li::before,
.is-style-nexfolio-checklist li::before {
    content: '☐';
    position: absolute;
    left: 0;
    top: 0.5rem;
    font-size: 1.1em;
    color: #059669;
}

.nexfolio-checklist li.checked::before {
    content: '☑';
    color: #059669;
}

/* ==================================
   PROS/CONS BOX (HTML direct only)
   Use Block Pattern instead: "Nexfolio Content Boxes" → "Pros and Cons Box"
   ================================== */

.nexfolio-pros-cons,
.wp-block-html .nexfolio-pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 2rem 0;
}

.nexfolio-pros,
.nexfolio-cons {
    padding: 1.5rem;
    border-radius: 6px;
}

.nexfolio-pros {
    background-color: #ECFDF5;
    border-left: 4px solid #059669;
}

.nexfolio-cons {
    background-color: #FEF2F2;
    border-left: 4px solid #DC2626;
}

.nexfolio-pros h3,
.nexfolio-cons h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.nexfolio-pros h3 {
    color: #065F46;
}

.nexfolio-cons h3 {
    color: #991B1B;
}

.nexfolio-pros ul,
.nexfolio-cons ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.nexfolio-pros li,
.nexfolio-cons li {
    padding: 0.25rem 0 0.25rem 1.5rem;
    position: relative;
    line-height: 1.5;
    font-size: 0.95rem;
}

.nexfolio-pros li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #059669;
    font-weight: 600;
}

.nexfolio-cons li::before {
    content: '✗';
    position: absolute;
    left: 0;
    color: #DC2626;
    font-weight: 600;
}

/* ==================================
   STEPS BOX (HTML direct only)
   Use Block Pattern instead: "Nexfolio Content Boxes" → "Step Guide"
   ================================== */

.nexfolio-steps,
.wp-block-html .nexfolio-steps {
    counter-reset: nexfolio-step;
    list-style: none;
    padding-left: 0;
    margin: 2rem 0;
}

.nexfolio-step {
    counter-increment: nexfolio-step;
    padding: 1rem 1rem 1rem 3.5rem;
    position: relative;
    margin-bottom: 1rem;
    background-color: var(--color-gray-100);
    border-radius: 6px;
    border-left: 4px solid #2563EB;
}

.nexfolio-step::before {
    content: counter(nexfolio-step);
    position: absolute;
    left: 1rem;
    top: 1rem;
    width: 2rem;
    height: 2rem;
    background-color: #2563EB;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
}

.nexfolio-step strong {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #1E40AF;
    font-size: 1rem;
}

.nexfolio-step p {
    margin: 0;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* ==================================
   FAQ BOX (HTML direct only)
   Use Block Pattern instead: "Nexfolio Content Boxes" → "FAQ Box"
   ================================== */

.nexfolio-faq,
.wp-block-html .nexfolio-faq {
    margin: 2rem 0;
}

.nexfolio-faq-item {
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    background-color: #F9FAFB;
    border-left: 4px solid #4B5563;
    border-radius: 6px;
}

.nexfolio-faq-item h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #111827;
    display: flex;
    align-items: flex-start;
}

.nexfolio-faq-item h3::before {
    content: 'Q.';
    margin-right: 0.5rem;
    color: #4B5563;
    font-weight: 700;
}

.nexfolio-faq-item p {
    margin: 0;
    padding-left: 1.75rem;
    line-height: 1.6;
    font-size: 0.95rem;
    color: #374151;
}

.nexfolio-faq-item p::before {
    content: 'A.';
    font-weight: 600;
    margin-right: 0.5rem;
    color: #6B7280;
}

/* ==================================
   BENTO BOX (Enhanced)
   ================================== */

.is-style-nexfolio-bento-box {
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    margin: 1.5rem 0;
}

/* ==================================
   LEAD TEXT (Enhanced)
   ================================== */

.is-style-nexfolio-lead {
    font-size: 1.25rem;
    line-height: 1.8;
    font-weight: 400;
    color: var(--color-gray-700, #444444);
    margin: 1.5rem 0;
}

/* ==================================
   DARK MODE SUPPORT
   ================================== */

body.dark-mode .nexfolio-box,
html[data-theme="dark"] .nexfolio-box,
body.dark-mode .wp-block-html .nexfolio-box,
html[data-theme="dark"] .wp-block-html .nexfolio-box,
body.dark-mode .is-style-nexfolio-info-box,
html[data-theme="dark"] .is-style-nexfolio-info-box,
body.dark-mode .is-style-nexfolio-tip-box,
html[data-theme="dark"] .is-style-nexfolio-tip-box,
body.dark-mode .is-style-nexfolio-warning-box,
html[data-theme="dark"] .is-style-nexfolio-warning-box,
body.dark-mode .is-style-nexfolio-check-box,
html[data-theme="dark"] .is-style-nexfolio-check-box,
body.dark-mode .is-style-nexfolio-summary-box,
html[data-theme="dark"] .is-style-nexfolio-summary-box {
    background-color: var(--dm-card);
    border-left-color: var(--dm-border-strong);
    color: var(--dm-text-soft);
}

body.dark-mode .nexfolio-box--info,
html[data-theme="dark"] .nexfolio-box--info,
body.dark-mode .is-style-nexfolio-info-box,
html[data-theme="dark"] .is-style-nexfolio-info-box {
    border-left-color: var(--dm-accent);
    background-color: rgba(165,107,255,0.08);
    color: var(--dm-text-soft);
}

body.dark-mode .nexfolio-box--tip,
html[data-theme="dark"] .nexfolio-box--tip,
body.dark-mode .is-style-nexfolio-tip-box,
html[data-theme="dark"] .is-style-nexfolio-tip-box {
    border-left-color: #059669;
    background-color: rgba(5,150,105,0.1);
    color: var(--dm-text-soft);
}

body.dark-mode .nexfolio-box--warning,
html[data-theme="dark"] .nexfolio-box--warning,
body.dark-mode .is-style-nexfolio-warning-box,
html[data-theme="dark"] .is-style-nexfolio-warning-box {
    border-left-color: #DC2626;
    background-color: rgba(220,38,38,0.1);
    color: var(--dm-text-soft);
}

body.dark-mode .nexfolio-box--check,
html[data-theme="dark"] .nexfolio-box--check,
body.dark-mode .is-style-nexfolio-check-box,
html[data-theme="dark"] .is-style-nexfolio-check-box {
    border-left-color: var(--dm-accent-2);
    background-color: rgba(192,132,252,0.08);
    color: var(--dm-text-soft);
}

body.dark-mode .nexfolio-box--summary,
html[data-theme="dark"] .nexfolio-box--summary,
body.dark-mode .is-style-nexfolio-summary-box,
html[data-theme="dark"] .is-style-nexfolio-summary-box {
    border-left-color: var(--dm-border);
    background-color: var(--dm-section);
    color: var(--dm-text-muted);
}

body.dark-mode .nexfolio-pros,
html[data-theme="dark"] .nexfolio-pros {
    background-color: var(--dm-card);
    border-left-color: #059669;
}

body.dark-mode .nexfolio-cons,
html[data-theme="dark"] .nexfolio-cons {
    background-color: var(--dm-card);
    border-left-color: #DC2626;
}

body.dark-mode .nexfolio-pros h3,
html[data-theme="dark"] .nexfolio-pros h3 {
    color: var(--dm-text);
    border-bottom-color: var(--dm-border);
}

body.dark-mode .nexfolio-cons h3,
html[data-theme="dark"] .nexfolio-cons h3 {
    color: var(--dm-text);
    border-bottom-color: var(--dm-border);
}

body.dark-mode .nexfolio-step,
html[data-theme="dark"] .nexfolio-step {
    background-color: var(--dm-card);
    border-left-color: var(--dm-accent);
}

body.dark-mode .nexfolio-step::before,
html[data-theme="dark"] .nexfolio-step::before {
    background-color: var(--dm-accent);
    color: var(--dm-text);
}

body.dark-mode .nexfolio-step strong,
html[data-theme="dark"] .nexfolio-step strong {
    color: var(--dm-text);
}

body.dark-mode .nexfolio-faq,
html[data-theme="dark"] .nexfolio-faq {
    /* No direct style, only .nexfolio-faq-item */
}

body.dark-mode .nexfolio-faq-item,
html[data-theme="dark"] .nexfolio-faq-item {
    background-color: var(--dm-card);
    border-left-color: var(--dm-border);
}

body.dark-mode .nexfolio-faq-item h3,
html[data-theme="dark"] .nexfolio-faq-item h3 {
    color: var(--dm-text);
}

body.dark-mode .nexfolio-faq-item h3::before,
html[data-theme="dark"] .nexfolio-faq-item h3::before {
    color: var(--dm-text-muted);
}

body.dark-mode .nexfolio-faq-item p,
html[data-theme="dark"] .nexfolio-faq-item p {
    color: var(--dm-text-soft);
}

body.dark-mode .nexfolio-faq-item p::before,
html[data-theme="dark"] .nexfolio-faq-item p::before {
    color: var(--dm-text-muted);
}

body.dark-mode .is-style-nexfolio-bento-box,
html[data-theme="dark"] .is-style-nexfolio-bento-box {
    background-color: var(--dm-card);
    border-color: var(--dm-border);
    box-shadow: 0 1px 3px var(--dm-shadow);
}

body.dark-mode .is-style-nexfolio-lead,
html[data-theme="dark"] .is-style-nexfolio-lead {
    color: var(--dm-text-soft);
}

/* ==================================
   RESPONSIVE DESIGN (Mobile)
   ================================== */

@media (max-width: 768px) {
    .nexfolio-box,
    .wp-block-html .nexfolio-box,
    .is-style-nexfolio-info-box,
    .is-style-nexfolio-tip-box,
    .is-style-nexfolio-warning-box,
    .is-style-nexfolio-check-box,
    .is-style-nexfolio-summary-box {
        padding: 1rem 1.25rem;
        margin: 1rem 0;
        font-size: 0.9rem;
    }

    .nexfolio-pros-cons,
    .wp-block-html .nexfolio-pros-cons {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin: 1.5rem 0;
    }

    .nexfolio-pros,
    .nexfolio-cons {
        padding: 1.25rem;
    }

    .nexfolio-step {
        padding: 0.875rem 0.875rem 0.875rem 3rem;
    }

    .nexfolio-step::before {
        left: 0.875rem;
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.85rem;
        top: 0.875rem;
    }

    .nexfolio-faq-item {
        padding: 1rem 1.25rem;
        margin-bottom: 0.875rem;
    }

    .nexfolio-faq-item p {
        padding-left: 1.5rem;
        font-size: 0.9rem;
    }

    .nexfolio-checklist li,
    .is-style-nexfolio-checklist li {
        padding: 0.4rem 0 0.4rem 1.75rem;
        font-size: 0.9rem;
    }

    .nexfolio-checklist li::before,
    .is-style-nexfolio-checklist li::before {
        top: 0.4rem;
    }
}