/* semantic color variables for this project */
:root {
	--primary: #DDB864;       --primary-t2: #CDA856;
    --secondary: #937B42;       --secondary-t2: #806D3E;
    --bg: #D9D9D9;             --bg-t2: #23211F;
	--text-t1: #1f2323;		--text-t2: #847B67;	
}

/* ! Reset */
@font-face {
    font-family: "ss4";
    src: url("../fonts/SourceSerif4-VariableFont_opsz,wght.ttf") format("truetype");;
    font-display: swap;
}
body, html{font-size: 15px; font-family: "ss4", "Source Serif 4", serif; font-optical-sizing: auto; font-style: normal; box-sizing: border-box;margin: 0;padding: 0; background: var(--bg); color: var(--text-t1);}
*,*:before,*:after{ box-sizing: border-box; }
h1,h2,h3,h4,h5,h6, p, ol, ul{margin: 0;padding: 0;}
ol,ul{list-style-type: none;}
img{height: auto;}
a{text-decoration: none;}
hr{border:none; border-bottom: 1px solid #ddd}

/* ! title system */
.text-0{font-size: 3.6rem; line-height: 1; font-weight: 800;}
h1, .text-1{font-size: 3.2rem; font-weight: 800;}
h2, .text-2{font-size: 2.7rem; font-weight: 800;}
h3, .text-headline{font-size: 1.7rem; font-weight: 500;}
h4, .text-subheader{font-size: 1.5rem; font-weight: 500;}
h5, p, .text-body{font-size: 1.3rem; font-weight: 400;}
h6, .text-caption{font-size: 1rem;font-weight: 300;}

h1, h2, h3, h4, p, ol, ul{margin-bottom: 1rem;}
h1, h2, h3, h4, h5, h6, 
.text-1, .text-2, .text-headline, 
.text-subheader, .text-body, .text-caption, .text-0{ font-family: "ss4", "Source Serif 4", serif; font-optical-sizing: auto; font-style: normal;}

@media (max-width: 768px) {
    body, html{font-size: 12px;}
}

/* ! Button system */
.button { font-size: 1.7rem; font-weight: 500; text-decoration: none; padding: 8px 25px; display: inline-block; border-radius: 4px; cursor: pointer; }

.button--primary-fill { background: var(--primary); color: var(--bg-t2); }
.button--primary-fill:hover{ background: var(--primary-t2); }

.button--primary-outlined { background: transparent; border: 1px solid var(--primary); color: var(--primary); }
.button--primary-outlined:hover{ background: var(--primary); color: var(--bg-t2); }

.button--primary-link {background: transparent; color: var(--primary); position: relative; font-size: 1.1rem; padding: 8px 8px;}
.button--primary-link .border-bottom {border-bottom: 1px solid var(--primary);}
.button--primary-link:hover { background: transparent; color: var(--primary); }
.button--primary-link:hover .border-bottom {width: 55%;}

@media (max-width: 768px) {
    .border-bottom{ display: none; }
}

.button--secondary-fill { background: var(--secondary); color: var(--bg-t2); }
.button--secondary-fill:hover{ background: var(--secondary-t2); }

.button--secondary-outlined { background: transparent; border: 1px solid var(--secondary); color: var(--secondary); }
.button--secondary-outlined:hover{ background: var(--secondary); color: var(--bg-t2); }

.button--secondary-link {background: transparent; color: var(--secondary); position: relative; font-size: 1.1rem; padding: 8px 8px;}
.button--secondary-link .border-bottom {width: 55%;}
.button--secondary-link:hover { background: transparent; color: var(--secondary); }
.button--secondary-link:hover .border-bottom {border-bottom: 1px solid var(--secondary);}

.border-bottom{position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 0%; height: 0px; transition: all 0.4s cubic-bezier(0.215, 0.610, 0.355, 1);}

/* ! Animation */
.fade-in {
    opacity: 0;
}
.text-reveal, .image-reveal {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
.fade-up { opacity: 0; transform: translateY(3rem); will-change: transform, opacity; }
.slide-right, .slide-left { transform: translateX(0); will-change: transform; }
.fade-in, .text-reveal, .cover__bg { will-change: transform; transform: translateZ(0);}

/* ! Cover */
.cover{ position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #000; color: var(--bg); overflow: hidden; }
.cover__bg-img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cover__bg-overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.838) 80%);}
.cover__content{ position: relative; z-index: 1; max-width: 1550px; width: 100%; margin: 0 auto; text-align: center; }
.cover__logo{ width: 180px; position: absolute; top: 13%; left: 50%; transform: translateX(-50%); }
@media (max-width: 768px){ .cover__logo{ width: 140px; } }

