/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* -------------------------------------------------------------- */

/* Utility & Misc Styling */

:root {
    --ith-orange: #F26722;
    --ith-orange-hsl: hsl(20 89% 54%);
    --ith-orange-light: hsl(20 89% 70%);
    --ith-orange-dark: hsl(20 89% 20%);
    --ith-purple: #52439B;
    --ith-purple-hsl: hsl(250 40% 44%);
    --ith-purple-light: hsl(250 40% 64%);
    --ith-purple-dark: hsl(250 40% 24%);
    --ith-purple-background: rgba(82,67,156,0.15);
    --ith-grey: #444545;
    --silver: #CCCCCC;
    --off-white: #F2F0EF;

    --button-border-radius: 3px;
}

@view-transition {
    navigation: auto;
    animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
}

.clearfix::after {
	content: '';
	display: table;
	clear: both;
}

html {
    scroll-behavior: smooth;
}

/* Layout fix for hero section at short screen sizes and high browser zoom */
@media (max-height: 500px) {
    .hero-section > div {
        margin-top: 3rem;
    }
}

/* Give every link element an outline for keyboard focus */
a:focus-visible {
    outline: 2px solid var(--ith-orange) !important;
}

ul {
    margin-left: 32px;
}

.column-count-2 {
    column-count: auto;
    column-width: 300px;
    column-gap: 32px;
}

.column-count-2 li {
    break-inside: avoid;
    page-break-inside: avoid;
}

.copyright-text {
    text-wrap: balance;
}

h2 {
    text-wrap: balance;
    /* Remove width: fit-content */
}

h2:not(.blog .site-main h2) {
    background-image: linear-gradient(to right, var(--ith-orange) 0%, var(--ith-orange) 100%);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 4px;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    display: inline-block;
}

/* Horizontal separator styling */
hr {
    height: 0px;
    margin-block: 1rem;
    border-top: 4px solid !important;
    color: var(--ith-orange) !important;
}

/* Orange underline offset for underline-orange class */
.underline-orange {
    text-underline-offset: 16px;
    
}

/* Remove default body text bottom margin if the last element in a section is body text */
.content-for-section-with-background p:last-child,
.content-for-section-with-image p:last-child {
    margin-bottom: 0;
}

.staff-bio-grid-item {
    grid-auto-rows: min-content;
}

.staff-bio-content-wrapper {
    display: grid !important;
    grid-template-rows: 0fr !important;
    transition: grid-template-rows 400ms !important;
}

.staff-bio-content-wrapper > div,
.staff-bio-excerpt-wrapper > div {
    overflow: hidden !important;
}

.grid-transition-reveal {
    grid-template-rows: 1fr !important;
}

.grid-transition-hide {
    grid-template-rows: 0fr !important;
}

/* -------------------------------------------------------------- */

/* Header Styling */

/* Contact Bar Styling */
.contact-bar-item a {
    color: white;
    font-size: 1rem;
    transition-duration: 0.5s;
    text-decoration: underline dotted;
    text-underline-offset: 2px;

    &:hover,
    &:focus-visible {
        color: var(--ith-orange);
    }
}

/* -------------------------------------------------------------- */
/* Primary Button Styling */

.button-primary,
button[type='submit'],
#gform_submit_button_1,
#gform_submit_button_2,
#gform_submit_button_3,
#button_8_select_all,
.search_submit input,
.application_button,
.job_application input[type='submit'] {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 65px;
    cursor: pointer;
    overflow: hidden;
    border: 1px solid hsl(20, 89%, 45%);
    border-top: 1px solid hsl(20, 89%, 65%);
    border-radius: var(--button-border-radius);
    background-color: var(--ith-orange-hsl);
    padding: 16px 32px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-wrap: balance;
    color: white !important;
    text-decoration: none;
    box-shadow:
        inset 0 1px hsl(20, 89%, 60%),
        0 4px 6px -1px rgba(0, 0, 0, 0.15),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;

    @media (max-width: 353px) {
        width: 100%;
    }
}

.button-primary::before,
button[type='submit']::before,
#gform_submit_button_1::before,
#gform_submit_button_2::before,
#gform_submit_button_3::before,
#button_8_select_all::before,
.search_submit input::before,
.application_button::before,
.job_application input[type='submit']::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.35),
        transparent
    );
    pointer-events: none;
}

