/* v7 - 2026-01-23: Added media query support for instant Dark Mode */

/* Modern "Two-Tone Card" Boxout Styling v2.5 */

.sbb-boxout {
    background: var(--sbb-color-bg, #f8fafc);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px 28px;
    margin: 32px 0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    font-family: var(--sbb-font-body, sans-serif);
    box-sizing: border-box;
    overflow: hidden;
}

/* Header styling via negative margins */
.sbb-boxout h3, 
.sbb-boxout h4 {
    font-family: var(--sbb-font-head, serif);
    color: var(--sbb-color-accent, #2563eb);
    background: #ffffff; /* Default white header */
    margin: -24px -28px 20px -28px !important;
    padding: 18px 28px !important;
    border-bottom: 1px solid #e2e8f0;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
}

.sbb-boxout p, 
.sbb-boxout li {
    font-family: var(--sbb-font-body, sans-serif);
    font-size: 0.95rem;
    color: var(--sbb-color-text, #334155);
    line-height: 1.6;
    margin-bottom: 16px;
}

.sbb-boxout *:last-child {
    margin-bottom: 0 !important;
}

/* --- JS-BASED DARK MODE --- */
body[data-scheme="dark"] .sbb-boxout {
    background: #1e293b !important; /* Dark Slate Body */
    border-color: #334155 !important;
    box-shadow: none !important;
}

body[data-scheme="dark"] .sbb-boxout h3, 
body[data-scheme="dark"] .sbb-boxout h4 {
    background: #0f172a !important; /* Dark Navy Header */
    color: #e2e8f0 !important; /* Light Text for Title */
    border-bottom-color: #334155 !important;
}

body[data-scheme="dark"] .sbb-boxout p,
body[data-scheme="dark"] .sbb-boxout li {
    color: #cbd5e1 !important; /* Light Gray Text */
}

/* --- INSTANT SYSTEM DARK MODE (v7) --- */
@media (prefers-color-scheme: dark) {
    body:not([data-scheme="light"]) .sbb-boxout {
        background: #1e293b !important;
        border-color: #334155 !important;
        box-shadow: none !important;
    }

    body:not([data-scheme="light"]) .sbb-boxout h3, 
    body:not([data-scheme="light"]) .sbb-boxout h4 {
        background: #0f172a !important;
        color: #e2e8f0 !important;
        border-bottom-color: #334155 !important;
    }

    body:not([data-scheme="light"]) .sbb-boxout p,
    body:not([data-scheme="light"]) .sbb-boxout li {
        color: #cbd5e1 !important;
    }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .entry-content .sbb-boxout,
  .mce-content-body .sbb-boxout {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 2rem 0 !important;
    display: block !important;
    clear: both !important;
  }
}