/* =========================================================
   MI&T DIGITAL COLLECTION — OMEKA S
   Optimized Foundation / Sea Foam overrides
   ========================================================= */

/* Space above bottom pagination */

.browse-controls {
    margin-top: 40px !important;
    margin-bottom: 0;
}
/* ---------------------------------------------------------
   01. FONT + DESIGN TOKENS
   --------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&display=swap');

:root {
    --mit-black: #111111;
    --mit-white: #FFFFFF;

    --mit-purple: #6D438A;
    --mit-blue: #46A6CD;
    --mit-green: #AAC44C;

    --mit-grey-100: #F5F5F5;
    --mit-grey-200: #E5E5E5;
    --mit-grey-400: #A0A0A0;
    --mit-grey-600: #666666;

    --mit-content-width: 1336px;
    --mit-page-gutter: clamp(24px, 3.6vw, 52px);
    --mit-transition: 0.2s ease;
}


/* ---------------------------------------------------------
   02. BASE / TYPOGRAPHY
   --------------------------------------------------------- */

html,
body {
    background: var(--mit-white);
}

body {
    margin: 0;
    color: var(--mit-black);
    font-family: "Archivo", Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
}

body,
button,
input,
select,
textarea {
    font-family: "Archivo", Arial, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--mit-black);
    font-family: "Archivo", Arial, sans-serif;
    font-weight: 700;
    line-height: 1.1;
}

h1 {
    font-size: clamp(40px, 4vw, 56px);
}

h2 {
    font-size: clamp(28px, 2.5vw, 34px);
}

h3 {
    font-size: 20px;
}

p {
    color: var(--mit-black);
}

img {
    max-width: 100%;
}


/* ---------------------------------------------------------
   03. LINKS + FOCUS
   --------------------------------------------------------- */

a {
    color: var(--mit-black);
    text-decoration-color: currentColor;
}

a:hover,
a:focus {
    color: var(--mit-purple);
}

a:focus-visible {
    outline: 2px solid var(--mit-purple);
    outline-offset: 3px;
}

::selection {
    background: var(--mit-purple);
    color: var(--mit-white);
}


/* ---------------------------------------------------------
   04. BUTTONS + FORM CONTROLS
   --------------------------------------------------------- */

button,
.button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    background: var(--mit-purple) !important;
    color: var(--mit-white) !important;
    border: 1px solid var(--mit-purple) !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    font-weight: 600;

    transition:
        background-color var(--mit-transition),
        color var(--mit-transition),
        border-color var(--mit-transition);
}

button:hover,
button:focus,
.button:hover,
.button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="button"]:hover,
input[type="button"]:focus {
    background: var(--mit-white) !important;
    color: var(--mit-purple) !important;
    border-color: var(--mit-purple) !important;
}

input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
input[type="number"],
select,
textarea {
    background: var(--mit-white);
    color: var(--mit-black);
    border: 1px solid var(--mit-black);
    border-radius: 0;
    box-shadow: none;
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    border-color: var(--mit-purple);
    box-shadow: 0 0 0 1px var(--mit-purple);
    outline: none;
}


/* ---------------------------------------------------------
   05. MAIN CONTENT WIDTH
   --------------------------------------------------------- */

#content {
    width: min(
        calc(100% - (2 * var(--mit-page-gutter))),
        var(--mit-content-width)
    );
    max-width: none;
    margin-inline: auto;
    padding-top: 64px;
    padding-bottom: 100px;
}


/* ---------------------------------------------------------
   06. HEADER + NAVIGATION
   --------------------------------------------------------- */

header,
.top-bar,
.top-bar ul,
.top-bar .menu {
    background: var(--mit-white) !important;
    color: var(--mit-black) !important;
    box-shadow: none;
}

header {
    border: 0;
}

.top-bar {
    padding-inline: var(--mit-page-gutter);
}

header a,
header a:visited {
    color: var(--mit-black) !important;
}

