/* Chilocco History Project: styling carried over from the Omeka Classic (Emiglio + CSS Editor) site. */
:root { --chilocco: #843418; }

/* Header: the Default theme paints white bands behind the title and menu; make them maroon. */
header .site-title,
header #top-nav,
header .site-title:before,
header #top-nav:before { background-color: var(--chilocco); }
header #top-nav, header #top-nav:after { border-color: rgba(255, 255, 255, .25); background-color: var(--chilocco); }
header .site-title { font-size: 42px; font-weight: 700; line-height: 1.15; }
header .site-title a, header .site-title a:visited { color: #fff; text-decoration: none; border: 0; }
header #top-nav a, header #top-nav a:visited { color: #fff; }
header #top-nav a:hover, header #top-nav a:focus { color: #fff; text-decoration: underline; }
header #top-nav .child-toggle { background-color: transparent; color: #fff; border-color: rgba(255, 255, 255, .25); }
header #top-nav ul ul { background-color: var(--chilocco); }
header #top-nav ul ul a:hover { background-color: rgba(255, 255, 255, .15); text-decoration: none; }
/* Desktop dropdown panel: the theme paints a full-width white band behind it. */
@media screen and (min-width: 800px) {
    header nav ul.navigation > li:hover > ul,
    header nav ul.navigation > .parent > ul.open { background-color: #6e2b14; }
    header nav ul.navigation > li:hover > ul:after,
    header nav ul.navigation > .parent > ul.open:after {
        background-color: #6e2b14; border-color: rgba(255, 255, 255, .25);
    }
    header nav ul.navigation > li > ul > li a { display: inline-block; padding: 4px 8px; }
}
#mobile-nav-toggle { color: #fff; border-color: #fff; }

/* Search: inside the maroon header, top right, aligned with the content column. */
@media screen and (min-width: 800px) {
    header { margin-bottom: 40px; }
    header .site-title { padding-right: 380px; }
    header #search {
        position: absolute; top: 50%; transform: translateY(-50%); margin: 0;
        left: auto; right: max(60px, calc((100% - 1700px) / 2 + 60px)); width: auto; max-width: none;
    }
    header #search form { border: 0; padding: 0; background: transparent; }
    header #search input[type="text"] { width: 280px; border: 0; border-radius: 3px 0 0 3px; padding: 0 10px; }
    header #search button[type="submit"] { background-color: #fff; color: var(--chilocco); border: 0; }
}

/* Page content spans the full content column (was shrink-wrapped by the theme's flex layout). */
#content > .blocks { width: 100%; }

/* Home page tiles */
.homepage-display-grid-items {
    position: relative; width: 21%; display: inline-block; margin: 2%; height: 210px;
    text-align: center; text-decoration: none; border: 1px solid #a2a2a2; vertical-align: top;
}
.homepage-display-grid-items-text {
    display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
    color: #fff; font-size: xx-large; font-weight: 700;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 0 12px rgba(0, 0, 0, .6);
    background-color: rgba(0, 0, 0, .25); transition: background-color .2s;
}
.homepage-display-grid-items:hover .homepage-display-grid-items-text,
.homepage-display-grid-items:focus .homepage-display-grid-items-text { background-color: rgba(132, 52, 24, .75); }
.homepage-display-grid-items, .homepage-display-grid-items:hover { border-bottom: 1px solid #a2a2a2; }

/* "The Archive" link buttons */
.archive-link {
    background-color: #fff; color: #000; border: 2px solid var(--chilocco); text-align: center;
    display: inline-block; font-size: 16px; margin: 40px 0 0 30px; width: 40%;
}
.archive-link:hover { background-color: var(--chilocco); }
.arch-link { text-decoration: none; width: 100%; height: 100%; display: block; padding: 10px 20px; }
.archive-link:hover .arch-link, .arch-link:hover { color: #fff; }

/* Page banner headings used on About / History / etc. The page editor strips their positioning,
   so the banner photo and its boxed heading are laid out here instead. */
.block-html p[style*="background-image"] {
    display: flex; align-items: center; justify-content: center;
    background-size: cover; background-position: center 70%; background-repeat: no-repeat;
}
.image-page-heading {
    display: inline-block; font-size: 44px; font-weight: 700; line-height: 1.2;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}
.home-header-image { height: 400px; width: 100%; position: absolute; top: 0; left: 6%; text-align: center; }
.home-header-image-text {
    color: #fff; border: 10px solid #fff; position: relative; top: 40%; display: block;
    padding: 25px 40px; width: 40%; margin: 0 30%;
}
.responsive { width: 100%; max-width: 400px; }
#content img { max-width: 100%; height: auto; }

/* HTML media (YouTube / Kaltura players) */
.media-render iframe { max-width: 100%; }

@media screen and (max-width: 800px) {
    header .site-title { font-size: 32px; }
    .homepage-display-grid-items { width: 44%; }
    .archive-link { width: 90%; margin-left: 5%; }
    .image-page-heading { font-size: 26px; border-width: 5px !important; padding: 6px 16px !important; }
}