/* Classic jemdoc academic style — matches aguyader/wsshin */

/* Blue headings — same color as links (#224b8d is jemdoc link blue) */
h1 {
    color: #224b8d;
}

h2 {
    color: #224b8d;
    border-bottom: 1px solid #aaaaaa;
    padding-bottom: 0.3em;
    margin-top: 1.5em;
    margin-bottom: 0.6em;
}

h3 {
    color: #224b8d;
}

/* Clean single line under page title (default is 3px double gray) */
div#toptitle {
    border-bottom: 1px solid #aaaaaa;
    padding-bottom: 0.3em;
    margin-bottom: 1.2em;
}

/* Slightly better body readability */
body {
    line-height: 1.6;
}

/* Sidebar spacing */
#layout-menu {
    padding: 1.2em 0.6em;
}

div.menu-category {
    margin-top: 1.2em;
    padding-bottom: 0.25em;
    font-size: 0.85em;
    letter-spacing: 0.03em;
}

div.menu-item {
    padding: 0.18em 0.5em;
    line-height: 1.8;
}

/* Elegant icon color in contact info */
.contact-info .fa-solid,
.contact-info .fa-brands {
    color: #527bbd;
    margin-right: 0.3em;
}

/* Experience image galleries */
.exp-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    margin: 1em 0 1.5em 0;
}

.exp-gallery figure {
    flex: 1 1 280px;
    margin: 0;
    text-align: center;
}

.exp-gallery img {
    width: 100%;
    height: 320px;
    object-fit: contain;
    border: 1px solid #dddddd;
    border-radius: 4px;
    background: #ffffff;
}

.exp-gallery figcaption {
    margin-top: 0.4em;
    font-size: 0.88em;
    color: #555555;
    font-style: italic;
}

/* Responsive: stack menu on small screens */
@media (max-width: 600px) {
    /* Stack the menu above the content instead of squeezing it beside */
    table#tlayout, table#tlayout > tbody, table#tlayout > tbody > tr,
    #layout-menu, #layout-content {
        display: block;
        width: auto;
    }
    #layout-menu {
        white-space: normal;
        min-height: auto;
        padding: 0.4em 0.8em;
    }
    #layout-menu .menu-item {
        display: inline-block;
        padding: 0 0.3em;
        text-indent: 0;
        line-height: 1.8;
    }
    #layout-menu .menu-category.admin {
        display: block;
        margin-top: 0.4em;
    }
    #layout-content {
        padding: 1em;
    }
    table.imgtable td {
        display: block;
    }
    .exp-gallery figure {
        flex: 1 1 100%;
    }
}