/* Import CSS files in order */
@import url('reset.css');
@import url('base.css');
@import url('color.css');
@import url('typography.css');
@import url('component.css');

:root{
    --section-padding:5rem;
    --header-height: 8rem;
    --header-shrink: 6rem;

    --border-width: .2rem;
    
}
@media(width < 1200px){
    :root{
        --section-padding:var(--gutter);
        --header-height: 6rem;
    }   
}

/* Border */
.border-primary{border: var(--border-width) solid var(--primary);}
.border-secondary{border: var(--border-width) solid var(--secondary);}

body{
    background-color: var(--body-color);
    overflow-x: hidden;
}

/* Header */
header{height: var(--header-height); display: flex; align-items: center; background-color: white; position: relative; z-index: 9999;}
header.position-fixed{position: fixed; left: 0; top: 0; width: 100%; z-index: 9999;}
header.position-fixed + *{margin-top: var(--header-height);}
header > .container{display: flex; gap: 0 1rem;}
header > .container > *{height: calc(var(--header-height) - 1.8rem); align-items: center; border-radius: var(--border-radius);}
header > .container > nav{display: flex; flex: 1 0 0%; padding: 0 4.4rem; background-color: var(--grey);}
header > .container > .logo{padding: 0 2.4rem; display: flex; background-color: var(--grey);}
.logo img{max-width: 24rem;}
nav{display: flex; align-items: center; gap: 0 5rem;}
nav a{font-family: var(--PPSupplySans-Regular); font-size: 1.9rem; text-transform: uppercase; display: flex; align-items: center; gap: 0 1rem; line-height: 1; color: var(--text-color); white-space: nowrap;}
nav a::before{width: 1.3rem; aspect-ratio: 1; content: ""; background-color: var(--text-color);}
nav a.active{color: var(--primary);}
nav a.active::before{background-color: var(--primary);}
header .button{background-color: var(--secondary); color: white; padding: 0 3rem; font-family: var(--PPSupplyMono-Medium); text-transform: uppercase; line-height: 1; display: flex;}

@media(width < 1600px){
    header > .container > nav{padding: 0 var(--gutter);}
    nav{gap: 0 3rem;}
    nav a{font-size: 1.6rem;}
    nav a::before{width: 1rem;}
    .logo img{max-width: 18rem;}
}
@media(width < 1400px){
    nav{gap: 0 2rem;}
    nav a{font-size: 1.5rem;}
    header > .container > .logo{padding: 0 1.8rem;}
    .logo img{max-width: 15rem;}
    header .button{padding: 0 2rem;}
}
@media(width < 1200px){
    header > .container > .logo{margin-right: auto;}
    nav{position: fixed; left: 0; top: 0; width: 100%; flex-direction: column; justify-content: center; transition: var(--transition); opacity: 0; visibility: hidden; pointer-events: none;}
    nav a{height: 5rem; font-size: clamp(2.2rem, 3rem, 20vw);}
    nav.active{opacity: 1; visibility: visible; pointer-events: auto;}
    header > .container > nav{height: 100dvh; border-radius: 0 0 var(--border-radius) var(--border-radius);}
    nav a::before{display: none;}
}

/* Hero Section */
.hero-section{min-height: calc(100dvh - var(--header-height)); display: flex;}
.hero-section .container{display: flex; padding-bottom: 1rem;}
.hero-banner{border-radius: var(--border-radius); flex: 1 0 0%; background: url(../images/hero-banner.jpg) left center no-repeat; background-size: cover; padding: 4rem; display: flex; align-items: flex-end; justify-content: flex-end;}
.hero-banner-content{background-color: var(--secondary); border-radius: var(--border-radius); padding: 3rem; flex: 1 0 0%; max-width: 54rem; color: white; box-shadow: .8rem .8rem 1.2rem rgba(0,0,0,16%);}
.hero-banner-content .btn{margin-top: 5rem;}
@media(width < 1200px){
    .hero-banner{padding: var(--gutter);}
    .hero-banner-content .btn{margin-top: var(--gutter);}
}

/* Main */
main{padding: var(--section-padding) 0;}

/* Section */
.section{padding: var(--section-padding) 0;}

/* Section Header */
.section-header:not(:last-child){margin-bottom: var(--lg);}
.section-header h2:not(:last-child){margin-bottom: var(--md);}
@media(width < 1200px){
    .section-header:not(:last-child){margin-bottom: var(--md);}
    .section-header h2:not(:last-child){margin-bottom: var(--sm);}
}
@media(width < 992px){
    .section-header:not(:last-child){margin-bottom: var(--sm);}
    .section-header h2:not(:last-child){margin-bottom: var(--gutter);}
}

