/*
Theme Name: Three29 FSE
Theme URI: https://three29.com/
Author: Three29
Author URI: https://three29.com/
Description: Three29 FSE Theme
Requires at least: 5.8
Tested up to: 5.9
Requires PHP: 5.7
Version: 0.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: three29-fse
Tags:
*/

@import "https://use.typekit.net/omg0viw.css";

/* GLOBAL */
.wp-site-blocks{
    padding-bottom: 0 !important;
}
.wp-site-blocks > .wp-block-group{
    margin-block-start: 0;
}
.wp-element-button.wp-element-button.has-contrast-color{
    transition: background-color 0.3s ease-in, color 0.3s ease-in;
    border-color: var(--wp--preset--color--contrast) !important;
}
.wp-element-button.has-contrast-color:hover, .wp-element-button.has-contrast-color:focus{
    background-color: var(--wp--preset--color--contrast) !important;
    color: var(--wp--preset--color--base) !important;
}

/* Restore text highlight in Gutenberg editor */
.editor-styles-wrapper *::selection {
    background: #cce7ff !important; /* or any color */
    color: inherit;
}

.editor-styles-wrapper *::-moz-selection {
    background: #cce7ff !important;
    color: inherit;
}


/**************************** HEADER ****************************/
header{
    position: absolute;
    top: 0;
    width: 100%;
    padding-top: 1rem;
    z-index: 10;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent);
}


/**************************** FOOTER ****************************/
footer{
    margin-top: 0;
}
.borges-footer__contact-button{
    flex-shrink: 0;
}
.borges-footer .wp-element-button{
    transition: background-color 0.3s ease-in, color 0.3s ease-in;
    border-color: var(--wp--preset--color--accent-green) !important;
}
.borges-footer .wp-element-button:hover, .borges-footer .wp-element-button:focus{
    background-color: var(--wp--preset--color--accent-green) !important;
}
.footer-link a{
    color: var(--wp--preset--color--base);
    text-decoration: none;
}
.borges-footer-contact__info > .wp-block-group{
    align-items: flex-start;
}
.borges-footer-socials{
    gap: 0.75rem;
}
.borges-footer-socials img{
    transition: filter 0.3s;
}
.borges-footer-socials img:hover{
    filter: saturate(0) brightness(0) invert(67%) sepia(38%) saturate(360%) hue-rotate(39deg) brightness(92%) contrast(90%);
}
.thin-separator{
    border-bottom: none;
}
.borges-footer-contact__info__content{
    margin-top: -6rem;
    margin-bottom: 6rem;
}