.button-primary:focus,
button[type='submit']:focus,
#gform_submit_button_1:focus,
#gform_submit_button_2:focus,
#gform_submit_button_3:focus,
#button_8_select_all:focus,
.search_submit input:focus,
.application_button:focus,
.job_application input[type='submit']:focus {
    background-color: var(--ith-orange-hsl);
}

.button-primary:focus-visible,
button[type='submit']:focus-visible,
#gform_submit_button_1:focus-visible,
#gform_submit_button_2:focus-visible,
#gform_submit_button_3:focus-visible,
#button_8_select_all:focus-visible,
.search_submit input:focus-visible,
.application_button:focus-visible,
.job_application input[type='submit']:focus-visible {
    outline: 2px solid var(--ith-orange) !important;
    outline-offset: 1px;
}

.button-primary:hover,
.button-primary:focus-visible,
button[type='submit']:hover,
button[type='submit']:focus-visible,
#gform_submit_button_1:hover,
#gform_submit_button_1:focus-visible,
#gform_submit_button_2:hover,
#gform_submit_button_2:focus-visible,
#gform_submit_button_3:hover,
#gform_submit_button_3:focus-visible,
#button_8_select_all:hover,
#button_8_select_all:focus-visible,
.search_submit input:hover,
.search_submit input:focus-visible
.application_button:hover,
.application_button:focus-visible,
.job_application input[type='submit']:hover,
.job_application input[type='submit']:focus-visible {
    background-color: hsl(20, 89%, 35%);
    border-color: hsl(20, 89%, 25%);
    border-top-color: hsl(20, 89%, 45%);
}

.button-primary:active,
button[type='submit']:active,
#gform_submit_button_1:active,
#gform_submit_button_2:active,
#gform_submit_button_3:active,
#button_8_select_all:active,
.search_submit input:active,
.application_button:active,
.job_application input[type='submit']:active {
    background-color: hsl(0 0 0 );
    border-color: hsl(0 0 0) !important;
    border-top-color: hsl(0 0 20) !important;
    box-shadow:
        inset 0 1px hsl(0 0 10),
        0 0 #0000 !important;
    transform: scale(0.97) !important;
}

/* Secondary Purple Button */
.button-purple {
    display: grid;
    place-items: center;
    position: relative;
    min-height: 65px;
    cursor: pointer;
    overflow: hidden;
    border: 1px solid hsl(250 40% 30%);
    border-top: 1px solid hsl(250 40% 44%);
    border-radius: var(--button-border-radius);
    background-color: var(--ith-purple-hsl);
    padding: 16px 32px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-wrap: balance;
    color: white !important;
    text-decoration: none;
    box-shadow:
        inset 0 1px hsl(250, 40%, 60%),
        0 4px 6px -1px rgba(0, 0, 0, 0.15),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;

    @media (max-width: 353px) {
        width: 100%;
    }
}

.button-purple::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.35),
        transparent
    );
    pointer-events: none;
}

.button-purple:focus {
    background-color: var(--ith-orange-hsl);
}

.button-purple:focus-visible {
    outline: 2px solid var(--ith-orange) !important;
    outline-offset: 1px;
}

.button-purple:hover,
.button-purple:focus-visible {
    background-color: hsl(250, 40%, 35%);
    border-color: hsl(250, 40%, 25%);
    border-top-color: hsl(250, 40%, 45%);
}

.button-purple:active {
    background-color: hsl(0 0 0 );
    border-color: hsl(0 0 0) !important;
    border-top-color: hsl(0 0 20) !important;
    box-shadow:
        inset 0 1px hsl(0 0 10),
        0 0 #0000 !important;
    transform: scale(0.97) !important;
}

/* Button styling for menus */
.button-menu-orange {
    display: block;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border: 1px solid hsl(20, 89%, 45%);
    border-top: 1px solid hsl(20, 89%, 65%);
    border-radius: var(--button-border-radius);
    background-color: var(--ith-orange-hsl);
    padding: 16px 32px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    color: white !important;
    text-decoration: none;
    box-shadow:
        inset 0 1px hsl(20, 89%, 60%),
        0 4px 6px -1px rgba(0, 0, 0, 0.15),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.button-menu-orange::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.35),
        transparent
    );
    pointer-events: none;
}

.button-menu-orange:focus {
    background-color: var(--ith-orange-hsl);
}

.button-menu-orange:focus-visible {
    outline: 2px solid var(--ith-orange) !important;
    outline-offset: 1px;
}

