/* style.css */

    legend {
        font-size: calc(1.275rem + 0.3vw);
    }
    h1,
    .h1 {
        font-size: calc(1.375rem + 4vw);
    }
    h2,
    .h2 {
        font-size: calc(1rem + 2vw);
    }
    h3,
    .h3 {
        font-size: calc(1.3rem + 2.5vw);
    }
    h4,
    .h4 {
        font-size: calc(1.275rem + 0.3vw);
    }
    .display-1 {
        font-size: calc(1.725rem + 5.7vw);
    }
    .display-2 {
        font-size: calc(1.675rem + 5.1vw);
    }
    .display-3 {
        font-size: calc(1.575rem + 3.9vw);
    }
    .display-4 {
        font-size: calc(1.475rem + 2.7vw);
    }
    .close {
        font-size: calc(1.275rem + 0.3vw);
    }

@font-face {
    font-family: "Didact Gothic";
    src: url("../fonts/DidactGothicRegular.woff2");
    font-display: block;
}

@font-face {
    font-family: "Roboto Slab";
    src: url("../fonts/RobotoSlab.woff2");
    font-display: block;
}

@font-face {
    font-family: "Antonio";
    src: url("../fonts/Antonio/Antonio-VariableFont_wght.ttf");
    font-display: block;
}

@font-face {
    font-family: "Anton";
    src: url("../fonts/Anton-Regular.ttf");
    font-display: block;
}

/*  Within CSS, all of the URLs should be relative, because a theme could be
    installed under any directory. */

:root {
    --light-grey: hsl(0, 0%, 90%);
    --off-black: hsl(0, 0%, 60%);
    --off-white: hsl(0, 0%, 99%);

    --purple: hsl(282, 50%, 53%);

    /*--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";*/
    --font-family-sans-serif: "Antonio";
    --font-family-monospace: "Courier";


    /*
      dce3df  -- a light grey
*/
}

input {
    padding-left: 1em;
}

a {
    color: black;
    text-decoration: underline;
}
a:hover {
    color: #97368d;
}


/*
    It's a reasonable default to treat videos as flow content; without this,
    large videos will stretch outside of their container.
*/
video {
    width: 100%;
}


body {
    background-color: hsl(0, 0%, 99%);

    /* From prototype. */
    /*margin-left: 1em;*/

    /* This is required!  Otherwise the presence of the scrollbar causes the
       SVG to resize in an ugly way */
    overflow-y: scroll;

    /*font-family: "Didact Gothic", sans-serif;*/
    /*font-family: "Antonio", sans-serif;*/
    font: 1rem/1.5 var(--font-family-monospace);

    /* Style rules from BMFW.  These make a HUGE difference */
    font-size: 16px;
    /*line-height: 1.6;*/
    line-height: 1.1;

}


/* H2 elements are generated by the Omeka-S machinery as part of the rendering
   of a given page.  This seems to be controlled by the file
   `src/Site/BlockLayout/PageTitle.php`. */
h1, h2, h3, h4 {
    font-family: "Antonio", serif;
    /*font: var(--font-family-sans-serif);*/
    font-style: normal;
    font-weight: 100;
}

h1 {
    font-size: 5.0rem;
    /*text-transform: uppercase;*/
    /*letter-spacing: 0.2em;*/
    color: black;
}

h2 {
    /*font-size: 4.0em;*/
    /*letter-spacing: 0.05em;*/
    /*text-transform: uppercase;*/
    font-weight: bold;
    color: hsl(306deg 48% 40%);

}

h3 {
    /*font-size: 14pt;*/
    /*letter-spacing: 0.05em;*/
    text-transform: uppercase;
    font-weight: bold;
    color: hsl(306deg 48% 40%);

}

h4 {
    /*font-size: 14pt;*/
    /*letter-spacing: 0.05em;*/
    text-transform: uppercase;
    font-weight: bold !important;
    color: hsl(306deg 48% 40%);
    /*text-align: center;*/
}

h4 a {
    color: hsl(306deg 48% 40%);

}

.fays-welcome-1 {
    /*font-size: 40pt;*/
    font-weight: bold;
}

.fays-welcome-2 {
    /*font-size: 26pt;*/
    font-weight: bold;
    color: white;
    background: url("../img/2022-fays-welcome-right.png") left no-repeat;

    background-size: cover;
    background-clip: border-box;

    padding: 1rem;
    /*padding-right: 14rem;*/
}

