/*
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.5
*/

/*
*	Root
*	1.0 SETTINGS
        *fonts
        *boxes
        *buttons
*   2.0 HEADER
*   3.0 HOME
*   4.0 LE STRUTTURE
*   5.0 LAVORA CON NOI
*   6.0 CONTATTI
*/

/*
*	Root
*/
:root {
    /* Font family */
    --font-family-primary: 'Lora' !important;
    --font-family-secondary: 'Lora' !important;
    --font-family-p: 'Poppins', sans-serif !important;
    --font-family-menu: 'Poppins', sans-serif !important;
    --font-family-buttons: 'Poppins', sans-serif !important;

    /* Colors */
    --color-black: #000;
    --color-white: #fff;
    --color-gold: #AE841F;
    --color-green: #465957;
    --color-menu: #fff;
    --color-light-green: #8A8A8A;

    /* H1 */
    --colore-h1: var(--color-white);
    --font-size-h1: clamp(32px, 5vw, 64px);
    --font-weight-h1: 400;

    /* H2 gold */
    --colore-h2-gold: var(--color-gold);
    --font-size-h2: clamp(24px, 4vw, 36px);
    --font-weight-h2: 400;

    /* H2 green */
    --colore-h2-green: var(--color-green);

    /* H3 */
    --colore-h3: var(--color-green);
    --font-size-h3: clamp(20px, 3.5vw, 28px);
    --font-weight-h3: 400;

    /* Paragraph (Body extra-large) */
    --colore-p: var(--color-black);
    --font-size-p-xl: clamp(16px, 2vw, 18px);
    --font-weight-p-xl: 400;

    /* Paragraph (Body large) */
    --colore-p: var(--color-black);
    --font-size-p-l: clamp(14px, 2vw, 16px);
    --font-weight-p-l: 400;

    /* Paragraph (Body medium) */
    --colore-p: var(--color-black);
    --font-size-p-m: clamp(14px, 2vw, 14px);
    --font-weight-p-m: 400;

    /* Span */
    --colore-span: var(--color-black);
    --font-size-span: clamp(16px, 1.8vw, 18px);
    --font-weight-span: 400;

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

    /* Voci del menu desktop */
    --colore-voce-menu: var(--color-menu);
    --font-size-menu: clamp(16px, 2vw, 18px);
    --font-weight-menu: 600;

    /* Stile pulsanti */
    --colore-button-1: var(--color-green);
    --colore-button-1-hover: var(--color-white);
    --font-button-1: clamp(16px, 2vw, 18px);
    --font-weight-button-1: 500;
    --line-height-button-1: clamp(24, 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: 1.2 !important;
    color: var(--colore-h1) !important;
}

h2 {
    font-family: var(--font-family-secondary) !important;
    font-size: var(--font-size-h2) !important;
    font-weight: var(--font-weight-h2) !important;
    line-height: 1.3 !important;
    color: var(--colore-h2-green) !important;
}

.gold h2 {
    font-family: var(--font-family-secondary) !important;
    font-size: var(--font-size-h2) !important;
    font-weight: var(--font-weight-h2) !important;
    line-height: 1.3 !important;
    color: var(--colore-h2-gold) !important;
}

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

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

span {
    font-family: var(--font-family-p) !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-p) !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-p) !important;
    font-size: var(--font-size-p-xl) !important;
    font-weight: var(--font-weight-menu) !important;
    line-height: 1.75 !important;
    color: var(--colore-p) !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(--color-menu) !important;
    text-decoration: none !important;
    text-transform: none;
    background: transparent !important;
}

#menu-principale a:hover {
    color: var(--color-gold) !important;
}

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

.title-font h3 a {
    font-family: var(--font-family-primary) !important;
    font-size: 24px !important;
}

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

.footer,
.footer *,
.post-footer,
.post-footer * {
    color: var(--color-white) !important;
    font-size: var(--font-size-p-l) !important;
}


/*colors*/
.gold {
    color: var(--color-gold);
}

.gold h1, .gold h2, .gold h3, .gold h4, .gold h5, .gold h6 {
    color: var(--color-gold) !important;
}

.green {
    color: var(--color-green);
}

.green h1, .green h2, .green h3, .green h4, .green h5, .green h6 {
    color: var(--color-green) !important;
}

.black {
    color: var(--color-black);
}

.black h1, .black h2, .black h3, .black h4, .black h5, .black h6 {
    color: var(--color-black) !important;
}

.white {
    color: var(--color-white);
}

.white h1, .white h2, .white h3, .white h4, .white h5, .white h6 {
    color: var(--color-white) !important;
}

.light-green {
    color: var(--color-light-green);
}

.light-green h1, .light-green h2, .light-green h3, .light-green h4, .light-green h5, .light-green h6 {
    color: var(--color-light-green) !important;
}


/*buttons*/
.button-no-bg a, .button-no-bg a span {
    background: none !important;
    color: var(--color-green) !important;
    font-weight: 600 !important;
    padding: 0px;
    text-transform: uppercase;
    text-decoration-line: underline !important;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px; 
    text-decoration-color: var(--color-green);
}

.button-no-bg a:hover, .button-no-bg a span:hover {
    background: none !important;
    color: #2E3D3C !important;
    font-weight: 600 !important;
    padding: 0px;
    text-transform: uppercase;
    text-decoration-line: underline !important;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px; 
    text-decoration-color: #2E3D3C;
}

body .button-bg a.elementor-button-link, body .button-gb a.elementor-button-link span.elementor-heading-title {
    background: var(--color-green) !important;
    color: var(--color-white) !important;
}

body .button-bg a.elementor-button-link:hover, body .button-gb a.elementor-button-link span.elementor-heading-title:hover {
    background: #2E3D3C !important;
    color: var(--color-white) !important;
}


/*
*   2.0 HEADER
*/
.elementor-widget-wpml-language-switcher,
.elementor-widget-wpml-language-switcher * {
    width: fit-content !important;
}

a.js-wpml-ls-item-toggle.wpml-ls-item-toggle {
    padding: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

a.js-wpml-ls-item-toggle.wpml-ls-item-toggle img {
    max-width: 20px !important;
}

.wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle:after {
    display: none !important;
}

div#container-header.scrolled {
    height: 105px;
}

div#logo-header {
    width: 280px;
}

div#logo-header.scrolled img {
    width: 95px;
    height: auto;
}

.logo-white {
    display: block;
}

.logo-colored {
    display: none;
}


/*
*   3.0 HOME
*/
.carosello img {
    height: 470px !important;
    object-fit: cover;
}


/*
*   4.0 LE STRUTTURE
*/
.logo-duchi {
    width: 140px;
}

.logo-duchi img {
    width: 100%;
}

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

.div-location-rate {
    display: flex;
    align-items: center;
    gap: 7px;
}

.div-location-rate .star-rate {
    color: var(--color-gold);
}


/*
*   5.0 LAVORA CON NOI
*/
button.accordion-header div {
    display: flex;
    gap: 20px;
}


/*
*   6.0 CONTATTI
*/
button#button-form span {
    color: white !important;
    text-transform: uppercase;
    font-weight: 700 !important;
}