/* === RESET & BASE === */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; line-height: 1.6; }

/* === LAYOUT === */
.container { max-width: 1200px; margin: 0 auto; padding: 2rem 1rem; }
.content-row { display: flex; gap: 2rem; }
.sidebar, .sidebar-right { flex: 0 0 250px; }
.main-content { flex: 1; }
.single-page { max-width: 800px; margin: 0 auto; }

/* === NAVIGATION === */
.top-menu { background: #333; padding: 1rem 0; }
.top-menu ul { list-style: none; display: flex; justify-content: center; }
.top-menu li { margin: 0 1.5rem; }
.top-menu a { color: white; text-decoration: none; font-weight: bold; }
.top-menu a:hover { color: #ccc; }

/* === BANNER === */
.banner { width: 100%; overflow: hidden; }
.banner-img { width: 100%; height: 250px; object-fit: cover; }

/* === FOOTER === */
.footer { background: #333; color: white; text-align: center; padding: 2rem; margin-top: 3rem; }

/* === ARTICLES GRID === */
.articles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; }
.article-card { border: 1px solid #ddd; padding: 1.5rem; border-radius: 8px; }
.article-meta { color: #666; font-size: 0.9em; margin-bottom: 1rem; }
.read-more { color: #007cba; text-decoration: none; font-weight: bold; }

/* === TYPOGRAPHY === */
.main-content h1,
.single-page h1 { font-size: 2.5rem; margin-bottom: 1rem; color: #333; }

.main-content section h2,
.single-page h2 { 
    color: #333; 
    margin-top: 2rem; 
    margin-bottom: 1rem; 
    padding-bottom: 0.5rem; 
    border-bottom: 2px solid #eee; 
}

.main-content p,
.single-page p { line-height: 1.6; margin-bottom: 1rem; }

.main-content a,
.single-page a { color: #007cba; text-decoration: none; }

.main-content a:hover,
.single-page a:hover { text-decoration: underline; }

/* === LISTS === */
.main-content ul,
.main-content ol,
.single-page ul { 
    margin: 1rem 0 1.5rem 0; 
    padding-left: 2.5rem; 
    list-style-position: outside; 
}

.main-content ul,
.single-page ul { list-style-type: disc; }

.main-content ol { list-style-type: decimal; }

.main-content li,
.single-page li { 
    margin-bottom: 0.75rem; 
    padding-left: 0.5rem; 
    line-height: 1.6; 
}

.main-content ul ul,
.main-content ol ul { list-style-type: circle; margin-top: 0.5rem; }

.main-content ul ol,
.main-content ol ol { list-style-type: lower-alpha; margin-top: 0.5rem; }

/* === SIDEBAR === */
.sidebar-left h3 { font-size: 1.1rem; margin-bottom: 1rem; color: #333; }
.toc-list { list-style: none; padding: 0; }
.toc-list li { margin-bottom: 0.75rem; }
.toc-list a { 
    color: #007cba; 
    text-decoration: none; 
    display: block; 
    padding: 0.5rem; 
    border-left: 3px solid transparent; 
    transition: all 0.2s; 
}
.toc-list a:hover { border-left-color: #007cba; background: #f5f5f5; padding-left: 0.75rem; }

.main-content section { margin-bottom: 2rem; }

/* === BUTTONS === */
.btn { 
    padding: 0.75rem 1.5rem; 
    border: none; 
    cursor: pointer; 
    border-radius: 4px; 
    font-size: 1rem; 
}
.btn-primary { background: #007cba; color: white; }
.btn-primary:hover { background: #005a8c; }

/* === NAVIGATION BUTTONS (Shared Styles) === */
.nav-btn,
.nav-btn-inline { 
    display: inline-block; 
    background: #007cba; 
    color: white; 
    text-decoration: none; 
    border-radius: 4px; 
    font-weight: 500; 
    transition: background 0.2s; 
}

.nav-btn { padding: 0.75rem 1.5rem; }
.nav-btn-inline { padding: 0.5rem 1rem; font-size: 0.9rem; }

.nav-btn:hover,
.nav-btn-inline:hover { background: #005a8c; }

.nav-btn.disabled,
.nav-btn-inline.disabled { background: #ccc; color: #666; cursor: not-allowed; }

.nav-btn.home-btn,
.nav-btn-inline.home-btn { background: #666; }

.nav-btn.home-btn:hover,
.nav-btn-inline.home-btn:hover { background: #444; }

/* === ARTICLE NAVIGATION === */
.article-navigation,
.article-navigation-inline { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 1.5rem 0;
    border-bottom: 2px solid #eee; 
}

.article-navigation { margin: 1rem 0 2rem 0; }
.article-navigation.top-nav { margin-top: 0; }
.article-navigation.bottom-nav { margin-top: 3rem; border-top: 2px solid #eee; border-bottom: none; }

.article-navigation-inline { padding: 1rem 0; margin: 0 0 2rem 0; border-top: 2px solid #eee; gap: 1rem; }
.article-navigation-inline.top-nav { margin-bottom: 2rem; }
.article-navigation-inline.bottom-nav { margin-top: 3rem; margin-bottom: 0; }

.page-indicator { font-weight: 500; color: #666; }
.article-navigation .page-indicator { font-size: 0.95rem; }
.article-navigation-inline .page-indicator { font-size: 0.9rem; }

/* === FORMS === */
.contact-form .form-group { margin: 1.5rem 0; }
.contact-form label { display: block; margin-bottom: 0.5rem; font-weight: bold; }
.contact-form input,
.contact-form textarea { 
    width: 100%; 
    padding: 0.75rem; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    font-family: inherit; 
}
.contact-form textarea { resize: vertical; }

/* === ALERTS === */
.alert { padding: 1rem; margin: 1.5rem 0; border-radius: 4px; }
.alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.alert-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

/* === NOTICE BANNER === */
.notice-banner {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-left: 4px solid #ffc107;
    padding: 1rem 1.5rem;
    margin: 0 0 2rem 0;
    border-radius: 4px;
}
.notice-banner p { margin: 0; color: #856404; font-weight: 500; }

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .content-row { flex-direction: column; }
    .sidebar, .sidebar-right { flex: none; width: 100%; }
    
    .article-navigation,
    .article-navigation-inline { flex-wrap: wrap; gap: 0.75rem; }
    
    .article-navigation .page-indicator,
    .article-navigation-inline .page-indicator { 
        width: 100%; 
        text-align: center; 
        order: -1; 
        margin-bottom: 0.5rem; 
    }
    
    .nav-btn { flex: 1; text-align: center; min-width: 120px; }
    .article-navigation-inline { justify-content: center; gap: 0.5rem; }
}

/* Inline code snippets */
code {
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 2px 6px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.9em;
    color: #c7254e;
}

/* Block code snippets */
pre {
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 16px;
    overflow-x: auto;
    line-height: 1.5;
    margin: 1em 0;
}

pre code {
    background-color: transparent;
    border: none;
    padding: 0;
    color: #333;
    font-size: 0.95em;
}