header nav a,
header .menu a {
    color: var(--mit-black) !important;
    background: transparent !important;

    font-family: "Archivo", Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;

    text-decoration: none;
}

header nav a:hover,
header nav a:focus,
header .menu a:hover,
header .menu a:focus,
header .active > a,
header .is-active > a,
header [aria-current="page"] {
    color: var(--mit-purple) !important;
    background: transparent !important;

    text-decoration: underline;
    text-decoration-color: var(--mit-purple);
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
}


/* Dropdowns */

header .submenu,
header .dropdown.menu .submenu {
    background: var(--mit-white) !important;
    border: 1px solid var(--mit-black);
    box-shadow: none;
}

header .submenu a {
    background: var(--mit-white) !important;
    color: var(--mit-black) !important;
}

header .submenu a:hover,
header .submenu a:focus {
    background: var(--mit-purple) !important;
    color: var(--mit-white) !important;
}


/* ---------------------------------------------------------
   07. BROWSE PAGE — HEADING + CONTROLS
   --------------------------------------------------------- */

body.item.browse #content > h1,
body.items.browse #content > h1 {
    margin-top: 0;
    margin-bottom: 32px;

    font-size: clamp(40px, 4vw, 56px);
    font-weight: 700;
    line-height: 1.05;
}


/* Browse toolbar */

.browse-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;

    margin-bottom: 42px;
}

.browse-controls form {
    margin: 0;
}

.browse-controls select,
.browse-controls input,
.browse-controls button,
.browse-controls .button {
    min-height: 42px;
    margin: 0;

    border-radius: 0 !important;
    box-shadow: none !important;
}


/* Advanced-search link on browse page */

a.advanced-search {
    color: var(--mit-black) !important;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 4px;
}

a.advanced-search:hover,
a.advanced-search:focus {
    color: var(--mit-purple) !important;
}


/* Grid / list toggle */

.layout-toggle a,
.layout-toggle button {
    background: var(--mit-white) !important;
    color: var(--mit-black) !important;

    border: 1px solid var(--mit-black) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.layout-toggle a:hover,
.layout-toggle a:focus,
.layout-toggle a.active,
.layout-toggle button:hover,
.layout-toggle button:focus,
.layout-toggle button.active {
    background: var(--mit-purple) !important;
    color: var(--mit-white) !important;
    border-color: var(--mit-purple) !important;
}


/* =========================================================
   OMEKA BROWSE PAGINATION — exact markup
   ========================================================= */

.browse-controls .omeka-pagination {
    display: flex;
    align-items: center;
    gap: 8px;

    margin: 0;

    font-family: "Archivo", Arial, sans-serif;
    font-size: 14px;
    line-height: 1;
}


/* Page number + "of 8" */

.browse-controls .omeka-pagination form {
    display: flex;
    align-items: center;
    gap: 5px;

    margin: 0;
}


/* Page input */

.browse-controls .omeka-pagination .page-input-top {
    box-sizing: border-box !important;

    width: 42px !important;
    min-width: 42px !important;

    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;

    margin: 0 !important;
    padding: 0 6px !important;

    background: #FFFFFF !important;
    color: #111111 !important;

    border: 1px solid #111111 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    font-family: "Archivo", Arial, sans-serif !important;
    font-size: 13px !important;
    line-height: 30px !important;

    text-align: center !important;
}


/* "of 8" */

.browse-controls .omeka-pagination .page-count {
    display: inline-flex;
    align-items: center;

    height: 32px;

    margin: 0;

    line-height: 1;
    white-space: nowrap;
}


/* Arrow button wrapper */

.browse-controls .omeka-pagination .button-group {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;

    margin: 0 !important;
}


/* BOTH arrow buttons */

.browse-controls .omeka-pagination .button-group > .button {
    box-sizing: border-box !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;

    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 0 !important;
    box-shadow: none !important;

    line-height: 1 !important;

    vertical-align: middle !important;
}


/* Available arrow */

.browse-controls .omeka-pagination .button-group > a.button {
    background: #6D438A !important;
    color: #FFFFFF !important;

    border: 1px solid #6D438A !important;
}

.browse-controls .omeka-pagination .button-group > a.button:hover,
.browse-controls .omeka-pagination .button-group > a.button:focus {
    background: #FFFFFF !important;
    color: #6D438A !important;

    border-color: #6D438A !important;
}


/* Disabled arrow */

.browse-controls .omeka-pagination .button-group > span.button[disabled] {
    background: #FFFFFF !important;
    color: #A0A0A0 !important;

    border: 1px solid #E5E5E5 !important;

    opacity: 1 !important;
}


/* Omeka icon pseudo-elements */

.browse-controls .omeka-pagination .o-icon-prev::before,
.browse-controls .omeka-pagination .o-icon-next::before {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 11px !important;
    line-height: 1 !important;
}


/* Result count */

.browse-controls .omeka-pagination .row-count {
    display: inline-flex;
    align-items: center;

    height: 32px;

    margin: 0 0 0 6px;

    line-height: 1;
    white-space: nowrap;
}
/* ---------------------------------------------------------
   09. RESOURCE GRID / OBJECT CARDS
   --------------------------------------------------------- */

ul.resources.resource-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;

    margin: 0;
    padding: 0;

    list-style: none;
}

