/******************** General ********************/
:root {
    --menu-padding: 1em;
    --gallery-img-max-size: 100%;
}

html {
    font-size: 19px;
    line-height: 1.43;
    color: #333;
}
body {
    margin:0;
}

/* Make all the images full width (or as wide as the page) by default */
img {
    max-width: 100%;
    height: auto;
}

h1 {
    padding: .25em;
}
/* Utilities */
/* There are some bits of php that include these classes */
.decoration-none { text-decoration: none }
.mb1 { margin-bottom: 1rem }
.pb1 { padding-bottom: 1rem }
.mt1 { margin-top: 1rem }
.pt1 { padding-top: 1rem }
.flex { display: flex }
.space-between { justify-content: space-between }
.border-0 { border-width: 0 }
.border-b-2 { border-bottom-width: 2px }
.border-dotted { border-style: dotted }
.clear { clear:both }

.btn-cta {
    color:rgb(0,0,0);
    background-color: rgb(87,212,201);
    padding: 1rem;
    text-transform: uppercase;
    font-weight: bold;
    display: inline-block;
}

/* Most things on the page are in a container so it doesn't get too big */
.container {
    max-width: 1000px;
    margin-right: auto;
    margin-left: auto;
}

/******************** All the top bit with social, logo, title ********************/
.university-header {
    padding-top: 1rem;
}

.university-header .links {
    text-align: right;
    padding: 0 1rem 1rem;
    font-style: normal;
}

.university-header .links .museum-links {
    padding-bottom: 1rem;
    display: inline-block;
}

.university-header .links a {
    margin-left: 1rem;
    text-decoration: none;
    border: none;
    vertical-align: middle;
    display: inline-block;
}

/* social media icons - using Font Awesome */
.university-header .links .social-media {
    display: inline-block;
}
.university-header .links .social-media i {
    width: 32px;
    height: 32px;
    text-align: center;
}

.university-header .links .social-media i + span {
    display: none;
}

.museum-header .logo img {
    max-width: 100%; /* Avoid breaking the site width on mobile */
}

/******************** Title ********************/
.site-header {
    margin: 1rem auto;

}
.site-header h1 {
    font-weight: 600;
    font-style: normal;
}

.site-header h1 a {
    color: inherit;
    text-decoration: none;
}

/******************** Menu ********************/
.menu {
    font-size: .9rem;
    padding: var(--menu-padding);
    display: flex;
    justify-content: start;
    flex-direction: column;
}

.menu a {
    padding: .25rem .5rem;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 1px solid;
    margin-left: .25rem;
    margin-right: .25rem;
}

.main-content , footer {
    padding: 0 1rem;
}
/******************** Gallery ********************/

/* Gallery navigation */
.gallery-nav {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid; /* moved from php to here */
}

.gallery-nav-section {
    display: flex;
    flex-direction: column;
    margin-bottom: .5em;
}

.gallery-nav-forward {
    text-align: right;
}

/* Gallery grid */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--gallery-img-max-size), 1fr));
    align-items: end;
    column-gap: .5em;
    row-gap: 2em;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-bottom: 1em;
    border-bottom: 2px solid;
}

.gallery a {
    text-align: center;
}

.gallery img {
    aspect-ratio: 0.755555;
    object-fit: cover;
}

.gallery p {
    margin-top: 0;
    margin-bottom: 0;
}

/******************** Individual object page ********************/

/* Details */
.detail-information p {
    margin: 0;
    border-bottom: 1px solid #ccc;
    margin-bottom: .5rem;
    line-height: 1.5;
    padding-bottom: .5rem;
}

/* Image pop-up */
.layer00 {
    visibility: hidden; /* hide pop-up to start with */
    /* put it in the centre of the window */
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #FFFFFF;
    border: 3px solid #dddddd;
    z-index: 10;
    padding-top: .5em;
    text-align: center;
    cursor: pointer;
}

/* Move Click to hide message into the pop-up */
.layer00 p {
    margin-top: 0;
}

/* Museum - ASH Ashmolean */
.museum-ash {
    font-family: Montserrat,sans-serif;
}
.museum-ash .university-header {
    background-color: #eee;
    color: #000;
}
.museum-ash .university-header .links a {
    color: #333;
}
.museum-ash .site-header h1 {
    background-color: #f0f0ec;
}
.museum-ash .menu {
    background-color: #333;
}

/* Museum - PRM Pitt River Museum*/
.museum-prm a {
    color: #810023;
    text-decoration: none;
    border-bottom: 1px solid;
}
.museum-prm {
    font-family: Alegreya Sans,sans-serif;
}
.museum-prm .university-header ,
.museum-prm .museum-header ,
.museum-prm .university-header .links a {
    color: #fff;
}

.museum-prm .site-header > a {
    color: #FC3;
    display: inline-block;
    padding: 2rem 0 0 1rem;
}

.museum-prm header,
.museum-prm header .site-header h1 + div {
    background-color: #810023;
}

.museum-prm .search {
    text-align: right;
    padding: 0 1rem 1rem 1rem;
}
.museum-prm .search p {
    margin: 0;
}

.museum-prm .logo {
    padding: 1rem;
    display: inline-block;
}
.museum-prm .logo img {
    width: 100%;
    height: auto;
}

