/* ==========================================================================
   Professional Single-Document Styling
   ========================================================================== */
:root {
    /* Sophisticated Color Palette */
    --color-ivory: #fefefe;
    --color-parchment: #f9f7f3;
    --color-charcoal: #1a1a1a;
    --color-ink: #2a2a2a;
    --color-graphite: #444;
    --color-slate: #666;
    --color-smoke: #888;
    --color-accent: #2c5282;
    --color-accent-dark: #1a365d;
    --color-accent-light: #4299e1;
    --color-gold: #b38b4d;
    --color-border: #e2e8f0;
    --color-highlight: #f7fafc;
    
    /* Typography */
    --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: Georgia, "Times New Roman", Times, serif;
    --font-mono: "SF Mono", Monaco, "Cascadia Code", Consolas, monospace;
    
    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    
    /* Layout */
    --content-width: 800px;
    --toc-width: 260px;
    --gutter: 2rem;
    
    /* Effects */
    --shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.08);
    --transition: all 0.2s ease;
}

/* ==========================================================================
   Base Reset & Document Setup
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    color: var(--color-ink);
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
    line-height: 1.6;
    min-height: 100vh;
    padding: var(--space-xl);
}

/* Main document container */
.document-wrapper {
    max-width: calc(var(--content-width) + var(--toc-width) + var(--gutter));
    margin: 0 auto;
    background: var(--color-ivory);
    border-radius: 8px;
    box-shadow: var(--shadow-medium);
    overflow: visible;  /* Changed from: overflow: hidden */
    border: 1px solid rgba(255, 255, 255, 0.9);
}

.document-wrapperOLD {
    max-width: calc(var(--content-width) + var(--toc-width) + var(--gutter));
    margin: 0 auto;
    background: var(--color-ivory);
    border-radius: 8px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.9);
}

/* ==========================================================================
   Document Header (Minimalist)
   ========================================================================== */
.doc-header {
    padding: var(--space-xs) var(--space-xl) ;
    border-bottom: 1px solid var(--color-border);
    background: linear-gradient(to right, #f8fafc, #ffffff);
}

.doc-title {
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-charcoal);
    /*margin-bottom: var(--space-sm);*/
    letter-spacing: -0.02em;
}

.doc-subtitle {
    font-size: 1.5rem;
    
    font-weight: 600;
    max-width: var(--content-width);
}

.doc-description {
    padding: var(--space-sm) 0 var(--space-lg);
    font-size: 1rem;
    color: var(--color-slate);
    font-weight: 400;
    max-width: var(--content-width);
    margin-top: var(--space-sm);
}

/* ==========================================================================
   Main Content Layout (Side-by-side)
   ========================================================================== */
/* Ensure sticky works properly */
.doc-body {
    display: grid;
    grid-template-columns: var(--toc-width) 1fr;
    min-height: 100vh; /* Changed from 70vh to 100vh */
}

.doc-bodyOLD {
    display: grid;
    grid-template-columns: var(--toc-width) 1fr;
    min-height: 70vh;
}

/* ==========================================================================
   Table of Contents (Professional Sidebar) - UPDATED
   ========================================================================== */

.doc-toc-sidebar {
    padding: var(--space-xl);
    border-right: 1px solid var(--color-border);
    background: var(--color-highlight);
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh; /* Changed from max-height to height */
    overflow-y: auto;
    overflow-x: hidden;
}



.toc-header {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--color-accent);
}

.toc-header h2 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-charcoal);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.toc-header h2::before {
    content: "📋";
    font-size: 1.2rem;
    opacity: 0.7;
}

/* ==========================================================================
   TOC FIXES - COMPLETE SOLUTION
   ========================================================================== */


