/* 
    Shared Components Styles
    
    This file contains styles for reusable components used across
    multiple page types (lessons, guides, etc.).
    
    Students can learn how to create reusable component styles that
    work consistently across different pages.
*/

/* 
    Learning Outcomes Box
    
    This component displays learning objectives and prerequisites.
    Used in both lesson and guide pages to set expectations.
*/
.learning-outcomes {
    background-color: #e0f2fe;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    border-left: 4px solid var(--primary-color);
}

/* 
    Concept Section
    
    Used to group related content within lessons and guides.
    Provides consistent spacing between major topics.
*/
.concept-section {
    margin-bottom: 3rem;
}

/* 
    Code Example Container
    
    Styles code blocks to make them easily readable.
    Dark background with light text creates high contrast
    and clearly distinguishes code from regular text.
    Now enhanced with syntax highlighting via Prism.js.
*/
.code-example-wrapper {
    position: relative;
    margin: 1rem 0;
}

.code-example {
    background-color: #1e293b;
    color: #e2e8f0;
    padding: 1.5rem;
    padding-top: 3rem; /* Extra space at top for copy button */
    border-radius: 8px;
    margin: 0;
    overflow-x: auto;  /* Allows horizontal scrolling for long lines */
    position: relative;
}

.code-example code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.95rem;
    line-height: 1.6;
    display: block;
    color: inherit;
}

/* 
    Copy Code Button
    
    Provides an easy way for students to copy code examples.
    Positioned in the top-right corner of code blocks.
*/
.copy-code-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background-color: #334155;
    color: #e2e8f0;
    border: 1px solid #475569;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    z-index: 10;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.copy-code-btn:hover {
    background-color: #475569;
    border-color: #64748b;
}

.copy-code-btn:focus {
    outline: 2px solid var(--primary-color, #2563eb);
    outline-offset: 2px;
}

.copy-code-btn:active {
    background-color: #1e293b;
}

/* Prism.js syntax highlighting theme overrides */
.code-example pre[class*="language-"] {
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.code-example code[class*="language-"] {
    background: transparent;
    padding: 0;
}

/* 
    Worked Example Box
    
    Provides step-by-step examples that walk students through
    concepts with practical demonstrations.
*/
.worked-example {
    background-color: #f0f9ff;
    padding: 1.5rem;
    border-radius: 8px;
    margin: 1.5rem 0;
}

/* 
    Exercise Box
    
    Styles practice exercises and challenges.
    Distinctive yellow/orange color helps students
    identify exercises they should complete.
*/
.exercise {
    background-color: #fef3c7;
    padding: 1.5rem;
    border-radius: 8px;
    margin: 2rem 0;
    border-left: 4px solid #f59e0b;
}