/* Kaeli M. Gretter | Light-Code Theme
   Colors: Celadon (#AFE1AF) & Documentation Light
*/

:root {
    --celadon: #AFE1AF;
    --celadon-dark: #6e9a6e;
    --bg-light: #ffffff;
    --code-bg: #f6f8fa;       
    --border-gray: #d0d7de;   
    --text-main: #24292f;     
    --comment-gray: #57606a;  
}

/* --- Global Setup --- */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Fira Code', 'Courier New', monospace;
    margin: 0;
    background-color: var(--bg-light);
    color: var(--text-main);
    line-height: 1.45;
    font-size: 0.95rem;
}

/* --- Navigation & Visibility --- */
.top-nav {
    background-color: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid var(--border-gray);
    position: fixed; /* Keeps nav visible on scroll */
    width: 100%;     
    top: 0;          
    left: 0;         
    z-index: 9999;   
    height: 60px;
}

.nav-container {
    max-width: 1100px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between; /* Keeps logo left, group right */
    align-items: center;
    padding: 0 2rem;
    gap: 20px;
}

.nav-right-group {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Small gap between links and menu button */
}

/* --- Links & Vertical Cues --- */
.nav-links {
    list-style: none; 
    display: flex; 
    flex-direction: row; 
    align-items: center;
    margin: 0; 
    padding: 0; 
    order: 1; /* Sits to the left of the button */
}

.nav-links li {
    display: flex;
    align-items: center;
}

.nav-links a { 
    text-decoration: none; 
    font-size: 0.85rem; 
    color: var(--text-main);
    text-transform: uppercase; 
    letter-spacing: 1px;
    padding: 0 1rem; /* Spacing between links and pipes */
    transition: color 0.2s ease;
}

/* The vertical visual cue (|) */
.nav-links li:not(:last-child)::after {
    content: "|";
    color: var(--border-gray);
    font-weight: 300;
    font-family: 'Courier New', monospace;
}

.nav-links a:hover { 
    color: var(--celadon-dark); 
    background-color: transparent; /* No box on hover */
    text-decoration: none; 
}

/* --- Refined Toggle (Menu Button) --- */
.menu-toggle {
    display: none;
}

.menu-button {
    order: 2; /* Far right of the group */
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background-color: var(--code-bg);
    border: 1px solid var(--border-gray);
    border-radius: 4px;
    font-family: 'Fira Code', monospace;
    font-size: 0.8rem;
    transition: all 0.2s ease;
    user-select: none;
}

.menu-button .menu-brackets {
    color: var(--celadon-dark);
    font-weight: bold;
}

.menu-button:hover {
    border-color: var(--celadon-dark);
}

.menu-toggle:checked + .menu-button {
    background-color: var(--celadon);
    border-color: var(--celadon-dark);
}

/* --- Responsive Logic --- */

/* Desktop: Hide menu button, show links with pipes */
@media (min-width: 851px) {
    .menu-button {
        display: none;
    }
}

/* Mobile/Narrow: Show button, turn links into dropdown, remove pipes */
@media (max-width: 850px) {
    .menu-button {
        display: flex;
    }

    .nav-links {
        display: none; 
        position: fixed; 
        top: 60px;       
        right: 0;
        background: var(--bg-light);
        border: 1px solid var(--border-gray);
        flex-direction: column;
        width: 220px;
        max-height: calc(100vh - 60px); 
        overflow-y: auto;
        box-shadow: -2px 4px 10px rgba(0,0,0,0.05);
    }

    .nav-links li::after {
        display: none; /* Hide pipes in dropdown */
    }

    .nav-links li {
        border-bottom: 1px solid var(--border-gray);
        width: 100%;
    }

    .nav-links a {
        padding: 15px 20px;
        display: block;
        width: 100%;
    }

    .menu-toggle:checked ~ .nav-links {
        display: flex;
    }
}

/* --- Banner & Hero --- */
.banner-container {
    width: 100%;
    height: 250px;
    overflow: hidden;
    margin-top: 60px; /* Accommodates fixed nav */
    border-bottom: 1px solid var(--border-gray);
    background-color: var(--code-bg);
}

.site-banner {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero {
    padding: 2.5rem 2rem 1rem 2rem;
    max-width: 1000px;
    margin: 0 auto;
    border-left: 4px solid var(--celadon);
}

.hero h1 { font-size: 1.8rem; margin: 0 0 0.5rem 0; }
.hero p { color: var(--comment-gray); margin: 0; }

/* --- Content Layout --- */
.wrapper { 
    max-width: 1000px; 
    margin: 0 auto; 
    padding: 1.5rem 2rem; 
}

.section-block { margin-bottom: 3rem; }

/* Hides section labels as requested */
.section-label { 
    display: none; 
}

.course-column {
    background: var(--code-bg);
    padding: 1.8rem;
    border-radius: 6px;
    border: 1px solid var(--border-gray);
    width: 100%;
}

.course-column h3 { 
    font-size: 1rem;
    color: var(--celadon-dark);
    margin-bottom: 0.8rem;
    border-bottom: 1px solid var(--border-gray);
    padding-bottom: 0.4rem;
}

p { margin-bottom: 0.6rem; }

.course-list { list-style: none; padding: 0; margin-bottom: 1.5rem; }
.course-list li { padding: 0.3rem 0; font-size: 0.9rem; padding-left: 1.2em; text-indent: -1.2em; }
.course-list li::before { content: "• "; color: var(--celadon-dark); }

/* --- Global Links --- */
a {
    color: #6e9a6e;
    text-decoration: underline;
    text-decoration-color: var(--celadon);
    text-underline-offset: 3px;
}

a:hover {
    background-color: var(--celadon);
    color: var(--text-main);
    text-decoration: none;
}

/* --- Footer --- */
footer {
    margin-top: 4rem;
    padding-bottom: 4rem;
    color: var(--comment-gray);
    font-size: 0.85rem;
}