/*
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 FOOTER
*   4.0 HOMEPAGE
*   5.0 CONTATTI
*/


/*
*	Root
*/

:root {
    /* Font family */
    --font-family-primary: 'Outfit', sans-serif;
    --font-family-secondary: 'Outfit', sans-serif;
    --font-family-menu: 'Outfit', sans-serif;
    --font-family-buttons: 'Outfit', sans-serif;

    /* Colors */
    --color-black: #222222;
    --color-white: #FFFFFF;
    --color-primary: #7A6E6F;
    --color-secondary: #870A1E;
    --color-tertiary: #53494A;
    --color-menu: #fff;

    /* H1 - 56px desktop / 46px mobile */
    --colore-h1: #FFF;
    --font-size-h1: clamp(34px, 5vw, 48px);
    --font-weight-h1: 600;

    /* H2 - 48px desktop / 34px mobile */
    --colore-h2: #fff;
    --font-size-h2: clamp(34px, 4vw, 48px);
    --font-weight-h2: 600;

    /* H3 - 32px desktop / 28px mobile */
    --colore-h3: #fff;
    --font-size-h3: clamp(28px, 3.5vw, 32px);
    --font-weight-h3: 600;

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

    /* Paragraphs & Span */
    --colore-p: #fff;
    --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: #fff;
    --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: 400;

    /* 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;
}

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, h3 span {
    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, h4 span {
    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 {
    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;
}

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(--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(--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;
}

.firma span {
    font-family: Parisienne !important;
    font-size: 35px !important;
}


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


/*buttons*/
.button-style-1 a {
    background: transparent;
    padding: 0px;
}

.button-style-1 a span {
    color: #FFF;
    font-family: Outfit;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: normal !important;
}

.button-style-1 a .elementor-button-content-wrapper {
  display: flex;
  gap: 6px;
  align-items: center;
  align-content: center;
  transition: gap .25s ease;
}

.button-style-1:hover a .elementor-button-content-wrapper {
  gap: 11px;
}


/*
*	2.0 HEADER
*/
div#header.scrolled {
    background: #53494A;
}


/*
*   3.0 FOOTER
*/
.white h1,
.white h2,
.white h3,
.white h4,
.white h5,
.white h6,
.white p,
.white a,
.white li,
.white span,
.white strong,
.white em,
.white small,
.white label,
.white div,
.white svg {
  color: white !important;
  fill: white !important;
}

.black h1,
.black h2,
.black h3,
.black h4,
.black h5,
.black h6,
.black p,
.black a,
.black li,
.black span,
.black strong,
.black em,
.black small,
.black label,
.black div,
.black svg {
  color: black !important;
  fill: black !important;
}

.darkbrown h1,
.darkbrown h2,
.darkbrown h3,
.darkbrown h4,
.darkbrown h5,
.darkbrown h6,
.darkbrown p,
.darkbrown a,
.darkbrown li,
.darkbrown span,
.darkbrown strong,
.darkbrown em,
.darkbrown small,
.darkbrown label,
.darkbrown div,
.darkbrown svg {
  color: #53494A !important;
  fill: #53494A !important;
}

.post-footer, .post-footer *, p.iubenda-cs-preferences-link {
    color: white !important;
    fill: white;
    text-align: center;
    font-family: Outfit, sans-serif !important;
    font-size: 16px !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: 20px !important;
}


/*
*   4.0 HOMEPAGE
*/
.sketch img {
    filter: brightness(2);
}

.sketch-ultrawhite img {
    filter: brightness(5);
}

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

.riquadro-icona-1 i {
    font-size: 30px;
}

.riquadro-icona-1 svg {
    width: 30px !important;
    height: 30px !important;
}

.darkbrown.riquadro-icona-1 i {
    font-size: 44px;
}

.darkbrown.riquadro-icona-1 span {
    font-weight: 600 !important;
    font-size: 32px !important;
}


/*
*   5.0 CONTATTI
*/
.carosello img {
    height: 450px !important;
    object-fit: cover !important;
    object-position: center !important;
}