.fays-welcome {
    background: url("../img/2022-fays-welcome-left.png") left no-repeat;

    background-position-y: top ;
    background-size: contain;
    padding-left: 16px;
}

.fays-home-background {
    background: url("../img/2022-fays-black-brush.png") right no-repeat;

    background-size: 40%;
    background-position-y: top ;
}

.fays-block-pad {
    margin-top:6rem;
}

.fays-block {
    font-family: "Anton", serif;
    font-size: 20pt;
    color: white;
    padding: 1rem;
    padding-right: 2rem;
    margin: 0.1rem;
    background: url("../img/2022-fays-block.png") ;
    background-size: cover;
    line-height: 1.1;
}


.fays-block a {
    color: white;
    text-decoration: none;
    transition: color 0.2s linear;
    text-transform: uppercase;
}


.fays-block a:hover {
    color: #000000;
}

.fays-header {
    margin-bottom: 40px;
}

.fays-footer {
    background: url("../img/2022-fays-footer.png") right no-repeat;
    background-size:50%;
    font-size: 0.8rem;
    padding-bottom: 1rem;
    padding-top: 1rem;
}

.fays-four-links {
    margin-top: 30px;
}

.fays-nav {
    background: url("../img/2022-fays-header-nav.png") bottom no-repeat;
    background-size: cover;
    /*background-position-y: -70px;*/
    padding-bottom: 16px;
}

.fays-logo {
    background: url("../img/2022-fays-logo.png") no-repeat;
    background-size: contain;
    margin: 1vw;
    margin-left: 0;
    height: 10vw;
}


.fays-item-caption {
    text-align: center;
}

.fays-item-caption > a:hover {
    color: black;
}

.fays-item-caption > a {
    font-family: "Antonio", serif;
    text-transform: uppercase;
    text-decoration: none !important;
    color: hsl(306deg 48% 40%);
    font-weight: bold;
    text-align: center;

}

.fays-item {
    position: relative;
}

.fays-item:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

