:root {
 --primary-color: #007889;
 --secondary-color: #59AC56;
}

body {
  font-family: "Agenda Med", sans-serif;
}

h1, h2, h3, h4, h5 {
    font-family: "Agenda Bd", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.25;
    letter-spacing: 0.9px;
    color: var(--primary-color);
    text-transform: none;
}

h1 {
    font-size: 48px;
    color: var(--primary-color);
}
h2 {
    font-size: 20px;
    font-weight: bold;
    color: var(--primary-color);
    text-transform: uppercase;
}

a, a:visited {
  color: var(--primary-color);
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease; 
}

a:hover {
    color: var(--secondary-color); 
}
a.button, .btn {
    border-width: 2px;
    border-style: solid;
    padding: 16px 20px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    line-height: normal;
    display: inline-block;
    font-family: "Agenda Bd", sans-serif;
    text-transform: uppercase;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    &:where(.sidebar-component a.button, .sidebar-component .btn) {
        text-transform: none;
    }
}

a.button.button1, .btn-primary,
a.button.button1, .btn-info {
    border-color: var(--primary-color);
    color: #fff;
    background: var(--primary-color);
}

a.button.button1:hover, .btn-primary:hover,
a.button.button1, .btn-info:hover {
    color: var(--primary-color);
    background: #fff;
    border-color: var(--primary-color);
}


a.button.button2, .btn-success {
    border-color: var(--secondary-color);
    color: #fff;
    background: var(--secondary-color);
}

a.button.button2:hover, .btn-success:hover {
    color: var(--secondary-color);
    background: #fff;
    border-color: var(--secondary-color);
}


a.button.button3 {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: #fff;
}

a.button.button3:hover {
    color: #fff;
    background: var(--primary-color) none;
    border-color: var(--primary-color);
}
input.form-control {
    border: 1px solid #dee2e6;
}

#site-header-main-inside #access .screen-reader-text:focus, 
#site-header-main-inside #access .screen-reader-text:focus-visible,
#site-header-main-inside #access .screen-reader-text:focus-within {
    left: 0;
}

#site-header-main {
    background-color: #fff;
}

#site-header-main.transparent {
    background: rgba(255, 255, 255, 0.8);
}

div#site-header-main-inside {
    padding: 0;
}
#site-header-main-inside #access ul.prime_nav {
    padding: 0;
}
#site-header-main-inside #access ul.prime_nav li ul.sub-menu {
    margin-top: -2px;
}
#site-header-main-inside #branding .identity a img {
    width: 165px;
    height: 90px;
    vertical-align: middle;
    object-fit: contain;
}
#mobile-menu.shown {
    background-image: url(https://d8yy0r0qfxgnb.cloudfront.net/public/uploads/6cf4d75edfbc232de28e40ce8bb9d4a1/images/files/93f2cf03de7da9268b84600eac2ad8f5/medium/green-background.jpg?1764175621);
}

.container {
    max-width: 1254px;
    margin-left: auto;
    margin-right: auto;
}
.subtitle p {
    font-family: "Agenda Lt", sans-serif;
    display: block;
    clear: both;
    font-weight: normal;
    color: #000000;
    font-size: 35px;
    line-height: 1.25;
    letter-spacing: 0.9px;
    padding-right: 30px;
}

.home-hero .block-image-cover {
    background-size: contain;
}
.hero-heading {
    position: absolute;
    top: -170px;
    background: #fff;
    padding: 2em;
    width: 100%;
}

/* Job Search page */
.block-job-search-results .job-search-filter-groups .job-search-list-items {
    overflow: auto;
    scrollbar-gutter: stable;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 0.5rem 0 0.5rem 0.5rem;
    margin: 0;
    li {
        width: 100%;
    }
}


.job-search-filter-groups .search-filter {
    display: none;
}

.job-search-filter-groups h4.job-search-filter-header {
    background: var(--primary-color);
    padding: 15px;
    color: #fff;
}