ul.resources.resource-grid > li.resource {
    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    width: auto !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 18px !important;

    background: var(--mit-white);
    border: 1px solid var(--mit-black);

    transition: border-color var(--mit-transition);
}

ul.resources.resource-grid > li.resource:hover {
    border-color: var(--mit-purple);
}

ul.resources.resource-grid > li.resource .resource-meta {
    display: flex;
    flex: 1;
    flex-direction: column;
}

ul.resources.resource-grid > li.resource a.resource-link {
    display: flex;
    flex-direction: column;

    color: var(--mit-black) !important;
    text-decoration: none;
}

ul.resources.resource-grid > li.resource a.resource-link img {
    display: block;

    width: 100% !important;
    height: 240px !important;

    margin: 0 0 20px !important;

    object-fit: contain;
    object-position: center;

    background: var(--mit-grey-100);

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}


/* Neutralize Sea Foam thumbnail styling */

.thumbnail,
a.thumbnail,
.resource img,
.resource-link img,
.thumbnail:hover,
.thumbnail:focus,
a.thumbnail:hover,
a.thumbnail:focus,
.resource-link:hover img,
.resource-link:focus img {
    border-color: transparent !important;
    box-shadow: none !important;
}


/* Card title */

ul.resources.resource-grid .resource-name {
    display: block;

    margin: 0 0 14px;

    color: var(--mit-black) !important;

    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
}

ul.resources.resource-grid a.resource-link:hover .resource-name,
ul.resources.resource-grid a.resource-link:focus .resource-name {
    color: var(--mit-purple) !important;

    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}


/* Card description */

