/*
Theme Name:   Carimus Site Child Theme
Author:       Carimus
Author URI:   https://www.carimus.com
Template:     carimus-core
Version:      1.0.24
*/

@import url(../../../../use.typekit.net/qdu1lqh.css);

/* Out of bounds, lightest ADA contrast white via contrast checker */
body.page {
    background-color: #595959;
}

h1, h2, h4, h5 {
    font-weight: 800;
}

h5 {
    font-size: var(--wp--preset--font-size--lg);
}

/* No accidental font-weight 900 */
b, strong, .stronger, .bold {
    font-weight: 800 !important;
}

.inline {
    display: inline !important;
}

.uppercase {
    text-transform: uppercase;
}

.primary-logo {
    max-height: 5rem;
}

/* Home */
.isHome.header-content {
    gap: unset;

    &.home-start {
        p {
            font-weight: 400;
        }
    }
    .header-subcontent {
        margin-top: 1.5rem;
        gap: unset;

        .btn-primary {
            margin-top: 2rem;
        }
    }
}

.header-content h1 {
    font-size: var(--wp--preset--font-size--3-xl) !important;
    line-height: var(--wp--preset--font-size--3-xl);
    font-style: italic;
    font-weight: 800;
    letter-spacing: 3.6px;

    span {
        display: inline;
    }
}

.styled-header .header-content {
    max-width: unset;
    padding: 8.75rem 1.5rem 5rem;

    h1 {
        letter-spacing: 3.6px;

        span.outline-text {
            display: inline;
        }
    }

    p {
        font-size: var(--wp--preset--font-size--sm);
    }
}

.styled-header .styled-player-wrapper {
    width: 100% !important;
}

.styled-header .styled-player-wrapper:after {
    display: none;
}

.styled-header::after {
    background: var(--wp--preset--color--strike-light-gray);
    mix-blend-mode: multiply;
}

.styled-header::before {
    background-color: rgb(51, 51, 51, 0.75);
    content: '';
    clip-path: unset;
    mix-blend-mode: multiply;
}

.search .styled-header {
    &::after {
        background-color: var(--wp--preset--color--strike-charcoal);
    }

    .header-content {
        align-items: start;
        text-align: start;

        h1 {
            color: var(--wp--preset--color--white);
            letter-spacing: 2.4px;
        }

        form button.dashicons {
            font-size: 2.25rem;
        }
    }
}

.search-wrap {
    .search-card {
        &:hover {
            background-color: var(--wp--preset--color--primary);

            a.btn-primary {
                background-color: var(--wp--preset--color--white) !important;
                color: var(--wp--preset--color--primary) !important;
            }
        }

        a.btn-primary {
            background-color: var(--wp--preset--color--primary) !important;
            color: var(--wp--preset--color--white) !important;
        }
    }
}

.outline-text {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px;
}

.italic {
    font-style: italic !important;
}

/* Nav */
#desktop-primary-menu {
    column-gap: 2rem;
}

#menu-primary-menu,
#desktop-primary-menu,
#submenu-dropdown ul.show-submenu {
    a[href=""],
    a:not([href]) {
        pointer-events: none !important;
    }
}

#desktop-primary-menu {
    .menu-item:hover {
        .styled-nav-link::before {
            background-color: var(--wp--preset--color--secondary);
        }
    }

    .current_page_item.active a.styled-nav-link::before {
        background-color: var(--wp--preset--color--secondary);
    }
}

.current_page_item.active a.styled-nav-link {
    color: var(--wp--preset--color--secondary) !important;
}

#desktop-primary-menu a.styled-nav-link {
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: unset;
    padding: unset;

    &::before {
        left: 0;
        width: 100%;
    }
}

#styled-navbar {
    &.scrolling {
        background: var(--wp--preset--color--gray-primary);
    }

    .menu-wrapper,
    .toggle-wrap {
        margin-bottom: unset !important;
    }

    .navbar-content {
        padding: 0.7rem 1.75rem;
    }

    .menu-wrapper .styled-nav-list .styled-nav-link:before {
        bottom: 0 !important;
    }
}

