/* Colours */
:root {
    --white: 255, 255, 255;
    --dark-blue: 6, 7, 46;
    --blue: 0, 69, 135;
    --light-blue: 25, 145, 224;
    --pink: 232, 52, 139;
    --light-grey: 239, 239, 239;
    --grey: 204, 204, 204;
    --dark-grey: 153, 153, 153;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: #ffffff;
    background: no-repeat center center fixed;
    background-size: cover;
}
body > .container {
    min-height: 100vh;
}

h1, h2 {
    text-align: center;
    font-weight: 700;
    margin-bottom: 2rem;
    color: rgb(var(--white));
}
body.light h1, body.light h2 {
    color: rgb(var(--light-blue));
}
h1 {
    font-size: 2rem;
}
h2 {
    font-size: 1.75rem;
}

#header-image {
    background-image: url('/images/default-header-image.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 350px;
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

#header {
    display: flex;
    justify-content: center;
    margin-top: 4rem;
    margin-bottom: 4rem;
}
#header > a {
    display: block;
    width: 10rem;
    z-index: 10;
}
#content {
    margin-bottom: 10rem;
}

/* Surround styling */
.surround {
    width: 100%;
    background-color: rgb(var(--white));
    border-radius: 2rem;
    padding: 2rem;
    border: 1px solid rgb(var(--dark-grey));
}
.surround-container {
    margin-top: 2rem;
}
.surround > .item {
    border: 1px solid rgb(var(--dark-grey));
}

/* Generic content layout for each page */
.content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

/* Messages */
.message {
    padding: 1rem;
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: auto;
}
#resync-completed > a {
    color: #fff;
}

/* Arrows */
.arrow {
    width: 0;
    height: 0;
    border: 0.25rem solid transparent;
    display: inline-block;
}
.arrow.up {
    border-bottom: 0.25rem solid rgb(var(--blue));
    margin-bottom: 0.25rem;
}
.arrow.down {
    border-top: 0.25rem solid rgb(var(--blue));
    margin-top: 0.25rem;
}
.arrow.right {
    border-left: 0.25rem solid rgb(var(--blue));
    margin-left: 0.25rem;
}
.arrow.left {
    border-right: 0.25rem solid rgb(var(--blue));
    margin-right: 0.25rem;
}

/* Generic styling */
.hidden {
    display: none;
}

/* Lightbox */
#lightbox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
}
#lightbox > .popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90vw;
    max-height: 90vh;
    background-color: rgb(var(--white));
}
@media (max-width: 767px) {
    #lightbox > .popup {
        max-width: unset;
        max-height: unset;
        width: 95vw;
        height: 95vh;
    }
}
#lightbox > .popup .bar {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
}
#lightbox > .popup .close {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0.5rem;
    text-decoration: none;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.5rem;
}
#lightbox .title {
    padding: 0.25rem;
    background-color: rgb(var(--pink));
    color: #fff;
    margin-bottom: 0;
    min-height: 2rem;
}
#lightbox .content {
    padding: 2.25rem 1rem 1rem 1rem;
    overflow-y: auto;
    display: block;
    max-height: 75vh;
}
#lightbox .content.video {
    width: 90vw;
    height: 0;
    padding-bottom: 56.25%;
}
#lightbox .content.video > .player {
    position: absolute;
    top: 2.25rem;
    left: 0;
    width: 100%;
    height: calc(100% - 2.25rem);
}
#lightbox .content.video.vimeo > .player > iframe {
    width: 100%;
    height: 100%;
}
.back, .forward {
    font-size: 2.5rem;
}
.back {
    font-size: 3rem;
    color: rgb(var(--pink));
}
.forward {
    color: rgb(var(--light-blue));
}
.back:hover {
    color: rgba(var(--pink), 0.5);
}
.forward:hover {
    color: rgba(var(--light-blue), 0.5);
}
.back.mt {
    margin-top: 1rem;
}

