/* Custom CSS to implement your color scheme */
/* Colors: #213448 (primary), #547792 (secondary), #94B4C1 (accent), #EAE0CF (neutral) */

/* Override theme variables with your custom colors */
:root {
    --theme: rgb(234, 224, 207); /* #EAE0CF */
    --entry: rgb(255, 255, 255);
    --primary: rgb(33, 52, 72); /* #213448 */
    --secondary: rgb(84, 119, 146); /* #547792 */
    --tertiary: rgb(148, 180, 193); /* #94B4C1 */
    --content: rgb(33, 52, 72); /* #213448 */
    --code-block-bg: rgb(245, 245, 245);
    --code-bg: rgb(250, 250, 250);
    --border: rgb(148, 180, 193); /* #94B4C1 */
    color-scheme: light;
}

/* Dark mode override */
:root[data-theme="dark"] {
    --theme: rgb(33, 52, 72); /* #213448 */
    --entry: rgb(46, 46, 51);
    --primary: rgb(234, 224, 207); /* #EAE0CF */
    --secondary: rgb(84, 119, 146); /* #547792 */
    --tertiary: rgb(148, 180, 193); /* #94B4C1 */
    --content: rgb(234, 224, 207); /* #EAE0CF */
    --code-block-bg: rgb(46, 46, 51);
    --code-bg: rgb(55, 56, 62);
    --border: rgb(148, 180, 193); /* #94B4C1 */
    color-scheme: dark;
}

/* Custom styles for a welcoming and trustworthy appearance */


/* Header and navigation */
.header {
    background-color: var(--primary); /* #213448 */
    color: var(--theme); /* #EAE0CF */
}

/* Header links */
.header a {
    color: var(--theme); /* #EAE0CF */
}

.header a:hover {
    color: var(--tertiary); /* #94B4C1 */
}

/* Main content area */
.main {
    background-color: var(--theme); /* #EAE0CF */
    color: var(--primary); /* #213448 */
}

/* Links */
a {
    color: var(--secondary); /* #547792 */
}

a:hover {
    color: var(--tertiary); /* #94B4C1 */
}

/* Buttons and interactive elements */
button, .button {
    background-color: var(--secondary); /* #547792 */
    color: var(--theme); /* #EAE0CF */
    border: 1px solid var(--tertiary); /* #94B4C1 */
}

button:hover, .button:hover {
    background-color: var(--tertiary); /* #94B4C1 */
    color: var(--primary); /* #213448 */
}

/* Card/entry styling for posts */
.entry {
    background-color: var(--entry); /* White */
    border: 1px solid var(--border); /* #94B4C1 */
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    transition: box-shadow 0.3s ease;
}

.entry:hover {
    box-shadow: 0 4px 12px rgba(84, 119, 146, 0.15); /* #547792 with transparency */
}

/* Table of contents */
.toc {
    background-color: var(--entry); /* White */
    border: 1px solid var(--border); /* #94B4C1 */
}

/* Code blocks */
.code-block {
    background-color: var(--code-block-bg); /* Light gray */
}

/* Footer styling */
.footer {
    background-color: var(--primary); /* #213448 */
    color: var(--theme); /* #EAE0CF */
}

/* Sidebar styling */
.sidebar {
    background-color: var(--entry); /* White */
    border-right: 1px solid var(--border); /* #94B4C1 */
}

/* Buttons and interactive elements */
.top-link {
    background-color: var(--secondary); /* #547792 */
    color: var(--theme); /* #EAE0CF */
}

.top-link:hover {
    background-color: var(--tertiary); /* #94B4C1 */
    color: var(--primary); /* #213448 */
}

/* Article titles */
h1, h2, h3, h4, h5, h6 {
    color: var(--primary); /* #213448 */
}

/* Article content */
.post-content {
    color: var(--content); /* #213448 */
}

/* Navigation links */
.nav-links a {
    color: var(--secondary); /* #547792 */
}

.nav-links a:hover {
    color: var(--tertiary); /* #94B4C1 */
}

/* Category/tag styling */
.category, .tag {
    background-color: var(--tertiary); /* #94B4C1 */
    color: var(--primary); /* #213448 */
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.8em;
}

/* Search results */
.search-result {
    border-bottom: 1px solid var(--border); /* #94B4C1 */
}

/* Responsive design adjustments */
@media (max-width: 768px) {
    .header {
        background-color: var(--primary); /* #213448 */
    }
    
    .sidebar {
        border-right: none;
        border-bottom: 1px solid var(--border); /* #94B4C1 */
    }
}

/* Readability enhancements */
.reading-time {
    color: var(--secondary); /* #547792 */
}

/* Mobile-first long-form scannability defaults */
html {
    scroll-behavior: smooth;
}

.post-content h2,
.post-content h3,
.post-content h4 {
    scroll-margin-top: 96px;
}

@media (max-width: 768px) {
    .post-content p {
        margin: 0 0 1rem;
        line-height: 1.75;
    }

    .post-content h2 {
        margin-top: 1.8rem;
        margin-bottom: 0.8rem;
        line-height: 1.35;
    }

    .post-content h3 {
        margin-top: 1.4rem;
        margin-bottom: 0.6rem;
        line-height: 1.4;
    }

    .toc {
        position: sticky;
        top: 68px;
        z-index: 5;
        max-height: 46vh;
        overflow: auto;
        border-radius: 10px;
        margin-bottom: 1rem;
        box-shadow: 0 4px 12px rgba(84, 119, 146, 0.12);
    }

    .toc details summary {
        font-weight: 600;
    }

    .toc ul {
        margin-block-start: 0.5rem;
        margin-block-end: 0.5rem;
        padding-inline-start: 1rem;
    }
}