#show-search {
    height: 23px;
    width: 23px;
}

#show-search.dashicons-search:before {
    content: url('images/search.svg');
    display: inline-block;
    height: 23px;
    width: 23px;
}

/* Components */
.pre-title {
    font-size: var(--wp--preset--font-size--base);
    letter-spacing: 1.1px;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

/* Buttons */
.btn {
    width: fit-content;
}

.btn::after {
    display: none !important;
}

p.btn {
    padding: unset !important;
}

/* Assumption- `.btn` are link elems */
a.btn,
.btn > a {
    display: block;
    cursor: pointer;
    font-style: italic;
    font-size: var(--wp--preset--font-size--base);
    font-weight: 700;
    letter-spacing: 1px;
    padding: 1rem 2.2rem;
    padding-right: 4.75rem !important;
    width: fit-content;
    text-transform: uppercase;
    transition: all 0.3s ease !important;

    clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
}

a.btn-primary,
.btn-primary > a {
    background-color: var(--wp--preset--color--white) !important;
    color: var(--wp--preset--color--secondary) !important;

    /* Hover color placeholder - not for buttons in map details, non-trapezoidal */
    &:hover:not(.details > .btn):not(.carimus-card .btn) {
        background-color: var(--wp--preset--color--secondary) !important;
        color: var(--wp--preset--color--white) !important;
    }
}

a.btn-secondary,
.btn-secondary > a {
    background: var(--wp--preset--color--secondary) !important;
    color: var(--wp--preset--color--white) !important;
    cursor: pointer;

    /* Hover color placeholder - not for buttons in map details, non-trapezoidal */
    &:hover:not(.details > .btn):not(.carimus-card .btn) {
        background: var(--wp--preset--color--primary) !important;
    }
}

a.btn-arrow,
.btn-arrow > a,
.gform_wrapper button.btn-primary {
    font-size: var(--wp--preset--font-size--base);
    font-style: italic;
    clip-path: unset !important;
    letter-spacing: 0.8px;
    padding: unset !important;
    transition: all 0.3s ease;

    &:hover {
        &::after {
            transform: translateX(1rem);
            transition: transform 0.3s ease;
        }
    }

    &::after {
        content: "" !important;
        display: inline-block !important;
        margin-left: 0.5rem !important;
        vertical-align: 0;
        border-top: .4rem solid transparent;
        border-right: 0;
        border-bottom: .4rem solid transparent;
        border-left: .4rem solid var(--wp--preset--color--primary);
        padding: unset;
    }
}

.gform_wrapper button.btn-primary {
    color: var(--wp--preset--color--primary);
}

.single-projects {
    .carimus-slider__wrapper--child  {
        .carimus-slide__next,
        .carimus-slide__prev {
            background-color: var(--wp--preset--color--strike-light-gray);

            &:hover {
                background-color: var(--wp--preset--color--primary);
            }
        }
    }
}

.card-terms {
    font-size: var(--wp--preset--font-size--base);
    letter-spacing: 0.64px;
    text-transform: uppercase;
}

/*  Page Sections */

/* Container-wrap */
.container-wrap {
    background-repeat: no-repeat;
    background-size: cover;

    &.no-pb {
        padding-bottom: 0 !important;
    }

    &.no-pt {
        padding-top: 0 !important;
    }
}

/* TWM - text with media */
.twi {
    gap: 9.3vw;
}

.twi .content-wrapper {
    display: flex;
    flex-direction: column;
    padding: unset;

    * {
        /* Placeholder for all content in twm */
        max-width: 513px;
    }

    .pre-title {
        margin: unset;
        margin-bottom: 1rem;
    }

    h2.wp-block-heading {
        letter-spacing: unset;
        font-style: italic;
        font-size: var(--wp--preset--font-size--lgr);
    }

    p {
        font-size: var(--wp--preset--font-size--base);
        margin-top: 1.5rem;
    }

    .btn {
        margin-top: 3rem;
    }
}

.carimus-map .carimus-marker-content {
    .icon {
        height: 1rem;
        width: 1rem;
        background-color: var(--wp--preset--color--strike-light-gray);
        border-radius: 100%;
        color: transparent !important;
    }

    &::before {
        border: 2px solid var(--wp--preset--color--white) !important;
    }

    &:hover .icon {
        background-color: var(--wp--preset--color--primary) !important;
    }

    &.highlight .icon {
        background-color: var(--wp--preset--color--secondary) !important;
    }
}

/* We need to distinguish by service_type, but not filter */
.hide-filter-map {
    .carimus-map-wrap {
        min-height: 600px;

        .carimus-map--filter {
            display: none;
        }

        .block-summary {
            padding-top: var(--wp--custom--container--padding--medium);
        }
    }

    .carimus-map--legend-wrap {
        margin: 1rem 0 2rem;
        min-height: fit-content !important;
        position: relative;
    }
    .carimus-map--legend-wrap div:last-child {
        margin-bottom: unset;
    }
}

.carimus-map .carimus-marker-content {
    &.hq-marker .icon{
        background-color: var(--wp--preset--color--black) !important;
    }

    &:hover .icon {
        background-color: var(--wp--preset--color--primary) !important;
    }

    &.highlight .icon {
        background-color: var(--wp--preset--color--secondary) !important;
    }
}

/* Bolt- No Blue */
.bolt-cards .strike-card .card-terms {
    color: var(--wp--preset--color--secondary) !important;
}

.bolt-header h2.strike-header-outline {
    color: var(--wp--preset--color--secondary) !important;
}

.bolt-header a.btn-secondary:hover:not(.details > .btn):not(.carimus-card .btn) {
    background-color: var(--wp--preset--color--strike-charcoal) !important;
    color: var(--wp--preset--color--white) !important;
}

.bolt-map .carimus-marker-content:hover .icon {
    background-color: var(--wp--preset--color--white) !important;
}

.bolt-map .carimus-marker-content .details h3 {
    color: var(--wp--preset--color--secondary) !important;
}

/* Crossfire- No Red */
.crossfire-header a.btn-secondary {
    background-color: var(--wp--preset--color--primary) !important;
    color: white !important;
}

.crossfire-header a.btn-secondary:hover:not(.details > .btn):not(.carimus-card .btn) {
    background: var(--wp--preset--color--strike-charcoal) !important;
}

.crossfire-cards .strike-card a.btn-arrow {
    color: var(--wp--preset--color--primary) !important;
}

.crossfire-cards .strike-card a.btn-arrow::after {
    border-left: 0.4rem solid var(--wp--preset--color--primary) !important;
}

.crossfire-cta .strike-cta-col-wrap a.btn-primary {
    color: var(--wp--preset--color--primary) !important;
}

.crossfire-cta .strike-cta-col-wrap a.btn.btn-primary:hover:not(.details > .btn):not(.carimus-card .btn)  {
    color: white !important;
    background-color: var(--wp--preset--color--primary) !important;
}

.crossfire-map .carimus-marker-content .details .btn-primary {
    color: var(--wp--preset--color--primary) !important;
}

.crossfire-map .carimus-marker-content .details .btn-primary::after {
    border-left: .4rem solid var(--wp--preset--color--primary) !important;
}


.crossfire-map .carimus-marker-content .icon {
    background-color: var(--wp--preset--color--primary) !important;
}

.crossfire-map .carimus-marker-content.service_type .icon {
    background-color: var(--wp--preset--color--strike-light-gray) !important;
}

.crossfire-map .carimus-marker-content:hover .icon,
.crossfire-map .carimus-marker-content.highlight .icon {
    background-color: var(--wp--preset--color--white) !important;
}

.crossfire-map .carimus-marker-content.highlight::after {
    border-bottom: 100px solid var(--wp--preset--color--primary) !important;
}

.carimus-map.map-has-filter {
    .carimus-marker-content {
        .icon {
            background-color: var(--wp--preset--color--secondary);
        }

        &:not(.service_type) {
            .details {
                a.btn-primary {
                    display: none !important;
                }
            }
        }

        &.service_type .icon {
            background-color: var(--wp--preset--color--strike-light-gray);
        }
    }
}

/* Archive Map? (Are these projects?) */
.carimus-map .carimus-marker-content.highlight {
    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        border-right: 100px solid transparent;
        border-bottom: 100px solid var(--wp--preset--color--secondary);
        z-index: -1; /* Push triangle behind the card */
        transform: translate(1rem, -6.2rem);
    }
}

