/* =========================================================================
   Omeka-S custom stylesheet
   Cleaned-up version. Originally duplicated 4× across different font imports
   (Roboto / Source Sans Pro / Helvetica Neue) with overlapping & broken rules.
   Consolidated here into a single pass.
   ========================================================================= */

@import url("https://fonts.googleapis.com/css?family=EB+Garamond|Spectral+SC");

/* -------------------------------------------------------------------------
   1. Reset & base
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, hr,
dl, dd, ol, ul, figure {
    margin: 0;
    padding: 0;
}

body {
    font: 400 18px/1.5 "Roboto", Arial, sans-serif;
    color: #111;
    background: #ffffff url("../img/bg.jpg") no-repeat;
    background-size: cover;
    background-attachment: fixed;
    -webkit-text-size-adjust: 100%;
    font-feature-settings: "kern" 1;
    font-kerning: normal;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
}

main {
    display: block;
}

h1, h2, h3, h4, h5, h6,
p, blockquote, pre, ul, ol, dl, figure {
    margin-bottom: 15px;
    font-weight: normal;
}

img {
    max-width: 100%;
    vertical-align: middle;
}

figure > img {
    display: block;
}

figcaption {
    font-size: 15.75px;
}

ul, ol {
    margin-left: 30px;
}

li > ul,
li > ol {
    margin-bottom: 0;
}

a {
    color: #9a1419;
    text-decoration: none;
}

a:visited {
    color: #6b0e12;
}

a:hover {
    color: #2a2a2a;
    text-decoration: underline;
}

/* -------------------------------------------------------------------------
   2. Typography helpers
   ------------------------------------------------------------------------- */
blockquote {
    margin: 60px 0;
    padding-left: 15px;
    border-left: 4px solid #8e8e8e;
    color: #000;
    font-size: 20.25px;
}

blockquote > :last-child {
    margin-bottom: 0;
}

pre,
code {
    font-size: 16.875px;
    background-color: #eef;
    border: 1px solid #fff;
    border-radius: 3px;
}

code {
    padding: 1px 5px;
}

pre {
    padding: 8px 12px;
    overflow-x: auto;
}

pre > code {
    border: 0;
    padding-right: 0;
    padding-left: 0;
}

/* -------------------------------------------------------------------------
   3. Layout wrappers
   ------------------------------------------------------------------------- */
.wrapper {
    margin-right: auto;
    margin-left: auto;
    padding-right: 30px;
    padding-left: 30px;
}

.wrapper::after,
.footer-col-wrapper::after {
    content: "";
    display: table;
    clear: both;
}

@media screen and (max-width: 800px) {
    .wrapper {
        max-width: calc(1100px - 30px);
        padding-right: 15px;
        padding-left: 15px;
    }
}

/* -------------------------------------------------------------------------
   4. Tables
   ------------------------------------------------------------------------- */
table {
    width: 100%;
    margin-bottom: 30px;
    text-align: left;
    color: #3f3f3f;
    border-collapse: collapse;
    border-top: 5px solid #000;
}

table thead tr        { background-color: rgba(255, 255, 255, 0.05); }
table tr              { background-color: rgba(0, 107, 163, 0.05); }
table tr:nth-child(even) { background-color: rgba(255, 204, 0, 0.05); }

table th,
table td {
    padding: 10px 15px;
    border-bottom: 1px solid #000;
}

table th:not(:last-child),
table td:not(:last-child) {
    border-right: 1px solid #000;
}

table td {
    vertical-align: top;
}

table.tablesaw {
    border-top: 5px solid #000;
}

/* -------------------------------------------------------------------------
   5. Forms & buttons
   ------------------------------------------------------------------------- */
select,
button,
.button,
.resource-list.preview + a,
input[type="submit"] {
    display: inline-block;
    padding: 3.75px 7.5px;
    font: 400 18px/1.5 "EB Garamond", serif;
    border-radius: 3px;
    appearance: none;
}

textarea,
input:not([type="submit"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]) {
    padding: 3.75px 7.5px;
    font: 400 18px/1.5 "EB Garamond", serif;
    border: 1px solid #cecece;
}

