/* 
    Lesson Page Styles
    
    This file contains styles specific to lesson pages.
    Students can learn how page-specific styles are organized separately
    from shared components.
*/

/* 
    Lesson Container
    
    Limits the width of lesson content for optimal readability.
    Centered layout with padding for comfortable reading.
*/
.lesson-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
}

/* 
    Lesson Page Navigation Links
    
    These are the previous/next/home links found at the top
    and bottom of lesson pages. They differ from the main
    site navigation.
*/
.lesson-nav-links {
    margin-bottom: 2rem;
}

.lesson-nav-links a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s;
}

.lesson-nav-links a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

.lesson-nav-links a:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 4px;
}