.carimus-map .carimus-marker-content .details {
    row-gap: 1rem;

    h3 {
        font-size: var(--wp--preset--font-size--md);
        font-style: italic;
        font-weight: 700;
        text-transform: uppercase;
    }
}

/* Non-trapezoidal buttons */
.carimus-map .carimus-marker-content .details .btn,
.carimus-card .btn {
    background-color: unset !important;
    font-size: 1rem;
    margin-top: unset;
    padding: unset !important;
    clip-path: unset !important;

    &::after {
        content: "";
        display: inline-block !important;
        margin-left: 0.5rem;
        vertical-align: 0;
        border-top: .4rem solid transparent;
        border-right: 0;
        border-bottom: .4rem solid transparent;
        border-left: .4rem solid var(--wp--preset--color--secondary);
        padding: unset;
    }
}

.carimus-map .carimus-marker-content.highlight .details {
    transform: translate(2rem, calc(-100% - 1.9rem));
}

/* Believe this is the text content column on map */
.archive-map {
    overflow: hidden;

    @media screen and (max-height: 650px) {
        .pointer-events-auto.h-full {
            margin-top: 5% !important;
        }

        .block-summary {
            h2 {
                font-size: 1.75rem !important;
            }

            p {
                font-size: var(--wp--preset--font-size--base) !important; 
            }

            .btn > a {
                font-size: 0.8rem;
                letter-spacing: normal;
                padding: 0.5rem 1rem;
                padding-right: 2.75rem !important;
            }
        }
    }
}