button,
.button,
.resource-list.preview + a,
input[type="submit"] {
    cursor: pointer;
    color: #000 !important;
    background-color: #8bb5cb;
    border: 1px solid #000;
    border-width: 3px 1px 1px;
    border-radius: 0;
}

button:disabled,
button.inactive,
.button:disabled,
.button.inactive,
.resource-list.preview + a:disabled,
.resource-list.preview + a.inactive,
input[type="submit"]:disabled,
input[type="submit"].inactive {
    background-color: #fff;
    border: 1px solid #cecece;
    color: #cecece;
    cursor: default;
}

button.yellow,
.button.yellow,
.resource-list.preview + a.yellow,
input[type="submit"].yellow {
    background-color: #fc0;
}

select {
    padding-right: 22.5px;
    border: 1px solid #cecece;
    background: #fff url(../../../../application/asset/img/select-arrow.svg) no-repeat right 7.5px center / 7.5px;
}

option {
    margin: 0 7.5px 0 0;
}

/* -------------------------------------------------------------------------
   6. Header & navigation
   ------------------------------------------------------------------------- */
.site-header {
    min-height: 55.95px;
    position: relative;
}

.site-header a            { color: #000; }
.site-header a:hover,
.site-header a:active     { text-decoration: none; }
.site-header .wrapper     { padding: 0; }
.site-header .wrapper > * { padding: 0 30px; }

.site-title {
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 0;
    font: 300 30.25px/0 "Roboto", Arial, sans-serif;
    letter-spacing: -1px;
    text-align: center;
    background-color: #5a5a5a;
    overflow: hidden;
}

.site-title a {
    display: block;
    width: 100%;
}

.site-title img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    object-fit: cover;
}

.site-nav {
    position: relative;
    width: 100%;
    line-height: 60.75px;
    text-align: center;
}

.site-nav::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -9999px;
    right: -9999px;
    background-color: rgba(206, 206, 206, 0.5);
    z-index: -1;
}

.site-nav ul       { list-style: none; margin: 0; }
.site-nav ul ul    { display: none; }
.site-nav li       { display: inline-block; }
.site-nav .nav-trigger,
.site-nav .menu-icon { display: none; }

.site-nav .page-link,
.site-nav li {
    color: #111;
    line-height: 1.5;
}

.site-nav .page-link:not(:last-child),
.site-nav li:not(:last-child) {
    margin-right: 20px;
}

/* User menu */
.user {
    display: inline-block;
    position: relative;
    margin-right: 10px;
}

.user::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 18.75px;
    margin-right: 10px;
    background-color: #000;
    transform: translateY(25%);
}

.username {
    font-weight: bold;
}

.site-nav .page-link.user-toggle {
    position: relative;
    z-index: 2;
    margin-right: 0;
    padding: 0 7.5px;
    display: inline-block;
}

.logged-in .user-toggle {
    width: 37.5px;
    text-align: center;
}

.user-menu {
    position: absolute;
    right: -9999px;
    padding: 15px;
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 3px;
    z-index: 0;
    line-height: 1.5;
    list-style: none;
}

.user-menu .field { margin-bottom: 15px; }
.user-menu li     { line-height: 1.5; }

.user.open .user-menu { right: -1px; }

.user.open .user-toggle::before {
    content: "";
    position: absolute;
    top: -3.75px;
    right: -1px;
    width: 100%;
    height: 37.5px;
    background-color: #fff;
    border: 1px solid #fff;
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
    z-index: -11;
}

#scriptologoutform                { display: inline-block; }
#scriptologoutform [type="submit"] {
    padding: 0;
    background-color: transparent;
    color: #000;
    border: 0;
}
#scriptologoutform [type="submit"]:hover { text-decoration: underline; }

/* Project & section navigation */
.project-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7.5px 0;
    border-top: 1px solid #fff;
}

.project-nav h2 { margin-bottom: 0; }

.project-nav ul {
    display: flex;
    list-style: none;
    margin: 0 0 0 auto;
}

.project-nav li { margin-left: 30px; }

.breadcrumbs {
    max-width: 1200px;
    margin: 0 auto 30px;
    padding-bottom: 15px;
    text-align: center;
    border-bottom: 1px solid #8e8e8e;
    font-size: 15.75px;
}

