/* Main CSS File - Imports all modules */

/* 1. Base styles and CSS variables */
@import url('modules/base.css');

/* 2. Typography styles */
@import url('modules/typography.css');

/* 3. Layout styles */
@import url('modules/layout.css');

/* 4. Component styles */
@import url('modules/components.css');

/* 5. Utility classes (if needed) */
@import url('modules/utilities.css');

/* 6. Page-specific styles (if needed) */
@import url('modules/pages.css');

/* 7. Responsive overrides */
@import url('modules/responsive.css');

/* Temporary - Additional custom styles during transition */

/* Search input customization - half width and right aligned */
.search-container {
    max-width: 25% !important;  /* Half the original width */
    margin-left: auto !important;  /* Push to right */
}

.search-input {
    width: 100% !important;
    font-size: 14px !important;  /* Slightly smaller font */
}

/* Move nav-menu 20px to the right */
.nav-menu, 
div.nav-menu {
    margin-left: 20px !important;
}

/* Nav list marker spacing */
li.nav-item::marker {
    margin-left: 10px !important;
}

/* Adjust nav-list vertical position to align baseline with h1.site-title */
ul.nav-list {
    position: relative !important;
    top: 3px !important;  /* Adjust this value to align baselines */
    margin-bottom: 0 !important;
}

/* Alternative: align nav-list items with site title baseline */
.main-navigation {
    display: flex !important;
    align-items: baseline !important;
}

/* ULTRA COMPACT LESSON HEADER - Override everything */
header.lesson-header,
.lesson-header,
div.lesson-header,
section.lesson-header {
    margin: 0 !important;
    margin-bottom: 2px !important;
    padding: 0 !important;
    height: auto !important;
    min-height: unset !important;
    max-height: fit-content !important;
    border-bottom: 1px solid #e5e5e5;
}

/* FORCE H1 and H2 sizes with very specific selectors */
.lesson-header h1,
header.lesson-header h1,
div.lesson-header h1,
section.lesson-header h1,
.lesson-header > h1,
.lesson-header * h1,
body .lesson-header h1,
body main .lesson-header h1,
body .main-content .lesson-header h1,
body .container .lesson-header h1,
body .lesson-content .lesson-header h1 {
    font-size: 42px !important;  /* LARGER - increased from 32px */
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
}

.lesson-header h2,
header.lesson-header h2,
div.lesson-header h2,
section.lesson-header h2,
.lesson-header > h2,
.lesson-header * h2,
.lesson-content .lesson-header h2 {
    font-size: 20px !important;  /* Keep h2 at attempted smaller size */
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.1 !important;
    font-weight: 600 !important;
}

/* Even more specific selectors for h2 */
body .lesson-header h2,
body .main-content .lesson-header h2,
body main .lesson-header h2,
body .container .lesson-header h2 {
    font-size: 20px !important;
}

/* Force direct children to be compact */
.lesson-header > * {
    margin: 0 !important;
    padding: 0 !important;
}

/* Force any nested elements to be compact */
.lesson-header * * {
    margin: 0 !important;
    padding: 0 !important;
}

/* Specific overrides for any framework classes */
.lesson-header .container,
.lesson-header .row,
.lesson-header .col,
.lesson-header .wrapper {
    margin: 0 !important;
    padding: 0 !important;
}

/* If headings have ::before or ::after pseudo elements */
.lesson-header h1::before,
.lesson-header h1::after,
.lesson-header h2::before,
.lesson-header h2::after,
.lesson-header h3::before,
.lesson-header h3::after {
    display: none !important;
}

/* Debug and force h2 size with inline style equivalent */
.lesson-header h2,
.lesson-header h2 *,
h2.lesson-header,
[class*="lesson-header"] h2 {
    font-size: 18px !important;
    font-size: 1.125rem !important;
    transform: scale(0.9) !important;
    transform-origin: left center !important;
    display: inline-block !important;
}

/* Alternative approach - make h2 visually smaller */
.lesson-header h2::first-line {
    font-size: 18px !important;
}

