/*
Theme Name: Neves Arquitetura
Theme URI: https://nevesarquitetura.com.br
Author: EF/DESIGN
Author URI: https://efdesign.com.br
Description: Tema feito sob medida para o site da Neves Arquitetura.
Tested up to: 7.3
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: nevesarq
*/

:root{

    --primary-color: #8BAABC;
    --second-color: #5F636F;
    --black-color: #000000;
    --white-color: #ffffff;
    --gray-color: #70707050;
    --gray2-color: #5D5D5D;

}

@import url('https://fonts.cdnfonts.com/css/tenorite');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Tenorite', sans-serif;
    max-width: 1920px;

    --container-width: 1388px;
}

body, html{
    overflow-x: hidden;
}

html{
    margin: 0 auto;
}

header#header,
#content.site-content,
footer#footer{
    margin: 0 auto;
}

/* Header */
.wrapper-header{
    background-color: var(--second-color);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 25px 0;
}

header#header .custom-logo{
    width: 200px;
    height: auto;
}

/* Footer */
footer#footer{
    width: var(--container-width);
    margin-top: 40px;
}

.copyright{
    border-top: 1px solid var(--gray-color);
    padding: 20px 15px;
}

.copyright p{
    color: var(--second-color);
    font-weight: 600;
    font-size: 14px;
    max-width: 100vmin;
}

/* Home */
.wrapper-slider img{
    max-width: 1920px;
    width: 100vmax;
}

.info-content{
    background-color: #5F636F80;
    padding: 15px;
    width: 400px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.info-content span.badge{
    background-color: var(--primary-color);
    color: var(--white-color);
    width: fit-content;
    padding: 5px;
    font-size: 12px;
    font-weight: 700;
    position: relative;
    left: 230px;
}

.info-content h2.title-project{
    color: var(--white-color);
    font-size: 36px;
}

.info-content p.info-project{
    color: var(--primary-color);
    font-size: 24px;
    font-weight: 700;
}

.info-content h4.readmore a{
    color: var(--white-color);
    text-decoration: none;
}

section.portfolio{
    background-color: var(--primary-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.wrapper-section-portfolio{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px 0;
    gap: 20px;
    width: var(--container-width);
    text-align: center;
}

h2.title-portfolio{
    color: var(--white-color);
    font-weight: 100;
    font-size: 42px;
    max-width: 100vmin;
    margin-bottom: -25px;
}

p.text-portfolio{
    color: var(--second-color);
    font-size: 30px;
    max-width: 100vmin;
}

span.badge-portfolio{
    color: var(--primary-color);
    background-color: var(--white-color);
    padding: 5px 15px;
    font-size: 28px;
    margin-top: 60px;
    margin-bottom: 20px;
}

p.cantfindanything{
    color: var(--white-color);
}

.wrapper-portfolio{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-row-gap: 20px;
    grid-column-gap: 20px;
}

.wrapper-portfolio a{
    text-decoration: none;
}

.reveal {
    position: relative;
	transform: translateY(150px);
	opacity: 0;
	transition: all 1s ease;
}
.reveal.active {
	transform: translateY(0px);
	opacity: 1;
}

.wrapper-portfolio .post{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
	max-width: 100vw;
}
@media (max-width: 1024px) {
	.wrapper-portfolio .post{
		align-items: center!important;
	}
	.wrapper-portfolio .post h3.post-title {
		font-size: 18px!important;
		text-align: center!important;
	}
}

.wrapper-portfolio .post img{
    transition: .3s;
}

.wrapper-portfolio .post #moredetails{
    display: none;
    opacity: 0;
    color: var(--white-color);
    transition: .3s;
    position: absolute;
    margin-top: 102px;
    z-index: 9999;
    margin-left: -232px;
}

.wrapper-portfolio .post h3.post-title {
    color: var(--white-color);
    font-size: 24px;
    margin-bottom: -4px;
    margin-top: 12px;
    text-align: left;
    font-weight: 500;
}

.wrapper-portfolio .post ul.post-categories{
    list-style: none;
}

.wrapper-portfolio .post ul.post-categories a{
    color: var(--second-color);
    font-weight: 700;
    text-decoration: none;
    pointer-events: none;
}

span#showmore{
    color: var(--white-color);
    text-align: center;
    cursor: pointer;
    font-size: 20px;
    font-weight: 600;
}

.arrow-down-showmore {
    width: 20px;
    transition: .5s;
}

span#showmore:hover .arrow-down-showmore {
    transform: translateY(5px);
    transition: .5s;
}

/* SLIDER */
section.slider{
    margin-bottom: -7px;
}

.profile-content{
    max-width: var(--container-width);
    margin: 0 auto;
    display: flex;
    padding: 30px 0;
}

