/* css/literature.css */

/* No need to redefine :root variables; they are inherited from common.css */

/* --- Layout --- */
.page-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    gap: 0.5rem;
}

.main-layout {
    /* Changed from grid to flex column */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 0.5rem; /* Gap between navbar and content */
    width: 96%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Removed the media query that set grid-template-columns */

/* --- Page Header --- */
.page-header {
    background-color: var(--color-bg-card);
    padding: 1rem 1.5rem;
    margin: 1rem auto; /* Keep top/bottom margin */
    border:var(--border);
    border-radius: var(--space-sm);
    box-shadow: var(--shadow);
    width: 96%;
    max-width: 1200px;
}

.page-header h1 {
    font-size: var(--font-size-h2);;
    font-weight: 700;
    color: var(--color-text-heading);
    margin: 0;text-align: center;
}


/* --- Navigation Bar (Previously Sidebar) --- */
.navigation-sidebar {
    background: var(--color-bg-card);
    padding: 0.5rem 1rem; /* Adjusted padding for horizontal bar */
    border: var(--border);
    border-radius: var(--space-sm); /* Consistent radius */
    /* Removed overflow-y, max-height */
    box-shadow: var(--shadow-sm); /* Optional: add a slight shadow */
    position: relative; /* Needed for z-index context if absolutely positioning children, although submenus are positioned relative to LIs */
    z-index: 10; /* Ensure navbar itself is above potential overlaps if needed later */
}


/* Hide the "Classification" heading or style differently if needed */
.navigation-sidebar h4 {
    /* display: none; */ /* Option 1: Hide it */
    /* Option 2: Style it differently (e.g., inline) */
    font-size: var(--font-size-h4);;
    font-weight: 600;
    color: var(--color-text-heading);
    margin: 0 1rem 0 0; /* Adjust margin */
    padding-bottom: 0; /* Remove bottom padding */
    border-bottom: none; /* Remove bottom border */
    display: inline-block; /* Allow it to sit alongside nav */
    vertical-align: middle; /* Align with nav items */
}


#literature-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Make top-level items horizontal */
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    align-items: center; /* Align items vertically */
    justify-content: center;
}

/* Style top-level list items */
#literature-nav > li {
    margin-bottom: 0; /* Remove bottom margin */
    margin-right: 0.25rem; /* Add spacing between top-level items */
    position: relative; /* Crucial: Establishes positioning context for the absolute submenu */
}
#literature-nav button {
font-family: var(--font-heading);
font-size: var(--font-size-h5);
}
#literature-nav > li > button {
    display: inline-block; /* Change from block */
    width: auto; /* Change from 100% */
    text-align: center; /* Adjust alignment if needed */
    padding: 0.5rem 1rem; /* Adjust padding for horizontal layout */
    border-radius: var(--rounded-md);
    color: var(--color-text-base);
    font-weight: 500;
    border: none;
    background: none;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

/* Hover/Active/Focus states remain largely the same, adjust padding/margins if needed */
#literature-nav > li > button:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-heading);
}

#literature-nav > li > button.active {
    background: var(--color-bg-active);
    color: var(--color-primary-dark);
    font-weight: 600;
}

#literature-nav > li > button:focus {
    outline: var(--border);
    outline-offset: 1px;
}

/* --- Submenu Styling --- */
#literature-nav ul {
    /* Positioning & Visibility */
    display: none; /* Hide submenu by default */
    position: absolute; /* Take out of flow, position relative to parent li */
    top: 100%; /* Position directly below the parent button */
    left: 0; /* Align with the left edge of the parent li */
    z-index: 99; /* Ensure submenu is on top of other content */

    /* Appearance */
    list-style: none;
    margin: 2px 0 0 0; /* Add slight top margin for separation */
    padding: 0.5rem 0; /* Vertical padding for the container */
    min-width: 180px; /* Minimum width for the dropdown */
    background: var(--color-bg-card); /* Background color */
    border: var(--border); 
    border-radius: var(--space-sv); /* Rounded corners */
    box-shadow: var(--shadow-md); /* Add shadow for depth */

    /* Reset previous styles */
    border-left: none;
    background: var(--color-bg-card); /* Override gradient */
}

/* Show submenu on hover of the PARENT LIST ITEM */
#literature-nav > li:hover > ul {
    display: block;
}

/* Submenu item styling */
#literature-nav ul li {
    margin-bottom: 0; /* Remove bottom margin */
}