/* 1. RESET ALL DEFAULT LIST STYLING */
.toc,
.toc ul,
.toc ol {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

/* Remove default bullets from all list items */
.toc li::before,
.toc li::after {
    content: none !important;
    display: none !important;
}

/* 2. TOC CONTAINER STYLING */
.toc {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 3. NESTED LIST STRUCTURE */
.toc > ul {
    padding-left: 0 !important;
}

/* Proper indentation for nested levels */
.toc ul ul {
    padding-left: 1.5rem !important;
    margin: 0.25rem 0 !important;
}

.toc ul ul ul {
    padding-left: 3rem !important;
}

.hidden {
    display: none;
}

/* Optional: Smooth transition */
li + div {
    transition: all 0.3s ease;
    overflow: hidden;
}

/* 4. LIST ITEM STYLING */
.toc li {
    margin: 0.5rem 0 !important;
    position: relative !important;
    list-style: none !important;
}

/* 5. LINK STYLING - CLEAN & CONSISTENT */
.toc a {
    display: block !important;
    padding: 0.5rem 1rem !important;
    color: var(--color-slate) !important;
    text-decoration: none !important;
    font-size: 0.95rem !important;
    border-radius: 4px !important;
    transition: var(--transition) !important;
    border-left: 3px solid transparent !important;
    background: transparent !important;
}

/* 6. HIERARCHY VISUALIZATION - NO DOUBLE BULLETS */

/* Level 1 (#) - Top-level sections */
.toc-level-1 > a {
    font-weight: 700 !important;
    color: var(--color-charcoal) !important;
    font-size: 1.0rem !important;
    border-left-color: var(--color-accent-dark) !important;
    border-left-width: 4px !important;
    background: linear-gradient(to right, 
        rgba(44, 82, 130, 0.08), 
        rgba(44, 82, 130, 0.02)
    ) !important;
    margin-left: 0 !important;
    padding-left: 1rem !important;
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
    /*text-transform: uppercase !important;*/
    letter-spacing: 0.05em !important;
}

.toc-level-1 > a:hover {
    border-left-color: var(--color-accent) !important;
    background: linear-gradient(to right, 
        rgba(44, 82, 130, 0.12), 
        rgba(44, 82, 130, 0.04)
    ) !important;
}



/* Level 2 (##) - Main sections */
.toc-level-2 > a {
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    color: var(--color-charcoal) !important;
    border-left-color: var(--color-accent) !important;
    background: rgba(0, 0, 0, 0.02) !important;
    margin-left: 0 !important;
    padding-left: 1rem !important;
}

/* Level 3 (###) - Subsections */
.toc-level-3 > a {
    font-weight: 500 !important;
    color: var(--color-graphite) !important;
    font-size: 0.8rem !important;
    margin-left: 0.5rem !important;
    padding-left: 1.5rem !important;
    border-left-width: 2px !important;
    border-left-color: var(--color-accent-light) !important;
}

/* Level 4 (####) - Sub-subsections */
.toc-level-4 > a {
    font-weight: 400 !important;
    color: var(--color-slate) !important;
    font-size: 0.85rem !important;
    margin-left: 1rem !important;
    padding-left: 2rem !important;
    border-left-width: 1px !important;
    border-left-color: rgba(66, 153, 225, 0.3) !important;
    font-style: italic !important;
}

/* 7. HOVER EFFECTS */
.toc a:hover {
    background: rgba(66, 153, 225, 0.05) !important;
    color: var(--color-accent) !important;
    transform: translateX(2px) !important;
}

.toc-level-2 > a:hover {
    border-left-color: var(--color-accent-dark) !important;
}

.toc-level-3 > a:hover {
    border-left-color: var(--color-accent) !important;
}

.toc-level-4 > a:hover {
    border-left-color: var(--color-accent-light) !important;
}

/* 8. ACTIVE STATE */
.toc a.active {
    background: rgba(66, 153, 225, 0.1) !important;
    color: var(--color-accent) !important;
    font-weight: 600 !important;
}



/* 10. REMOVE ANY CONFLICTING STYLES FROM PREVIOUS VERSION */
/* Remove these conflicting rules */
.toc ul ul a,
.toc ul ul ul a {
    font-size: inherit !important;
    padding-left: inherit !important;
    color: inherit !important;
}


/* ==========================================================================
   Main Content Area (Professional Document)
   ========================================================================== */
.doc-content {
    padding: var(--space-xl);
    max-width: var(--content-width);
    width: 100%;
}

/* Professional Markdown Styling */
.professional-md {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-ink);
}

.professional-md figcaption p {
    margin: 0.1rem;
    padding: 0;
    text-align:center;
    hyphens: none;
}

/* Headings with professional hierarchy */
.professional-md h1 {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.2;
    margin: var(--space-sm) 0 var(--space-xl);
    color: var(--color-charcoal);
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--color-border);
    letter-spacing: -0.01em;
}

.professional-md h2 {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.3;
    margin: var(--space-xl) 0 var(--space-lg);
    color: var(--color-charcoal);
    padding-top: var(--space-lg);
    /* border-top: 1px solid var(--color-border); */
}

