/* Hologram Book Custom Theme */

:root {
    --hologram-primary: #2E4057;
    --hologram-secondary: #048A81;
    --hologram-accent: #54B3A1;
    --hologram-light: #F5F5F5;
    --hologram-dark: #1A1F2E;
    --hologram-grid: #E8F4F2;
}

/* Typography Improvements */
.content {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.7;
    color: #333;
}

/* Dark mode text colors */
.navy .content,
.coal .content,
.ayu .content {
    color: #e8e8e8 !important;
}

.navy .content p,
.navy .content li,
.navy .content td,
.navy .content dd,
.coal .content p,
.coal .content li,
.coal .content td,
.coal .content dd,
.ayu .content p,
.ayu .content li,
.ayu .content td,
.ayu .content dd {
    color: #e8e8e8 !important;
}

.navy .content h1,
.navy .content h2,
.navy .content h3,
.navy .content h4,
.navy .content h5,
.navy .content h6,
.coal .content h1,
.coal .content h2,
.coal .content h3,
.coal .content h4,
.coal .content h5,
.coal .content h6,
.ayu .content h1,
.ayu .content h2,
.ayu .content h3,
.ayu .content h4,
.ayu .content h5,
.ayu .content h6 {
    color: #88d4f5 !important;
}

.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: var(--hologram-primary);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.content h1 {
    font-size: 2.5rem;
    border-bottom: 3px solid var(--hologram-accent);
    padding-bottom: 0.5rem;
}

.content h2 {
    font-size: 2rem;
    border-bottom: 2px solid var(--hologram-grid);
    padding-bottom: 0.3rem;
}

/* Code blocks */
.content pre {
    background: var(--hologram-dark);
    border-radius: 8px;
    padding: 1.5rem;
    overflow-x: auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.content pre code {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #f8f8f2;  /* Light color for code text on dark background */
}

/* Syntax highlighting colors for dark theme */
.content pre .hljs-keyword,
.content pre .hljs-selector-tag,
.content pre .hljs-literal,
.content pre .hljs-section,
.content pre .hljs-link {
    color: #66d9ef;
}

.content pre .hljs-string,
.content pre .hljs-title,
.content pre .hljs-name,
.content pre .hljs-type,
.content pre .hljs-attribute,
.content pre .hljs-symbol,
.content pre .hljs-bullet,
.content pre .hljs-addition,
.content pre .hljs-variable,
.content pre .hljs-template-tag,
.content pre .hljs-template-variable {
    color: #a6e22e;
}

.content pre .hljs-comment,
.content pre .hljs-quote,
.content pre .hljs-deletion,
.content pre .hljs-meta {
    color: #75715e;
}

.content pre .hljs-keyword,
.content pre .hljs-selector-tag,
.content pre .hljs-literal,
.content pre .hljs-doctag,
.content pre .hljs-title,
.content pre .hljs-section,
.content pre .hljs-type,
.content pre .hljs-name,
.content pre .hljs-strong {
    font-weight: bold;
}

.content pre .hljs-emphasis {
    font-style: italic;
}

/* Inline code */
.content code:not(pre code) {
    background: var(--hologram-grid);
    color: var(--hologram-secondary);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: 500;
}

/* Blockquotes */
.content blockquote {
    border-left: 4px solid var(--hologram-accent);
    background: var(--hologram-grid);
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    border-radius: 0 8px 8px 0;
    font-style: italic;
}

/* Tables */
.content table {
    border-collapse: collapse;
    width: 100%;
    margin: 1.5rem 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.content table th {
    background: var(--hologram-primary);
    color: white;
    font-weight: 600;
    text-align: left;
    padding: 0.75rem 1rem;
}

.content table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--hologram-grid);
}

.content table tr:nth-child(even) {
    background: var(--hologram-light);
}

/* Definition lists (for glossary) */
.content dl dt {
    font-weight: 600;
    color: var(--hologram-primary);
    margin-top: 1rem;
    font-size: 1.1rem;
}

.content dl dd {
    margin-left: 2rem;
    margin-top: 0.5rem;
    padding-left: 1rem;
    border-left: 2px solid var(--hologram-grid);
}

/* Links */
.content a {
    color: var(--hologram-secondary);
    text-decoration: none;
    border-bottom: 1px dotted var(--hologram-secondary);
    transition: all 0.2s ease;
}