.breadcrumbs .separator {
    display: inline-block;
    margin: 0 3.75px;
}

.section-nav {
    margin-bottom: 30px;
    padding-bottom: 7.5px;
    border-bottom: 1px solid #fff;
}

.section-nav a {
    display: inline-block;
    padding: 3.75px 7.5px;
}

.section-nav a.active {
    background-color: #deeafa;
    border-radius: 20px;
}

/* Scripto search */
#scripto-search {
    display: flex;
    position: absolute;
    top: -9999px;
    padding: 7.5px 0;
    border-top: 1px solid #fff;
}

#scripto-search.active            { position: static; }
#scripto-search input[type="text"] { width: 100%; border-right: 0; }
#scripto-search button             { border-radius: 0 3px 3px 0; }

/* Skip nav (a11y) */
#skipnav {
    position: fixed;
    top: 30px;
    left: 50%;
    padding: 7.5px;
    background-color: #fff;
    border: 1px solid #8e8e8e;
    transform: translateX(-50%);
    z-index: -5;
    opacity: 0;
}

#skipnav:focus {
    z-index: 1000;
    opacity: 1;
}

header ul.navigation { display: inline-block; }

/* Search box in header */
#search {
    display: inline-block;
    margin-left: 60px;
}

#search button {
    position: relative;
    width: 37.5px;
    text-indent: -9999px;
    border-top: 1px solid #000;
}

#search-form {
    display: flex;
}

/* -------------------------------------------------------------------------
   7. Footer
   ------------------------------------------------------------------------- */
footer .wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
    color: #fff;
}

.site-footer {
    padding: 20px;
    background-color: #494949;
    border-top: 1px solid #494949;
}

.footer-heading {
    margin-bottom: 15px;
    font-size: 20.25px;
}

.footer-col-wrapper {
    margin-left: -15px;
    color: #cecece;
    font-size: 16.875px;
}

.footer-col {
    float: left;
    margin-bottom: 15px;
    padding-left: 15px;
}

.footer-col-1 { width: calc(35% - 15px); }
.footer-col-2 { width: calc(20% - 15px); }
.footer-col-3 { width: calc(45% - 15px); }

/* -------------------------------------------------------------------------
   8. Messages (flash)
   ------------------------------------------------------------------------- */
ul.messages {
    margin-left: 0;
    list-style: none;
}

ul.messages li {
    padding: 7.5px;
    border-radius: 3px;
}

ul.messages .success {
    background-color: #cdffcd;
    border: 1px solid green;
    color: green;
}

ul.messages .error {
    background-color: #ffe6e6;
    border: 1px solid red;
    color: red;
}

/* -------------------------------------------------------------------------
   9. Page content & post lists
   ------------------------------------------------------------------------- */
.page-content {
    flex: 1;
    padding: 30px 0;
    background-color: #fff;
}

.page-heading      { font-size: 36px; }
.post-list-heading { font-size: 31.5px; }

.post-list {
    margin-left: 0;
    list-style: none;
}

.post-list > li { margin-bottom: 30px; }

.post-meta {
    color: #cecece;
    font-size: 15.75px;
}

.post-link {
    display: block;
    font-size: 27px;
}

.post-content .field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.post-content .field-meta            { margin-right: 15px; }
.post-content .required .field-meta::after { content: "*"; }

.post-header { margin-bottom: 30px; }

.post-title {
    font-size: 47.25px;
    line-height: 1;
    letter-spacing: -1px;
}

.post-content              { margin-bottom: 30px; }
.post-content h2           { font-size: 36px; }
.post-content h3           { font-size: 29.25px; }
.post-content h4           { font-size: 22.5px; }

/* -------------------------------------------------------------------------
   10. Browse controls & pagination
   ------------------------------------------------------------------------- */
.browse-controls {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 15px;
}

.browse-controls nav.pagination:only-child {
    width: 100%;
    justify-content: flex-end;
}

.browse-controls .sorting {
    order: 1;
    display: flex;
    width: 30%;
    margin-right: 15px;
}

