/*
Theme Name: DMT Wood Papillon Theme
Author: Danilo Maurizio Troiani
Description: Tema Custom Realizzato per Wood Papillon
Version: 1.0
Text Domain: woodpapillon
*/


:root {
    --gap-xs: .8rem;
    --gap-s: 1.6rem;
    --gap-sm:2.4rem;
    --gap-m: 3.2rem;
    --gap-mb:4.8rem;            
    --gap-b: 6.4rem;
    --gap-xb: 12.8rem;
    --ff-heading:'Playfair Display',serif,sans-serif;
    --ff-default:'Darker Grotesque',sans-serif;
}

*{box-sizing:border-box;}
p,button,a,span,nav,div{font-family:var(--ff-default)}
html,body{margin:0;padding:0}
html {font-size: 62.5% !important}
body {font-size: 1.6rem;}    
h1,h2,h3,h4,h5{font-family:var(--ff-heading);color:#1B1F24;color:#000205}
a{text-decoration:none;color:#1B1F24}
.current-menu-item{text-decoration: underline;text-underline-position: under;}
p{line-height:1.2;letter-spacing:0.01em;color:#1B1F24;color:#000205;}
.text-center{text-align:center}


/* START LAYOUT RULES */
/* width: calc((100% - (N - 1) * G) / N);  larghezza da assegnare alla card: N numero card (intese in una riga), G gap*/
.max-width {width: 100%;padding:0 1.6rem}

@media(min-width:1280px) {
    .max-width {padding-left: 4.8rem;padding-right:4.8rem;}
}
/* END LAYOUT RULES */

.button {text-decoration: none;text-align:center;background: #1B1F24;color: #fff;min-width: 200px;text-align: center;border: 1px solid #1B1F24;outline: none;font-size: 1.4rem;text-transform: uppercase;letter-spacing: 1px;display: inline-block;font-weight: 500;padding: 8px 16px;cursor: pointer;transition: background-color 0.3s;line-height:1;background:#000205;border-color:#000205}
.button-accent{background:#B17D4D;border-color:#B17D4D;background:#3665F3;border-color:#3665F3}
.button-primary{color:#F9E5CF}
.button-secondary{background:none;color:#1B1F24}
.header{background:#fff;border-radius:.8rem;width: calc(100% - 1.6rem);position: fixed;top: .8rem;z-index: 3;left: 50%;transform: translateX(-50%);box-shadow: 0px 1px 9px rgba(0, 0, 0, 0.25);}
.header{width:100%;border-radius: 0;top:0;box-shadow:none;border-bottom:1px solid #ddd}
.header nav.main-nav{padding:1.6rem;;line-height:0;display:flex;align-items:center;place-content: space-between}
.header .logo{width: 200px;height:auto}
.header .menu-desktop{flex:1;display: none;place-content: center;gap: 3.2rem;}

.whatsapp-button{display: flex;align-items: center;place-content: center;gap: .8rem;flex-direction:row-reverse}
.main-nav .whatsapp-button{display:none}

.whatsapp-button svg{width:2.4rem;height:auto}
.main-nav .whatsapp-button{padding:.6rem 1.6rem}
.main-nav .whatsapp-button svg{width:1.8rem}
.menu-desktop a{font-size:1.6rem;color:#1B1F24;letter-spacing: 0.01em;font-weight:500;text-transform: uppercase;}
.menu-desktop a:hover{text-decoration:underline;text-underline-position:under}
.box-icon{width:3.2rem;height:3.2rem;position:relative;cursor:pointer}
.box-icon .horizontal-line{height:1px;width:100%;background:#000;position:absolute;transition: transform 0.2s ease;}
.box-icon.box-icon__menu{height:16px;}
.box-icon__menu .horizontal-line{height:2px;transform-origin: center;}
.box-icon__menu .horizontal-line__top{top:50%;transform:translateY(calc(-50% - 8px))}
.box-icon__menu .horizontal-line__center{top:50%;transform:translateY(-50%);transition: opacity .2s ease;}
.box-icon__menu .horizontal-line__bottom{top:50%;transform:translateY(calc(-50% + 8px))}
.header .menu-mobile{transition:max-height .5s ease;overflow:hidden}
.header .menu-mobile.closed{max-height:0;}
.header .menu-mobile-items-container{display:flex;flex-direction: column;margin:0 1.6rem 1.6rem;;border-top:1px solid #ddd}
.header .menu-mobile-items-container a:not(.button){display: block;padding: 1.6rem 0;font-weight: 500;font-size: 1.8rem;text-transform: uppercase;border-bottom: 1px solid #ddd;}
.header .menu-mobile-items-container .button{margin-top: .8rem;padding: 1.6rem;}
.header .menu-mobile-items-container .button-primary{margin-top:1.6rem;}
.header .menu-mobile-items-container .button.whatsapp-button{padding:1.1rem 1.6rem}
.body-overlay{background: rgba(0, 0, 0, .5);position: fixed;top: 0;bottom: 0;left: 0;right: 0;height: 100%;width: 100%;z-index:2;display:none}
.hero{background:#1B1F24;background:#000205;position:relative;}
.footer{padding:2.4rem 0 .8rem;position:relative;display: flex;flex-direction: column-reverse;gap: 4.4rem;overflow:hidden;}
.big-logo{width:calc(100% - 3.2rem);margin:auto;}
.big-logo svg{width:100%;height:auto;display:block}
.big-logo path{fill:#000205}
.big-logo .footer-logo-desktop{display:none}
.footer-cta{display:flex;gap:1.6rem;place-content:center;flex-direction:column}
.footer-cta .button{padding:1.6rem 2.4rem 2rem;width: 100%;font-size: 1.8rem;}
.footer-cta .whatsapp-button{padding:1.5rem 2.4rem}
.footer a:not(.button){text-decoration:underline;text-underline-position: under;}
.footer .big-logo{transition: transform 1.3s ease, opacity 1.5s ease;transform: translateY(25%);opacity: 0.8;}
.footer .big-logo.visible{transform: translateY(0%);opacity: 1;}
.footer > .max-width p{text-align:center;margin:0}
.footer-cta-primary{display:flex;flex-direction: column-reverse;gap:1.6rem;align-items: end;} 
.footer-cta-primary p{font-size:1.8rem}
.footer-cta > div,.footer-cta-primary p{width:100%;}  

@media(min-width:380px){
    .header .logo{width:275px;}
}

@media(min-width:768px){
    .footer{padding:4.4rem 0 .8rem;}
    .big-logo .footer-logo-desktop{display:block}
    .big-logo .footer-logo-mobi{display:none}
    .footer-cta{flex-direction:row;margin-top:2.4rem;gap:2.4rem;margin:0;width: 100%;align-items: end;}
    .footer-cta .button{width:100%;}
}

@media(min-width:992px){
    .header .box-icon__menu{display:none}
    .header .menu-desktop{display: flex;}
    .main-nav .whatsapp-button{display:flex}
}

@media(min-width:1280px){
    .header nav.main-nav{padding:1.6rem 4.8rem}
    p{font-size:1.8rem;line-height: 1.1;}      
    .footer{gap:6.4rem}   
    .footer-cta > div{width:calc(50% - 1.2rem)} 
    .footer > .max-width{display:flex;place-content: space-between;align-items: end;flex-wrap: wrap;}
}

@media(min-width:1440px){
    .footer-cta .button,.footer-cta-primary p{width:calc(50% - 1.2rem);}
}