ul.resources.resource-grid .description,
ul.resources.resource-grid .description.fadeout {
    display: -webkit-box;
    overflow: hidden;

    margin: 0;

    color: var(--mit-black);

    font-size: 14px;
    line-height: 1.5;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

ul.resources.resource-grid .description.fadeout::after {
    display: none !important;
}


/* ---------------------------------------------------------
   10. ADVANCED SEARCH PAGE
   --------------------------------------------------------- */

/* Search panels */

#advanced-search .field,
form.advanced-search .field {
    background: var(--mit-white) !important;
    border: 1px solid var(--mit-grey-200) !important;
    box-shadow: none !important;
}


/* Standard headings */

#advanced-search .field-meta,
form.advanced-search .field-meta,
#advanced-search .field-meta label,
form.advanced-search .field-meta label {
    background: transparent !important;
    color: var(--mit-black) !important;

    font-weight: 600;

    box-shadow: none !important;
}


/* Omeka's remaining .label elements:
   e.g. "Search by value" and "Search by class" */

.advanced-search-content .field-meta > .label {
    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    color: var(--mit-black) !important;

    border: 0 !important;
    box-shadow: none !important;

    font-family: "Archivo", Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

#advanced-search .field-meta a,
form.advanced-search .field-meta a {
    background: transparent !important;
    color: var(--mit-black) !important;
}


/* Add / remove / expand controls */

#advanced-search .button,
#advanced-search button,
#advanced-search .add-value,
#advanced-search .remove-value,
#advanced-search .expand,
#advanced-search .collapse,
form.advanced-search .button,
form.advanced-search button,
form.advanced-search .add-value,
form.advanced-search .remove-value,
form.advanced-search .expand,
form.advanced-search .collapse {
    background: var(--mit-purple) !important;
    color: var(--mit-white) !important;

    border: 1px solid var(--mit-purple) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#advanced-search .button:hover,
#advanced-search button:hover,
#advanced-search .add-value:hover,
#advanced-search .remove-value:hover,
#advanced-search .expand:hover,
#advanced-search .collapse:hover,
form.advanced-search .button:hover,
form.advanced-search button:hover,
form.advanced-search .add-value:hover,
form.advanced-search .remove-value:hover,
form.advanced-search .expand:hover,
form.advanced-search .collapse:hover {
    background: var(--mit-white) !important;
    color: var(--mit-purple) !important;
    border-color: var(--mit-purple) !important;
}


/* Search inputs */

#advanced-search input,
#advanced-search select,
form.advanced-search input,
form.advanced-search select {
    background: var(--mit-white) !important;
    color: var(--mit-black) !important;

    border: 1px solid var(--mit-black) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}


/* ---------------------------------------------------------
   11. ITEM PAGE — TITLE + RESOURCE TYPE BADGE
   --------------------------------------------------------- */

.item.show .resource-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;

    margin-bottom: 18px;
}

.item.show .resource-title h2 {
    margin: 0;
}

.item.show .resource-title h3.label {
    display: inline-flex;
    align-items: center;

    margin: 0 0 0 14px !important;
    padding: 6px 10px !important;

    background: var(--mit-blue) !important;
    color: var(--mit-black) !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    font-family: "Archivo", Arial, sans-serif;
    font-size: 12px !important;
    font-weight: 700;
    line-height: 1;

    text-transform: uppercase;
}


/* ---------------------------------------------------------
   12. ITEM PAGE — METADATA
   --------------------------------------------------------- */

.item.show .property,
.resource.show .property {
    max-width: 920px;
    margin-bottom: 26px;
}

.item.show .property h4,
.resource.show .property h4,
.item.show .property .property-label,
.resource.show .property .property-label {
    margin: 0 0 7px;

    color: var(--mit-black);

    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
}

.item.show .property .value,
.resource.show .property .value,
.item.show .property .values,
.resource.show .property .values {
    color: var(--mit-black);

    font-size: 16px;
    line-height: 1.55;
}


/* Description width */

.item.show .property.resource__description .value,
.item.show .property.dcterms-description .value {
    max-width: 880px;
}


/* Small language code badge */

.value-language,
.language {
    padding: 3px 6px;

    background: var(--mit-grey-100) !important;
    color: var(--mit-grey-600) !important;

    border: 0 !important;
    border-radius: 0 !important;

    font-size: 11px;
}


/* ---------------------------------------------------------
   13. RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1024px) {
    ul.resources.resource-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px;
    }

    ul.resources.resource-grid > li.resource a.resource-link img {
        height: 220px !important;
    }
}


@media (max-width: 640px) {
    #content {
        width: calc(100% - 48px);
        padding-top: 44px;
        padding-bottom: 70px;
    }

    .browse-controls {
        align-items: stretch;
        gap: 12px;
    }

    .pagination {
        gap: 8px;
    }

    ul.resources.resource-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    ul.resources.resource-grid > li.resource a.resource-link img {
        height: 260px !important;
    }

    .item.show .resource-title {
        align-items: flex-start;
    }

    .item.show .resource-title h3.label {
        margin: 10px 0 0 !important;
    }
}