/* this post classes are inherited from blog.css:
.post-title
.post-text
.post-date
*/

a {
    color: #ced4da;
    text-decoration: none;
}

a:hover {
    color: #ffffff;
    text-decoration: none;
}

/* Special left-right margin for mobile view */
@media (orientation: portrait) {
    .post-content {
        margin: 2em;
    }
}

/* Padding from the top of a post, simular to <section> in blog */
.post-content {
    padding: 0.5em 0em;
}

/* Table of Contents */
.toc-section {
    border: 0.5px solid #adb5bd;
    padding: 0.5em 1.5em;
    border-radius: 8px;
}

.toc-section ul {
    color: #f8f9fa;
    list-style-type: none;
}

.toc-section li {
    font-family: "Nunito", serif;
    font-weight: bold;
}

.toc-section a {
    color: #adb5bd;
}

/* Images */

.post-content img {
    display: block;
    /* Make image a block element */
    margin: 0 auto;
    /* Center the image horizontally */
    max-width: 80%;
    /* Ensure image is responsive and does not overflow container */
    height: auto;
    /* Maintain aspect ratio */
    /* Maintain the image aspect ratio */
    max-height: 400px;
    /* Set a maximum height, adjust as needed */
    object-fit: contain;
    /* Ensure the image fits within the bounds without distortion */
    transition: filter 0.3s ease;
    /* Smooth transition for dimming */
}

.post-content img:hover {
    filter: brightness(0.8);
    /* Reduce brightness on hover */
    cursor: pointer;
    /* Indicate interactivity */
}

.post-content a {
    color: #f8f9fa;
    text-decoration: none;
}

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

.image-gallery {
    display: flex;
    /* Enables flex layout */
    justify-content: center;
    /* Centers the images horizontally */
    align-items: center;
    /* Aligns images vertically */
    gap: 1em;
    /* Space between images */
    flex-wrap: wrap;
    /* Wraps images to the next line if they exceed the width */
    width: 100%;
    /* Ensures the gallery spans the full width of the parent container */
    margin: 0 auto;
    /* Centers the gallery container */
    box-sizing: border-box;
    /* Includes padding and border in the element's width */
}

.image-gallery img {
    max-width: calc(33.33% - 20px);
    /* Ensures up to 3 images fit per row (adjustable) */
    height: auto;
    /* Maintains aspect ratio */
    max-height: 200px;
    /* Set a maximum height, adjust as needed */
    flex: 1 1 calc(33.33% - 1em);
    /* Responsive width for each image */
    box-sizing: border-box;
    /* Includes padding and border in the element's width */
}

.image-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9998;
    display: none;
}

.image-overlay.visible {
    display: block;
}

.post-content img.expanded {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 90%;
    z-index: 9999;
    filter: brightness(1);
    /* Reduce brightness to 80% */
    cursor: pointer;
}

/* Code */

code {
    font-family: "Source Code Pro", monospace;
    color: #bebebe;
    background-color: #212529;
    padding: 0em 0.15em;
    border-radius: 2px;
    font-size: 0.8em;
}

.codehilite {
    background-color: #212529;
    padding: 0.25em 1.25em;
    border-radius: 8px;
    overflow-x: auto;
    /* Allow horizontal scrolling for long lines */
}

/* Tables */

table {
    border-collapse: collapse;
    width: 100%;
}

th,
td {
    border: 0.5px solid #6c757d;
    padding: 0.5em;
    text-align: left;
}