/* --- Base Layout (Warm Sepia Default) --- */
:root {
    --bg: #fbf0d9;
    --fg: #3b2f2f;
    --panel-bg: #f4e8ce;
    --muted: #7a6b63;
    --link: #8b4513;
    --link-hover: #5c2d0c;
    --border: #d4c3a3;
    --tag-bg: #e6d7bc;
    --tag-fg: #5c2d0c;
    --notice-bg: #fae19d;
    --notice-fg: #5c2d0c;
    --sticky-bg: #f9e2b3;
    --sticky-border: #8b4513;
    --sticky-badge-bg: #8b4513;
    --sticky-badge-fg: #fbf0d9;
}

body {
    font-family: sans-serif;
    max-width: 950px;
    margin: 20px auto;
    padding: 0 20px;
    line-height: 1.7;
    background: var(--bg);
    color: var(--fg);
}

header {
    border-bottom: 2px solid var(--border);
    padding-bottom: 10px;
    margin-bottom: 25px;
}
header h1 a { color: var(--link); text-decoration: none; }
header h1 a:hover { color: var(--link-hover); }

.container { display: flex; gap: 30px; }
main { flex: 3; }

/* --- Fixed Width Sidebar --- */
aside {
    flex: 0 0 280px; /* Do not grow, do not shrink, stay fixed at 280px */
    width: 280px;
    background: var(--panel-bg);
    padding: 15px;
    border: 1px solid var(--border);
    height: fit-content;
    font-size: 0.9rem;
    font-family: sans-serif;
    box-sizing: border-box;
}

aside h3 {
    margin-top: 20px;
}
aside h3:first-of-type {
    margin-top: 0;
}

aside ul { padding-left: 20px; margin: 2px 0 10px 0; }

.entry {
    margin-bottom: 20px;
    border: 1px solid var(--border);
    padding: 15px;
    background: var(--panel-bg);
}

.entry h2 a {
    color: var(--link);
    text-decoration: none;

}
.entry h2 a:hover {
    color: var(--link-hover);
    text-decoration: underline;

}

/* Sticky / Welcome Post Styling */
.entry.sticky {
    background: var(--sticky-bg) !important;
    border: 2px solid var(--sticky-border) !important;
}
.sticky-badge {
    display: inline-block;
    background: var(--sticky-badge-bg);
    color: var(--sticky-badge-fg);
    font-size: 0.75rem;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 3px;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-family: sans-serif;
}

/* --- Reduce spacing around entry titles --- */
article.entry h2 {
    margin-top: 0.4rem;    /* Adjust this value smaller (e.g., 0.2rem or 0) if you want it even tighter */
    margin-bottom: 0.4rem; /* Adjust this to control space between the title and body text */
    padding: 0;
}


.read-more {
    margin-top: 15px;
    font-weight: bold;
    font-family: sans-serif;
}

.meta {
    font-size: 0.85rem;
    color: var(--muted);
    margin-top: 15px;
    border-top: 1px dotted var(--border);
    padding-top: 8px;
    font-family: sans-serif;
}

.tag {
    background: var(--tag-bg);
    color: var(--tag-fg);
    padding: 2px 6px;
    border: 1px solid var(--border);
    font-size: 0.8rem;
    text-decoration: none;
}
.tag:hover { background: var(--link); color: var(--bg); }

.filter-notice {
    background: var(--notice-bg);
    color: var(--notice-fg);
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid var(--border);
    font-size: 0.9rem;
    font-family: sans-serif;
}

a { color: var(--link); }
a:hover { color: var(--link-hover); }
.content img { max-width: 100%; }

/* --- Breadcrumbs --- */
.breadcrumbs {
    font-size: 0.85rem;
    margin-bottom: 15px;
    font-family: sans-serif;
    color: var(--muted);
}
.breadcrumbs a {
    color: var(--link);
    text-decoration: none;
}
.breadcrumbs a:hover {
    text-decoration: underline;
}
.breadcrumbs span {
    color: var(--fg);
}

/* --- Sidebar Post Index Dates --- */
.sidebar-date {
    display: block;
    font-size: 0.75rem;
    color: var(--muted);
    margin-bottom: 6px;
}
aside ul li {
    margin-bottom: 2px;
}

/* --- Compact Category Tree Styling --- */
aside ul.category-tree,
aside ul.category-tree ul {
    list-style-type: none;
    padding-left: 12px;
    margin: 2px 0;
}
aside ul.category-tree li {
    margin: 2px 0;
    line-height: 1.3;
}
aside ul.category-tree a {
    text-decoration: none;
}
aside ul.category-tree a:hover {
    text-decoration: underline;
}

/* --- Prevent Long URLs/Text from Breaking Layout --- */
.content, main {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

/* Ensure links and code elements inside content wrap gracefully */
.content a, .content pre, .content code {
    white-space: pre-wrap;
    word-break: break-all;
}

/* --- Code and Pre Styling --- */
pre, code {
    font-family: monospace, monospace;
    font-size: 0.9rem;
}

/* --- Preformatted / Code Block Scrolling --- */
pre {
    overflow-x: auto;      /* Enables the horizontal slider */
    white-space: pre;      /* Prevents long lines from wrapping */
    max-width: 100%;       /* Forces Chrome to respect parent container boundaries */
    box-sizing: border-box;/* Includes padding in width calculations */
    background: #f4f1ea;   /* Soft sepia background tint */
    border: 1px solid #e2dbcd;
    padding: 10px 15px;
    border-radius: 4px;
}

code {
    background: #f4f1ea; /* Background tint for inline code */
    border: 1px solid #e2dbcd;
    padding: 2px 5px;
    border-radius: 3px;
}

pre code {
    background: transparent; /* Remove double background inside pre blocks */
    border: none;
    padding: 0;
}
#footer {

    text-align: center;
}

/* Center and align the social list */
.socials {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

/* Ensure the link wraps the icon cleanly */
.socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Base icon styling & smooth transition */
.social-icon {
    width: 24px;
    height: 24px;
    background-color: #5c4033; /* Default icon color */
    display: inline-block;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

/* Mouseover / Hover Effect */
.socials a:hover .social-icon {
    background-color: #000; /* Change this to your preferred hover color */
    transform: scale(1.1); /* Optional: slight zoom effect on hover */
}