.profile-text{
    width: 60%;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.profile-text h2{
    font-size: 30px;
}

.profile-text p{
    font-size: 18px;
}

.profile-contact{
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-info{
    background-color: var(--second-color);
    padding: 30px;
    color: var(--white-color);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-info h2{
    font-size: 30px;
}

.contact-info p{
    font-size: 26px;
    font-weight: 300;
}

.contact-info p img{
    position: relative;
    top: 8px;
    margin-right: 10px;
}

.contact-info .social-media{
    display: flex;
    gap: 10px;
}

.contact-info a{
    color: var(--white-color);
    text-decoration: none;
}

.contact-form{
    background-color: var(--primary-color);
    padding: 30px 40px;    
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-form h2{
    color: var(--white-color);
    font-size: 30px;
}

.contact-form input{
    outline: none;
    border: none;
    border-radius: 5px;
    padding: 10px;
}

.contact-form textarea{
    outline: none;
    border: none;
    border-radius: 5px;
    padding: 10px;
}

.contact-form input,
.contact-form textarea{
    width: 100%;
}

.contact-form input[type="submit"]{
    border-radius: 25px;
    background-color: var(--second-color);
    color: var(--white-color);
    padding: 10px 25px;
    cursor: pointer;
    width: fit-content;
}

.contact-form .wpcf7-form p{
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.contact-form form{
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.contact-form form div.inputs p{
    display: flex;
    flex-direction: row;
}

/* .contact-form input[type="text"],
.contact-form input[type="tel"]{
    width: 50%;
} */

/* Single Post */
.sec-info-project{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 0 0 0;
}

.info-project-text{
    width: 778px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: var(--second-color);
}

.info-project-text h1{
    font-weight: 100;
    font-size: 42px;
}

.info-project-text p{
    font-size: 18px;
}

.wp-block-image{
    height: 151.25px;
}

.banner-single{
    height: auto;
}

.sec-info-project .wp-block-columns.are-vertically-aligned-center.is-not-stacked-on-mobile.is-layout-flex{
    width: 778px;
}

.sec-info-project .post-navigation-link-previous.has-text-color.wp-block-post-navigation-link a,
.sec-info-project .post-navigation-link-next.has-text-align-right.has-text-color.wp-block-post-navigation-link a{
    color: var(--second-color);
    text-decoration: none;
    font-size: 24px;
}

/* Lightbox */
#swipebox-container{
    max-width: none;
}

#swipebox-slider .slide {
    background-color: var(--gray2-color);
}

#swipebox-close {
    top: 25px;
    right: 10px;
    position: absolute;
    z-index: 9999;
    background-position: 15px 12px;
}

#swipebox-slider {
    cursor: default;
}

#swipebox-bottom-bar {
    -webkit-transform: translate3d(0,-50px,0);
    transform: translate3d(0,-50px,0);
}

#swipebox-bottom-bar, #swipebox-top-bar {
    text-shadow: none;
    background: transparent;
    opacity: 1;
}

#swipebox-next,
#swipebox-prev {
    position: relative;
    top: -470px;
}

#swipebox-overlay {
    left: auto;
}

.project-contact{
    display: flex;
    gap: 10px;
    justify-content: center;
}

.project-contact .contact-info,
.project-contact .contact-form{
    width: 600px;
}

.project-contact .contact-info{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

a#voltar {
    position: absolute;
    top: 170px;
    right: 20px;
}

/* Media Queries */
@media (max-width: 1500px) {
    .wrapper-portfolio{
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .wrapper-portfolio{
        grid-template-columns: repeat(1, 1fr);
    }
    .profile-content{
        flex-direction: column;
    }
    .profile-text{
        width: 100%;
    }
    .profile-contact{
        width: 100%;
    }
    .slide-slide {
        align-items: center;
    }
    .info-content{
        width: 100%;
        padding: 20px;
        background-color: var(--second-color);
    }
    .info-content span.badge{
        font-size: 10px;
        left: auto;
    }
    .info-content h2.title-project {
        font-size: 28px;
    }
    .info-content p.info-project {
        font-size: 18px;
    }
    section.project-contact{
        flex-direction: column;
    }
    section.project-contact .contact-info,
    section.project-contact .contact-form{
        width: 100%;
    }
    .info-project-text{
        width: 100%;
    }
    .sec-info-project .wp-block-columns.are-vertically-aligned-center.is-not-stacked-on-mobile.is-layout-flex{
        width: 100%;
        padding: 10px;
    }
    .sec-info-project .post-navigation-link-previous.has-text-color.wp-block-post-navigation-link a,
    .sec-info-project .post-navigation-link-next.has-text-align-right.has-text-color.wp-block-post-navigation-link a{
        font-size: 12px;
    }
    .wp-block-post-navigation-link .wp-block-post-navigation-link__arrow-previous:not(.is-arrow-chevron),
    .wp-block-post-navigation-link .wp-block-post-navigation-link__arrow-next:not(.is-arrow-chevron) {
        transform: scaleX(0.5);
    }
    .wp-block-post-navigation-link .wp-block-post-navigation-link__arrow-previous,
    .wp-block-post-navigation-link .wp-block-post-navigation-link__arrow-next {
        margin-right: 0;
    }
    .wp-block-button__link.has-white-background-color.has-text-color.has-background.wp-element-button{
        font-size: 14px;
    }
}
@media screen and (min-width: 800px) {
    #swipebox-arrows {
        width: 96%;
        max-width: none;
    }
}
@media (min-width: 600px) {
    .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image) {
        width: calc(8.33% - var(--wp--style--unstable-gallery-gap, 16px)*.66667);
    }
}