/*
Theme Name:  Jampaa
Theme URI: https://www.jampaa.it/
Description:  Tema Jampaa
Author:  Jampaa
Author URI: https://www.jampaa.it/
Template:  hello-elementor
Version:  1.0.2
*/

/*
*	Root
*	1.0 SETTINGS
        *fonts
        *boxes
        *buttons
*   2.0 HEADER
*   3.0 HOMEPAGE
*/

/*
*	Root
*/
:root {
    /* Font family */
    --font-family-primary: 'Sofia Sans', sans-serif;
    --font-family-secondary: 'Sofia Sans', sans-serif;
    --font-family-menu: 'Source Sans Pro', sans-serif;
    --font-family-buttons: 'Source Sans Pro', sans-serif;

    /* Colors */
    --color-black: #000000;
    --color-white: #FFFFFF;
    --color-primary: #FFFFFF;
    --color-secondary: #8E3D2F;
    --color-tertiary: #000000;
    --color-menu: #ffffff;

    /* H1 - 48px */
    --colore-h1: #FFFFFF;
    --font-size-h1: clamp(36px, 5vw, 64px);
    --font-weight-h1: 400;

    /* H2 - 36px */
    --colore-h2: #8E3D2F;
    --font-size-h2: clamp(28px, 4vw, 48px);
    --font-weight-h2: 400;

    /* H3 - 28px */
    --colore-h3: #000000;
    --font-size-h3: clamp(22px, 3.5vw, 36px);
    --font-weight-h3: 400;

    /* H4 - 24px */
    --colore-h4: #8E3D2F;
    --font-size-h4: clamp(20px, 3vw, 24px);
    --font-weight-h4: 400;

    /* Paragraphs & Span */
    --colore-p: #000000;
    --font-size-p-l: clamp(18px, 2vw, 21px);   /* Large */
    --font-size-p-r: clamp(16px, 2vw, 18px);    /* Regular */
    --font-size-p-s: clamp(15px, 2vw, 16px);    /* Small */
    --font-size-p-xs: clamp(13px, 2vw, 14px);    /* Extra-small */

    --font-weight-p-l: 400;
    --font-weight-p-r: 400;
    --font-weight-p-s: 400;
    --font-weight-p-xs: 400;

    --colore-span: #000000;
    --font-size-span: clamp(15px, 1.8vw, 18px);
    --font-weight-span: 400;

    /* Link */
    --colore-a: var(--color-primary);
    --font-size-a: clamp(16px, 1.8vw, 18px);
    --font-weight-a: 700;

    /* Menu Desktop */
    --colore-voce-menu: var(--color-menu);
    --font-size-menu: clamp(16px, 2vw, 18px);
    --font-weight-menu: 700;

    /* Pulsanti */
    --colore-button-primary: var(--color-primary);
    --colore-button-hover: var(--color-white);
    --font-button: clamp(16px, 2vw, 18px);
    --font-weight-button: 600;
    --line-height-button: clamp(24px, 2vw, 28px);
}


/*
*	1.0 SETTINGS
*/

/*fonts*/
h1 {
    font-family: var(--font-family-primary) !important;
    font-size: var(--font-size-h1) !important;
    font-weight: var(--font-weight-h1) !important;
    line-height: normal !important;
    color: var(--colore-h1) !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
}

h2 {
    font-family: var(--font-family-primary) !important;
    font-size: var(--font-size-h2) !important;
    font-weight: var(--font-weight-h2) !important;
    line-height: normal !important;
    color: var(--colore-h2) !important;
}

.font-h1 h2 {
    font-family: var(--font-family-primary) !important;
    font-size: var(--font-size-h2) !important;
    font-weight: var(--font-weight-h2) !important;
    line-height: normal !important;
    color: var(--colore-h2) !important;
}

h3 {
    font-family: var(--font-family-primary) !important;
    font-size: var(--font-size-h3) !important;
    font-weight: var(--font-weight-h3) !important;
    line-height: normal !important;
    color: var(--colore-h3) !important;
}

