/* General body and layout for history.html */
body.bg-gray-100 {
    background-color: #f7fafc; /* Tailwind gray-100 */
}

.container {
    max-width: 1200px; /* Adjust as needed */
}

/* Sticky Table of Contents */
#toc-container {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 20px; /* Adjust based on your header height or desired offset */
    align-self: flex-start; /* Prevents stretching if parent is flex */
    max-height: calc(100vh - 40px); /* Adjust based on top offset and desired bottom margin */
    overflow-y: auto;
    border-right: 1px solid #e2e8f0; /* Tailwind gray-300 */
}

/* Content Area */
#content-container {
    /* Basic prose styles are handled by Tailwind's prose class */
}

/* Headings - Differentiation and Color Progression */
#content-container h1,
#content-container > h1:first-child { /* Ensure first H1 (main title from markdown) is styled */
    color: #1A202C; /* Tailwind text-gray-900 */
    font-size: 2.25rem; /* Tailwind text-4xl */
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #4299E1; /* Tailwind blue-500 */
}

#content-container h2 {
    font-size: 1.875em; /* Tailwind text-3xl */
    margin-top: 1.5em;
    margin-bottom: 0.75em;
    padding-bottom: 0.2em;
    border-bottom: 1px solid #a0aec0; /* Tailwind gray-500 */
    color: #2c5282; /* Default color if not overridden by nth-of-type */
}

/* Color progression for H2 headings directly under #content-container */
#content-container > h2:nth-of-type(5n+1) { color: #4A90E2; } /* Bright Blue */
#content-container > h2:nth-of-type(5n+2) { color: #50E3C2; } /* Teal */
#content-container > h2:nth-of-type(5n+3) { color: #B8E986; } /* Light Green */
#content-container > h2:nth-of-type(5n+4) { color: #F8E71C; } /* Yellow */
#content-container > h2:nth-of-type(5n+5) { color: #F5A623; } /* Orange */

#content-container h3 {
    font-size: 1.5em; /* Tailwind text-2xl */
    margin-top: 1.25em;
    margin-bottom: 0.5em;
    color: #4a5568; /* Tailwind gray-700 */
}

#content-container h4 {
    font-size: 1.25em; /* Tailwind text-xl */
    margin-top: 1em;
    margin-bottom: 0.5em;
    color: #718096; /* Tailwind gray-600 */
}

#content-container p {
    font-size: 1em; /* Tailwind text-base */
    line-height: 1.65;
    color: #2d3748; /* Tailwind gray-800 */
    margin-bottom: 1em;
}

#content-container ul, #content-container ol {
    margin-left: 1.5em;
    margin-bottom: 1em;
}

#content-container li {
    margin-bottom: 0.5em;
}

#content-container a {
    color: #3182ce; /* Tailwind blue-600 */
    text-decoration: underline;
}

#content-container a:hover {
    color: #2b6cb0; /* Tailwind blue-700 */
}

/* Images in content - Consolidated */
#content-container img,
#content-container figure > img {
    display: block; /* To allow margin auto to center */
    margin-left: auto;
    margin-right: auto;
    max-width: 80%; /* Default max-width for smaller screens */
    height: auto;
    border-radius: 0.375rem; /* Tailwind rounded-md / rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); /* Tailwind shadow-md or shadow-lg */
    margin-top: 1.5rem; /* Consistent margin */
    margin-bottom: 1.5rem; /* Consistent margin */
}

@media (min-width: 768px) { /* md breakpoint */
    #content-container img,
    #content-container figure > img {
        max-width: 600px; /* More constrained max-width on larger screens */
    }
}

/* Table of Contents specific styling */
#toc-title {
    color: #2c5282; /* Tailwind blue-800 */
    padding-bottom: 0.25em;
    border-bottom: 1px solid #cbd5e0; /* Tailwind gray-400 */
}

#toc ul {
    list-style: none;
    padding-left: 0;
}

#toc li a {
    display: block;
    padding: 0.3em 0;
    text-decoration: none;
    color: #4a5568; /* Tailwind gray-700 */
    transition: all 0.2s ease-in-out;
    border-left: 3px solid transparent;
    padding-left: 0.5em;
}

#toc li a:hover {
    color: #2b6cb0; /* Tailwind blue-700 */
    background-color: #ebf8ff; /* Tailwind blue-100 */
    border-left-color: #3182ce; /* Tailwind blue-600 */
}

#toc li a.font-semibold { /* For H2 links */
    font-weight: 600; /* Tailwind semibold */
}
#toc li a.ml-2 { margin-left: 0.5rem; } /* For H3 */
#toc li a.ml-4 { margin-left: 1rem; } /* For H4 */
#toc li a.text-sm { font-size: 0.875rem; } /* For H4 */


/* Responsive adjustments */
@media (max-width: 768px) { /* Tailwind md breakpoint */
    #toc-container {
        position: static; /* Remove sticky positioning on mobile */
        width: 100%;
        max-height: none;
        overflow-y: visible;
        border-right: none;
        border-bottom: 1px solid #e2e8f0; /* Add a bottom border instead */
        margin-bottom: 1.5rem;
    }

    .flex-col.md\:flex-row { /* This class is on history.html's main flex container */
        flex-direction: column;
    }
}

/* Offset for sticky header if you have one that covers part of the top */
.sticky-top-offset {
    top: 20px; /* Default, adjust if a fixed/sticky header is present */
}

/* Ensure prose styles from Tailwind don't overly restrict image width */
#content-container .prose img { /* This is if Tailwind's @tailwindcss/typography plugin is used and puts img inside .prose */
    max-width: 100%; /* Override if prose sets a more restrictive max-width */
}

/* Styling for the dynamically loaded header and footer text placeholders in history.html */
#page-header a, #page-footer a {
    /* text-decoration: none; */ /* Tailwind handles this with hover:underline by default */
}
#page-header .text-lg, #page-footer .text-lg { /* Matches classes used in JS for header/footer links */
    font-size: 1.125rem; /* Tailwind text-lg */
}

#page-header .font-medium, #page-footer .font-medium {
    font-weight: 500; /* Tailwind font-medium */
}

#page-header .font-semibold, #page-footer .font-semibold {
    font-weight: 600; /* Tailwind font-semibold */
}

/* Ensure the main title from markdown (if it's the first h1) is distinct if not handled by JS setting page title */
/* This is slightly redundant with the #content-container h1 rule at the top but more specific for the first child. */
/* It's generally good to have the markdown's own H1 styled well. */
#content-container > h1:first-child {
    color: #1A202C;
    font-size: 2.25rem;
    border-bottom: 2px solid #4299E1;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
}