/* Make the container a better size for the sidebar */
.container:has(.sidebar-left),
.container:has(.sidebar-right) {
    max-width: none;
    width: 90%;
}

/* Images in posts */
#main_content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px auto;
    border: 1px solid #444;
    border-radius: 4px;
}

/* Image captions (em/italic right after image) */
#main_content img+em {
    display: block;
    text-align: center;
    font-size: 0.9em;
    color: #999;
    margin-top: -15px;
    margin-bottom: 20px;
}

.post-preview {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #333;
}

.post-preview:last-child {
    border-bottom: none;
}

.post-preview h2 {
    margin-bottom: 5px;
}

.post-date {
    margin: 5px 0 10px 0;
    color: #999;
}

.post-thumbnail {
    max-width: 300px;
    max-height: 200px;
    width: auto;
    height: auto;
    object-fit: cover;
    margin: initial !important;
    border: 1px solid #444;
    border-radius: 4px;
}

.post-thumbnail:hover {
    opacity: 0.8;
    transition: opacity 0.2s;
}


.content-wrapper {
    display: grid;
    gap: 40px;
    margin-top: 20px;
}

/* Index page: full width main content only */
.content-wrapper:not(:has(.sidebar-left)):not(:has(.sidebar-right)) {
    grid-template-columns: 1fr;
}

/* Post pages: left sidebar + main + right sidebar */
.content-wrapper:has(.sidebar-left):has(.sidebar-right) {
    grid-template-columns: 180px 1fr 180px;
    align-items: start;
}

/* Fallback if only one sidebar exists */
.content-wrapper:has(.sidebar-left):not(:has(.sidebar-right)) {
    grid-template-columns: 180px 1fr;
    align-items: start;
}

.content-wrapper:has(.sidebar-right):not(:has(.sidebar-left)) {
    grid-template-columns: 1fr 180px;
    align-items: start;
}

.sidebar {
    font-size: 0.9em;
    padding: 15px;
    background: rgba(0, 0, 0, 0.1);
    border: 1px dashed #b5e853;
    border-radius: 4px;
}

.sidebar h3 {
    font-size: 1.1em;
    margin-bottom: 10px;
    margin-top: 0;
    border-bottom: 1px solid #444;
    padding-bottom: 5px;
}

.sidebar-left ul,
.sidebar-right ul {
    padding: 0;
    margin: 0;
}

.sidebar-left ul {
    list-style: none;
}

.sidebar-right ul {
    list-style: circle;
    padding-left: 20px;
}

.sidebar-right li::marker {
    color: #b5e853;
}

.sidebar-left li {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #333;
}

.sidebar-left li:last-child {
    border-bottom: none;
}

.sidebar-right li {
    margin-bottom: 8px;
}

.sidebar a {
    color: #63c0f5;
    text-decoration: none;
}

.sidebar a:hover {
    text-decoration: underline;
}

/* Responsive: stack on mobile */
@media (max-width: 768px) {
    .content-wrapper {
        grid-template-columns: 1fr !important;
    }

    .sidebar-left,
    .sidebar-right {
        display: none;
    }
}

/* Flag badges */
.flag-badge {
    display: inline-block;
    background-color: #1a1a1a;
    color: #b5e853;
    padding: 3px 8px;
    margin-right: 8px;
    /* margin-bottom: 5px; */
    border: 1px solid #b5e853;
    border-radius: 3px;
    font-size: 0.85em;
    font-family: monospace;
}

.post-flags {
    margin: 10px 0;
}

/* Flag filters */
.flag-filters {
    /* margin-bottom: 30px; */
    padding: 15px;
    background: rgba(0, 0, 0, 0.1);
    border: 1px dashed #b5e853;
    border-radius: 4px;
    text-align: center;
}

.flag-filters span {
    color: #b5e853;
    margin-right: 10px;
    font-weight: bold;
}

.flag-filter {
    display: inline-block;
    background-color: #1a1a1a;
    color: #b5e853;
    padding: 5px 12px;
    margin-right: 8px;
    /* margin-bottom: 5px; */
    border: 1px solid #b5e853;
    border-radius: 3px;
    font-size: 0.9em;
    font-family: monospace;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

.flag-filter:hover,
.flag-filter.active {
    background-color: #b5e853;
    color: #000;
}
/* Prevent flag filters from being draggable */
.flag-filter {
    user-select: none;
    -webkit-user-drag: none;
}

/* Section headers */
.section-header {
    margin-top: 50px;
}

/* Post author */
.post-author {
    margin: 10px 0;
    color: #999;
}

.post-author a {
    color: #63c0f5;
    text-decoration: none;
}

.post-author a:hover {
    text-decoration: underline;
}

/* Article title */
#main_content > h1:first-child {
    margin-bottom: 0px;
}

/* Post flags in article */
#main_content .post-flags {
    margin-bottom: 40px;
}
/* GitHub icon in header */
header .github-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #b5e853;
    transition: color 0.2s;
}

header .github-icon:hover {
    color: #fff;
}

header .github-icon svg {
    display: block;
}

/* Footer */
footer {
    margin-top: 60px;
    padding: 20px 0;
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px dashed #b5e853;
    text-align: center;
    font-size: 0.9em;
}

footer p {
    margin: 5px 0;
    color: #999;
}

footer a {
    color: #63c0f5;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}