/* ! Header */
.header { display: flex; justify-content: center; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; z-index: 999; max-width: 1250px; align-items: center; }
.header a { display: block; }
.header__menu { margin-bottom: 0; padding: 0 10px ; }
.header__menu li { display: inline-block; }
.header__line { flex: 1; height: 2px; background: var(--primary); }
.header__hamburger { display: none; }

@media (min-width: 768px) {
    .header { padding: 2%; transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0s; }
    .scroll-down .header { padding: 0;}
}

@media (max-width: 768px) {
    .header { justify-content: end; background: var(--text-t1); position: fixed; z-index: 10000; }
    .header__line { display: none; }
    .header__hamburger { display: block; width: 40px; height: 35px; margin-top: 9px; margin-right: 4px;}
    .header__hamburger span { width: 33px; height: 2px; background: var(--primary); margin-top: 8px; display: block; transition: all 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);}

    .header__menu { position: absolute; top: 35px; left: 0px; width: 100%; background: var(--text-t1); height: 0px; overflow: hidden; transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1);}
    .header__menu li { display:block; text-align: center; padding: 20px 0; }
    .header__menu li a { font-size: 2rem; }

    .menu--open .header__hamburger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
    .menu--open .header__hamburger span:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }

    .menu--open .header__menu { height: 100vh; padding: 4% 0; }
    .menu--open { overflow: hidden !important;}
}

/* ! Text section */
.text-section{ padding: 2rem 0; }
.text-section__icons-container{ transform: translateX(-6px); }
.text-section__icon{ display: inline; width: 100px; }
@media (max-width: 768px) {
    .text-section__icon{ width: 60px; }
}

/* ! Media text section */
.media-text{ border-radius: 10px; overflow: hidden; min-height: 450px; }
.media-text--dark{ background: var(--bg-t2); color: var(--bg); }

.media-text__text{ display: flex; justify-content: center; align-items: center; padding: 4rem !important; }
.media-text__image{ background: url('') center center no-repeat; background-size: cover; min-height: 230px; order: auto; }
.media-text__image--pizza{ background-image: url('../assets/media-text-pizza.png'); }
.media-text__image--hamb{ background-image: url('../assets/media-text-hamb.png'); }
.media-text__image--food{ background-image: url('../assets/media-text-food.png'); }

@media (max-width: 768px) {
    .media-text__text{ padding: calc(1rem + 16px) !important; }
    .media-text__image{ order: 2;}
}