.button-menu-orange:hover,
.button-menu-orange:focus-visible {
    background-color: hsl(20, 89%, 35%);
    border-color: hsl(20, 89%, 25%);
    border-top-color: hsl(20, 89%, 45%);
}

.button-menu-orange:active {
    background-color: hsl(0 0 0 );
    border-color: hsl(0 0 0) !important;
    border-top-color: hsl(0 0 20) !important;
    box-shadow:
        inset 0 1px hsl(0 0 10),
        0 0 #0000 !important;
    transform: scale(0.97) !important;
}

.button-menu-purple {
    display: block;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border: 1px solid hsl(250 40% 30%);
    border-top: 1px solid hsl(250 40% 44%);
    border-radius: var(--button-border-radius);
    background-color: var(--ith-purple-hsl);
    padding: 16px 32px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    color: white !important;
    text-decoration: none;
    box-shadow:
        inset 0 1px hsl(250, 40%, 60%),
        0 4px 6px -1px rgba(0, 0, 0, 0.15),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.button-menu-purple::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.35),
        transparent
    );
    pointer-events: none;
}

.button-menu-purple:focus {
    background-color: var(--ith-orange-hsl);
}

.button-menu-purple:focus-visible {
    outline: 2px solid var(--ith-orange) !important;
    outline-offset: 1px;
}

.button-menu-purple:hover,
.button-menu-purple:focus-visible {
    background-color: hsl(250, 40%, 35%);
    border-color: hsl(250, 40%, 25%);
    border-top-color: hsl(250, 40%, 45%);
}

.button-menu-purple:active {
    background-color: hsl(0 0 0 );
    border-color: hsl(0 0 0) !important;
    border-top-color: hsl(0 0 20) !important;
    box-shadow:
        inset 0 1px hsl(0 0 10),
        0 0 #0000 !important;
    transform: scale(0.97) !important;
}

/* Styling for the menu Support and phone buttons */
.header-menu-button-enhancements {
    font-weight: bold;
    padding: 12px 24px;
}

/* Service Button Styling */
.service-button svg {
    font-size: clamp(25px, 4vw, 40px);
}

.service-buttons-grid,
.services-page-button-wrapper {
    grid-auto-rows: 1fr;
}

/* Form Misc. Styling */

.careers-form-wrapper {
    place-items: center;
}

input[type="file"] {
    text-overflow: initial !important;
    color: black !important;
}

input[type="file"]::file-selector-button {
    position: relative !important;
    cursor: pointer !important;
    overflow: hidden !important;
    border: 1px solid hsl(20, 89%, 45%) !important;
    border-top: 1px solid hsl(20, 89%, 65%) !important;
    border-radius: var(--button-border-radius) !important;
    background-color: var(--ith-orange-hsl) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-wrap: balance !important;
    color: white !important;
    text-decoration: none !important;
    box-shadow:
        inset 0 1px hsl(20, 89%, 60%),
        0 4px 6px -1px rgba(0, 0, 0, 0.15),
        0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

input[type="file"]::file-selector-button::before {
    content: "";
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.35),
        transparent
    ) !important;
    pointer-events: none !important;
}

input[type="file"]::file-selector-button:focus {
    background-color: var(--ith-orange-hsl) !important;
}

input[type="file"]::file-selector-button:focus-visible {
    outline: 2px solid var(--ith-orange) !important;
    outline-offset: 1px !important;
}

input[type="file"]::file-selector-button:hover,
input[type="file"]::file-selector-button:focus-visible {
    background-color: hsl(20, 89%, 35%) !important;
    border-color: hsl(20, 89%, 25%) !important;
    border-top-color: hsl(20, 89%, 45%) !important;
}

input[type="file"]::file-selector-button:active {
    background-color: hsl(0 0 0 ) !important;
    border-color: hsl(0 0 0) !important;
    border-top-color: hsl(0 0 20) !important;
    box-shadow:
        inset 0 1px hsl(0 0 10),
        0 0 #0000 !important;
    transform: scale(0.97) !important;
}


/* -------------------------------------------------------------- */


/* Blog Styling */
.blog-single-meta-wrapper .post-views,
.blog-archive-meta-wrapper .post-views {
    margin: 0;
    display: flex;
    gap: 0.5em;
    align-items: center;
}