/**************************** HERO HEADER ****************************/
.hero-header{
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
/* menu minimum height: 21.4rem */
.hero-header img{
	min-height: 21.4rem;
	object-fit: cover;
}


/**************************** EXPERTISE ****************************/
.expertise-menu{
    margin-block-start: 0;
    padding: 0;
}
.expertise-menu a{
    padding: 2rem 1rem;
    transition: background-color 0.3s;
}
.expertise-menu a:hover{
    text-decoration: none;
    background-color: var(--wp--preset--color--primary);
}
.expertise-toggle{
    position: relative;
}
.expertise-toggle__icon{
    transition: transform 0.3s;
    position: relative;
    top: -1px;
    height: 8px;
    width: 13px;
}
.expertise-toggle__icon.--open{
    transform: rotateX(180deg);
}


/**************************** IMAGE PATTERNS ****************************/
.image-with-caption p{
    margin-top: 0;
}
.fifty-fifty img{
    width: 100% !important;
}
.fifty-fifty figure > div{
    width: 100% !important;
    height: auto !important;
}
.image-full-width img{
    max-height: 40rem;
    object-fit: cover;
}
.image-row > .wp-block-group{
    align-items: stretch;
}
.image-row__image{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.image-row__image figure{
    flex-basis: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.image-row__image img{
    width: 100%;
    object-fit: cover;
    height: 100%;
}
.image-row__image p{
    margin-right: 0 !important;
}


/**************************** START YOUR PROJECT ****************************/
.start-your-project .wp-element-button{
    transition: background-color 0.3s ease-in, color 0.3s ease-in;
    border-color: var(--wp--preset--color--accent-green) !important;
}
.start-your-project .wp-element-button:hover, .start-your-project .wp-element-button:focus{
    background-color: var(--wp--preset--color--accent-green) !important;
}


/**************************** PORTFOLIO ****************************/
.portfolio-display > .wp-block-group{
    display: grid;
}
.portfolio-display img{
    width: 100%;
    object-fit: cover;
    aspect-ratio: 716/480;
}

.team-members > .wp-block-group{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    max-width: 1000px;
    margin: auto;
}
.team-members__member p:nth-child(2){
    margin-bottom: -0.5rem !important;
}


/**************************** CONTACT ****************************/
.contact-form .gfield_label{
    text-align: right;
    text-transform: uppercase;
}
.contact-form .ginput_container{
    padding-left: 1rem;
}
.gform_body input, .gform_body textarea{
    font-family: var(--wp--preset--font-family--freight-sans-pro) !important;
    border: 1px solid var(--wp--preset--color--contrast) !important;
    border-radius: unset !important;
}
.gform_button{
    background-color: transparent;
    border: 1px solid var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--contrast);
    font-family: var(--wp--preset--font-family--freight-sans-pro);
    font-weight: bold;
    font-size: 1rem;
    text-transform: uppercase;
    transition: background-color 0.3s, color 0.3s;
    cursor: pointer;
    padding: 0.25rem 1.333rem;
    margin-left: 1rem;
    letter-spacing: 2px;
}
.gform_button:hover{
    background-color: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base);
}
.contact-information a{
    text-decoration: none;
}
.contact-information a:hover{
    text-decoration: underline;
}


/**************************** MEDIA QUERIES ****************************/
@media (min-width: 768px) {
    .gallery-two-top img{
        aspect-ratio: 716/480;
        width: 100%;
        object-fit: cover;
    }
    .hero-header img{
        min-height: 35rem;
    }
}

@media (min-width: 961px) {
    .expertise-toggle-container{
        display: none !important;
    }
    .expertise-menu nav{
        margin-block-start: 0;
        display: flex !important;
    }
    .expertise-introduction.wp-block-group{
        max-width: 50% !important;
        margin-left: 0 !important;
    }
    .portfolio-display > .wp-block-group{
        grid-template-columns: 1fr 1fr;
    }
    .hero-header img{
        min-height: 50rem;
    }
    .borges-header > .wp-block-group{
        align-items: flex-start;
    }
}

@media (min-width: 1200px){
    .borges-header .custom-nav-bar{
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
        padding-left: 0 !important;
    }
}

@media (max-width: 960px) {
    /*.wp-block-columns {*/
    /*    flex-wrap: wrap !important;*/
    /*}*/
    /*.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {*/
    /*    flex-basis: 100%;*/
    /*}*/

    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none;
    }

    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex;
    }
    .borges-footer-contact__info__content{
        margin-top: -2rem;
        margin-bottom: 2rem;
    }
}