.professional-md h3 {
    font-size: 1.4rem;
    font-weight: 600;
    margin: var(--space-lg) 0 var(--space-md);
    color: var(--color-graphite);
}

.professional-md h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: var(--space-md) 0 var(--space-sm);
    color: var(--color-slate);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.95rem;
}

.professional-md h5 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: var(--space-md) 0 var(--space-sm);
    color: var(--color-smoke);
}

.professional-md h6 {
    font-size: 1rem;
    font-weight: 600;
    margin: var(--space-md) 0 var(--space-sm);
    color: var(--color-smoke);
    font-style: italic;
}

/* Paragraphs */
.professional-md p {
    margin: var(--space-md) 0;
    text-align: justify;
    hyphens: auto;
}

/* Links */
.professional-md a {
    color: var(--color-accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: var(--transition);
    padding-bottom: 1px;
}

.professional-md a:hover {
    border-bottom-color: var(--color-accent);
}

/* Lists */
.professional-md ul,
.professional-md ol {
    margin: var(--space-md) 0 var(--space-md) var(--space-xl);
    padding-left: var(--space-md);
    list-style: none;  /* Remove default bullets/numbers */
}

.professional-md li {
    margin: var(--space-sm) 0;
    position: relative;
    list-style: none;  /* Ensure no default styling */
}

/* Custom bullet for unordered lists */
.professional-md ul li::before {
    content: "•";
    color: var(--color-accent);
    position: absolute;
    left: -1.25rem;
    font-weight: bold;
}

/* Custom numbering for ordered lists */
.professional-md ol {
    counter-reset: item;
    list-style: none;  /* Remove default numbers */
}

.professional-md ol li {
    counter-increment: item;
    list-style: none;
}

.professional-md ol li::before {
    content: counter(item) ".";
    color: var(--color-accent);
    position: absolute;
    left: -1.75rem;
    font-weight: 600;
}

/* Blockquotes */
.professional-md blockquote {
    margin: var(--space-lg) 0;
    padding: var(--space-lg) var(--space-xl);
    background: linear-gradient(to right, 
        rgba(248, 250, 252, 0.8) 0%,
        rgba(241, 245, 249, 0.9) 100%
    );
    border-left: 4px solid var(--color-accent);
    border-radius: 0 4px 4px 0;
    font-style: italic;
    color: var(--color-graphite);
    position: relative;
}

.professional-md blockquote::before {
    content: "❝";
    position: absolute;
    top: -0.5rem;
    left: var(--space-md);
    font-size: 2rem;
    color: var(--color-accent);
    opacity: 0.3;
}

.professional-md blockquote p {
    margin: 0;
}

.professional-md blockquote p:not(:last-child) {
    margin-bottom: var(--space-sm);
}

/* Code */
.professional-md code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    padding: 0.2em 0.4em;
    background: var(--color-highlight);
    color: var(--color-ink);
    border-radius: 3px;
    border: 1px solid var(--color-border);
}

.professional-md pre {
    margin: var(--space-lg) 0;
    padding: var(--space-lg);
    background: var(--color-highlight);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow-x: auto;
    position: relative;
}

.professional-md pre::before {
    content: "↴";
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    color: var(--color-smoke);
    font-size: 0.8rem;
    opacity: 0.5;
}

.professional-md pre code {
    background: transparent;
    border: none;
    padding: 0;
    font-size: 0.95em;
    line-height: 1.5;
}

/* Tables */
.professional-md table {
    width: 100%;
    margin: var(--space-lg) 0;
    border-collapse: collapse;
    border: 1px solid var(--color-border);
    font-size: 0.95rem;
}

.professional-md thead {
    background: linear-gradient(to bottom, #f8fafc, #f1f5f9);
}

.professional-md th {
    padding: var(--space-md) var(--space-lg);
    text-align: left;
    font-weight: 600;
    color: var(--color-charcoal);
    border-bottom: 2px solid var(--color-border);
}

.professional-md td {
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--color-border);
}

.professional-md tbody tr:hover {
    background: rgba(66, 153, 225, 0.03);
}

/* Images */
.professional-md img {
    margin: var(--space-lg) auto;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: var(--shadow-subtle);
    display: block;
}

.professional-md figure {
    margin: var(--space-lg) 0;
    text-align: center;
}

.professional-md figcaption {
    margin-top: var(--space-sm);
    font-size: 0.9rem;
    color: var(--color-slate);
    font-style: italic;
}