.blog-single-meta-wrapper .post-views-icon {
    color: var(--ith-orange);
    width: 16px;
    height: 16px;
}

.blog-archive-meta-wrapper .post-views-icon {
    width: 16px;
    height: 16px;
}

.blog-archive-meta-wrapper .post-views-label,
.blog-archive-meta-wrapper .post-views-count {
    font-size: 1rem !important;
    font-weight: 600;
}

.blog-single-meta-wrapper .post-views-label,
.blog-single-meta-wrapper .post-views-count {
    color: white;
    font-size: inherit !important;

    @media (max-width: 767px) {
        font-size: 1rem !important;
    }
}

.blog-sidebar-search-wrapper form {
    margin-bottom: 0;
}

.ith-blog-categories-list {
    margin-bottom: 0;

    & li a {
        transition: all 0.1s ease-out;
    }

    & li a:hover,
    & li a:focus-visible {
        color: var(--ith-orange);
    }
}

.blog-post-navigation-heading:hover + .blog-post-navigation-icon svg,
.blog-post-navigation-heading:focus-visible + .blog-post-navigation-icon svg,
.blog-post-navigation-heading:hover ~ .blog-post-navigation-icon svg,
.blog-post-navigation-heading:focus-visible ~ .blog-post-navigation-icon svg {
    color: var(--ith-orange) !important;
}

/* Search bar */
.wp-block-search {
    margin-bottom: 2rem;
}

@media(max-width:767px) {
    .wp-block-search__inside-wrapper {
        width: 100% !important;
    }
}

input[type="search"] {
    background-color: white;
    border: 1px solid var(--ith-grey);
}

input[type="search"]:focus,
input[type="search"]:focus-visible {
    background-color: white;
    outline: 2px solid var(--ith-orange);
}

#page:has(.blog-post-single) {
    padding: 6rem 2rem;

    @media(max-width: 767px) {
        padding: 3rem 1rem;
    }
}

/* -------------------------------------------------------------- */

/* Job Styling */

/* Job Board Styling */
.search_jobs {
    background-color: var(--off-white);
}

.search_keywords input,
.search_location input,
.job_application input[type='text'],
.job_application textarea {
    background-color: white;
    border: 1px solid var(--ith-grey);
}

.search_keywords input:focus,
.search_keywords input:focus-visible,
.search_location input:focus,
.search_location input:focus-visible,
.job_application input[type='text']:focus,
.job_application input[type='text']:focus-visible,
.job_application textarea:focus,
.job_application textarea:focus-visible {
    background-color: white;
    outline: 2px solid var(--ith-orange);
}

.job_listing .job-type {
    color: var(--ith-purple);
}

.job-listing-meta .job-type {
    background-color: var(--ith-purple) !important;
}

.job_listing .job-type.full-time,
.job_listing .job-type.part-time {
    color: var(--ith-orange);
}

.job-listing-meta .job-type.full-time,
.job-listing-meta .job-type.part-time {
    background-color: var(--ith-orange) !important;
    color: white !important;
}

li.job_listing a:hover {
    background-color: var(--ith-purple-background) !important;
}

/* Remove job tag from the job description content when viewing a singular job listing */
.job_description .job_tags {
  display: none;
}

/* -------------------------------------------------------------- */

