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

--------------------------------------------------------------
>>> INDICE STILI
--------------------------------------------------------------
1.0 Root & Design Tokens
2.0 Settings & Base Typography
3.0 Global Layout & Utilities
4.0 Componenti Globali (404, Room Occupancy)
5.0 Utilities Elementor & Extra
6.0 Header
7.0 Homepage
8.0 Footer
--------------------------------------------------------------
*/



/*
*	1.0 ROOT & DESIGN TOKENS
*/
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;700&display=swap');

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

    /* Colors */
    --color-black: #000000;
    --color-white: #FFFFFF;
    --color-red: #BC111A;
    --color-beige: #F8F5F5;
    --color-dark-grey: #171717;
    --color-light-grey: #D9D9D9;

    /* H1 */
    --colore-h1: #0D0D0D;
    --font-size-h1: clamp(40px, 32px + 2.2vw, 48px);
    --font-weight-h1: 600;
    --line-height-h1: 60px;

    /* H2 */
    --colore-h2: #0D0D0D;
    --font-size-h2: clamp(30px, 26px + 1.2vw, 36px);
    --font-weight-h2: 400;
    --line-height-h2: 44px;

    /* H3 */
    --colore-h3: #0D0D0D;
    --font-size-h3: clamp(26px, 23px + 0.9vw, 30px);
    --font-weight-h3: 400;
    --line-height-h3: 38px;

    /* H4 */
    --colore-h4: #0D0D0D;
    --font-size-h4: clamp(22px, 20px + 0.6vw, 24px);
    --font-weight-h4: 400;
    --line-height-h4: 32px;

    /* Paragraphs */
    --colore-p: #0D0D0D;

    --font-size-p-l: clamp(18px, 16px + 0.8vw, 21px);
    --font-weight-p-l: 400;
    --line-height-p-l: 32px;

    --font-size-p-r: clamp(16px, 15px + 0.45vw, 18px);
    --font-weight-p-r: 400;
    --line-height-p-r: 28px;

    --font-size-p-s: clamp(15px, 14px + 0.35vw, 16px);
    --font-weight-p-s: 400;
    --line-height-p-s: 24px;

    --font-size-p-xs: clamp(24px, 20px + 1.6vw, 32px);
    --font-weight-p-xs: 400;
    --line-height-p-xs: normal;

    /* Span */
    --colore-span: #0D0D0D;
    --font-size-span: clamp(16px, 15px + 0.45vw, 18px);
    --font-weight-span: 400;

    /* Link */
    --colore-a: var(--color-red);
    --font-size-a: clamp(16px, 15px + 0.45vw, 18px);
    --font-weight-a: 400;

    /* Menu Desktop */
    --colore-voce-menu: var(--color-dark-grey);
    --font-size-menu: clamp(16px, 15px + 0.45vw, 18px);
    --font-weight-menu: 400;
}


/*
*	2.0 SETTINGS & BASE TYPOGRAPHY
*/
h1 {
    font-family: var(--font-family-primary) !important;
    font-size: var(--font-size-h1) !important;
    font-weight: var(--font-weight-h1) !important;
    line-height: var(--line-height-h1) !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: var(--line-height-h2) !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: var(--line-height-h3) !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: var(--line-height-h4) !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: var(--line-height-p-r) !important;
    color: var(--colore-p) !important;
}

p.paragraph-l, .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: var(--line-height-p-l) !important;
    color: var(--colore-p) !important;
}

p.paragraph-r, .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: var(--line-height-p-r) !important;
    color: var(--colore-p) !important;
}

p.paragraph-s, .paragraph-s, .paragraph-s p {
    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: var(--line-height-p-s) !important;
    color: var(--colore-p) !important;
}

p.paragraph-xs, .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: var(--line-height-p-xs) !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: 28px !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: 28px !important;
    color: var(--colore-a) !important;
    text-decoration: none !important;
}

.white h1 {
    color: var(--color-white) !important;
    text-shadow: 0 0 12px #00000059;
}

.bold {
    font-weight: 700 !important;
}

#menu-principale a {
    font-family: var(--font-family-menu) !important;
    font-size: var(--font-size-p-s) !important;
    font-weight: var(--font-weight-menu) !important;
    line-height: 28px !important;
    color: var(--colore-voce-menu) !important;
    text-decoration: none !important;
    text-transform: none !important;
    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: var(--line-height-p-l) !important;
    color: var(--colore-a) !important;
}

