/* * LOGICORIA MASTER TYPOGRAPHY (Navy Blue Refinement)
 * Includes: Match color from image, Fixed Heading weights
 */

/* 1. MASTER ARTICLE LAYOUT */
#logicoria-roadmap-root {
    max-width: 800px; 
    margin: 20px auto;
    padding: 0 25px;
    text-align: left;
    /* Using a cleaner, modern font stack similar to your image */
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* 2. THE MAIN TITLE (H1) */
#main-lesson-title {
    display: block !important;
    font-size: clamp(2.2rem, 5vw, 3rem) !important;
    font-weight: 800 !important;
    color: #1a4ba0 !important; /* Professional Blue */
    letter-spacing: -1.5px !important;
    line-height: 1.1;
    margin-bottom: 25px !important;
}

/* 3. AUTOMATIC SECTION HEADERS (H2 - H3) - COLOR & WEIGHT MATCHED TO IMAGE */
#roadmap-content-body h2 {
    display: block !important;
    font-size: 1.85rem !important;
    font-weight: 600 !important; /* Clean semi-bold from image */
    color: #1a438e !important; /* Deep Navy Blue matched from image */
    margin-top: 45px !important;
    margin-bottom: 0px !important; 
    line-height: 1.2;
    letter-spacing: -0.5px;
}

#roadmap-content-body h3 {
    font-size: 1.5rem !important;
    font-weight: 600 !important; /* Balanced weight */
    color: #1a438e !important; /* Matching Navy Blue */
    margin-top: 35px !important;
    margin-bottom: 8px !important;
}

/* 4. H4 WITH BLUE UNDERLINE (Interview Style) */
#roadmap-content-body h4 {
    display: inline-block !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #1a438e !important;
    margin-top: 30px !important;
    margin-bottom: 12px !important;
    border-bottom: 3px solid #3b82f6 !important; 
    padding-bottom: 3px !important;
}

/* 5. PARAGRAPHS & THE TWO-LINE GAP FIX */
#roadmap-content-body p {
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
    margin-bottom: 18px !important;
    margin-top: 0 !important;
    color: #334155 !important; /* Slate grey for clean reading */
}

/* THE MAGIC: 2 lines of space ONLY after an H2 */
#roadmap-content-body h2 + p {
    margin-top: 32px !important; 
}

/* 6. BULLETS & LISTS */
#roadmap-content-body ul {
    margin: 15px 0 25px 30px !important;
    list-style-type: disc;
}

#roadmap-content-body li {
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
    margin-bottom: 10px !important;
    color: #334155 !important;
}

/* 7. THE LOGIC BOX (The "Aha!" Moment) */
.logic-box {
    background: #f8fafc !important;
    border-left: 5px solid #143fd8 !important; 
    padding: 20px 25px !important;
    margin: 35px 0 !important;
    border-radius: 4px 12px 12px 4px !important;
}

.logic-box-title {
    display: block !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    font-size: 0.8rem !important;
    letter-spacing: 1.2px !important;
    color: #143fd8 !important;
    margin-bottom: 8px !important;
}

.logic-box p {
    margin-bottom: 0 !important; 
    font-style: italic !important;
    color: #334155 !important;
    font-size: 1rem !important;
}

/* 🛡️ DARK THEME SUPPORT */
@media (prefers-color-scheme: dark) {
    .dark-theme #main-lesson-title { color: #ffffff !important; }
    .dark-theme #roadmap-content-body h2,
    .dark-theme #roadmap-content-body h3,
    .dark-theme #roadmap-content-body h4 { color: #f8fafc !important; }
    .dark-theme #roadmap-content-body p,
    .dark-theme #roadmap-content-body li { color: #cbd5e1 !important; }
    .dark-theme .logic-box { background: #0f172a !important; border-left-color: #3b82f6 !important; }
    .dark-theme .logic-box p { color: #94a3b8 !important; }
}

/* 📱 MOBILE OPTIMIZATION */
@media (max-width: 768px) {
    #logicoria-roadmap-root { padding: 0 15px; }
    #roadmap-content-body h2 { font-size: 1.6rem !important; }
}