/* Animations */
@media (prefers-reduced-motion: no-preference) {
    /* Some utility classes for the intersection observer, and to set the starting styles of elements that are transitioning in */
    .has-animation-left,
    .has-animation-right,
    .has-animation-up,
    .has-animation-fade-in,
    .has-animation-grow-from-center {
        opacity: 0;
    }


    @keyframes animate-fade-in {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .animate-fade-in {
        animation: animate-fade-in 1s ease-in-out forwards;
    }

    @keyframes animate-in-up {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

        to {
            opacity: 1;
            transform: translateY(0px);
        }
    }

    .animate-in-up {
        animation: animate-in-up 0.75s ease-in-out forwards;
    }

    @keyframes animate-in-left {
        from {
            opacity: 0;
            transform: translateX(-50px);
        }

        to {
            opacity: 1;
            transform: translateX(0px);
        }
    }

    .animate-in-left {
        animation: animate-in-left 1s ease-in-out forwards;
    }


    @keyframes animate-in-right {
        from {
            opacity: 0;
            transform: translateX(50px);
        }

        to {
            opacity: 1;
            transform: translateX(0px);
        }
    }

    .animate-in-right {
        animation: animate-in-right 1s ease-in-out forwards;
    }

    @keyframes animate-grow-from-center {
        from {
            transform: scaleX(0);
            opacity: 0;
        }

        to {
            transform: scaleX(1);
            opacity: 1;
        }
    }

    .has-animation-grow-from-center {
        opacity: 0;
    }

    .animate-grow-from-center {
        transform-origin: left;
        animation: animate-grow-from-center 1.25s ease-in-out forwards;
    }

    @keyframes animate-services-page-intro {
        0% {
            transform: scale(1) translateY(100%);
        }

        100% {
            transform: scale(0.35) translateY(0%);
        }
    }

    .has-animation-services-page-intro {
        transform: scale(1) translateY(100%);
    }

    .animate-services-page-intro {
        animation: animate-services-page-intro 0.7s cubic-bezier(0.68,-0.55,0.27,1.55) 1.75s forwards;

        @media (max-width: 767px) {
            animation-delay: 0s;
        }
    }

    @keyframes animate-services-page-intro-pc {
        from {
            opacity: 0;
            transform: translateY(15%);
        }

        to {
            opacity: 1;
            transform: translateY(-15%);
        }
    }

    /* Update Services page image animations to include final state of lower opacity at lower screen sizes */
    @media (max-width: 1025px) {
        @keyframes animate-services-page-intro {
            0% {
                opacity: 1;
                transform: scale(1) translateY(100%);
            }

            75% {
                opacity: 1;
                transform: scale(0.35) translateY(0%);
            }

            100% {
                opacity: 0.5;
                transform: scale(0.35) translateY(0%);
            }
        }

        @keyframes animate-services-page-intro-pc {
            0% {
                opacity: 0;
                transform: translateY(15%);
            }

            75% {
                opacity: 1;
                transform: translateY(-15%);
            }

            100% {
                opacity: 0.5;
                transform: translateY(-15%);
            }
        }

        .has-animation-services-page-intro {
            opacity: 0.5;
        }
    }

    .has-animation-services-page-intro-pc {
            opacity: 0;
    }

    .animate-services-page-intro-pc {
        animation: animate-services-page-intro-pc 0.8s cubic-bezier(0.68,-0.55,0.27,1.55) 1.75s forwards;
    }

    .has-animation-left-service-page,
    .has-animation-right-service-page {
        opacity: 0;
    }

    /* Animation fade-in for page content in general, to make it mesh better with all the other animations */
    article {
        opacity: 0;
        animation: animate-fade-in 1s ease-in-out 0.5s forwards;
    }

    /* Animation Delays */
    .animation-delay-100 {
        animation-delay: 0.1s;
    }

    .animation-delay-200 {
        animation-delay: 0.2s;
    }

    .animation-delay-300 {
        animation-delay: 0.3s;
    }

    .animation-delay-400 {
        animation-delay: 0.4s;
    }

    .animation-delay-500 {
        animation-delay: 0.5s;
    }

    .animation-delay-600 {
        animation-delay: 0.6s;
    }

    .animation-delay-700 {
        animation-delay: 0.7s;
    }

    .animation-delay-800 {
        animation-delay: 0.8s;
    }

    .animation-delay-900 {
        animation-delay: 0.9s;
    }

    .animation-delay-1000 {
        animation-delay: 1s;
    }

    .animation-delay-1100 {
        animation-delay: 1.1s;
    }

    .animation-delay-1700 {
        animation-delay: 1.7s;
    }

    /* Animation Speeds */

    .animation-speed-300 {
        animation-duration: 0.3s;
    }

    .animation-speed-500 {
        animation-duration: 0.5s;
    }

    .animation-speed-700 {
        animation-duration: 0.7s;
    }

    .animation-speed-900 {
        animation-duration: 0.9s;
    }

    .animation-speed-1100 {
        animation-duration: 1.1s;
    }

    .animation-speed-1500 {
        animation-duration: 1.5s;
    }

    .animation-speed-2000 {
        animation-duration: 2s;
    }

    .parallax {
        background-attachment: fixed !important;
    }

    /* Fallback for mobile Firefox only, in case the animations don't trigger */
    @media (max-width: 768px) {
        @-moz-document url-prefix() {
            .has-animation-left,
            .has-animation-right,
            .has-animation-up,
            .has-animation-grow-from-center,
            .has-animation-fade-in {
                opacity: 1;
            }
        }
    }
}