/*--------------------------------------------------------------
	0. Global
--------------------------------------------------------------*/
html {
    scroll-behavior: smooth;
}
body{
	background: var(--color-light-grey);
	--container-size: 100%;
	--wp--preset--font-size--small: 1.4rem;
	--wp--preset--font-size--normal: 1.6rem;
	--wp--preset--font-size--medium: 1.8rem;
	--wp--preset--font-size--large: 2rem;
	--wp--preset--font-size--x-large: 3rem;
	
	 font-family: "Lato", sans-serif;
	 font-size: var(--wp--preset--font-size--normal);
	 color: var(--color-dark-grey);
}

@media (min-width: 600px) {
	body{--container-size: 540px;}
}
@media(min-width: 782px){
	body{
		--wp--preset--font-size--medium: 1.8rem;
		--wp--preset--font-size--large: 2.5rem;
		--wp--preset--font-size--x-large: 3.25rem;
		--container-size: 768px;
	}
}
@media(min-width: 992px){
	body{
		--container-size: 960px;
		--wp--preset--font-size--large: 3rem;
		--wp--preset--font-size--x-large: 3.5rem;
	}
}
@media(min-width: 1280px){
	body{
		--wp--preset--font-size--medium: 2rem;
		--wp--preset--font-size--large: 3.5rem;
		--wp--preset--font-size--x-large: 4.5rem;
		--container-size: 1200px;
	}
}
@media (min-width: 1440px){
	body{
		--container-size: 1400px;
		--wp--preset--font-size--x-large: 5rem;
	}
}

#primary{padding-bottom: 0; position: relative;}

