:root {
    --sidebar-width: 160px;
    --font: Verdana, Geneva, sans-serif;
    --font-size: 11px;
    --line-height: 1.6;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font);
    font-size: var(--font-size);
    line-height: var(--line-height);
    color: #000;
}

a {
    color: #000;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
    color: #555;
}

#layout {
    display: flex;
    min-height: 100vh;
}

#sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    padding: 20px;
    border-right: 1px solid #e0e0e0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

#site-name {
    font-weight: bold;
    margin-bottom: 16px;
}
#site-name a {
    color: #000;
    font-size: medium;
}

#nav ul,
#footer-nav ul,
#post-list,
#post-tags,
#child-pages {
    list-style: none;
}
#nav ul li,
#post-list li {
    margin-bottom: 3px;
}
#nav ul li.active > a {
    font-weight: bold;
}

#content {
    flex: 1;
    padding: 30px;
    max-width: 860px;
}

#post-title {
    font-weight: normal;
    color: #444;
    margin-bottom: 16px;
}

#featured-image {
    margin-bottom: 20px;
}
#featured-image img,
#post-content img {
    display: block;
    max-width: 100%;
    height: auto;
}

#post-content {
    max-width: 640px;
}
#post-content p {
    margin-bottom: 1em;
}

#post-tags li {
    display: inline-block;
    margin-right: 8px;
}

#site-footer {
    margin-top: auto;
    padding-top: 16px;
    font-size: 10px;
    color: #888;
}

@media (max-width: 600px) {
    #layout {
        flex-direction: column;
    }
    #sidebar {
        width: 100%;
        height: auto;
        position: static;
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
    }
}

.submenu {
    list-style: none;
    margin-left: 12px;
    margin-top: 2px;
}

.has-children > a {
    font-weight: bold;
}

.nav-list {
    list-style: none;
}

/* --- Gallery Grid --- */
.gallery {
    display: grid;
    gap: 30px;
    align-items: start; /* Fixes the "boxy" stretching */
    margin: 2rem 0;
}

.gallery__item {
    margin: 0;
}

.gallery__item img {
    width: 100%;
    height: auto; /* Respects aspect ratio */
    display: block;
    box-shadow: 0 0 1px rgba(0,0,0,0.1); /* Optional: subtle edge */
}

"galleryImages": {
    "sizes": "",
    "dimensions": {
        "thumbnail": {
            "width": 720,
            "height": "auto"
        }
    }
}
/* Map the columns */
/*.gallery[data-columns="1"] { grid-template-columns: repeat(1, 1fr); }
.gallery[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.gallery[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }*/


/* Column Logic based on Publii Editor settings */
.gallery[data-columns="1"] { grid-template-columns: repeat(1, 1fr); }
.gallery[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.gallery[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
.gallery[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }
.gallery[data-columns="5"] { grid-template-columns: repeat(5, 1fr); }
.gallery[data-columns="6"] { grid-template-columns: repeat(6, 1fr); }
.gallery[data-columns="7"] { grid-template-columns: repeat(7, 1fr); }
.gallery[data-columns="8"] { grid-template-columns: repeat(8, 1fr); }

/* Responsive override for mobile */
@media (max-width: 600px) {
    .gallery {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}