@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
    --brand-green: #97d700 !important;
}
/****************/
/** Typography **/
/****************/
body {
    font-family: Arial, sans-serif;
}

:is(h1, h2, h3, h4, h5, h6) {
    color: var(--brand-black);
    font-family: 'Arial', sans-serif;

    :is(.bg-gray-dark &) {
        color: #FFFFFF;
    }
}

:is(.act-like-h1) {
    font-family: Arial, sans-serif;
}

:is(p, blockquote, li, dd, dt) {
    font-family: Arial, sans-serif;
}

h2.primary {
    color: var(--brand-green) !important;
}

p.subtitle {
    :is(&, .section-split &) {
        color: #000000;
        font-weight: bold;
    }
}

body :is(button) {
    &.primary {
        background-color: var(--brand-green);
        border-color: var(--brand-green);
    }
}

.sidebar {
    .sidebar-archives {
        :is(h3) {
            color: #FFFFFF;
        }

        .js-accordion-title {
            :is(.expanded &, &:hover) {
                color: #FFFFFF;
            }
        }

        .archive-months {
            li > a {
                &:hover {
                    color: #FFFFFF !important;
                }
            }
        }
    }
}

.button {
    :is(&, & *, &:hover, &:hover *) {
        text-decoration: none;
    }
    
    &.primary {
        background-color: var(--brand-green);
        border-color: var(--brand-green);

        &:hover {
            background-color: color-mix(in srgb, var(--brand-green), #000000 15%);
            border-color: color-mix(in srgb, var(--brand-green), #000000 15%);
            color: #FFFFFF !important;
        }
    }

    &.inverted {
        &:hover {
            color: #FFFFFF !important;
            background-color: var(--brand-green) !important;
            border-color: var(--brand-green) !important;
        }
    }
}

body :is(a) {
    text-decoration: none;
    color: var(--brand-green);
}

/****************/
/**   Layout   **/
/****************/
.menu-utility {
    :is(&, .menu-off-canvas &) {
        i:hover {
            color: var(--brand-green) !important;
        }
    }
}

:is(.menu-primary, .menu-secondary) {
    .menu-item {
        :is(a) {
            &:hover {
                color: var(--brand-green);
            }    
        }

        &.active {
            &::before {
                border-color: var(--brand-green);
            }

            :is(a) {
                color: #000000;
            }
        }
    }
}

.divider {
    .dash {
        background-color: var(--brand-green);
    }
}

footer {
	.brand > img {
		height: auto !important;
	}
}

/****************/
/**   Modules  **/
/****************/

/**** Banner ****/
header.banner {
    :is(h1, .act-like-h1) {
        color: var(--brand-green);
        text-shadow: none;
    }

    .slick-slide {
        h2.act-like-h1 {
            max-width: 48rem;   
        }
    }

    .subtitle {
        color: #FFFFFF;
    }
}

/*** Title Bar **/
.titlebar.blurb {
    /* text-align: left; */
    max-width: 40rem;

    .divider {
        /* justify-content: flex-start; */
    }
}

/*** Two Col ****/
.two-col {
    text-align: left;
    max-width: 40rem;

    > * {
        width: 100%;
    }
}

/** Featured Projects **/
.tile-wrap {
    h2.primary {
        color: #000000 !important;
    }

    .read-more {
        text-decoration: none;

        &:hover {
            background-color: color-mix(in srgb, var(--brand-green), #000000 15%);
            border-color: color-mix(in srgb, var(--brand-green), #000000 15%);
            color: #FFFFFF !important;
        }
    }
}

/** Slider Clients **/
.slider-clients {
    .titlebar.blurb {
        text-align: center;

        .divider {
            justify-content: center;
        }
    }
}

/*** Call to Action ***/
.tile-cta {
    &.bg-secondary-light {
        :is(h2, h3, p) {
            color: #FFFFFF;
        }
    }
}

/******* Gallery *******/
.section-gallery {
    .titlebar {
        text-align: center;
    }
}

/******** Tiles ********/
.tile-wrap-no-margin {
    .tile {
        &.tile-simple {
            &:first-child {
                .section.inner {
                    padding-left: 1em;
                    padding-right: 1em;
                }
            }
        }

        .read-more {
            text-decoration: none;

            &:hover {
                background-color: color-mix(in srgb, var(--brand-green), #000000 15%);
                border-color: color-mix(in srgb, var(--brand-green), #000000 15%);
                color: #FFFFFF !important;
            }
        }
    }
}

/**** Anchor Links ****/
.anchor-links {
    & > a {
        color: #000000 !important;
        /* text-decoration: none; */
    }
}

/*** Sponsor Wrap ***/
.slider-clients {
    margin-bottom: 3rem;
}

.slider-markets {
    :is(h2, h3, p) {
        color: #000000;
    }
}

/*** Video CTA ***/
.video-cta {
    :is(h2) {
        color: var(--brand-green);
    }
}

/******************/
/**     Pages    **/
/******************/
/******* Home ********/
body.home {
    .tile-wrap {
        .tile {
            &.tile-hover {
                .read-more-cta {
                    position: absolute;
                    bottom: 0;
                    right: 1em;
                    transform: translateY(100%);
                    font-family: "Open Sans", Arial, sans-serif;
                    background-color: var(--brand-green);
                    color: #FFFFFF;
                    padding: 5px;
                    text-transform: uppercase;
                    font-size: 12px;

                }

                a:hover {
                    .read-more-cta {
                        background-color: color-mix(in srgb, var(--brand-green), #000000 15%);
                    }
                }
            }
        }
    }
}

/***** Projects ******/
article.type-project {
    :is(h3) {
        color: #000000;

        :is(a.mention) {
            color: #000000;
            text-decoration-line: underline;
            text-decoration-color: #000000;
            transition: color, text-decoration-color 0.2s ease-in-out;

            &:hover {
                text-decoration-color: transparent;
                color: #000000 !important;
            }
        }
    }
}


/***** Products *****/
.post-type-archive-product {
    .section.promotions-page {
        .tile-promotion {
            display: flex;
            flex-direction: column;

            border-color: var(--brand-green) !important;

            .entry-summary {
                background-color: var(--brand-green) !important;
            }

            .overlay {
                flex: 1 1 auto;
                min-height: 20em;

                &::before {
                    background-color: color-mix(in srgb, var(--brand-green), transparent 50%) !important;
                }
            }
        }
        
    }
}

/****** People ******/
.post-type-archive-person {
    main.main {
       // Empty 
    }
}

/*** Capabilities ***/
.page-template-divisions.capabilities {
    main.main {
        @media (min-width: 768px) {
            & > .section.container:first-of-type {
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-auto-flow: row;
                column-gap: 2rem;

                h2 {
                    font-size: 1.875em;

                    &:first-child {
                        margin-top: 0;
                    }

                    grid-column: 1;
                }

                * {
                    grid-column: 2;
                }
            }
        }
    }
}

.single-post {
    .entry-content {
        font-family: 'Open Sans', Arial, sans-serif;

        :is(a) {
            color: #000000;
            text-decoration-line: underline;
            text-decoration-color: #000000;

            &:hover {
                text-decoration-color: var(--brand-green);
            }
        }
    }
}

/******************/
/**   Utilities  **/
/******************/
.bg-primary {
    background-color: var(--brand-green);
}