span.description {
    background: white !important;
    display: none !important;
}

.pswp__custom-caption.pswp__hide-on-close {
    display: none;
}


/*
*	3.0 GLOBAL LAYOUT & UTILITIES
*/
.button-red a {
    background-color: var(--color-red) !important;
    fill: var(--color-white) !important;
    border-radius: 0px;
    color: var(--color-white) !important;
}

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

.button-red a span {
    color: var(--color-white) !important;
    font-weight: 600 !important;
}

.button-red a:hover span {
    color: var(--color-white) !important;
}

.button-red:not(.not-animated) .elementor-button-icon svg {
    transition: transform 0.25s ease;
    transform-origin: center;
    transform-box: fill-box;
}

.button-red:not(.not-animated) .elementor-button:hover .elementor-button-icon svg {
    transform: rotate(-25deg);
}

#button-red-form, #button-red-form span {
    background-color: var(--color-red) !important;
    fill: var(--color-white) !important;
    border-radius: 0px;
    color: var(--color-white) !important;
}

button#button-red-form {
    margin-top: 15px;
}

#button-red-form:hover {
    background-color: var(--color-red) !important;
    fill: var(--color-white) !important;
    color: var(--color-white) !important;
}

/* button white */
.button-white a {
    background-color: var(--color-white) !important;
    fill: var(--color-red) !important;
    border-radius: 0px;
    color: var(--color-red) !important;
}

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

.button-white a span {
    color: var(--color-red) !important;
    font-weight: 600 !important;
}

.button-white a:hover span {
    color: var(--color-red) !important;
}

.button-white:not(.not-animated) .elementor-button-icon svg {
    transition: transform 0.25s ease;
    transform-origin: center;
    transform-box: fill-box;
}

.button-white:not(.not-animated) .elementor-button:hover .elementor-button-icon svg {
    transform: rotate(-25deg);
}


/*
*	4.0 COMPONENTI GLOBALI
*/
.error404 .hero-image {
    display: none;
}


/*
*	5.0 UTILITIES ELEMENTOR & EXTRA
*/
.elementor-widget-container {
    word-break: break-word;
}

.galleria-griglia a.e-gallery-item.elementor-gallery-item.elementor-animated-content >* {
    height: 500px !important;
    object-fit: cover;
    object-position: center;
}

.galleria-griglia .elementor-slideshow__footer {
    display: none !important;
}

footer.elementor-slideshow__footer.elementor-lightbox-prevent-close {
    display: none !important;
}

html {
  scroll-padding-top: 120px;
}


/*
*  6.0 HEADER
*/
.hero-img-container {
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
}

#header {
    z-index: 9999;
}

div#header .inner-header {
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 8px 32px rgba(13, 13, 13, 0.08);
}

div#menu-principale {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    align-content: center;
}

#header a.elementor-item.elementor-item-active {
    font-weight: 600 !important;
}

.sub-menu {
    top: 90px !important;
    background-color: #ffffffbf !important;
}

.error404 .hero-img-container {
    display: none;
}

.sub-menu {
    min-width: 100% !important;
}


/*
*   7.0 HOMEPAGE
*/
.img-vertical-1 {
    height: 650px !important;
    object-fit: cover;
    object-position: center;
}

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


/*
*  8.0 FOOTER
*/
.footer-inner {
    background: rgb(125 125 125 / 52%) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
    box-shadow: 0 8px 32px rgba(13, 13, 13, 0.08) !important;
}

.footer-inner,
.footer-inner * {
    color: #FFFFFF !important;
    font-size: var(--font-size-p-s) !important;
    font-weight: var(--font-weight-p-s) !important;
    line-height: var(--line-height-p-s) !important;
}

.footer-inner b {
    color: #FFFFFF !important;
    font-size: var(--font-size-p-rs) !important;
    font-weight: 700 !important;
}

.footer-credits p {
    color: #FFFFFF !important;
    font-size: var(--font-size-p-s) !important;
    font-weight: var(--font-weight-p-s) !important;
    line-height: var(--line-height-p-s) !important;
}