@media screen and (min-width: 650px) {
    .university-header .links .museum-links {
        padding: 0;
    }
    .museum-prm .logo {
        position: absolute;
        top: 1rem;
    }
}

.museum-prm .menu {
    background-color: #FC3;
}
.museum-prm .menu a {
    color: #900;
}
.museum-prm h1,
.museum-prm h2,
.museum-prm h3,
.museum-prm h4 {
    background-color: #FC3;
    color: #900;
    padding: .5rem 1rem;
}

/******************** Advanced search ********************/
/* Centre the search button and clear link */
.search-form {
    display: grid;
    justify-items: center;
}

/* Which has then centred the Enter Search Criteria text, so let's move it back to the left */
.search-text {
    justify-self: start;
}

/* Each input */
.search-element{
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: repeat(3, auto);
    margin-bottom: 1em;
}

/* Removed the width from the input in php
    but it means inputs will fill the screen
    so we just set a max-width here (same as what was in the php)
     so they don't and will shrink down if not enough space */
.search-element input {
    max-width: 40ch;
}

/******************** Footer links ********************/
footer {
    margin: 5rem 0 1rem 0;
   flex-direction: column;
}

/******************** Media queries ********************/
@media screen and (min-width: 350px) {
    /* There's now space to have two columns of links */
    .gallery-nav {
        flex-direction: row;
        justify-content: space-between;
    }
}

@media screen and (min-width: 400px) {
    /* There's now space to have two columns of images in the gallery */
    :root {
        --gallery-img-max-size: 150px;
    }
}

@media screen and (min-width: 870px) {
    .menu {
        align-items: flex-end;
        flex-direction: row;
    }

    footer {
        flex-direction: row;
        text-align: center;
    }

    /* Put the image on the right of the details */
    .generalImage-img {
        cursor: pointer;
    }
}

@media screen and (min-width: 725px) {
    /* Now we can get all four next to each other */
    .gallery-nav-section {
        flex-direction: row;
        gap: 1em;
    }
    /* Search label, input and link next to each other
        they take up a lot of space due to lots of text,
        hence not being able to do it when window is smaller */
    .search-element{
        grid-template-rows: auto;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: .5em;
    }

    .search-element input {
        width: 40ch;
    }

    .search-element label {
        text-align: right;
    }
}

/* Home page images not floating right when small
 I think this is hard-coded into the database
 so simplest thing to do is to override this for mobile*/
@media screen and (max-width: 624px) {
    /* But don't want to do this for any gallery or gallery details images */
    .main-content img:not(.gallery-img):not(.generalImage-img):not(.inner00 img) {
        float: unset !important;
        margin: 0 0 0 0 !important; /* override margin from php */
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
    /* Need to move first image away from black menu */
    .main-content img:first-of-type:not(.gallery-img):not(.generalImage-img):not(.inner00 img) {
        margin-top: 1em !important;
    }
}

/* Stop black menu from being too big */
@media screen and (min-width: 1000px) {
    .menu {
        max-width: calc(1000px - var(--menu-padding) * 2);
    }
}

/* Thumbnail results section */
.pageNavigation {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20px, 1fr));
    text-align: center;
    gap: 10px;
}
#thumbnailResults {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1em;
}
#thumbnailResults a {
    display: inline-block;
    width: 100%;
    border: 0;
    line-height: 1;
}
#thumbnailResults p {
    margin: 0;
}
#thumbnailResults .thumbnail img {
    margin: 0 !important;
    width: 100%;
    height: 120px;
    /* Using cover instead of contain to have all images aligned left with the text below */
    object-fit: cover;
}

/* On /collections/content.php?pmu=4400&slug=photo_BMR.6.8.185.html
   hide the following as they create un-necessary white space */
#compareImage, [alt=spacer], #otherThumbs {
    display: none;
}
/* On /collections/content.php?pmu=4400&slug=thumbnails_photographer_Bell.html
   hide the following as they are not working nor meaningful
*/
#thumbKey, .greyText {
    display: none;
}

/* Photographer's publication table */
.greyTable {
    border-collapse: collapse;
}
.greyTable thead th {
    background: #ccc;
    padding: 1em 0 1em .5em;
    text-transform: uppercase;
}
.greyTable td {
    border:1px solid #ccc;
    padding: 1em 0 1em .5em;
}
.greyTable td a {
    border: 0;
}
.greyTable td a img ,
.greyTable td a + p {
    margin: 0;
}
.greyTable tbody tr:nth-child(odd) {
    background: #efefef;
}
.calendar {
    display: inline-block;
    width: 30%;
    vertical-align: top;
    margin-bottom: 1rem;
}
.calendar:nth-child(3n+3) {
    margin-left: 4.5%;
    margin-right: 4.5%;
}
.calendar .calendarDate {
    font-weight: bold;
    border-bottom: 5px solid;
}
/* Dates Calendars */
.dairyCalendar {
    display: inline-block;
    border: 1px solid #333;
    padding: 0 1rem 1rem 1rem;
    height: 260px;
    margin: 0 1rem 1rem 0;
    text-align: center;
}
.dairyCalendar .calendar {
    width: 100%;
    margin: 0;
}

@media screen and (max-width: 900px) {
    .calendar {
        width: 100%;
        margin-top: 1rem;
    }
    .calendar:nth-child(3n+3) {
        margin: 0;
    }
}