/* Lesson objectives - BALANCED spacing above and below */
.lesson-objectives,
div.lesson-objectives,
section.lesson-objectives,
.container .lesson-objectives,
.lesson-content .lesson-objectives,
main .lesson-objectives,
body .lesson-objectives {
    margin-top: var(--spacing-md) !important;  /* Same as bottom spacing */
    margin-bottom: var(--spacing-md) !important;  /* Reduced from spacing-lg */
    padding-top: var(--spacing-xs) !important;  /* Small padding */
    padding-bottom: var(--spacing-xs) !important;
}

/* Target the heading inside lesson objectives - REDUCED space above h2 */
.lesson-objectives h2,
.lesson-objectives h3,
.lesson-objectives h4 {
    margin-top: var(--spacing-xs) !important;  /* Reduced by 80% - about 4px */
    margin-bottom: var(--spacing-sm) !important;
    padding-top: 2px !important;  /* Minimal padding */
    display: block !important;
}

/* More specific selectors to override conflicts */
.lesson-objectives > h2:first-child,
.lesson-objectives > h3:first-child,
.lesson-objectives > h4:first-child,
div.lesson-objectives h2,
div.lesson-objectives h3,
div.lesson-objectives h4,
.lesson-content .lesson-objectives h2,
.lesson-content .lesson-objectives h3,
.lesson-content .lesson-objectives h4 {
    margin-top: var(--spacing-xs) !important;  /* Reduced */
    padding-top: 2px !important;  /* Minimal */
}