.archive-map .pointer-events-auto.h-full {
    height: fit-content;
    pointer-events: none;
}

.archive-map .btn-primary {
    margin-top: 1rem;
    pointer-events: all;
}

.wp-block-carimus-archive-map.block-summary {
    display: flex;
    flex-direction: column;
    pointer-events: none;

    .wp-block-heading {
        font-size: var(--wp--preset--font-size--2-xl);
        font-style: italic;
        letter-spacing: 2.4px;
    }

    .map-content {
        font-size: var(--wp--preset--font-size--sm);
        max-width: 400px;
        margin: 1.5rem 0;
    }
}

/* To adjust as needed - styles for the Strike Map */
#google-map {
    &::before, &::after {
        pointer-events: none;
        position: absolute;
        top: 90%;
        z-index: 99;
    }
}

.carimus-map--legend-wrap {
    display: flex;
    flex-direction: column;
    justify-content: end;
    position: absolute;
    top: 0;
    height: 100%;
    margin: unset;
}

#legend-case-studies,
#legend-strike-offices,
#legend-hq {
    font-size: 0.75rem;
    font-style: italic;
    display: flex;
    align-items: center;

    &::before {
        display: inline-block !important;
        content: "";
        border-radius: 200px;
        margin-right: 10px;
        left: calc(8.33vw + 1rem);
        padding: 5px;
        height: 1.25rem;
        width: 1.25rem;
    }
}

#legend-case-studies::before {
    background-color: var(--wp--preset--color--strike-light-gray) !important;
    border: 2px solid var(--wp--preset--color--white);
}

#legend-strike-offices::before {
    background-color: var(--wp--preset--color--secondary);
    border: 2px solid var(--wp--preset--color--white);
}

#legend-hq::before {
    border: 2px solid var(--wp--preset--color--white);
    background-color: var(--wp--preset--color--black);
}

/* No Red */
.crossfire-map #legend-strike-offices::before {
    background-color: var(--wp--preset--color--primary) !important;
}

.subsidiary-map {
    .carimus-marker-content .icon {
        background-color: var(--wp--preset--color--secondary) !important;
    }
}


.carimus-nav-tabs__wrapper .mobile-select-wrap {
    display: none;

    select {
        appearance: none;
        border: none;
        -webkit-appearance: none;
    }
}