#literature-nav ul button {
    display: block; /* Make buttons fill the width of the submenu */
    width: 100%;
    text-align: left;
    padding: 0.5rem 1.5rem; /* Adjust padding for submenu items */
    font-size: var(--font-size-p);
    font-weight: 400;
    color: var(--color-text-base); /* Ensure text color is reset */
    background: none; /* Ensure background is reset */
    border: none; /* Ensure border is reset */
    border-radius: 0; /* Submenu items usually don't have individual radius */
    white-space: nowrap; /* Prevent text wrapping */
}

#literature-nav ul button:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-heading);
}

#literature-nav ul button.active {
    background: var(--color-bg-active);
    color: var(--color-primary-dark);
    font-weight: 500; /* Slightly less bold than top-level active */
}

/* --- Content Area --- */
.content-area {
    padding: 2rem;
    background: var(--color-bg-card);
    /* Removed overflow-y: auto; */ /* May not be needed, or add back if content dictates */
    border: var(--border);
    border-radius: var(--space-sm); /* Consistent radius */
    /* Removed specific top-right radius */
    flex-grow: 1; /* Allow content area to grow if needed */
}

/* Styles for .article-content, .article-header, etc., remain the same */
/* ... (keep all existing styles from .article-content downwards) ... */

.article-content {
    max-width: 800px;
    margin: 0 auto;
}

.article-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: var(--border);
}


.article-header h1 {
    font-size: var(--font-size-h2);
    font-weight: 700;
    color: var(--color-text-heading);
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}

.article-meta {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-bottom: 1rem;
}

.dark-theme .article-meta {
    color: var(--color-text-muted-dark);
}

.article-meta span {
    margin-right: 1rem;
}

.article-image-container {
    margin-bottom: 1.5rem;
    text-align: center;
}

.article-image {
    max-width: 100%;
    height: auto;
    max-height: 300px;
    border-radius: var(--rounded-lg);
    box-shadow: var(--shadow-md);
    object-fit: contain;
    background-color: var(--color-bg-card);
    padding: 0.5rem;
    border: var(--border);
}


.placeholder-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 400px;
    height: 200px;
    background-color: var(--color-bg-body);
    border-radius: var(--rounded-lg);
    color: var(--color-text-muted);
    font-size: 0.875rem;
    border: 1px dashed var(--color-border-dark);
    margin: 0 auto 1.5rem auto;
}

.dark-theme .placeholder-img {
    background-color: var(--color-bg-body-dark);
    color: var(--color-text-muted-dark);
    border-color: var(--color-border-dark-dark-theme);
}

.article-body {
    font-size: 1rem;
    line-height: 1.7;
}

.article-body p, .article-body ul, .article-body ol {
    margin-bottom: 1em;
}

.article-body ul, .article-body ol {
    padding-left: 1.5em;
}

.article-body li {
    margin-bottom: 0.5em;
}

.article-body strong, .article-body b {
    font-weight: 600;
    color: var(--color-text-heading);
}


.article-body a {
    color: var(--color-primary-dark);
    text-decoration: underline;
}



.article-body a:hover {
    color: var(--color-primary);
}


.article-keywords {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: var(--border);
}


.article-keywords h4 {
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Loader and Error --- */
.loader-container {
    text-align: center;
    padding: 4rem 1rem;
}

.loader {
    border: 4px solid var(--color-bg-hover);
    border-top: 4px solid var(--color-primary);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem auto;
}


.loader-container p {
    color: var(--color-text-muted);
}


@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#error-message-content {
    background-color: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
    color: var(--color-error-text);
    padding: 1rem 1.5rem;
    border-radius: var(--rounded-md);
    margin: 2rem auto;
    max-width: 600px;
    text-align: center;
}

.dark-theme #error-message-content {
    background-color: #5f1d1d;
    border-color: var(--color-error-border);
    color: #fecaca;
}

#error-message-content strong {
    font-weight: 600;
    display: block;
    margin-bottom: 0.5rem;
}

/* --- Responsive Adjustments --- */
/* Media query for content area padding remains */
@media (max-width: 767px) {
    .content-area {
        padding: 1.5rem;
    }
    .article-header h1 {
        font-size: var(--font-size-h2);
    }
    /* You might add specific styles for the horizontal nav on small screens if needed */
    /* e.g., making the h4 smaller or hiding it */
     .navigation-sidebar h4 {
         font-size: calc(var(--font-size-h4) * 0.9); /* Slightly smaller heading */
         margin-right: 0.5rem;
     }
     #literature-nav > li > button {
        padding: 0.5rem 0.75rem; /* Slightly less padding */
     }
}