.browse-controls .sorting select   { width: 40%; }
.browse-controls .advanced-search  { order: 2; }
.browse-controls .pagination       { order: 3; }
.browse-controls .pagination form  { margin-right: 15px; }

nav.pagination {
    display: flex;
    align-items: center;
    margin-left: auto;
}

nav.pagination .row-count { margin-left: 15px; }

.browse-controls .pagination .button,
.browse-controls .pagination .resource-list.preview + a {
    width: 30px;
    text-align: center;
    border-radius: 0;
}

.browse-controls .pagination .button:first-child,
.browse-controls .pagination .resource-list.preview + a:first-child {
    border-radius: 3px 0 0 3px;
}

.browse-controls .pagination .button:not(:first-child),
.browse-controls .pagination .resource-list.preview + a:not(:first-child) {
    margin-left: -1px;
}

.browse-controls .pagination .button:last-child,
.browse-controls .pagination .resource-list.preview + a:last-child {
    border-radius: 0 3px 3px 0;
}

.previous.button,
.resource-list.preview + a.previous {
    width: 30px;
    margin-left: 15px;
    text-align: center;
    border-radius: 3px 0 0 3px;
}

.next.button,
.resource-list.preview + a.next {
    width: 30px;
    margin-left: -1px;
    text-align: center;
    border-radius: 0 3px 3px 0;
}

/* "No resources" placeholder */
.no-resources {
    position: relative;
    line-height: 3;
    font-size: 36px;
    text-align: center;
}

/* -------------------------------------------------------------------------
   11. Item / resource listings
   ------------------------------------------------------------------------- */
.items.search .page-content .wrapper,
.item.browse  .page-content .wrapper,
.index.search .page-content .wrapper,
body:not([class]) .page-content .wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

.item.browse .resource-list,
.preview-block .resource-list {
    list-style: none;
    margin: 30px 0;
    padding-top: 30px;
    border-top: 1px solid #8e8e8e;
}

.item.browse .resource-list .resource,
.preview-block .resource-list .resource {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #8e8e8e;
}

.item.browse .resource-list .item-meta,
.preview-block .resource-list .item-meta { width: 100%; }

.item.browse .resource-list .item-thumbnail,
.preview-block .resource-list .item-thumbnail { margin-left: 30px; }

.item.browse .resource-list h4,
.preview-block .resource-list h4 {
    margin-bottom: 0;
    font-variant: small-caps;
}

/* -------------------------------------------------------------------------
   12. Properties / media list (item show page)
   ------------------------------------------------------------------------- */
.wrapper > h2:first-child {
    text-align: center;
}

.wrapper > h2:first-child + h3 {
    margin-top: -15px;
    text-align: center;
    font-variant: small-caps;
}

.properties {
    max-width: 1200px;
    margin: 0 auto;
}

.media-list,
.property {
    display: flex;
    width: 100%;
    padding: 7.5px 0;
}

.media-list:not(:last-child),
.property:not(:last-child) {
    border-bottom: 1px solid #8e8e8e;
}

.media-list h4,
.property h4 {
    width: 30%;
    padding-right: 30px;
    margin-bottom: 0;
    text-align: right;
    font-variant: small-caps;
    overflow: hidden;
    text-overflow: ellipsis;
}

.media-list a.resource-link,
.media-list .values,
.property a.resource-link,
.property .values {
    width: 70%;
}

.media-list .resource-link,
.property .resource-link {
    display: flex;
    align-items: center;
}

.media-list .resource-link img,
.property .resource-link img {
    width: 45px;
    height: 45px;
    margin-right: 7.5px;
}

.media-list                 { margin-bottom: 60px; }
.media-list .resource-link  { margin-bottom: 7.5px; }

.item.show table {
    max-width: 1200px;
    margin: 30px auto;
}

.item.show h3 {
    margin: 60px auto 0;
    text-align: center;
}

/* -------------------------------------------------------------------------
   13. Advanced search
   ------------------------------------------------------------------------- */
#advanced-search .value { margin-bottom: 7.5px !important; }

#advanced-search .remove-value {
    position: relative;
    width: 45px;
    height: 45px;
    margin-left: 7.5px;
    text-indent: -9999px;
}

#advanced-search .removable .value:only-of-type .remove-value {
    display: none;
}