.post-archive .archive--filter .select,
.carimus-nav-tabs__wrapper .mobile-select-wrap {
    &:before {
        content: "";
        background: unset;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 1rem;
        width: 0;
        height: 0;
        border-left: 0.6rem solid transparent;
        border-right: 0.6rem solid transparent;
        border-top: 0.5rem solid var(--wp--preset--color--primary);
        pointer-events: none;
    }

    #mobile-select {
        overflow: hidden;
        padding-right: 3rem;
    }
}

/* Post Archive */
.post-archive {
    .archive--filter {
        margin: unset;
    }

    .archive--posts {
        grid-template-columns: 1fr 1fr 1fr;

        .carimus-card .px-8.pt-12 {
            padding-bottom: 2rem;
        }

        .pagination {
            grid-column: 1/-1;

            .page-numbers {
                padding: 0.15rem 0.5rem 1px;
                border-bottom: 1px solid transparent !important;

                &.current {
                    border-bottom: 1px solid var(--wp--preset--color--white) !important;
                    margin: unset;
                }
            }
        }
    }

    .carimus-card--custom {

        & > div.flex-col {
            background-color: var(--wp--preset--color--primary);

            * {
                color: var(--wp--preset--color--white) !important;
            }

            img {
                height: 200px;
            }

            h3 {
                font-weight: 700;
            }

            h4 {
                font-weight: unset;
                font-style: normal !important;
            }

            .btn-primary {
                background-color: unset !important;
                margin-top: 2rem;

                &::after {
                    border-left: .4rem solid var(--wp--preset--color--white);
                }
            }
        }

        .border-l-4 {
            border: unset;
        }
    }

    .pagination li .current {
        border-bottom: var(--wp--preset--color--white) !important;
    }

    .pagination .nav {
        background: transparent;
    }

    .pagination a:not(.nav),
    .pagination span {
        color: var(--wp--preset--color--white);
    }
}

/* Crew cards */
.carimus-card--crew {
    .h-full > div.border-carimusPrimary.flex-1 {
        display: flex;
        flex-direction: column;

        button {
            padding-top: 1rem !important;
            margin-top: auto;
            position: relative;
        }
    }

    dialog {
        background-color: var(--wp--preset--color--white);
        color: var(--wp--preset--color--strike-charcoal);
        max-width: 90%;

        & > div.grid {
            align-items: center;
            gap: 2.5rem;

            div.ml {
                margin-left: unset;
            }
        }

        div.px-4 {
            padding: unset;
        }

        button.close {
            padding-top: unset !important;
        }

        @media screen and (min-width: 1024px) {
            & > div.grid {
                grid-template-columns: 1fr 1fr 1fr;
            }
        }
    }
}

/* Nav Tabs */
.carimus-nav-tabs__wrapper .tab-items {
    row-gap: 0.8rem;
}

.carimus-nav-tabs__wrapper {
    .strike-full-img-label-wrap {
        min-height: 500px;

        .label-card {
            padding: 2rem;

            .label-title {
                font-size: var(--wp--preset--font-size--md);
                letter-spacing: 1.1;
                line-height: 2rem;
            }
        }
    }
}

/* For nav tabs with bg image w/ labels */
.bolt-tabs .strike-full-img-label-wrap,
.bolt-tabs .strike-full-img-label-wrap .triangle-border {
    background-color: var(--wp--preset--color--secondary);
}
.bolt-tabs .strike-full-img-label-wrap .label-card .feat-term,
.bolt-tabs .strike-full-img-label-wrap .label-card .btn-arrow {
    color: var(--wp--preset--color--secondary);
}
.bolt-tabs .strike-full-img-label-wrap .label-card .btn-arrow::after {
    border-left: .4rem solid var(--wp--preset--color--secondary);
}

/* For nav tabs with bg image w/ labels */
.crossfire-tabs .carimus-nav-tab__title:hover,
.crossfire-tabs .carimus-nav-tab__title.active {
    color: var(--wp--preset--color--primary) !important;
}

