/* 1. LAYOUT & GLOBAL TEXT */
#content {
    padding: 30px 10%;
}

body, input, textarea, button, .button, select, nav.pagination {
    font-size: 16px; 
    line-height: 24px;
}

h1 { font-size: 36px; line-height: 42px; }
h2 { font-size: 32px; line-height: 36px; }
h3 { font-size: 24px; line-height: 30px; }
h4 { font-size: 16px; }

.field-description, .sub-menu li, .breadcrumbs, .property dt, 
.property .value .language, a.metadata-browse-link {
    font-size: 14px;
}

/* 2. LOGO IMAGE RESIZING AND ALIGNMENT */
h1.site-title {
    padding: 0;
    margin: 0;
    line-height: 0;
}

h1.site-title a {
    display: inline-block;
    padding: 15px 0 10px 30px;
}

h1.site-title img {
    display: block;
    width: 60%; 
    max-width: 100%;
    height: auto;
}

@media screen and (min-width: 800px) {
    h1.site-title {
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        min-height: 120px;
    }
}

@media screen and (max-width: 799px) {
    h1.site-title a {
        padding: 15px 60px 10px 15px;
    }
    h1.site-title img {
        width: 100%;
        max-width: 400px;
    }
}

/* 3. REDUCE SPACE BETWEEN HEADER AND CONTENT */

/* Reduce padding on the content container itself */
#content {
    padding-top: 10px; /* Reduced from 30px */
}

/* Remove default bottom margin from the header/logo area */
header {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* 4. ADVANCED SEARCH (GRID LAYOUT) */
.search-results .resource-list.list .resource {
    display: grid;
    grid-template-columns: 200px 1fr; 
    grid-template-rows: min-content 1fr; 
    grid-template-areas: 
        "thumb heading"
        "thumb body";
    grid-column-gap: 30px;
    grid-row-gap: 0; 
    align-items: start;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
}

.search-results .resource-list.list .resource-thumbnail {
    grid-area: thumb;
    margin: 0;
    display: block;
}

.search-results .resource-list.list .resource-thumbnail .resource-link img {
    max-width: 200px;
    max-height: 200px;
    width: auto;
    height: auto;
    display: block;
}

.search-results .resource-list.list .resource-heading {
    grid-area: heading;
    margin: 0;
    padding: 0;
    align-self: start;
}

.search-results .resource-list.list .resource-heading * {
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

.search-results .resource-list.list .resource-body,
.search-results .resource-list.list .resource-metadata {
    grid-area: body;
    margin: 0;
    padding: 0;
    align-self: start;
}

.search-results .resource-list.list .resource-body *,
.search-results .resource-list.list .resource-metadata * {
    margin-top: 0;
    padding-top: 0;
}

.search-results .resource-list.grid .resource-thumbnail img {
    max-width: 200px;
    max-height: 200px;
}

/* 5. GENERAL BROWSE & NAVIGATION */
/*  Resize thumbnails */
ul.resource-list .resource img {
    width: 200px;
    height: auto;
}

/*  Make current nav page selection bold */
header nav ul li :is(.active, .current) > a,
header nav ul li.active {
    font-weight: bold;
    color: var(--accent, #000);
}

/* 6. MOBILE THUMBNAIL RESIZING (20% REDUCTION) */
@media screen and (max-width: 799px) {
    /* Resizing Advanced Search Grid column to fit smaller thumb */
    .search-results .resource-list.list .resource {
        grid-template-columns: 150px 1fr;
        grid-column-gap: 15px; /* Tighter gap for smaller screens */
    }

    /* Resizing images for Advanced Search */
    .search-results .resource-list.list .resource-thumbnail .resource-link img,
    .search-results .resource-list.grid .resource-thumbnail img {
        max-width: 150px;
        max-height: 150px;
    }

    /* Resizing images for General Browse */
    ul.resource-list .resource img {
        width: 150px;
    }
}