h4 {
    font-family: var(--font-family-primary) !important;
    font-size: var(--font-size-h4) !important;
    font-weight: var(--font-weight-h4) !important;
    line-height: normal !important;
    color: var(--colore-h4) !important;
}

p {
    font-family: var(--font-family-secondary) !important;
    font-size: var(--font-size-p-r) !important;
    font-weight: var(--font-weight-p-r) !important;
    line-height: 1.75 !important;
    color: var(--colore-p) !important;
}

p.paragraph-l, .paragraph-l p {
    font-family: var(--font-family-secondary) !important;
    font-size: var(--font-size-p-l) !important;
    font-weight: var(--font-weight-p-l) !important;
    line-height: 1.75 !important;
    color: var(--colore-p) !important;
}

p.paragraph-r {
    font-family: var(--font-family-secondary) !important;
    font-size: var(--font-size-p-r) !important;
    font-weight: var(--font-weight-p-r) !important;
    line-height: 1.75 !important;
    color: var(--colore-p) !important;
}

p.paragraph-s {
    font-family: var(--font-family-secondary) !important;
    font-size: var(--font-size-p-s) !important;
    font-weight: var(--font-weight-p-s) !important;
    line-height: 1.75 !important;
    color: var(--colore-p) !important;
}

p.paragraph-xs {
    font-family: var(--font-family-secondary) !important;
    font-size: var(--font-size-p-xs) !important;
    font-weight: var(--font-weight-p-xs) !important;
    line-height: 1.75 !important;
    color: var(--colore-p) !important;
}

.pre-titolo p {
    font-family: var(--font-family-secondary) !important;
    font-size: var(--font-size-p-r) !important;
    font-weight: var(--font-weight-p-r) !important;
    line-height: 1.75 !important;
    color: var(--colore-p) !important;
    letter-spacing: 0.5px;
}

span {
    font-family: var(--font-family-secondary) !important;
    font-size: var(--font-size-span) !important;
    font-weight: var(--font-weight-span) !important;
    line-height: 1.6 !important;
    color: var(--colore-span) !important;
}

a {
    font-family: var(--font-family-secondary) !important;
    font-size: var(--font-size-a) !important;
    font-weight: var(--font-weight-a) !important;
    line-height: 1.6 !important;
    color: var(--colore-a) !important;
    text-decoration: none !important;
}

a.js-wpml-ls-item-toggle.wpml-ls-item-toggle span {
    font-family: var(--font-family-secondary) !important;
    font-size: var(--font-size-p-l) !important;
    font-weight: var(--font-weight-menu) !important;
    line-height: 1.75 !important;
    color: var(--color-white) !important;
}

#menu-principale a {
    font-family: var(--font-family-menu) !important;
    font-size: var(--font-size-menu) !important;
    font-weight: var(--font-weight-menu) !important;
    line-height: 1.6 !important;
    color: var(--colore-voce-menu) !important;
    text-decoration: none !important;
    text-transform: uppercase;
    background: transparent !important;
}

p.iubenda-cs-preferences-link {
    margin: 0px;
    font-family: var(--font-family-secondary) !important;
    font-size: var(--font-size-p-l) !important;
    font-weight: var(--font-weight-p-l) !important;
    line-height: 1.75 !important;
    color: var(--colore-a) !important;
}

.white p,
.white a,
.white h1,
.white h2,
.white h3,
.white h4,
.white h5,
.white h6,
.white li,
.white span,
.white strong,
.white em,
.white div {
  color: var(--color-primary) !important;
}

.red p,
.red a,
.red h1,
.red h2,
.red h3,
.red h4,
.red h5,
.red h6,
.red li,
.red span,
.red strong,
.red em,
.red div {
  color: var(--color-secondary) !important;
}


/*boxes*/
div#full-width-box {
    max-width: 1920px !important;
    margin: auto !important;
}

/*buttons*/
.button-white, .button-red {
    box-sizing: border-box;
}

.button-red a {
    background-color: var(--color-secondary) !important;
}

.button-white a, .button-red a {
    box-sizing: border-box !important;
    min-width: 200px !important;
}