.carimus-nav-tabs__wrapper .carimus-nav-tab__title {
    border: unset;
    color: var(--wp--preset--color--black);
    font-size: var(--wp--preset--font-size--base);
    font-weight: 400;
    margin: 0;
    opacity: 1;
    padding: 0 1rem;
    line-height: 1.1;

    &:hover {
        color: var(--wp--preset--color--secondary);
    }

    &.active {
        color: var(--wp--preset--color--secondary);
        font-weight: 800;
    }
}

/* To refactor as ACF fields - on wrapper for CTA */
.cta-mask::before,
.single-projects-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100% !important;
    background-color: rgb(51, 51, 51, 0.75);
    mix-blend-mode: multiply;
    clip-path: polygon(0 0, 72% 0, 52% 80%, 72% 80%, 67% 100%, 0 100%);

    /* Above bg image, below text */
    z-index: 0;
}

.cta-mask,
.single-projects-cta {
    position: relative;
}

.cta-mask {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.site-footer {
    background-color: var(--wp--preset--color--strike-charcoal);

    .styled-logo {
        align-items: start;
    }

    ul, li {
        list-style: none !important;
    }

    ul li:first-child {
        text-transform: uppercase;
    }

    ul.footer-menu li {
        font-size: 1rem;
    }

    /* Assuming we have static address titles, otherwise override template */
    .address-content li:nth-child(5) {
        margin-top: 2rem;
    }

    .styled-footer-copyright {
        align-items: center;
        justify-content: start;

        .copyright-links {
            column-gap: 1.5rem;
            margin-left: auto;

            li {
                margin-bottom: auto;
                margin-top: auto;
            }
        }

        .social-icons,
        .social-icons a {
            margin: unset;
            height: 20px;
            width: 20px;
        }
    }

    .regis-tm {
        font-size: 1rem;
        top: 0;
    }

    .btn {
        padding-right: unset;
    }

    .btn-arrow {
        text-wrap: nowrap;

        & > a::after {
            border-left: .4rem solid var(--wp--preset--color--white) !important;
        }
    }

    p.copyright,
    .copyright-links > li.menu-item:not(.btn) > a {
        color: var(--wp--preset--color--strike-light-gray);
        font-weight: 400;
        letter-spacing: 0.7px;
    }
}

.projects-card {
    background-color: var(--wp--preset--color--primary);
    row-gap: 0.5rem;

    .btn-primary {
        background-color: unset !important;
        color: var(--wp--preset--color--white) !important;

        &:after {
            border-left: .4rem solid  var(--wp--preset--color--white) !important;
        }
    }
}

@media screen and (min-width: 1024px) {
    #styled-navbar .styled-logo {
        margin-left: 5vw;
        max-height: 5rem;
        max-width: 15rem;
    }

    /* Placeholder for lightning mask */
    .home .styled-header {
        height: fit-content;
        min-height: 100vh;
    }

    .styled-header::before {
        clip-path: polygon(0 0, 76% 0, 36% 81%, 63% 81%, 56% 100%, 0 100%);
    }

    .styled-header.internal-header {
        min-height: 80vh;
        &::before {
            clip-path: polygon(0 0, 76% 0, 36% 100%, 0 100%);
        }
    }

    .styled-header .header-content {
        padding: 10rem 2rem 10rem 8.3333vw !important;
        margin-bottom: auto;
        max-width: 55vw;

        p {
            font-weight: 400;
            width: 32vw;
        }
    }

    .styled-header.internal-header .header-content {
        margin-top: auto;
    }

    .carimus-nav-tabs__wrapper .carimus-nav-tab__title {
        flex: 1;
    }

    .carimus-map-wrap {
        min-height: 90vh !important;
    }

    .carimus-map--legend-wrap div:last-child {
        margin-bottom: 3.125rem;
    }

    .contact-cols {
        column-gap: clamp(4rem, 9vw, 9rem);

        .contact-content-col-util {
            margin-left: auto !important;
            max-width: fit-content;
        }

        .contact-form-col-util {
            margin-right: auto !important;
            max-width: 40%;
        }
    }

    .styled-footer-copyright {
        justify-content: space-between;
    }

    .copyright-links .btn-primary {
        padding-left: 1rem;
    }
}

