/* Article-specific styles - Add only what's not in main.css */
/* Reuse classes from main.css where possible (e.g., .container, h1.main) */

/* Back link style - Simple and consistent with site navigation */
.back-link {
    display: inline-block;
    margin: 1rem auto 2rem; /* Center and add spacing */
    color: #007be7; /* Matches link color in main.css */
    text-decoration: none;
    font-size: 1rem;
}
.back-link:hover {
    text-decoration: underline; /* Simple hover effect */
}

/* Article date style - Not present in main.css, so added here */
.article-date {
    color: #666; /* Gray color for secondary text, consistent with main.css */
    font-size: 1rem;
    text-align: center; /* Center for better readability */
    margin-bottom: 2rem; /* Spacing before content starts */
}

/* Article content style - Ensures left-aligned text for readability, with max-width for focus */
.article-content {
    text-align: left; /* Left alignment for article body, as it's more readable for long text */
    max-width: 800px; /* Constrain width for better focus, centered within .container */
    margin: 0 auto; /* Auto margin to center it */
    font-size: 1.1rem; /* Matches p.main font size in main.css for consistency */
}

.article-content p {
    margin-bottom: 1.5rem; /* Spacing between paragraphs, similar to main.css */
}

.article-content h2 {
    font-size: 2.0rem; /* Slightly smaller than h2.main in main.css for subheadings */
    color: #2e7d32; /* Green color for consistency with site theme */
    margin-top: 2rem; /* Spacing above subheadings */
    margin-bottom: 1rem; /* Spacing below subheadings */
}

.article-content h3 {
    font-size: 1.6rem;
    color: #4caf50;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

@media (max-width: 768px) {
    .article-content {
        max-width: 95%;
        /* padding: 0 1rem; */
    }
    .article-content h2 {
        font-size: 1.6rem;
    }
    .article-content h3 {
        font-size: 1.4rem;
    }
}


/* Styles for unordered and ordered lists within article content */
.article-content ul,
.article-content ol {
    margin-bottom: 1.5rem; /* Space below the entire list, matching paragraph spacing */
    padding-left: 2rem; /* Indent for readability */
}

.article-content ul {
    list-style-type: disc; /* Default bullet points for unordered lists */
}

.article-content ol {
    list-style-type: decimal; /* Numbered list for ordered lists */
}

.article-content li {
    margin-bottom: 0.75rem; /* Space between list items */
    line-height: 1.6; /* Match the site's line-height for consistency */
    color: #333; /* Standard text color from site theme */
}

/* Styles for tables within article content */
.article-content table {
    width: 100%; /* Full width by default */
    border-collapse: collapse; /* Remove spacing between table cells */
    margin-bottom: 1.5rem; /* Space below the table */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for visual appeal */
    background-color: #fff; /* White background for contrast against page */
}

.article-content th,
.article-content td {
    padding: 0.75rem 1rem; /* Padding for cell content */
    border: 1px solid #ddd; /* Light gray border for grid lines */
    text-align: left; /* Left-align text for better readability */
}

.article-content th {
    background-color: #4caf50; /* Green background to match site theme (e.g., button and header colors) */
    color: #fff; /* White text for high contrast */
    font-weight: bold; /* Bold headers for emphasis */
}

.article-content tr:nth-child(even) {
    background-color: #f9f9f9; /* Light gray alternating rows for better readability */
}

/* Responsive styles for tables on smaller screens */
@media (max-width: 768px) {
    .article-content table {
        display: block; /* Allow horizontal scrolling */
        overflow-x: auto; /* Horizontal scrollbar if table is wide */
        white-space: nowrap; /* Prevent text wrapping to maintain table structure */
    }
}

/* Enable smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

/* Styles for the dynamically generated navigation panel */
.article-nav {
    position: fixed;
    right: 1vw;
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Center vertically */
    max-width: 22vw;
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    font-family: 'Roboto', sans-serif;
}

.article-nav h3 {
    font-size: 1.2rem;
    color: #2e7d32;
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

.article-nav ul {
    list-style: none;
    padding: 0;
}

.article-nav li {
    margin-bottom: 5px;
}

.article-nav a {
    color: #444546;
    text-decoration: none;
    display: block;
    padding: 5px 0;
}

.article-nav a:hover {
    color: #007be7;
}

/* Hide navigation panel on mobile devices */
@media (max-width: 768px) {
    .article-nav {
        display: none;
    }
}