.fays-item img {
    background: url("../img/2022-fays-item-background.png") no-repeat;
    /*background-size: contain;*/
    /*width: -webkit-fill-available;*/
    /*width: -moz-available;*/
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.fays-link {
    background: url("../img/2022-fays-link-bottom.png") bottom no-repeat;
    background-size: contain;
    padding-bottom: 20px;
}

.fays-link a {
    text-align: center;
    text-decoration: none;
}
.fays-link img {
    width: 100%;
}

.item-set {
    background: url("../img/2022-fays-item-set-bottom.png") bottom no-repeat;
    background-size: contain;
}

.break {
    background: url("../img/2022-fays-break.png") top no-repeat;
    background-size: cover;
    margin: 0 !important;
    padding-top: 40px;

}

.rdt-masonry-grid {
    /* background: rgba(0, 0, 0, 0.01); */
    list-style-type: none;
    margin-bottom: 8em;
    padding: 0;
}

.rdt-grid-item {
    width: 200px;
    height: 300px;
    float: left;
    background-color: hsla(0, 0%, 0%, 5%);
    padding-left: 0.3em;
    padding-right: 0.3em;
    padding-bottom: 0.3em;
    padding-top: 0.3em;
    margin-bottom: 1em;
    display: block;
    transition: 0.4s;
    overflow: hidden;
    z-index: 0;
    box-sizing: border-box;
}

.rdt-grid-item:hover {
    background-color: hsla(0, 0%, 99%, 90%);
    overflow: visible;
    height: auto;
    z-index: 1;
    border-radius: 0.25em;
}


header {
    padding: 0.2em;
    display: flex;
}    



div.rdt-site-title {
    flex-basis: 24em;
}

/* Fancy logo code, the exact pixel widths are all necessary here */
div.rdt-logo {
    display: flex;
    align-items: center;
    width: 400px;
    height: 400px;
    background-image: url('../img/background.svg');
    background-size: cover;
    font-family: "Roboto Slab";
}

div.rdt-logo-text {
    font-size: 35px;
    letter-spacing: 5px;
    margin-left: 32px;
}

span.rdt-logo-initial-letter {
    font-weight: bold;
    font-size: 40px;
}


div.rdt-banner {
    width: 800px;
    height: 200px;

    /* Center horizontally and vertically in the remaining space */
    margin: auto; 
}

div.rdt-search {
    /* no styles here yet */
}

div.footer {
    padding: 0.2em;
    font-style: italic;
    margin: 1em;
    /* border: 0.2em solid hsl(0, 0%, 90%); */
}

img.rdt-logo {
    width: 2.0rem;
    height: 2.0rem;
}

/* NAVIGATION */
div.rdt-main-content {
    margin-left: 10vw;
    margin-right: 10vw;

    /* The dropdown code below uses floats, so has to be cleared here. :( */
    clear: left;
    /* border: 1px solid blue; */

    margin-bottom: 8em;
}

div.rdt-clearleft {
    clear: left;
}


/* These classes are produced by the Zend navigation tool (publicNav). */
ul.navigation {
    text-align: center;
    margin-left: 10vw;
    margin-right: 15vw;
}

ul.navigation li {
    list-style-type: none;
    color: var(--off-black);

    text-transform: uppercase;
    letter-spacing: 1px;

    display: inline;
}


/* Cute input boxes with a focus shadow */
input[type=text], textarea {
    background-color: var(--off-white);
    border: 1px solid black;
    padding-top: 0.4em;
    padding-bottom: 0.4em;

    margin-left: 0.4em;
    margin-right: 0.4em;
}

input[type=text]:focus {
  box-shadow: 0 0 5px var(--off-black);
}

div.media-list {
    background-color: hsla(0, 0%, 99%, 40%);
    padding: 2em;
    margin-top: 2em;
}

/* resource-name is hardcoded CSS class. */
span.resource-name {
    display: block;
}

table.rdt-resource-values {
    table-layout: fixed;
    background-color: hsla(0, 0%, 99%, 30%);
}

table.rdt-resource-values th, td {
    padding-left: 1em;
    padding-right: 1em;
    padding-bottom: 1.5em;
}

td.rdt-property {
    text-transform: uppercase;
    font-weight: bold;
    vertical-align: top;
    font-family: "Antonio", serif;
    color: hsl(306deg 48% 40%);

}

/* Browse controls on the search result page */
div.browse-controls {
    background-color: hsla(0, 0%, 99%, 30%);
    padding: 1em;
}


nav.pagination input[name="page"] {
    background-color: black;
    color: white;
}

nav.pagination {
    margin-bottom: 1em;
    font-family: Antonio;
}

nav.pagination > form {
    display: inline;
}

input.page-input-top {
    width: 2.5em;
    background-color: black;
    color: white;
}

div.rdt-page-buttons {
    display: inline;
    margin-left: 1em;
    margin-right: 1em;
}



div.rdt-page-buttons .previous,.next {
    background-image: url('../img/2022-fays-pagination.png');
    background-size: cover;
    padding: 6px;
    color: white;
}


form.sorting > * {
    margin-right: 1em;
    background-color: black;
    color: white;
    font-family: "Antonio", serif;
    text-transform: uppercase;
    font-weight: bold;
}

form.sorting > button {
    background-color: hsl(282, 50%, 53%);   
}

#advanced-search {
    padding: 16px 32px 16px 32px;
    background-image: url('../img/2022-fays-adv-search-bg.png');
    background-size: cover;
    background-origin: padding-box;
    color: white;
    margin-bottom: 60px;
    font-family: Anton;
    text-transform: uppercase;

}

#advanced-search input[name=submit] {
    background-image: url('../img/2022-fays-search.png');
    background-size: cover;
    float: right;
    text-decoration: none;
    border: none;
    background-color: transparent;
    color: white;
    padding: 15px 25px 15px 15px;
    margin-top: 20px;
}

#advanced-search button.remove-value {
    text-decoration: none;
    border: none;
    background-color: black;
    color: white;
    width: 150px;

}
#advanced-search button.remove-value::before {
    content: '';
}

#advanced-search div.value {
    margin-bottom: 10px;
    padding: 0;
}

#advanced-search div.field-meta {
    margin-bottom: 10px;
    margin-top: 10px;
}

#advanced-search button.remove-value {
    margin-left: auto;

}

#advanced-search a.add-value {
    color: white;
    font-family: Courier;
    font-weight: bold;
    text-transform: none;

}