/* -------------------------------------------------------------------------
   14. Generic field (form rows)
   ------------------------------------------------------------------------- */
.field {
    display: flex;
    margin-bottom: 30px;
}

.field-meta {
    width: 20%;
    padding-right: 7.5px;
}

.field-meta .label { font-size: 22.5px; }

.field .inputs {
    width: 80%;
    padding-left: 7.5px;
}

.field .field-description { font-size: 15.75px; }

/* Media embeds */
.media-embeds {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.media-embeds img,
.media-embeds video,
.media-embeds audio { margin: 30px; }

/* -------------------------------------------------------------------------
   15. Linked resources
   ------------------------------------------------------------------------- */
.linked-header {
    max-width: 1200px;
    margin: 0 auto;
}

#linked-filter {
    display: flex;
    justify-content: center;
    margin: 30px 0 0;
}

#linked-filter h4 { margin: 7.5px 15px 7.5px 0; }

.linked-resource-property {
    margin-bottom: 15px;
    font-style: italic;
}

/* -------------------------------------------------------------------------
   16. Site-wide search results
   ------------------------------------------------------------------------- */
.results {
    margin-bottom: 60px;
    clear: both;
}

.results ul { list-style: none; margin-left: 0; }

.results > ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.results > ul > li {
    width: calc(50% - 30px);
    margin: 15px;
    padding: 15px 30px;
    background-color: #8bb5cb;
    border-top: 3px solid #000;
    font-variant: small-caps;
}

.results ul ul li,
.results .result-site {
    display: flex;
    border-top: 1px solid #000;
    font-variant: normal;
}

.results ul a,
.results .result-title {
    display: inline-block;
    padding: 7.5px 0;
    color: #000;
}

.results .result-title a { padding: 0; }
.results ul ul a         { padding-left: 0; }

.pagination + .results { margin: 30px 0 0; clear: both; }

.sitewide-search-form                     { display: none; }
.sitewide-search-form ~ .results + .pagination { margin-top: 0; }
.sitewide-search-form ~ .advanced-search  { display: block; }
.sitewide-search-form ~ h2                { float: left; width: 50%; }

.sitewide-search-form ~ .pagination {
    float: right;
    width: 50%;
    margin: 0;
    justify-content: flex-end;
    text-align: right;
}

.sitewide-search-form ~ p { clear: both; }

.index.search .results { margin-bottom: 60px; }

.index.search .results ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
    columns: 2;
}

.index.search .results ul li {
    padding: 15px 0;
    border-bottom: 1px solid #000;
}

.index.search .results ul + a {
    display: block;
    margin-top: 30px;
}

/* -------------------------------------------------------------------------
   17. Page-builder blocks (TOC, showcase, sub-menu, preview)
   ------------------------------------------------------------------------- */
.blocks {
    max-width: 1200px;
    margin: auto;
}

.blocks h2 {
    width: 100%;
    text-align: center;
}

.page .toc-block { margin: 0 -15px; }