/* Logos */
.logos {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}
.logo {
    display: block;
    width: 15rem;
}
#species-logo {
    width: 8rem;
}

/* Home page */
#home-page .item {
    display: block;
    width: 10rem;
    margin: 0 1rem 1rem 0;
}

/* Product page */
#product-page .content {
    align-items: center;
    flex-direction: column;
}
#product-page #services {
    width: 100%;
    text-align: center;
}
#product-page #services > a {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: rgb(var(--dark-blue));
    border-top: 1px solid rgb(var(--pink));
    text-align: center;
    text-decoration: none;
}
#product-page #services > a:last-child {
    border-bottom: 1px solid rgb(var(--pink));
}
#product-page #services > a > .name {
    color: rgb(var(--dark-blue));
    font-size: 1.5rem;
    text-align: left;
}
body.product #header-image {
    display: block;
}

/* Services */
#services-page .content {
    align-items: center;
    flex-direction: column;
}
#services-page .block {
    border-top: 1px solid rgb(var(--pink));
}
#services-page .block.last {
    border-bottom: 1px solid rgb(var(--pink));
}
#services-page .block > a {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: rgb(var(--dark-blue));
    text-align: left;
    text-decoration: none;
    font-weight: bold;
}
#services-page .block > a > .name {
    color: rgb(var(--dark-blue));
    font-size: 1.5rem;
}
#services-page .block.expanded > a > .forward {
    color: rgb(var(--pink));
}
#services-page .block-content {
    display: none;
}
#services-page .block-content h3 {
    font-size: 1.5rem;
}
#services-page .block-content.expanded {
    display: block;
}
#services-page .block-content.expanded > a > .name {
    border-bottom: none;
    background-color: rgb(var(--light-grey));
    text-align: left;
}
#services-page .block-items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin-top: 2rem;
}
#services-page .block-items > .block-item:not(.text) {
    width: 8rem;
}
#services-page .block.download .block-items {
    flex-direction: column;
}
#services-page .block.download .block-items .block-item {
    width: 100%;
    border: 1px solid rgb(var(--blue));
    padding: 0.5rem;
    background-color: rgba(var(--blue), 0.1125);
}
#services-page .block.download .block-items .block-item > a {
    text-decoration: none;
    color: rgb(var(--blue));
    font-weight: 700;
}
#services-page .block.download .block-items .block-item > a > img {
    width: 1.5rem;
    margin-right: 0.5rem;
}
#services-page .block.download .block-items .block-item .description {
    margin-top: 1rem;
}
#services-page #lightbox .content.image img {
    max-height: 20rem;
    margin: 2rem auto;
    display: block;
}
body.service #header-image {
    display: block;
}

/* Species */
#species-page .item {
    display: block;
    width: 8rem;
    margin: 0 1rem 1rem 0;
}
#species-page #species .item {
    opacity: 0.5;
}
#species-page #species .item.active {
    opacity: 1;
}
#species-page #products {
    margin-top: 5rem;
}
#species-page #products .item {
    width: 15rem;
}
#species-page .item.in-active {
    opacity: 0.4;
}

/* About us */
#about-us-page .content > .item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    color: rgb(var(--dark-blue));
    border-top: 1px solid rgb(var(--pink));
    text-align: center;
    text-decoration: none;
    gap: 1rem;
    padding: 1rem;
    width: 100%;
}
#about-us-page .content > .item:last-child {
    border-bottom: 1px solid rgb(var(--pink));
}
#about-us-page .content > .item > .text {
    color: rgb(var(--dark-blue));
    font-size: 1.5rem;
}
#about-us-page .content > .item > .icon {
    color: rgb(var(--pink));
}

/* Backgrounds */
body.dark {
    background-image: url('/images/backgrounds/dark.jpg');
}
body.light {
    background-image: url('/images/backgrounds/light.jpg');
}

/* Nav */
#nav {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: rgb(var(--white));
    width: 100%;
    padding: 1rem;
    font-size: 2.5rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
#nav > a {
    color: rgb(var(--dark-blue));
}