/* Horizontal Rules */
.professional-md hr {
    margin: var(--space-2xl) auto;
    border: none;
    height: 1px;
    background: linear-gradient(to right, 
        transparent, 
        var(--color-border), 
        transparent
    );
    max-width: 50%;
}

/* ==========================================================================
   Document Footer
   ========================================================================== */
.doc-footer {
    padding: var(--space-xl);
    border-top: 1px solid var(--color-border);
    background: var(--color-highlight);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: var(--color-slate);
}

.doc-meta {
    display: flex;
    gap: var(--space-lg);
}

.doc-meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.doc-actions {
    display: flex;
    gap: var(--space-md);
}

.doc-action {
    padding: var(--space-xs) var(--space-md);
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-slate);
    text-decoration: none;
    font-size: 0.9rem;
    transition: var(--transition);
}

.doc-action:hover {
    background: var(--color-accent);
    color: white;
    border-color: var(--color-accent);
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */
/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* Tablet breakpoint */
@media (max-width: 1024px) {
    .doc-body {
        grid-template-columns: 1fr;
    }
    
    .doc-toc-sidebar {
        position: static;
        height: auto;
        max-height: none;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        z-index: 10; /* FIX - ensures TOC stays above content */
        background: var(--color-highlight);
    }
    
    .doc-content {
        position: relative;
        z-index: 1; /* FIX - content stays below TOC */
    }
}

/* Phone breakpoint */
@media (max-width: 768px) {
    body {
        padding: var(--space-sm);
        background: var(--color-ivory);
    }
    
    .document-wrapper {
        border-radius: 0;
        box-shadow: none;
        border: none;
    }
    
    .doc-body {
        grid-template-columns: 1fr;
    }
    
    .doc-toc-sidebar {
        position: static;
        max-height: none;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        z-index: 10; /* FIX - ensures TOC stays above content */
        background: var(--color-highlight);
    }
    
    .doc-content {
        padding: var(--space-lg);
        position: relative;
        z-index: 1; /* FIX - content stays below TOC */
    }
    
    .professional-md h1 {
        font-size: 1.75rem;
    }
    
    .professional-md h2 {
        font-size: 1.5rem;
    }
    
    .professional-md h3 {
        font-size: 1.25rem;
    }
    
    .professional-md pre {
        margin: var(--space-md) calc(-1 * var(--space-lg));
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    
    /* Mobile TOC adjustments */
    .toc a {
        padding: 0.4rem 0.75rem !important;
    }
    
    .toc ul ul {
        padding-left: 1rem !important;
    }
    
    .toc ul ul ul {
        padding-left: 2rem !important;
    }
    
    .toc-level-3 > a {
        padding-left: 1.25rem !important;
        margin-left: 0.25rem !important;
    }
    
    .toc-level-4 > a {
        padding-left: 1.75rem !important;
        margin-left: 0.5rem !important;
    }
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */
.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }

.bg-highlight { background: var(--color-highlight); }
.bg-parchment { background: var(--color-parchment); }
.text-accent { color: var(--color-accent); }
.text-muted { color: var(--color-slate); }

.border-top { border-top: 1px solid var(--color-border); }
.border-bottom { border-bottom: 1px solid var(--color-border); }

/* ==========================================================================
   TOC Scroll Spy & Active State
   ========================================================================== */
.toc-item.active > a {
    background: rgba(66, 153, 225, 0.1) !important;
    color: var(--color-accent) !important;
    border-left-color: var(--color-accent) !important;
    font-weight: 600 !important;
}

/* Smooth scroll offset for fixed header */
.professional-md h1,
.professional-md h2,
.professional-md h3,
.professional-md h4,
.professional-md h5,
.professional-md h6 {
    scroll-margin-top: 1rem;
}

/* ==========================================================================
   REMOVED CONFLICTING STYLES
   ========================================================================== */
/* Remove these lines - they were causing double bullets */
/*
.toc-level-2 { margin-left: 0; }
.toc-level-3 { margin-left: 1.5rem; }
.toc-level-4 { margin-left: 3rem; }

.toc-level-3::before {
    content: "› ";
    color: var(--color-accent);
    opacity: 0.6;
    margin-left: -1rem;
}

.toc-level-4::before {
    content: "• ";
    color: var(--color-accent);
    opacity: 0.4;
    margin-left: -1rem;
}
*/

.doc-footer a {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s;
}

.doc-footer a:hover {
    color: var(--color-accent);
}

.color-dot {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 4px;
}