section:not(#primary):not(#header):not(#top-bar){padding-top: 50px; padding-bottom: 50px;}
p{line-height: 1.4;}
a{color: inherit;}

h1, .h1{font-size: var(--wp--preset--font-size--x-large); font-weight: 300; font-family: "Lato", sans-serif; margin-bottom: 0; margin-top: 0;}
h2, .h2{font-size: var(--wp--preset--font-size--large); font-weight: 300; font-family: "Lato", sans-serif; margin-bottom: 0; margin-top: 15px;}
h3, .h3{font-size: var(--wp--preset--font-size--medium); font-weight: 700; font-family: "Lato", sans-serif;}

b, strong{font-weight: bold;}
.btn, button, input.submit, .frm_button_submit, .wp-block-button__link{text-transform: none; font-size: var(--wp--preset--font-size--normal); margin-bottom: 0; }

.wp-block-buttons>.wp-block-button.is-style-outline .wp-block-button__link{background-color: transparent; border-color: inherit;}

.suptitle{font-weight: 400;}
.suptitle + p{margin-top: 8px;}

.content-area{
	width: var(--container-size);
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
	display: block;
	position: relative;
	max-width: unset !important;
}
@media(min-width: 782px){
	.content-area{padding-left: 0; padding-right: 0;}	
	.alignfull img {width: 100%;}
}

@media(min-width: 1280px){
	section:not(#primary):not(#header):not(#top-bar){padding-top: 80px; padding-bottom: 80px;}
}

#primary .entry-content > section.has-background + .wp-block-cover, #primary .entry-content > section.has-background + .wp-block-columns{margin-top: 0;}

/****	0.1. Hack Gutenberg		****/
.entry-content .alignfull {
	margin-left  : calc( -100vw / 2 + 100% / 2 );
	margin-right : calc( -100vw / 2 + 100% / 2 );
	max-width    : 100vw;
	width: 100vw;
}
.aligncenter{margin-left: auto; margin-right: auto; text-align: center;}

:where(.is-layout-flex) {gap: 1em;}

.wp-block-cover.alignfull > .wp-block-cover__inner-container,
.wp-block-group.alignfull > .wp-block-group__inner-container,
.wp-block-cover.alignwide > .wp-block-cover__inner-container,
.wp-block-group.alignwide > .wp-block-group__inner-container{width: var(--container-size); margin-right: auto; margin-left: auto; padding-right: 15px; padding-left: 15px;}

.wp-block-media-text>.wp-block-media-text__content{padding: 8% 0;}


@media (min-width: 782px){
	.entry-content .alignfull {width: calc( 100vw - 9px);}
	.wp-block-cover.alignfull > .wp-block-cover__inner-container,
	.wp-block-group.alignfull > .wp-block-group__inner-container{padding-left: 0; padding-right: 0;}
	
	.wp-block-media-text>.wp-block-media-text__content{padding: 0 8%;}
	.wp-block-media-text.has-media-on-the-right>.wp-block-media-text__content{padding-left: 0;}
	.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media{margin-bottom: 0;}
	
	:where(.is-layout-flex) {gap: 1em;}
}
@media (min-width: 992px){
	:where(.is-layout-flex) {gap: 2em;}
}
@media (min-width: 1280px){
	:where(.is-layout-flex) {gap: 4em;}
}

/*--------------------------------------------------------------
	1. Navbar
--------------------------------------------------------------*/
header{position: sticky; top: 0; padding: 15px; height: auto;  
	background: var(--color-light-grey);
	-webkit-box-shadow: none;
    -khtml-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
}
header.sticky{height: auto;}


header #navbar{flex-direction: row-reverse;}
header #navbar .navbar-nav{width: auto; flex-basis: auto; text-align: unset;}
header #navbar .navbar-brand{height: auto; width: 250px}
header.sticky #navbar .navbar-brand{height: auto;}

header #navbar nav{font-weight: 400; font-family: "Lato", sans-serif; background: var(--color-light-grey); top: 100%; left: 0; right: unset; width: 100vw;}
header #navbar nav a{font-size: 1.4rem; position: relative; color: var(--color-dark-grey);}
header #navbar nav ul > li{border-bottom: 1px solid var(--color-red); text-align: center;}
header #navbar nav ul > li:last-child{border-bottom: 0;}
header #navbar nav li.active > a{color: inherit;}

header #navbar .nav-toggle{margin-left: 0; background: var(--color-red); float: unset; border-radius: 10px;}
header #navbar .nav-toggle > span{background: var(--color-white);}

@media (min-width: 782px) {
	header{padding: 15px 25px;}
	header #navbar nav{background: transparent; width: auto;}
    header #navbar nav ul > li{padding: 0; text-align: left; border: 0;}
	header #navbar nav li:not(:last-child):after{margin: 0 40px;}
	
	header #navbar nav li > a:after{content: ""; transition: all 1s ease; height: 2px; bottom: -10px; left: 0; position: absolute; background: var(--color-red); width: 0; display: block;}
	header #navbar nav li:not(:last-child):after{content: ''; height: 10px; width: 2px; display: inline-block; background: var(--color-red);}
	header #navbar nav li.active > a:after,
	header #navbar nav li:hover > a:after{width: 100%}
}

@media(min-width: 992px){
	header #navbar nav li:not(:last-child):after{margin: 0 80px;}
}


/*--------------------------------------------------------------
	2. Header
--------------------------------------------------------------*/
ul.breadcrumb, .woocommerce #header .woocommerce-breadcrumb{margin-top: 0; margin-bottom: 25px; padding: 0; background: none;}
ul.breadcrumb:before, .woocommerce #header .woocommerce-breadcrumb:before{content: url('../images/arrow-left.svg'); margin-right: 10px; width: 20px; display: inline-block;}
ul.breadcrumb > li{font-size: var(--wp--preset--font-size--normal); color: var(--color-black); font-weight: 400;}
ul.breadcrumb > li > a, .woocommerce #header .woocommerce-breadcrumb a{color: var(--color-black);}

#header{height: auto; min-height: unset; padding: 25px 0 0;}
#header > article .header-content{color: var(--color-dark-grey); text-align: left;}
#header > article .header-content h1, #header > article .header-content .h1-like{text-transform: none; font-size: var(--wp--preset--font-size--x-large); font-weight: 300; text-wrap: pretty;}

#header .btn_project .n2-ss-button-container a > div{gap: 2em;}
#header .btn_project .n2-ss-button-container a > div .nfa-long-arrow-right{margin-left: 0 !important; font-size: inherit !important; transition: all 0.5s ease; }
#header .btn_project .n2-ss-button-container a > div .nfa-long-arrow-right:before{content: url('../images/arrow-right.svg'); display: inline-block; width: 15px;}
#header .btn_project strong{text-transform: uppercase; /* font-size: 1.2rem; */}

@media(min-width: 992px){
	#header .btn_project .n2-ss-button-container a > div{gap: 3em;}
	#header .btn_project .n2-ss-button-container a > div .nfa-long-arrow-right:before{width: 20px;}
	#header .btn_project .n2-ss-button-container:hover a > div .nfa-long-arrow-right{margin-left: 1em !important;}
}

/*--------------------------------------------------------------
	3. Pages
--------------------------------------------------------------*/
section:not(#primary):not(#header):not(#top-bar) + .wp-block-cover, 
section:not(#primary):not(#header):not(#top-bar) + .wp-block-columns{margin-top: unset;}

/****	3.1. Homepage		****/
.home #header{height: auto; min-height: unset; padding: 0;}
.home #primary{padding-top: 0;}

.home figure.wp-block-gallery.has-nested-images{flex-wrap: nowrap;}


/****	3.2. Project list		****/
#project-list{display: flex; flex-wrap: wrap; flex-direction: row; gap: 2em;}
#project-list > article{flex-basis: 100%; flex-grow: 1;}
#project-list > article figure{margin-top: 0; height: 250px}
#project-list > article figure img{height: 100%; width: 100%; object-fit: cover;}
#project-list > article a{text-decoration: none;}
#project-list > article .post-title{font-size: var(--wp--preset--font-size--medium); margin-top: 15px; font-weight: 400;}

@media(min-width: 782px){
	#project-list > article{flex-basis: calc(50% - 2em); flex-grow: 0;}
}
@media(min-width: 992px){
	/* #project-list{gap: 4em;} */
	#project-list > article{flex-basis: calc((100% / 3) - 3em);}
}

/****	3.3. Project Details		****/
.single-project{}
.single-project #primary{padding-top: 0;}
.single-project #project-content{display: flex; gap: 1em; flex-wrap: nowrap; flex-direction: column;}
.single-project #project-content > *{
	/* overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    height: 100%; */
	
}
.single-project #project-content #project-details,
.single-project #project-content #project-gallery{flex-basis: 100%;}

.single-project #project-content #project-details h1{margin-bottom: 25px; line-height: 1.2;}
.single-project #project-content #project-details #project-excerpt{font-weight: bold; margin-bottom: 25px;}
.single-project #project-content #project-details table{border: 0; margin-bottom: 0; table-layout: auto;}
.single-project #project-content #project-details table tr:not(:last-child){border-bottom: 1px solid var(--color-black);}
.single-project #project-content #project-details table th,
.single-project #project-content #project-details table td{border: 0; padding-left: 0;}
.single-project #project-content #project-details table td{padding-right: 0;}

.single-project #project-content #project-gallery{display: flex; flex-direction: column; gap: 1em;}
.single-project #project-content #project-gallery figure{margin-top: 0; width: 100%; flex-basis: 100%; flex-grow: 1;}
.single-project #project-content #project-gallery .project-gallery-small{column-count: 2; column-gap: 1em;}
.single-project #project-content #project-gallery .project-gallery-small > figure{ break-inside: avoid; margin-bottom: 1em;}


@media(min-width: 992px){
	.single-project #project-content{flex-direction: row; gap: 2em;}
	.single-project #project-content #project-details{flex-basis: 30%; position: sticky; position: -webkit-sticky; top: 90px; align-self: flex-start;}
	.single-project #project-content #project-gallery{flex-basis: 70%;}
}

/*--------------------------------------------------------------
	4. Footer
--------------------------------------------------------------*/
footer{background: transparent; color: var(--color-dark-grey);}
footer a{text-decoration: none;}
footer .has-medium-font-size strong{color: var(--color-black);}

footer #footer-menu{background: transparent; color: var(--color-dark-grey); font-size: var(--wp--preset--font-size--small);}
footer #footer-menu a, footer #footer-menu .onktc{color: var(--color-dark-grey);}
footer #footer-menu ul > li:after{color: var(--color-red);}
footer #footer-menu .content-area{border-top: 2px solid var(--color-red); display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 25px; padding-bottom: 25px;}
footer #footer-menu .content-area nav{text-align: center;margin-bottom: 25px;}
footer #footer-menu img{max-width: 250px;}

@media(min-width: 782px){
	footer #footer-menu .content-area{flex-direction: row; justify-content: space-between;}
	footer #footer-menu .content-area nav{text-align: left; margin-bottom: 0;}

}