/* static/css/style.css */

/* =========================================
   1. VARIABLES & THEME CONFIGURATION
   ========================================= */
:root {
    /* --- LIGHT MODE (Default) --- */
    --bg-color: #ffffff;
    --text-color: #222222;
    --sidebar-text: #000000;
    --accent-color: #004488;
    --meta-color: #666666;
    --sidebar-bg: #fdfdfd;
    --border-color: #eeeeee;
    --code-bg: #f7f9fb;
    --btn-hover: #f0f0f0;
    
    /* Logo: Black box, White text */
    --logo-bg: #222222;
    --logo-text: #ffffff;

    /* Fonts */
    --font-body: "Georgia", "Times New Roman", serif;
    --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
}

/* --- DARK MODE OVERRIDE --- */
[data-theme="dark"] {
    --bg-color: #222222;
    --text-color: #e0e0e0;
    --sidebar-text: #ffffff;
    --accent-color: #66b2ff;
    --meta-color: #aaaaaa;
    --sidebar-bg: #222222;
    --border-color: #333333;
    --code-bg: #1c1c1c;
    --btn-hover: #333333;

    /* Logo: White box, Dark text */
    --logo-bg: #ffffff;
    --logo-text: #222222;
}

/* =========================================
   2. GLOBAL RESETS & BODY
   ========================================= */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-body);
    line-height: 1.7;
    font-size: 18px;
    margin: 0;
    padding: 0;
    transition: background-color 0.3s, color 0.3s;
}

/* =========================================
   3. THE GRID LAYOUT
   ========================================= */
.layout-wrapper {
    display: grid;
    grid-template-columns: 260px minmax(0, 740px);
    gap: 60px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px;
    align-items: start;
}

/* =========================================
   4. SIDEBAR & NAVIGATION
   ========================================= */
.sidebar {
    font-family: var(--font-ui);
    font-size: 0.9rem;
    position: sticky; /* Desktop Default */
    top: 40px;
    padding-right: 20px;
    border-right: 1px solid transparent;
    max-height: calc(100vh - 40px); /* PREVENTS OVERFLOW ON DESKTOP */
    overflow-y: auto; /* ALLOWS SCROLLING WITHIN SIDEBAR ON DESKTOP */
}

.logo-box {
    width: 40px; 
    height: 40px; 
    background: var(--logo-bg); 
    color: var(--logo-text); 
    text-align: center; 
    line-height: 40px; 
    font-weight: bold; 
    border-radius: 4px;
    font-family: var(--font-ui);
}

.author-name {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--sidebar-text);
    display: block;
    margin-bottom: 5px;
    letter-spacing: -0.5px;
    text-decoration: none;
}

.author-bio {
    color: var(--meta-color);
    font-size: 0.85rem;
    margin-bottom: 30px;
    line-height: 1.5;
}

.nav-section { margin-bottom: 30px; }

.nav-title {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
    color: var(--meta-color);
    margin-bottom: 15px;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 5px;
}

.nav-link {
    display: block;
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 3px;
    transition: color 0.2s;
}
.nav-link:hover { color: var(--text-color); text-decoration: underline; }

.nav-desc {
    font-size: 0.75rem;
    color: var(--meta-color);
    line-height: 1.35;
    margin-bottom: 0;
}

.nav-item-container { margin-bottom: 18px; }

/* =========================================
   5. UI ELEMENTS
   ========================================= */
.theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--meta-color);
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    z-index: 1000;
}
.theme-toggle:hover {
    background-color: var(--btn-hover);
    color: var(--text-color);
}

/* =========================================
   6. MAIN CONTENT TYPOGRAPHY
   ========================================= */
.main-content { min-width: 0; }

h1, h2, h3 { 
    font-family: var(--font-body);
    color: var(--text-color); 
    margin-top: 2em; 
    line-height: 1.3;
    font-weight: 700;
}
h1 { font-size: 2.4rem; margin-top: 0; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--meta-color); font-family: var(--font-ui); }

a { color: var(--accent-color); text-decoration: none; }
a:hover { text-decoration: underline; }

blockquote {
    border-left: 3px solid var(--accent-color);
    padding-left: 15px;
    color: var(--meta-color);
    font-style: italic;
    margin: 20px 0;
}

/* =========================================
   7. MOBILE OVERRIDES (MUST BE LAST)
   ========================================= */
@media (max-width: 900px) {
    .layout-wrapper { 
        grid-template-columns: 1fr; 
        gap: 40px; 
    }
    
    .sidebar { 
        position: relative; /* DISABLE STICKY ON MOBILE */
        top: 0; 
        border-right: none; 
        border-bottom: 1px solid var(--border-color); 
        padding-bottom: 20px;
        max-height: none; /* Let it grow naturally */
        overflow-y: visible;
    }
    
    .theme-toggle { top: 15px; right: 15px; }
}