.content a:hover {
    color: var(--hologram-accent);
    border-bottom-style: solid;
}

/* Mathematical notation */
.content .katex {
    font-size: 1.1em;
    color: var(--hologram-primary);
}

.content .katex-display {
    margin: 1.5rem 0;
    overflow-x: auto;
    padding: 1rem;
    background: var(--hologram-light);
    border-radius: 8px;
}

/* Mermaid diagrams */
.mermaid {
    text-align: center;
    margin: 2rem 0;
    padding: 1rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Navigation improvements */
.sidebar {
    background: var(--hologram-light);
    border-right: 2px solid var(--hologram-grid);
}

.sidebar .sidebar-scrollbox {
    padding: 1rem;
}

.chapter li.chapter-item {
    margin: 0.25rem 0;
}

.chapter li.chapter-item a {
    color: var(--hologram-dark);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: block;
}

.chapter li.chapter-item a:hover {
    background: var(--hologram-grid);
    color: var(--hologram-secondary);
    transform: translateX(4px);
}

.chapter li.chapter-item a.active {
    background: var(--hologram-secondary);
    color: white;
    font-weight: 600;
}

/* Part headers in navigation */
.chapter li.part-title {
    color: var(--hologram-primary);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid var(--hologram-accent);
}

/* Search enhancements */
#searchresults {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 1rem;
}

#searchresults .searchresults-header {
    color: var(--hologram-primary);
    font-weight: 600;
    border-bottom: 2px solid var(--hologram-grid);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

/* Print styles */
@media print {
    /* Hide all navigation and UI elements */
    .sidebar,
    .nav-wide-wrapper,
    .nav-wrapper,
    #sidebar,
    #sidebar-toggle-anchor,
    .sidebar-resize-handle,
    .nav-chapters,
    .mobile-nav-chapters {
        display: none !important;
    }

    /* Reset body and html margins */
    html, body {
        margin: 0 !important;
        padding: 0 !important;
    }

    .content {
        max-width: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Ensure main content starts at top of page */
    main {
        margin-top: 0 !important;
        padding-top: 0 !important;
        page-break-before: avoid !important;
    }

    /* Remove margin from first element in content */
    .content > main > *:first-child,
    .content > *:first-child,
    main > *:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
        page-break-before: avoid !important;
    }

    /* Specific fix for the title div */
    main > div:first-child {
        margin-top: 0 !important;
        page-break-before: avoid !important;
    }

    /* Prevent page break before first heading */
    .content h1 {
        page-break-before: always;
    }

    /* Exception for the very first h1 (title page) */
    .content > h1:first-child,
    .content > main h1:first-of-type,
    main > div:first-child h1 {
        page-break-before: avoid !important;
        margin-top: 0 !important;
    }

    .content pre {
        page-break-inside: avoid;
    }

    /* Remove any initial page breaks */
    body > *:first-child {
        page-break-before: avoid !important;
    }

    /* Hide any empty divs that might cause spacing */
    #body-container > *:empty {
        display: none !important;
    }
}

/* Responsive improvements */
@media (max-width: 768px) {
    .content h1 {
        font-size: 2rem;
    }

    .content h2 {
        font-size: 1.5rem;
    }

    .content dl dd {
        margin-left: 1rem;
    }
}

/* Special classes for Hologram concepts */
.conservation-law {
    background: linear-gradient(135deg, var(--hologram-grid) 0%, var(--hologram-light) 100%);
    border-left: 4px solid var(--hologram-accent);
    padding: 1rem;
    border-radius: 8px;
    margin: 1.5rem 0;
}

.lattice-diagram {
    background: white;
    border: 2px solid var(--hologram-secondary);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    margin: 2rem 0;
}

.receipt-example {
    font-family: 'JetBrains Mono', monospace;
    background: var(--hologram-dark);
    color: #00ff00;
    padding: 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    overflow-x: auto;
}

/* Fix for any additional code blocks that might use dark background */
.theme--dark .content pre code,
.navy .content pre code,
.coal .content pre code,
.ayu .content pre code {
    color: #f8f8f2;
}

/* Ensure all code blocks in dark themes have proper text color */
pre.playground {
    background: var(--hologram-dark);
}

pre.playground code {
    color: #f8f8f2 !important;
}

/* Animations for interactive elements */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.interactive-element:hover {
    animation: pulse 0.5s ease-in-out;
}