.who-we-are{min-height: 55rem; display: flex; flex-direction: column; justify-content: space-between;}
@media(width < 1400px){
    .who-we-are{min-height: auto;}
}

.services > :not(:last-child){margin-bottom: 2rem;}
.service {
    border-radius: calc(var(--border-radius) * 2);
    border: var(--border-width) solid var(--secondary);
    padding: var(--md);
    display: flex;
    align-items: center;
    gap: 0 var(--md);
}
.service figure img{width: var(--xl);}
@media(width < 1200px){
    .service{gap: var(--gutter); padding: var(--gutter); border-radius: var(--border-radius);}
    .service figure img{width: 10rem;}
}
@media(width < 768px){
    .service{flex-direction: column; align-items: flex-start;}
    .service figure img{width: 8rem;}
}

.page-banner {
    height: 60rem;
    border: var(--border-width) solid var(--primary);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    overflow: hidden;
}
.page-banner-chisiamo {background-image: url('../images/img-chisiamo-2.jpg');}
.page-banner-home {background-image: url('../images/img-home1.jpg');}


@media(width < 1200px){
    .page-banner{height: 50rem;}
}
@media(width < 992px){
    .page-banner{height: 40rem;}
}
@media(width < 768px){
    .page-banner{height: 30rem;}
}

.resale{min-height: 91.6rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem;}
.resale-image {
    overflow: hidden;
    border-radius: var(--border-radius);
    border: var(--border-width) solid var(--secondary);
}
.resale-image img{object-fit: cover; width: 100%; height: 100%;}
.resale-content{background-color: var(--secondary); border-radius: var(--border-radius); padding: var(--gutter);}
@media(width < 1200px){
    .resale{min-height: 70rem;}
}
@media(width < 992px){
    .resale{grid-template-columns: 1fr; min-height: auto;} 
    .resale-image{aspect-ratio: 1;}
}

.partners-list.partners-list-primary{border-top: .1rem solid var(--primary);}
.partners-list.partners-list-primary li:not(:last-child){border-bottom: .1rem solid var(--primary);}
.partners-list.partners-list-secondary{border-top: .1rem solid var(--secondary); border-bottom: .1rem solid var(--secondary);}
.partners-list.partners-list-secondary li:not(:last-child){border-bottom: .1rem solid var(--secondary);}
.partners-list li {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    padding: var(--gutter) 0;
    gap: 0 var(--gutter);
}

    .partners-list li h5,
    .partners-list li p {
        text-align: left;
    }

    .partners-list li a {
        text-align: right;
        justify-self: end;
    }
.partners-list.partners-list-secondary li > *{color: var(--secondary);}
.partners-list li h5{position: relative; padding-left: 2rem;}
.partners-list li h5::before{position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: .6rem; aspect-ratio: 1; content: "";}
.partners-list.partners-list-secondary li h5::before{background-color: var(--secondary);}
@media(width < 576px){
    .partners-list li{padding: calc(var(--gutter) / 2) 0; flex-direction: column; align-items: flex-start;}
}

/* Footer */
footer{padding: var(--section-padding) 0;}
footer .container > :not(:last-child){margin-bottom: var(--gutter);}
.footer-grid{display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--gutter);}
.footer-logo{margin-top: 25rem;}
.extra-footer ul {
    display: flex;
    justify-content: space-between;
    color: var(--secondary);
}
.extra-footer a {
    color: var(--secondary);
}
@media(width < 992px){
    .extra-footer ul {
        flex-direction:column;
        gap:calc(var(--sm)/3);
    }
}
@media(width < 1200px){
    .footer-logo{margin-top: 20rem;}
}
@media(width < 992px){
    .footer-logo{margin-top: var(--gutter);}
}
.footer-grid h2.before{position: relative; padding-left: 5rem;}
.footer-grid h2.before::before{position: absolute; left: 0; top: 50%; transform: translateY(-50%); content: ""; width: 1.2rem; aspect-ratio: 1;}
.footer-grid h2.before.secondary::before{background-color: var(--secondary);}
footer .buttons:not(:first-child){margin-top: var(--md);}
footer p span{display: inline-block; padding-left: 2.5rem; position: relative;}
footer p span::before{position: absolute; left: 0; top: .6rem; width: 1rem; aspect-ratio: 1; content: "";}
footer p.primary span::before{background-color: var(--primary);}
@media(width < 1200px){
    footer .buttons:not(:first-child){margin-top: var(--sm);}
    .footer-grid h2.before{padding-left: var(--gutter);}
}
@media(width < 992px){
    footer .buttons:not(:first-child){margin-top: var(--gutter);}
    .footer-grid{display: grid; grid-template-columns: 1fr;}
    .footer-grid br{display: none;}
    .footer-grid > .text-right{text-align: left !important;}
}