@media screen and (max-width: 1024px) {
    .md-none {
        display: none;
    }

    #styled-navbar {
        padding: 1rem 2rem;

        .styled-logo {
            margin-left: unset;
        }

        .navbar-content {
            padding: 0;
        }
    }

    .header-content h1 {
        font-size: 3rem;
    }

    .container-wrap:not(.mobile-no-x-pad) .inner {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    .twi {
        gap: 3rem;
    }

    #google-map {
        &:before{
            left: 1rem;
            height: 1.2rem;
            width: 1.2rem;
        }

        &::after {
            font-size: 0.72rem;
            left: 2.8rem;
            max-width: 65%;
        }
    }

    .archive-map {
        padding: 0 1rem;
    }

    .archive-map .btn-primary {
        pointer-events: all !important;
    }

    .carimus-map--legend-wrap {
        position: relative;
        min-height: 400px;
        margin-bottom: 5rem;
    }

    .cta-mask::before,
    .single-projects-cta::before {
        clip-path: unset;
    }

    .post-archive .archive--posts {
        grid-template-columns: 1fr 1fr;
    }

    .site-footer {
        padding-left: 1.5rem;
        padding-right: 1.5rem;

        .menu-container {
            grid-template-columns: 1fr 1fr;

            .col2 {
                grid-column: unset;
            }
        }
    }

    .styled-footer-copyright {
        align-items: center;
        flex-direction: row;

        p.copyright {
            flex-basis: 100%;
            margin-top: 2rem;
        }

        .copyright-links {
            margin-left: unset !important;
            flex-basis: 100%;
            width: 100%;
        }
    }

    footer .menu-container .grid-item,
    footer ul.footer-menu,
    .styled-footer-copyright {
        padding: unset;
        padding-inline-start: unset;
    }
}

@media screen and (max-width: 767px) {
    .header-content h1 {
        font-size: 2.5rem !important;
        letter-spacing: 2px !important;
        line-height: 3rem;
    }

    .internal-header .header-content h1 {
        letter-spacing: 1.2px;
    }

    .carimus-nav-tabs__wrapper .carimus-nav-tab__title {
        flex-basis: 100%;
        width: 100%;
    }

    .post-archive .archive--posts {
        grid-template-columns: 1fr;
    }

    .carimus-nav-tabs__wrapper .mobile-select-wrap {
        display: block;
        background-color: var(--wp--preset--color--white);
        margin: 1rem 0;
        position: relative;

        select {
            padding: 0.2rem 0.4rem;
            height: 100%;
            width: 100%;
        }
    }

    .site-footer .menu-container {
        grid-template-columns: 1fr;

        li {
            margin-top: unset;
        }
    }

    .styled-footer-copyright {
        align-items: start !important;

        .copyright-links {    
            flex-direction: column;
            margin: unset !important;
        }
    }
}