.button-white span {
    color: var(--color-secondary) !important;
    text-transform: uppercase;
    font-family: var(--font-family-buttons) !important;
    letter-spacing: 2px;
    font-weight: 400;
}

.button-red span {
    color: var(--color-primary) !important;
    text-transform: uppercase;
    font-family: var(--font-family-buttons) !important;
    letter-spacing: 2px;
    font-weight: 400;
}

.button-white:hover span {
    color: var(--color-secondary) !important;
    text-transform: uppercase;
    font-family: var(--font-family-buttons) !important;
    letter-spacing: 2px;
    font-weight: 700 !important;
}

.button-red:hover span {
    color: var(--color-primary) !important;
    text-transform: uppercase;
    font-family: var(--font-family-buttons) !important;
    letter-spacing: 2px;
    font-weight: 700 !important;
}

.button-white span.elementor-button-icon i,
.button-red span.elementor-button-icon i {
    transform: rotate(-40deg);
    transition: transform 0.3s ease;
}

.button-white:hover span.elementor-button-icon i,
.button-red:hover span.elementor-button-icon i {
    transform: rotate(0deg);
    font-weight: 700;
}


/*
*	2.0 HEADER
*/
.logo-header img {
    filter: brightness(10);
}

a.js-wpml-ls-item-toggle.wpml-ls-item-toggle {
    background: none;
    width: fit-content;
    border: none !important;
}

ul.js-wpml-ls-sub-menu.wpml-ls-sub-menu {
    min-width: fit-content;
    width: 65px;
}

a.wpml-ls-link {
    background: none;
    width: 100%;
    border: none !important;
}

div#wpml-switch {
    width: 65px;
}

li.wpml-ls-slot-shortcode_actions.wpml-ls-item.wpml-ls-item-it.wpml-ls-current-language.wpml-ls-last-item.wpml-ls-item-legacy-dropdown-click:hover a {
    background: transparent !important;
    border: none;
    color: white !important;
}

.wpml-ls-legacy-dropdown-click a span {
    vertical-align: middle;
    color: white !important;
    font-weight: 700 !important;
}

.hero-img-container, .hero-img-container img {
    height: 750px !important;
    object-fit: cover;
    object-position: center;
}

.container-header {
  transition: height 0.3s ease, background-color 0.3s ease;
  background-color: transparent; /* stato iniziale */
}

.container-header.shrink-desktop {
  height: 110px;
  background-color: #8E3D2F !important;
  background-image: none !important;
}

.container-header.shrink-mobile {
  height: 80px;
  background-color: #8E3D2F !important;
  background-image: none !important;
}

.logo-header {
  transition: width 0.3s ease;
}

.logo-header.shrink-desktop {
  width: 130px;
}

.logo-header.shrink-mobile {
  width: 100px;
}

.coming-soon span {
    color: var(--color-secondary) !important;
    font-weight: 600 !important;
    background: white;
    padding: 9px 22px;
    border-radius: 30px;
    text-transform: uppercase;
}


/*
*   HOMEPAGE
*/
.vertical {
    transform: rotate(270deg);
    transform-origin: center;
    min-width: 300px !important;
    height: fit-content;
    vertical-align: middle;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-content: center !important;
    flex-wrap: wrap !important;
}

.vertical p {
    display: flex;
    align-items: center;
    justify-content: center;
}

.carosello-cusimano img {
    height: 450px !important;
    width: 100%;
    object-fit: cover;
}

.carosello-cusimano figure.swiper-slide-inner {
    margin: 0px 20px !important;
}

.carosello-cusimano {
    margin-bottom: -6px !important;
}

button#button-form span {
    color: white !important;
    text-transform: uppercase;
    font-weight: 600 !important;
}

span#psinformativa1 a {
    color: var(--color-secondary) !important;
}

.swiper-slide.swiper-slide-active figure.swiper-slide-inner, 
.swiper-slide figure.swiper-slide-inner {
    margin: 0px !important;
}

.swiper-slide.swiper-slide-next figure.swiper-slide-inner {
    margin: 0px 20px !important;
}

#form-contatto {
	scroll-margin-top: 150px;
}