.block-job-search-results .job-search-results .job-search-filter-groups {
    width: 100%;
    background: transparent;
    padding: 0;
}
.job-search-results input.form-control {
    border: 1px solid var(--primary-color);
}
    .job-search-results-card-col {
        flex: 0 0 100%;
        max-width: 100%;
    }


/* Job Page */
a.candidate-favourite,
a.view-favourites {
    color: #fff;
    text-decoration: none;
}

    .page-row:has(.block-job-description) {
        .component-codelists {
            .job-component-string-field-1,
            .job-component-string-field-2,
            .job-component-string-field-3,
            .job-component-dropdown-field-4 {
                display: none;
            }
        }
    }

    .component-meet-the-recruiter {
        .page-block {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            .img-wrapper {
                width: 250px;
                aspect-ratio: 4 / 5;
                overflow: hidden;
                border-radius: 200px;
                margin-bottom: 1rem;
                display: flex;
                justify-content: center;
                align-items: center;
                .fa {
                    font-size: 8rem;
                }

                img {
                    object-fit: cover;
                    width: 100%;
                }

                &:has(.fa) {
                    width: 150px;
                }
            }

            h2, h3, p {
                text-align: center;
                width: 100%;
            }
        }
    }

    .component-benefits .page-block {
        display: flex;
        flex-wrap: wrap;
        gap: 2rem .5rem;
        h2 {
            margin-bottom: 1rem;
            width: 100%;
            text-align: center;
        }

        .benefit {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            width: 45%;
            flex: 0 1 calc(45% - .25rem);
            margin: 0 2.5%;
            .fa {
                font-size: 2.5rem;
            }

            .text {
                display: block;
                width: 100%;
                text-align: center;
                font-size: 1.25rem;
                font-weight: 500;
            }
        }

        a {
            margin: 0 auto;
        }
    }


    .sidebar-component {
        padding: 30px;
        margin-bottom: 30px;
        border-radius: 4px;
        box-shadow: 0 0 6px #0F141A22, 0 0 18px #0F141A22;
        h2 {
            text-transform: none;
        }
    }

    .editing {
        .component-codelists {
            .block-placeholder {
                &:before {
                    content: "Codelists component - unavailable whilst editing.";
                }
            }
        }

        .component-meet-the-recruiter {
            .block-placeholder {
                &:before {
                    content: "Meet the Recruiter component - unavailable whilst editing.";
                }
            }
        }

        .component-benefits {
            .block-placeholder {
                &:before {
                    content: "Benefits component - unavailable whilst editing.";
                }
            }
        }

        .component-codelists,
        .component-meet-the-recruiter,
        .component-benefits {
            .block-placeholder {
                &:before {
                    display: inline-block;
                    background-color: var(--primary-color);
                    color: #FFF;
                    padding: .5rem;
                    margin-bottom: .5rem;
                }

                p {
                    display: none;
                }
            }
        }
    }


#footer a:hover {
    text-decoration: none;
}

#footer .footer-top .container .sitemap ul {
    margin: 0;
    padding: 0;
}

#footer .footer-top .container .sitemap ul li {
    line-height: normal;
}
#footer h4 {
    margin: 0;
}

#footer .footer-top .container .terms-menu ul li {
    margin: 0;
}
.contact-us-inner img {
    max-height: 100px;
}

.accreditations {
    display: flex;
    flex-wrap: wrap;
    margin: 50px 0 0;
    width: 100%;
    align-content: center
}

.accreditations .accreditations-item {
    margin: 10px auto;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.accreditations .accreditations-item img {
    margin: 0 auto;
    max-width: 90%;
    max-height: 100px;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%)
}

#site-header-main-inside #access ul.prime_nav li a {
      padding: 20px 10px; 
    }

.block-call-to-action {
    .block-content {
        max-width: 400px;
        margin: 0 auto;
        padding: 0;
        h2:where(:not(.sidebar-component h2)), p {
            text-align: start !important;
        }
    }
  
    &:not(:has(.signin-buttons)) .block-content {
        margin-bottom: 35px;
    }

    .legal-terms {
        p {
            text-align: start;
        }
    }
}