@media (max-width: 960px) {
    .hide-on-mobile {
        display: none !important;
    }

    .borges-header img{
        width: 15rem;
    }

    .custom-nav-bar {
        flex-grow: 1;
        justify-content: end;
    }

    .has-modal-open{
        overflow-y: initial !important;
    }
    .wp-block-navigation__responsive-container-close{
        top: 1rem;
        right: 1.75rem;
    }

    .custom-nav-bar nav{
        position: static;
    }
    .custom-nav-bar .wp-block-navigation__responsive-container{
        position: absolute;
        top: 0;
        background-color: rgba(0, 0, 0, 0.5) !important;
        height: fit-content;
        padding-top: 2.5rem;
        color: white !important;
        padding-left: 0;
        padding-right: 0;
        min-height: 35rem;
        box-sizing: border-box;
    }
    .custom-nav-bar .wp-block-navigation__container{
        width: 100%;
        gap: 0 !important;
    }
    .custom-nav-bar .wp-block-navigation__container li{
        text-align: center;
        width: 100%;
    }
    .custom-nav-bar .wp-block-navigation__container li a{
        width: 100%;
        padding: 1rem 0.5rem !important;
    }
    .custom-nav-bar li.wp-block-navigation-item.wp-block-navigation-link:nth-child(even){
        background: rgba(0, 0, 0, 0.5) !important;
    }
    .has-modal-open .wp-block-navigation__responsive-container-open{
        display: none;
    }

    .expertise-toggle-container{
        width: 100%;
    }
    .expertise-menu{
        display: flex;
        flex-direction: column;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        position: relative;
    }
    .expertise-menu nav{
        max-width: unset !important;
        width: 100%;
        margin-top: 0;
        background-color: var(--wp--preset--color--secondary);
        position: absolute;
        top: 100%;
        display: none;
    }
    .expertise-menu nav ul{
        flex-direction: column;
        gap: 0;
    }
    .expertise-menu nav ul li{
        width: 100%;
        justify-content: center;
    }
    .expertise-menu nav ul li:nth-child(odd){
        background-color: var(--wp--preset--color--secondary-dark);
    }
    .expertise-menu nav ul li a{
        width: 100%;
        padding: 1rem 2rem;
        text-align: center;
    }
    .team-members > .wp-block-group{
        grid-template-columns: 1fr;
        margin-bottom: clamp(1.5rem, 5vw, 2rem);
    }
    .team-members__member{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .team-members__member figure img{
        max-width: 30rem;
    }
    .contact-form{
        width: 100%;
        flex-basis: 100%;
    }
    .contact-form-section > .wp-block-group{
        flex-direction: column;
    }
    .contact-form .gfield_label{
        width: 100% !important;
        text-align: left;
    }
    .contact-form .ginput_container{
        width: 100% !important;
        padding-left: 0;
    }
    .image-row > .wp-block-group{
        flex-direction: column;
    }
    .fifty-fifty-statement > .wp-block-group{
        flex-direction: column;
    }
    .image-half-width > .wp-block-group > .wp-block-group{
        flex-basis: 100%;
    }
    .fifty-fifty{
        flex-direction: column;
    }
    .fifty-fifty .wp-block-button, .fifty-fifty .wp-block-button a, .single-button .wp-block-button, .single-button .wp-block-button a, .fifty-fifty > .wp-block-group{
        width: 100%;
    }
    .start-your-project{
        flex-direction: column;
        text-align: center;
    }
    .gform_footer{
        padding: unset !important;
        margin-top: 1rem !important;
    }
    .gform_button{
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 768px) {
    /* menu minimum height: 21.4rem */
    .custom-nav-bar .wp-block-navigation__responsive-container{
        min-height: 21.4rem;
    }
    .borges-header img{
        width: 12rem;
    }
    .gallery-two-top{
        flex-wrap: wrap !important;
    }
    .gallery-two-top > .wp-block-group{
        flex-basis: unset;
    }
    
    .borges-footer{
        padding-top: 2rem;
    }
    .borges-footer-contact{
        flex-direction: column;
    }
    .borges-footer-contact__info{
        order: 2;
        width: 100%;
    }
    .borges-footer-contact__info hr{
        margin-top: 0 !important;
    }
    .borges-footer-contact__info > .wp-block-group{
        justify-content: center !important;
    }
    .borges-footer-contact__logo{
        order: 1;
    }
    .borges-footer-contact__info__content{
        display: none !important;
    }
    .borges-footer-socials{
        justify-content: center;
    }

}