/* But keep first child with no top margin if it's not an h2 */
.lesson-objectives > :first-child:not(h2):not(h3):not(h4) {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* If "Learning Objectives" is the text, target it specifically */
.lesson-objectives h2:contains("Learning Objectives"),
.lesson-objectives h3:contains("Learning Objectives"),
h2:contains("Learning Objectives"),
h3:contains("Learning Objectives") {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Reduce spacing of elements inside lesson objectives */
.lesson-objectives ul,
.lesson-objectives ol,
.lesson-objectives p {
    margin-top: 0 !important;
    margin-bottom: var(--spacing-xs) !important;
}

.lesson-objectives li {
    margin-bottom: 2px !important;  /* Minimal spacing between list items */
}

/* REDUCE space below lesson meta and make horizontal */
.lesson-meta,
div.lesson-meta,
section.lesson-meta,
.container .lesson-meta,
.lesson-content .lesson-meta,
main .lesson-meta,
body .lesson-meta {
    margin-bottom: var(--spacing-sm) !important;  /* Reduced bottom space */
    padding-bottom: 0 !important;  /* No padding bottom */
    display: flex !important;  /* Make content horizontal */
    flex-wrap: wrap !important;  /* Allow wrapping on small screens */
    align-items: center !important;  /* Vertically center items only */
    justify-content: flex-start !important;  /* LEFT align content */
    gap: var(--spacing-md) !important;  /* Space between items */
    text-align: left !important;  /* Left align text */
    min-height: 40px !important;  /* Ensure minimum height for vertical centering */
}

/* Make children of lesson-meta display inline and vertically centered */
.lesson-meta > *,
.lesson-meta p,
.lesson-meta span,
.lesson-meta div {
    margin: 0 !important;  /* Remove vertical margins */
    display: inline-flex !important;
    align-items: center !important;  /* Vertically center each item */
    justify-content: flex-start !important;  /* Left align content within each item */
}

/* Add separator between meta items */
.lesson-meta > *:not(:last-child)::after {
    content: "•";
    margin-left: var(--spacing-md);
    color: var(--text-light);
    font-weight: normal;
}

/* Alternative: use pipe separator */
.lesson-meta.pipe-separator > *:not(:last-child)::after {
    content: "|";
    margin-left: var(--spacing-md);
    color: var(--text-light);
}

/* REDUCE space between ALL containers/sections by 60% */
.lesson-content > div,
.lesson-content > section,
.lesson-body > div,
.lesson-body > section,
main > div,
main > section {
    margin-bottom: var(--spacing-md) !important;  /* Reduced from spacing-xl (60% less) */
}

/* But remove top margin to prevent doubling */
.lesson-content > div + div,
.lesson-content > section + section,
.lesson-body > div + div,
.lesson-body > section + section {
    margin-top: 0 !important;
}

/* ==========================================
   MERMAID DIAGRAM STYLES
   Universal styles for all Mermaid diagrams
   ========================================== */

/* Container for mermaid diagrams - handles both class names */
.mermaid-diagram,
.mermaid-container {
    margin: 2rem auto;
    padding: 2rem;
    background-color: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: visible !important;
    min-height: 300px;
    max-width: 100%;
    box-sizing: border-box;
}

/* The actual mermaid element - constrain size */
pre.mermaid,
.mermaid,
div.mermaid {
    background: transparent !important;
    border: none !important;
    margin: 0 auto !important;
    padding: 1rem !important;
    overflow: visible !important;
    display: block !important;
    width: 100% !important;
    max-width: 900px !important; /* Prevent oversized diagrams */
    text-align: center !important;
}

/* Center and allow full height for SVG */
.mermaid svg,
.mermaid-diagram svg,
.mermaid-container svg {
    display: block !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    /* Remove height restrictions to prevent cutoff */
    max-height: none !important;
    height: auto !important;
    width: auto !important;
    overflow: visible !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .mermaid-diagram,
    .mermaid-container {
        padding: 1rem;
    }
    
    /* Remove height restrictions on mobile too */
    .mermaid svg,
    .mermaid-container svg,
    .mermaid-diagram svg {
        max-height: none !important;
        height: auto !important;
    }
}

/* Force ALL text in diagrams to be visible and LARGER */
.mermaid text,
.mermaid .nodeLabel,
.mermaid .edgeLabel,
.mermaid .label,
.mermaid tspan {
    fill: #000000 !important;
    stroke: none !important;
    font-family: Arial, sans-serif !important;
    font-size: 18px !important;  /* Increased from 14px */
    font-weight: 600 !important;  /* Made bolder */
    opacity: 1 !important;
    visibility: visible !important;
}

/* Timeline specific text styling */
.mermaid [id*="timeline"] text,
.mermaid .timeline text,
.mermaid g.timeline text {
    font-size: 20px !important;  /* Even larger for timeline */
    font-weight: 700 !important;
}

/* Ensure HTML content in diagrams is also larger */
.mermaid span,
.mermaid div {
    color: #000000 !important;
    font-family: Arial, sans-serif !important;
    font-size: 18px !important;  /* Increased from 14px */
    font-weight: 600 !important;  /* Made bolder */
    opacity: 1 !important;
    visibility: visible !important;
}

/* Flowchart specific text */
.mermaid .flowchart-label text,
.mermaid [id^="flowchart"] text {
    fill: #000000 !important;
    stroke: none !important;
}

/* Node styles */
.mermaid .node rect,
.mermaid .node circle,
.mermaid .node ellipse,
.mermaid .node polygon {
    fill: #E8F4FF !important;
    stroke: #5B9BD5 !important;
    stroke-width: 2px !important;
}

/* Node labels - ensure they're visible */
.mermaid .node .label,
.mermaid .node div,
.mermaid .nodeLabel {
    color: #000000 !important;
    fill: #000000 !important;
    background-color: transparent !important;
}

/* Edge/link labels */
.mermaid .edgeLabel,
.mermaid .edgeLabel rect,
.mermaid .edgeLabel span {
    background-color: #ffffff !important;
    fill: #000000 !important;
    color: #000000 !important;
}

/* Arrow/path styles */
.mermaid .flowchart-link,
.mermaid path.path {
    stroke: #333333 !important;
    stroke-width: 2px !important;
    fill: none !important;
}

/* Arrowheads */
.mermaid .arrowheadPath {
    fill: #333333 !important;
    stroke: #333333 !important;
}

/* Make sure text inside HTML labels is visible */
.mermaid foreignObject div,
.mermaid foreignObject span {
    color: #000000 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* Cluster/subgraph styles */
.mermaid .cluster rect {
    fill: #ffffde !important;
    stroke: #aaaa33 !important;
    stroke-width: 1px !important;
}

.mermaid .cluster text {
    fill: #000000 !important;
}

/* Prevent cutoff at bottom */
.mermaid-diagram::after {
    content: "";
    display: block;
    height: 50px; /* Extra space at bottom */
    clear: both;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .mermaid-diagram {
        padding: 1rem;
        margin: 1rem auto;
        min-height: 300px;
    }
    
    pre.mermaid {
        font-size: 14px !important;
        padding: 10px !important;
        min-height: 250px !important;
    }
    
    .mermaid text,
    .mermaid .nodeLabel,
    .mermaid .edgeLabel {
        font-size: 12px !important;
    }
}

/* Force consistent spacing for lesson objectives */
*[class*="lesson-objectives"] {
    margin-top: var(--spacing-md) !important;  /* Equal spacing above */
    padding-top: var(--spacing-xs) !important;
}

/* Target any h2 or h3 that might say "Learning Objectives" */
h2,
h3 {
    /* Only if inside lesson-objectives */
    .lesson-objectives & {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* Ensure balanced spacing when lesson-objectives follows other elements */
h1 + .lesson-objectives,
h2 + .lesson-objectives,
h3 + .lesson-objectives,
p + .lesson-objectives,
div + .lesson-objectives {
    margin-top: var(--spacing-md) !important;  /* Consistent spacing */
}

/* Force SMALL space BEFORE h2 using pseudo-element */
.lesson-objectives h2::before,
.lesson-objectives > h2::before,
div.lesson-objectives h2::before {
    content: "";
    display: block !important;
    height: 4px !important;  /* Reduced by 80% */
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Alternative: Add minimal padding to the container itself when h2 is first */
.lesson-objectives:has(> h2:first-child) {
    padding-top: var(--spacing-xs) !important;  /* Reduced by 80% */
}

/* Best practice boxes */
.best_practice, .real_world_example {
    background-color: var(--bg-white);
    border: 2px solid var(--primary-light);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
    position: relative;
}

.best_practice::before {
    content: "💡 Best Practice";
    position: absolute;
    top: -12px;
    left: var(--spacing-lg);
    background-color: var(--bg-color);
    padding: 0 var(--spacing-sm);
    color: var(--primary-color);
    font-weight: 600;
}

.real_world_example::before {
    content: "🌍 Real World Example";
    position: absolute;
    top: -12px;
    left: var(--spacing-lg);
    background-color: var(--bg-color);
    padding: 0 var(--spacing-sm);
    color: var(--secondary-color);
    font-weight: 600;
}

/* Key concepts box */
.key_concepts {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(34, 197, 94, 0.05));
    border: 2px solid var(--primary-light);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    margin: var(--spacing-xl) 0;
}

/* Comment blocks */
.comment-block {
    background-color: rgba(14, 165, 233, 0.05);
    border-left: 4px solid var(--info-color);
    padding: var(--spacing-md) var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
}

/* Homework section */
.homework {
    background-color: var(--bg-white);
    border: 2px solid var(--warning-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    margin: var(--spacing-2xl) 0;
    position: relative;
}

.homework::before {
    content: "📝 Homework Assignment";
    position: absolute;
    top: -16px;
    left: var(--spacing-lg);
    background-color: var(--bg-color);
    padding: 0 var(--spacing-md);
    color: var(--warning-color);
    font-size: var(--font-size-lg);
    font-weight: 700;
}

/* Module intro section */
.module-intro {
    background-color: var(--bg-white);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
    box-shadow: var(--shadow-sm);
}

.module-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 2px solid var(--border-color);
}

/* Session/Week sections */
.week {
    margin-bottom: var(--spacing-3xl);
}

.week h2 {
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    color: white;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--border-radius-md);
    margin-bottom: var(--spacing-xl);
}

.session {
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    transition: all var(--transition-fast);
}

.session:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-light);
}

.session h3 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
}

/* Resources section */
.resources {
    background-color: var(--bg-white);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    margin-top: var(--spacing-2xl);
}

.resources h2 {
    background: none;
    color: var(--text-dark);
    padding: 0;
    margin-bottom: var(--spacing-lg);
}