.page .toc-block .navigation {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.page .toc-block ul {
    list-style: none;
    margin-left: 0;
    border-left: 0;
}

.page .toc-block a {
    display: block;
    padding: 7.5px 0;
    color: #000;
}

.page .toc-block ul ul a  { padding-left: 0; }

.page .toc-block ul ul li {
    display: flex;
    border-top: 1px solid #000;
    font-variant: normal;
}

.page .toc-block > ul > li {
    width: calc(50% - 30px);
    margin: 30px 15px;
    padding: 15px 30px;
    background-color: #8bb5cb;
    border-top: 3px solid #000;
    font-variant: small-caps;
}

.page .item-showcase {
    margin: 60px 0;
    padding: 30px 0 0;
    border-color: #8e8e8e;
}

.page .sub-menu ul {
    margin-left: 0;
    padding-bottom: 15px;
    text-align: center;
    border-bottom: 1px solid #8e8e8e;
}

.page .sub-menu ul li {
    display: inline-block;
    margin: 0 15px;
}

/* Item showcase blocks */
.item-showcase {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 1rem 0;
    padding: calc(1rem - 1px) 0 0;
    border-top: 1px solid #dfdfdf;
    border-bottom: 1px solid #dfdfdf;
    overflow: hidden;
    text-align: center;
    clear: both;
}

.item.resource .caption {
    font-size: 0.875rem;
    line-height: 1.5rem;
}

.item.resource .caption *               { margin: 0 0 1rem 0; }
.item.resource .caption > *:last-child  { margin-bottom: 0; }

.item-showcase .resource.item {
    margin-bottom: 1rem;
    vertical-align: top;
}

.item-showcase .resource.item img {
    max-width: 100%;
    margin-right: 0.5rem;
}

.item-showcase .resource.item:only-child img { margin: 0 auto; }

.item-showcase .resource.item:not(:only-child) {
    width: 25%;
    padding: 0 0.5rem;
    clear: none;
}

.item-showcase .resource.item:not(:only-child) h3 {
    clear: left;
    margin: 0.5rem 0 0;
    font-size: 1rem;
    line-height: 1.5rem;
}

.item-showcase .resource.item:not(:only-child) img {
    width: auto;
    max-height: 7rem;
    margin-right: 0;
    float: none;
    vertical-align: top;
}

/* Left / right floated items (asset blocks) */
.right,
.left {
    max-width: 33.33%;
    overflow: hidden;
}

.left .item.resource,
.right .item.resource { margin: 0 0 1rem 0; }

.left .item.resource:first-of-type,
.right .item.resource:first-of-type {
    margin-top: 0;
    padding-top: calc(1rem - 1px);
}

.left .item.resource .media-render a,
.right .item.resource .media-render a { display: block; }

.left .item.resource audio,
.left .item.resource canvas,
.left .item.resource video,
.left .item.resource progress,
.left .item.resource img,
.right .item.resource audio,
.right .item.resource canvas,
.right .item.resource video,
.right .item.resource progress,
.right .item.resource img {
    max-width: 108%;
    height: auto;
    margin: 46px 0 300.5px 30px;
    vertical-align: bottom;
}

.left .item.resource > a:first-child,
.right .item.resource > a:first-child { vertical-align: top; }

.medium .item.resource > h3,
.square .item.resource > h3 {
    font-size: 16px;
    line-height: 1.5rem;
}

.left .item.resource > h3,
.right .item.resource > h3 { margin: 0; }

.left .item.resource + p,
.right .item.resource + p  { margin-top: 0; }

/* File / asset blocks */
.file {
    margin: 1rem 0;
    border-top: 1px solid #dfdfdf;
    border-bottom: 1px solid #dfdfdf;
}

.left.file,
.left.assets {
    float: left;
    clear: left;
    margin: 0 1rem 1rem 0;
}

.right.file,
.right.assets {
    float: right;
    clear: right;
    margin: 0 0 1rem 1rem;
}

.center.file,
.center.assets {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}

.center.file .item,
.center.assets .item { width: 100%; }

/* Breaks */
.break {
    width: 100%;
    margin: 1rem 0;
    clear: both;
    border-bottom: 1px solid #dfdfdf;
}

.break.transparent { border-color: transparent; }
.break.opaque      { border-color: #8e8e8e; }

/* Preview block / TOC block (generic) */
.preview-block {
    width: 100%;
    margin: 1rem 0;
    overflow: hidden;
    clear: both;
}

.toc-block > ul {
    list-style-type: none;
    margin: 1rem 0;
    border-left: 5px solid #dfdfdf;
}

.toc-block > ul > li    { margin-bottom: 0.5rem; }
.toc-block > ul > li > a { font-weight: bold; }

.toc-block ul ul {
    list-style-type: none;
    padding-left: 0;
}

.toc-block ul ul ul        { padding-left: 1.25em; }
.toc-block ul ul li::before { content: "—"; color: #dfdfdf; }

.item-with-metadata {
    width: 100%;
    margin: 1rem 0;
    overflow: hidden;
}

.item-with-metadata .show.resource { margin: 2rem 0; }

/* List of sites */
.list-of-sites .site-list .site {
    margin-bottom: 0.5rem;
    overflow: auto;
}

.list-of-sites .site-list .site-link {
    display: inline-block;
    margin-bottom: 0.25rem;
    font-size: 1.25rem;
}

.list-of-sites .site-list .site-summary {
    margin: 0 0 0.25rem 0;
    line-height: 20px;
}

.list-of-sites .site-list .site-thumbnail-image {
    float: left;
    max-width: 25%;
    margin-right: 1rem;
}

.assets .asset,
.assets .asset img {
    max-width: 100%;
    height: auto;
}

.assets .asset { margin-bottom: 1rem; }

.assets .link-title {
    display: block;
    font-size: 1.25rem;
    font-weight: bold;
}

/* -------------------------------------------------------------------------
   18. Location grid (hover effect)
   ------------------------------------------------------------------------- */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 1em;
}

.location-listing {
    position: relative;
}

.location-image {
    line-height: 0;
    overflow: hidden;
}

.location-image img {
    filter: blur(0);
    transform: scale(1.1);
    transition: filter 0.3s ease-in;
}

.location-title {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(90, 0, 10, 0.4);
    color: #fff;
    font-size: 1.5em;
    font-weight: bold;
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.5s;
}

.location-listing:hover .location-title       { opacity: 1; }
.location-listing:hover .location-image img   { filter: blur(2px); }

/* Touch-screen fallback (no hover) */
@media (hover: none) {
    .location-title     { opacity: 1; }
    .location-image img { filter: blur(2px); }
}

/* -------------------------------------------------------------------------
   19. Float layout helpers
   ------------------------------------------------------------------------- */
.float-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.float-child-left {
    float: left;
    width: 70%;
    padding-right: 10px;
}

.float-child-right {
    float: left;
    width: 30%;
}

/* -------------------------------------------------------------------------
   20. Mobile / small-screen overrides
   ------------------------------------------------------------------------- */
@media screen and (max-width: 39.9375em) {
    .site-header .wrapper > * { padding: 0 15px; }

    .site-title {
        padding: 0 !important;
        font-size: 22.5px;
        line-height: 0;
    }

    .site-nav         { line-height: 1; }
    .site-nav::before { right: 0; }
    .site-nav ul      { padding: 15px; line-height: 1.5; }

    table th:not(:last-child),
    table td:not(:last-child) { border-right: 0; }

    #search                       { margin: 0 0 15px; }
    [name="fulltext_search"]      { width: calc(100% - 37.5px); }

    .blocks .intro    { padding: 30px; }

    .home .transcribe {
        padding: calc(50% + 30px) 30px 30px;
    }
    .home .transcribe::before {
        right: 0;
        bottom: auto;
        padding: 0 100% 50% 0;
    }

    .home .item-showcase           { flex-wrap: wrap; }
    .home .item-showcase .item     { display: block; width: 100%; }
    .home .item-showcase .item .item-thumbnail {
        float: right;
        width: 25%;
        margin: 0 0 15px 15px;
    }
    .home .item-showcase .media-count { display: inline-block; }

    .toc-block > ul > li { width: 100%; margin: 0 15px 30px; }

    .browse-controls {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }
    .browse-controls .advanced-search { margin: 15px; }
    .browse-controls .pagination      { margin-left: 0; }

    .item.browse .resource-list .item-thumbnail { align-self: flex-start; }

    .property h4 { padding-right: 15px; }

    .sitewide-search-form ~ h2,
    .sitewide-search-form ~ .pagination,
    .results > ul > li {
        float: none;
        width: 100%;
        justify-content: flex-start;
    }

    .index.search .results ul { columns: 1; }

    /* Float helpers reflow */
    .float-container   { justify-content: space-between; }
    .float-child-left  { width: 100%; order: 2; padding-bottom: 10px; }
    .float-child-right { width: 100%; order: 1; padding-bottom: 10px; }

    /* Left / right asset columns become full-width */
    .right,
    .left { max-width: 100%; }

    .right.file,
    .left.file {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0;
        padding: 0;
        border: 0;
        float: none;
        clear: none;
        text-align: center;
    }

    .right.file .item,
    .left.file .item { width: 100%; }

    .right .item.resource img,
    .left  .item.resource img {
        width: 105%;
        max-width: 100%;
        height: auto;
        margin: 0;
        vertical-align: middle;
    }
}