/* Leadership card variants */
.strike-leadership.carimus-cards {
    grid-template-columns: repeat(8, 1fr);
    @media (min-width: 1024px) {
        grid-template-columns: repeat(10, 1fr) !important;
    }
    @media (max-width: 767px) {
        grid-template-columns: repeat(6, 1fr) !important;
    }
    @media (max-width: 600px) {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    @media (max-width: 450px) {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .carimus-card {
        grid-column: span 2;
        padding: 2rem 0;
        /* TODO: Put this in a js file to automate */
        &:nth-child(6) {
            @media screen and (min-width: 1024px){
                grid-column: 2 / span 2;
            }
        }
        &:nth-child(10) {
            @media screen and (min-width: 1024px){
                grid-column: 3 / span 2;
            }
        }
        &:nth-child(13) {
            @media screen and (min-width: 1024px){
                grid-column: 4 / span 2;
            }
        }
        &:nth-child(15) {
            @media screen and (min-width: 1024px){
                grid-column: 5 / span 2;
            }
        }
        div>div:last-child {
            padding: 0;
            position: relative;
            h4 {
                margin-top: 1.5rem;
                font-size: 20px;
                font-weight: 800;
                line-height: 24px; /* 120% */
                letter-spacing: 1px;
                text-transform: uppercase;
                color: var(--wp--preset--color--white);
            }
            h4:nth-child(2) {
                margin: 1rem 0 0;
                font-size: 14px;
                font-style: normal !important;
                font-weight: 400;
                text-transform: none;
                letter-spacing: 0.5px;
                line-height: 20px; /* 142.857% */
            }
            button {
                font-size: 16px;
                font-style: italic;
                font-weight: 800;
                line-height: 20px; /* 125% */
                letter-spacing: 0.8px;
                text-transform: uppercase;
                &::after {
                    border-left: 0.4rem solid var(--wp--preset--color--white);
                }
            }
        }
    }
}
.employee-stories.carimus-cards {
    gap: 1.75rem;
    max-width: 1000px;
    margin: auto;

    .carimus-card {
        grid-column: span 1;
        padding: 2rem 0;
        div {
            background-color: transparent;
            img {
                height: 22rem;
                width: 25rem;
            }
        }
        div>div:last-child {
            padding: 0;
            position: relative;
            border: none;
            h4 {
                margin-top: 1.5rem;
                font-size: 20px;
                font-weight: 800;
                line-height: 24px; /* 120% */
                letter-spacing: 1px;
                text-transform: uppercase;
                color: var(--wp--preset--color--primary);
            }
            h4:nth-child(2) {
                margin: 1rem 0;
                font-size: 14px;
                font-style: normal !important;
                font-weight: 400;
                letter-spacing: 0.5px;
                line-height: 20px; /* 142.857% */
                color: var(--wp--preset--color--black);
                text-transform: none;
            }
            button {
                font-size: 16px;
                font-style: italic;
                font-weight: 800;
                line-height: 20px; /* 125% */
                letter-spacing: 0.8px;
                text-transform: uppercase;
                color: var(--wp--preset--color--primary);
                &::after {
                    border-left: 0.4rem solid var(--wp--preset--color--primary);
                }
            }
        }
    }

    @media screen and (max-width: 600px) {
        padding: unset;

        .carimus-card {
            padding: unset;
        }
    }

    @media (min-width: 600px) and (max-width: 1024px) {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    @media (max-width: 600px) {
        grid-template-columns: repeat(1, 1fr) !important;
        .carimus-card {
            margin: auto;
            width: 100%;

            div img {
                height: auto;
                width: 100%;
                max-height: 17rem;
            }
        }
    }
}

.chevron-left::before,
.chevron-right::after {
    width: 100%;
    height: 100%;
    align-items: center;
    display: flex;
    pointer-events: all;
    padding-top: 5px;
}

.chevron-left::before {
    content: url('images/chevron-left.svg');
}
.chevron-right::after {
    content: url('images/chevron-right.svg');
}

#header-nav {
    background-color: var(--wp--preset--color--primary);
    .nav-items {
        display: flex;
        flex-direction: row;
        gap: 3rem;
        padding: 1rem 8rem;
        width: 100%;
        color: var(--wp--preset--color--white);
        text-transform: uppercase;
        justify-content: flex-start;
        text-align: center;
        align-items: center;
        overflow: hidden;
        position: relative;
        @media screen and (max-width: 1024px) {
            padding: 1rem 5rem;
        }
        .item {
            width: 12rem;
            z-index: 5;
            display: contents;
            white-space: nowrap;

            a {
                position: relative;
                z-index: 6;
            }
            &.selected {
                font-style: italic;
                font-weight: 800;
            }
            &.hidden {
                display: none;
            }
        }
        .cover {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to right, transparent 0 75%, var(--wp--preset--color--primary) 90% 100%);
            z-index: 10;
            pointer-events: none;
        }
    }
    .nav-arrows {
        display: flex;
        justify-content: space-between;
        padding: 0 3rem;
        z-index: 15;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        @media screen and (max-width: 767px) {
            padding: 0 1rem;
        }
        a {
            cursor: pointer;
        }
    }
}