/* ! Masonry */
.container-test { position: relative; width: 100%; margin: 50px auto 0 auto; overflow: hidden !important;}
.container-test__gradient{ width: 100%; height: 400px; position: absolute !important; bottom: -10px; left: 0; background: linear-gradient(180deg, transparent 0%, #D9D9D9 82.69%); z-index: 1000; }
.item-test { position: absolute; }
.item-test__content { position: relative;}
.item-test__content img { border-radius: 10px; width: 100%; height: auto; display: block;}

/* ! Slider section */
.slider-section{ background: var(--bg-t2); color: var(--bg); width: 100%; padding: 6rem 0; }

/* ! Maps frame section */
.mapouter { display: table; }
.gmap_canvas { overflow: hidden; position: relative; height: 400px; width: 100vw; background: #fff;}
.gmap_canvas iframe { position: relative !important; z-index: 2 !important; } 
.gmap_canvas a { color: #fff !important; position: absolute !important; top: 0 !important; left: 0 !important; z-index: 0 !important; }

/* ! Times section */
.times-section{ color: var(--bg); position: relative; min-height: 430px; max-height: 600px; overflow: hidden; }
.section__bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(35, 33, 31, 0.00) 0%, rgba(35, 33, 31, 0.87) 0%); display: flex; align-items: center; }
.section__text-container{ padding: 4rem 15px !important; text-align: left; align-items: center; }

/* ! Footer section */
.footer-section{ background: var(--bg-t2); color: var(--bg); width: 100%;}

/* ! Grid System */
.grid { margin: 0 auto; padding: 0 15px; max-width: 1250px; display: flex; flex-flow: row; flex-wrap: wrap;}
.align-center { align-items: center; }
.grid--center{justify-content: center;}
.grid--start{justify-content: start;}
.grid--end{justify-content: end;}
.grid--large{width: 100%; max-width: none;}
.col{ flex: 1;}

[class*='col-'] { position: relative;padding: 0 15px;}
.grid .grid [class*='col-'] {padding: 0px;}

.col-20{ width: 20%; }
.col-25{ width: 25%; }
.col-30{ width: 30%; }
.col-33{ width: 33.33%; }
.col-50{ width: 50%; }
.col-70{ width: 70%; }
.col-80{ width: 80%; }
.col-100{ width: 100%; }

@media (max-width: 991px) {
    .tab-20 { width: 20%; }
    .tab-25 { width: 25%; }
    .tab-33 { width: 33.33%; }
    .tab-50 { width: 50%; }
    .tab-100 { width: 100%; }
}

@media (max-width: 768px) {
    [class*='col-'] { width: 100%;}
    .sma-20 { width: 20%; }
    .sma-25 { width: 25%; }
    .sma-33 { width: 33.33%; }
    .sma-50 { width: 50%; }
    .sma-100 { width: 100%; }
}


/* ! Helpers */
/*Helpers: classe con una o al massimo due proprietà che aiuta ad applicare una proprietà al volo*/
.br{border: 1px solid red; }
.br-10{border-radius: 10px; }
.img-res{width: 100%;}
.d-block{ display: block; }

.w-100{ width: 100%; }
.h-100{ height: 100%; }

.mt-0{margin-top: 0;}
.mt-1{margin-top: 1rem;}
.mt-2{margin-top: 2rem;}
.mt-3{margin-top: 3rem;}
.mt-4{margin-top: 4rem;}ù

.mr-0{margin-right: 0;}
.mr-1{margin-right: 1rem;}
.mr-2{margin-right: 2rem;}
.mr-3{margin-right: 3rem;}
.mr-4{margin-right: 4rem;}

.mb-0{margin-bottom: 0;}
.mb-1{margin-bottom: 1rem;}
.mb-2{margin-bottom: 2rem;}
.mb-3{margin-bottom: 3rem;}
.mb-4{margin-bottom: 4rem;}
.mb-5{margin-bottom: 5rem;}
.mb-6{margin-bottom: 6rem;}
.mb-7{margin-bottom: 7rem;}
.mb-8{margin-bottom: 8rem;}

.text-center{text-align: center;}
.text-left{text-align: left;}
.text-right{text-align: right;}

.p-0{padding: 0;}
.p-0-3{padding: 0.3rem;}
.p-0-5{padding: 0.5rem;}
.p-1{padding: 1rem;}
.p-2{padding: 2rem;}
.p-3{padding: 3rem;}
.p-4{padding: 4rem;}

.pt-0{padding-top: 0;}
.pt-1{padding-top: 1rem;}
.pt-2{padding-top: 2rem;}
.pt-3{padding-top: 3rem;}
.pt-4{padding-top: 4rem;}
.pt-5{padding-top: 5rem;}
.pt-6{padding-top: 6rem;}
.pt-7{padding-top: 7rem;}
.pt-8{padding-top: 8rem;}

.pb-0{padding-bottom: 0;}
.pb-1{padding-bottom: 1rem;}
.pb-2{padding-bottom: 2rem;}
.pb-3{padding-bottom: 3rem;}
.pb-4{padding-bottom: 4rem;}

.pl-1{ padding-left: 1rem; }
.pl-2{ padding-left: 2rem; }
.pl-3{ padding-left: 3rem; }
.pl-4{ padding-left: 4rem; }

.pr-1{ padding-right: 1rem; }

.plr-0{ padding-left: 0; padding-right: 0; }

.overflow{ overflow: hidden; }