div.rdt-advanced-search-link {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

button, select, input[type="submit"] {
    background-color: hsla(0, 0%, 99%, 100%);
    padding: 0.25rem 0.5rem;
}

div.rdt-search {
    margin: auto;
    align-items: center;
    display: flex;
}

form.rdt-search-form {
    background-color: hsla(0, 0%, 99%, 30%);
/*    padding: 1em;*/
}

div.rdt-control-bar {
    display: flex;
    margin-bottom: 2em;
}

label[for^="file[4]"] {
    display: none;
}


form[name^="collecting_form_"]  {
    padding-top: 30px;
}

form[name^="collecting_form_"] .field-meta label {
    /*margin-top: 8px;
    margin-left: 20px;
    position: absolute;*/
    color: white;
    font-weight: bold;
}

form[name^="collecting_form_"] {
    background-color: hsla(0, 0%, 99%, 30%);
    background: url("../img/2022-fays-contribute.png") no-repeat;
    background-size: cover;
    color: white;
    padding-bottom: 20px;
}

form[name^="collecting_form_"] div.field {
    padding: 0.5rem;
    margin: 0.5rem;
}

form[name^="collecting_form_"] input[type="text"],textarea {
    width: 80%;
}

form[name^="collecting_form_"] input[type="submit"] {
    background: url("../img/2022-fays-submit.png") no-repeat;
    background-size: cover;
    height: 60px;
    width: 115px;
    color: rgba(0, 0, 0, 0);
    border: none;
    margin-right: 140px;
    margin-top: 20px;
    float: right;

}


textarea {
    height: 16em;
}

/* BROWSE RESULT PAGE START */
.rdt-browse-results {
}

.rdt-browse-row {
    display: flex;
    margin-bottom: 1em;
}

/* this could be two separate classes but at the moment both of them have
identical styling so it's not really a problem */
.rdt-browse-item {
    flex-basis: 50%;
    display: flex;
    margin-left: 1em;
    margin-right: 1em;
    padding: 1em;
    background-color: hsla(0, 0%, 90%, 30%);
}

.rdt-browse-thumbnail-cell {
    border: 0.2em solid hsl(282, 50%, 80%);
    margin-left: 1em;
}


/* BROWSE RESULT PAGE END */

/* MENU CODE */
/* Taken from: Deliciousthemes article by Madalin Tudose. */
/* https://deliciousthemes.com/create-a-drop-down-navigation-menu-with-html5-and-css3 */

div.rdt-container {
    margin-top: 1em;
}

div.rdt-navigation-menu {
    margin-left: 10vw;
    /*
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 4em;
    */
}

div.fays-nav {

    /*height: 100px;*/
}

ul.navigation {
    padding: 0;
    margin: 0px auto;
    position: relative;
    float: right;

    font-size: 18px;
    font-weight: bold;

}

ul.navigation li {
    display: inline;
    margin: 0;
    padding: 0;
    float: left;
    position: relative;

    font-weight: bold;

}
 
ul.navigation li a {
    font-size: 16px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 1em;   /* space after nav menu items */
    /* color: #616161; */
    color: #ffffff;
    /*text-shadow: 1px 1px 0px #fff;*/
    text-decoration: none;
    display: inline-block;
    transition: color 0.2s linear;
    font-family: "Antonio", serif;
}
 
ul.navigation li a:hover {
    /*background: #f8f8f8;*/
    color: #000000;
}
 
ul.navigation li:hover > a {
    /*background: #fff;*/
}


ul.navigation li:hover > ul {
    visibility: visible;
    opacity: 1;
}

ul.navigation ul, ul.navigation ul li ul {
    list-style: none;
    margin: 0;
    padding: 0;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    z-index: 99999;
    width: 180px;
    background: #f8f8f8;
    box-shadow: 1px 1px 3px #ccc;
    transition: opacity 0.2s linear, visibility 0.2s linear;
}
 
ul.navigation ul {
    top: 43px;
    left: 1px;
}
 
ul.navigation ul li ul {
    top: 0;
    left: 181px;
}
 
ul.navigation ul li {
    clear: both;
    width: 100%;
}
 
ul.navigation ul li a {
    background: none;
    padding: 7px;
    color: #616161;
    text-shadow: 1px 1px 0px #fff;
    text-decoration: none;
    display: inline-block;
    border: 0 none;
    float: left;
    clear: both;
    width: 150px;
}

/* END NAVIGATION BAR CODE */

/* Large div is defined by Omeka-S page blocks */
/* https://forum.omeka.org/t/thumbnails-intermediate-size-when-used-in-media-embeds/11260/2 */
/* But, page-blocks defines that left and right aligned blocks can only occupy
   a third of the page.   So we need to only target center blocks which have no
   such restrictions.  left and right blocks will need their own rules. */
div.center.large img {
    height: 775px;    /* or whatever size you want */
}