.page-hero{min-height: 56.6rem; background-size: cover; background-repeat: no-repeat; background-position: center center; position: relative; padding: var(--sm); display: flex; align-items: flex-end; isolation: isolate; border-radius: var(--border-radius);}
.page-hero-chisiamo{background-image: url(../images/chisiamo-banner.jpg);}
.page-hero-servizi{background-image: url(../images/servizi-banner.jpg);}
.page-hero-vendita{background-image: url(../images/vendita-banner.jpg);}
.page-hero-promozioni{background-image: url(../images/promozioni-banner.jpg);}
.page-hero-partners{background-image: url(../images/partners-banner.jpg);}
.page-hero-contatti{background-image: url(../images/contatti-banner.jpg);}
.page-hero::after{position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; background-color: rgba(25,23,23,33%); z-index: -1; border-radius: inherit;}  
.page-hero-content{padding-top: var(--md);}
@media(width < 1200px){
    .page-hero{min-height: 46rem;}
}
@media(width < 992px){
    .page-hero{min-height: 36rem;}
}
@media(width < 768px){
    .page-hero{min-height: 26rem;}
}

.article-content-box h2:not(:last-child){margin-bottom: var(--md);}
@media(width < 1200px){
    .article-content-box h2:not(:last-child){margin-bottom: var(--sm);}
}
@media(width < 992px){
    .article-content-box h2:not(:last-child){margin-bottom: var(--gutter);}
}

.border-list li{padding: var(--gutter) 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem var(--gutter); border-bottom: .1rem solid var(--secondary);}
.border-list li h5{color: var(--secondary);}
.border-list li p{color: var(--secondary);}
.bg-secondary .border-list li{border-color: white;}
.bg-secondary .border-list li h5{color: white;}
.bg-secondary .border-list li p{color: white;}
.who-we-are .border-list:not(:first-child), .who-we-are .grid:not(:first-child){margin-top: var(--xl);}
.bullet{position: relative; padding-left: 1.5rem;}
.bullet::before{position: absolute; left: 0; top: 50%; transform: translateY(-50%); content: ""; width: .5rem; aspect-ratio: 1; content: ""; background-color: white;}
@media(width < 1200px){
    .who-we-are .border-list, .who-we-are .grid:not(:first-child){margin-top: var(--lg);}
}
@media(width < 992px){
    .who-we-are .border-list, .who-we-are .grid:not(:first-child){margin-top: var(--md);}
}
@media(width < 768px){
    .who-we-are .border-list, .who-we-are .grid:not(:first-child){margin-top: var(--sm);}
    .border-list li{flex-direction: column; align-items: flex-start; padding: 1.5rem 0;}
}

.service-content-more{padding-top: var(--sm);}
.accordian-button {
    width: 4rem;
    aspect-ratio: 1;
    border-radius: var(--border-radius);
    border: var(--border-width) solid var(--secondary);
    position: relative;
    cursor: pointer;
}
.accordian-button::before, .accordian-button:after{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); content: ""; background-color: var(--primary);}
.accordian-button::before{width: .2rem; height: 1.8rem;}
.accordian-button::after{width: 1.8rem; height: .2rem;}
.service-content-more{display: none;}
.service.active .accordian-button::before{display: none;}

.who-we-are .grid{gap: 0 var(--lg);}
@media(width < 1200px){
    .who-we-are .grid{gap: 0 var(--md);}
}
@media(width < 992px){
    .who-we-are .grid{gap: 0 var(--sm);}
}

.partners-list{border-top: .1rem solid var(--secondary);}
.partners-list li a.primary{color: var(--primary) !important;}

.map {
    height: 60rem;
    border: var(--border-width) solid var(--primary);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.map iframe {
    width: 100%;
    height: 100%;
}


@media(width < 1200px){
    .map{height: 50rem;}
}
@media(width < 992px){
    .map{height: 40rem;}
}