/**
 * Componenti custom del sito, scritti da zero su Salient.
 *
 * Sono i pezzi che Salient non ha e che quindi restano nostri: card delle
 * lastre, dei progetti e del blog, schede lastra, barre di navigazione della
 * gallery e dei progetti, blocchi della homepage, intro dei materiali.
 *
 * Stesse regole di fum-components.css: colori da Salient, nessun Bootstrap,
 * nessun !important, misure in custom properties.
 *
 * Le classi qui sono nomi nostri (.mtit, .btn-franchi-o, .post-story-layout-1)
 * e non possono collidere con Salient, quindi non serve confinarle sotto
 * .fum-scope. Le eccezioni sono i nomi generici - .grid, .heart - e quelle
 * sono scoped.
 */

/* =========================================================================
   TIPOGRAFIA DEI NOSTRI TITOLI

   Il vecchio titoli.css aveva 50 regole e 19 !important e imponeva la
   tipografia a tutto il sito. Qui si stilano SOLO le classi dei nostri
   componenti: i titoli generici li comanda Salient dalle sue opzioni.

   NESSUN font-family. C'era "jar_binksregular", il carattere del marchio, con
   la motivazione che e identita e non decorazione. Sbagliato per due ragioni:

   1. il carattere lo comanda Salient, come i colori. Un tema nuovo con la
      tipografia di quello vecchio e un tema vecchio;
   2. e non funzionava comunque: l'@font-face di jar_binksregular sta in
      css/fonts.css, che fa parte del CSS vecchio e con FUM_CHILD_CSS_OFF non
      viene caricato. Quel font-family cadeva sul fallback serif, quindi i
      titoli erano in Times.

   Se un giorno si vuole il carattere del marchio sui titoli, e un passo
   deliberato: si carica l'@font-face dal CSS nuovo e si applica dove serve.
   Non per inerzia dal vecchio tema.

   Nessun font-size nemmeno. Nel markup .mtit e .stit stanno su <h1> e <h2>,
   quindi Salient li dimensiona gia con la sua scala: imporne un'altra voleva
   dire discutere con il tema su una cosa che il tema sa fare.
   ========================================================================= */

.fum-scope .mtit,
.fum-scope .stit {
    margin: 0 0 .4em;
    color: inherit;
}

/* I template mettono il sottotitolo dentro un <small> nel titolo: va a capo e
   piu piccolo. font-family non serve piu dichiararlo, ora che il titolo non
   impone un carattere. */
.fum-scope .mtit small,
.fum-scope .stit small {
    display: block;
    font-size: .55em;
    color: inherit;
    opacity: var(--fum-muted, .68);
}

/* .jar-binks e .tit-jar-binks prendono il nome dal carattere del marchio, ma
   non lo impongono piu, ne la dimensione: vedi la nota sopra. Nel markup
   .tit-jar-binks sta su <h3>, che Salient dimensiona. */
.fum-scope .tit-jar-binks {
    margin: 0;
}

.fum-scope .tit-jar-binks-h4 {
    margin: 0 0 .3em;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.fum-scope .tit-piu-piccolo {
    margin: 0 0 .3em;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.fum-scope .tit-piu-piccolo a {
    color: inherit;
    text-decoration: none;
}

.fum-scope .tit-piu-piccolo a:hover {
    color: var(--fum-accent, #e1251b);
}

.fum-scope .paragra-piu-piccolo {
    font-size: 13px;
    line-height: 1.5;
    color: inherit;
    opacity: var(--fum-muted, .68);
}

/* =========================================================================
   BLOCCO "FUM · SECTION TITLE"

   Lo spazio verticale lo mette UN solo elemento, scelto dall'editor. Prima si
   sommavano pt-md-5 sul contenitore, mt-md-5 sulla riga e mt-5 sulla colonna:
   fino a nove rem su desktop e tre su mobile, cioe anche incoerente fra le due
   viste.

   La scala e in rem e non in vh: un titolo di sezione deve stare in
   proporzione al testo, non all'altezza della finestra.
   ========================================================================= */

.fum-scope .fum-section-title {
    --fum-section-space: 3rem;

    padding-top: var(--fum-section-space);
    padding-bottom: var(--fum-section-space);
}

.fum-scope .fum-section-title--none   { --fum-section-space: 0; }
.fum-scope .fum-section-title--small  { --fum-section-space: 1.5rem; }
.fum-scope .fum-section-title--medium { --fum-section-space: 3rem; }
.fum-scope .fum-section-title--large  { --fum-section-space: 5rem; }

/* Su telefono le proporzioni si stringono: tre rem sopra e sotto un titolo in
   uno schermo da 600px di altezza sono un terzo della vista. */
@media (max-width: 690px) {
    .fum-scope .fum-section-title {
        --fum-section-space: 2rem;
    }

    .fum-scope .fum-section-title--large { --fum-section-space: 3rem; }
}

/* Il titolo dentro il blocco non ha margine proprio: lo spazio e del
   contenitore, altrimenti si torna a sommare. */
.fum-scope .fum-section-title .mtit {
    margin: 0;
}

/* =========================================================================
   PULSANTI

   Tre varianti nel markup: btn-franchi-o (outline, a blocco),
   btn-franchi-lg (pieno) e btn-franchi-lg-sec (secondario).
   Il colore viene da Salient.
   ========================================================================= */

.fum-scope .btn-franchi-o,
.fum-scope .btn-franchi-lg,
.fum-scope .btn-franchi-lg-sec {
    --fum-btn-pad: 14px 28px;

    display: inline-block;
    padding: var(--fum-btn-pad);
    border: 1px solid var(--fum-accent, #e1251b);
    border-radius: var(--fum-radius, 4px);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .25s var(--fum-ease, ease),
                color .25s var(--fum-ease, ease);
}

/* btn-franchi-o nel vecchio tema era display:block a tutta larghezza: lo
   resta, perche i template lo usano come call to action di fine sezione. */
.fum-scope .btn-franchi-o {
    display: block;
    max-width: 320px;
    margin: 2rem auto;
    background: transparent;
    color: var(--fum-accent, #e1251b);
}

.fum-scope .btn-franchi-o:hover {
    background: var(--fum-accent, #e1251b);
    color: #fff;
}

.fum-scope .btn-franchi-lg {
    background: var(--fum-accent, #e1251b);
    color: #fff;
}

.fum-scope .btn-franchi-lg:hover {
    background: transparent;
    color: var(--fum-accent, #e1251b);
}

.fum-scope .btn-franchi-lg-sec {
    background: transparent;
    border-color: rgba(0, 0, 0, .25);
    color: inherit;
}

/* Non si usa currentColor per lo sfondo: nella stessa regola currentColor
   risolve al color COMPUTATO dell'elemento, quindi sfondo e testo finirebbero
   dello stesso colore. Un velo neutro funziona su qualunque skin di Salient e
   non puo diventare illeggibile. */
.fum-scope .btn-franchi-lg-sec:hover {
    border-color: currentColor;
    background: rgba(0, 0, 0, .06);
}

.fum-scope .btn-sm {
    --fum-btn-pad: 10px 18px;
}

/* =========================================================================
   GRIGLIE ISOTOPE

   .grid e un nome generico: scoped, altrimenti rischia di pescare elementi di
   Salient. Lo stesso vale per il JS, che in fum-init.js cerca dentro
   .fum-scope.

   Isotope posiziona in assoluto, quindi serve che gli item abbiano una
   larghezza percentuale e il .grid-sizer la definisca.
   ========================================================================= */

.fum-scope .grid {
    margin: 0 0 3rem;
}

.fum-scope .grid::after {
    content: "";
    display: block;
    clear: both;
}

.fum-scope .grid-sizer,
.fum-scope .grid-item {
    width: 100%;
}

@media (min-width: 690px) {
    .fum-scope .grid-sizer,
    .fum-scope .grid-item { width: 50%; }
}

@media (min-width: 1000px) {
    .fum-scope .grid-sizer,
    .fum-scope .grid-item { width: 33.3333%; }
}

@media (min-width: 1400px) {
    .fum-scope .grid-sizer,
    .fum-scope .grid-item { width: 25%; }
}

.fum-scope .grid-item {
    float: left;
    padding: 0 12px 24px;
}

/* --- Sentinella dello scroll infinito ------------------------------------
   Sta fuori dalla .grid, altrimenti Isotope la tratterebbe come un item e la
   posizionerebbe in assoluto. L'etichetta si vede solo mentre carica: fuori
   dal caricamento e un'area vuota che serve solo all'IntersectionObserver. */

.fum-scope .fum-slabs-more {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    margin-bottom: 2rem;
}

.fum-scope .fum-slabs-more__label {
    opacity: 0;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: inherit;
    transition: opacity .2s var(--fum-ease, ease);
}

.fum-scope .fum-slabs-more.is-loading .fum-slabs-more__label {
    opacity: var(--fum-muted, .68);
}

/* Griglia orizzontale della gallery di un progetto. */
.fum-scope .grid-hor {
    margin: 0 0 3rem;
}

.fum-scope .grid-sizer-hor,
.fum-scope .grid-item-hor {
    width: 100%;
}

@media (min-width: 690px) {
    .fum-scope .grid-sizer-hor,
    .fum-scope .grid-item-hor { width: 50%; }
}

@media (min-width: 1200px) {
    .fum-scope .grid-sizer-hor,
    .fum-scope .grid-item-hor { width: 33.3333%; }
}

.fum-scope .grid-item-hor {
    float: left;
    padding: 0 8px 16px;
}

.fum-scope .grid-item-hor img {
    display: block;
    width: 100%;
    height: auto;
}

/* =========================================================================
   CARD  (lastre, progetti, articoli)

   Tutte usano .post-story-layout-1 come contenitore.
   ========================================================================= */

.fum-scope .post-story-layout-1 {
    position: relative;
    height: 100%;
}

.fum-scope .post-story-layout-1 .img-wrapper {
    display: block;
    overflow: hidden;
    border-radius: var(--fum-radius, 4px);
}

.fum-scope .post-story-layout-1 .img-wrapper img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .5s var(--fum-ease, ease);
}

.fum-scope .post-story-layout-1 .img-wrapper:hover img {
    transform: scale(1.04);
}

.fum-scope .img-100 {
    width: 100%;
    height: auto;
}

/* Segnaposto per i post senza immagine in evidenza: fum_featured_image()
   restituisce un div con queste classi invece di un <img>, cosi la griglia
   masonry ha comunque un'altezza da misurare. */
.fum-scope .img-placeholder {
    aspect-ratio: 4 / 3;
    background: rgba(0, 0, 0, .06);
    border-radius: var(--fum-radius, 4px);
}

.fum-scope .excerpt {
    font-size: 14px;
    line-height: 1.5;
    color: inherit;
}

.fum-scope .excerpt hr {
    margin: 1rem 0 0;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, .08);
}

/* --- Dettagli della card lastra ------------------------------------------ */

.fum-scope .slabs_details {
    font-size: 13px;
    line-height: 1.6;
    color: inherit;
    opacity: var(--fum-muted, .68);
}

.fum-scope .slabs_details .block_number a {
    color: inherit;
    text-decoration: none;
}

.fum-scope .slabs_details .block_number a:hover {
    color: var(--fum-accent, #e1251b);
}

.fum-scope .location_txt {
    margin-top: .3em;
}

.fum-scope .slab_location,
.fum-scope .slab_color,
.fum-scope .slab_finish {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.fum-scope .slab_location:hover,
.fum-scope .slab_color:hover,
.fum-scope .slab_finish:hover {
    border-bottom-color: currentColor;
}

.fum-scope .slabs_color {
    margin-top: .3em;
}

/* --- Pastiglie di colore -------------------------------------------------

   Recuperate da assets/overrides.css del vecchio tema: erano l'unico posto
   dove stavano, ed e per questo che spegnendo il CSS vecchio sono sparite.

   QUESTE TINTE NON VENGONO DA SALIENT, ED E CORRETTO COSI.
   Non sono colori di interfaccia ma dati: la pastiglia di "Green" deve essere
   verde qualunque palette abbia il tema. E l'unica eccezione legittima alla
   regola "i colori li comanda Salient", e vale la pena che sia scritta.

   Il ::before sta solo sulle combinazioni note, non su .slab_color in
   generale: un termine colore senza tinta dichiarata non deve mostrare un
   cerchio vuoto. Gli slug coperti sono i dieci realmente in uso, verificati
   sul database. purple e brown erano nel vecchio CSS ma non corrispondono a
   nessun termine: lasciati fuori.

   Valgono anche per .item_colors, cioe le voci del dropdown Colors nella nav
   della gallery. */

.fum-scope .slab_color,
.fum-scope .item_colors {
    --fum-swatch: 14px;
    text-transform: lowercase;
}

.fum-scope .slab_color.white::before,
.fum-scope .slab_color.grey::before,
.fum-scope .slab_color.black::before,
.fum-scope .slab_color.green::before,
.fum-scope .slab_color.blue::before,
.fum-scope .slab_color.red::before,
.fum-scope .slab_color.beige::before,
.fum-scope .slab_color.pink::before,
.fum-scope .slab_color.pink-peach::before,
.fum-scope .slab_color.gold-tan::before,
.fum-scope .item_colors.white::before,
.fum-scope .item_colors.grey::before,
.fum-scope .item_colors.black::before,
.fum-scope .item_colors.green::before,
.fum-scope .item_colors.blue::before,
.fum-scope .item_colors.red::before,
.fum-scope .item_colors.beige::before,
.fum-scope .item_colors.pink::before,
.fum-scope .item_colors.pink-peach::before,
.fum-scope .item_colors.gold-tan::before {
    content: "";
    display: inline-block;
    width: var(--fum-swatch, 14px);
    height: var(--fum-swatch, 14px);
    margin-right: .4em;
    border-radius: 50%;
    vertical-align: -.15em;
}

.fum-scope .slab_color.white::before,
.fum-scope .item_colors.white::before {
    background-color: #fff;

    /* Senza bordo il bianco sparisce sulla card bianca. currentColor invece di
       un grigio fisso, cosi il contorno segue il testo di Salient. */
    box-shadow: inset 0 0 0 1px currentColor;
}

.fum-scope .slab_color.grey::before,
.fum-scope .item_colors.grey::before { background-color: #69645e; }

.fum-scope .slab_color.black::before,
.fum-scope .item_colors.black::before { background-color: #000; }

.fum-scope .slab_color.green::before,
.fum-scope .item_colors.green::before { background-color: #39403c; }

.fum-scope .slab_color.blue::before,
.fum-scope .item_colors.blue::before { background-color: #192a39; }

.fum-scope .slab_color.red::before,
.fum-scope .item_colors.red::before { background-color: #7d3d30; }

.fum-scope .slab_color.beige::before,
.fum-scope .item_colors.beige::before { background-color: #a2947b; }

.fum-scope .slab_color.pink::before,
.fum-scope .item_colors.pink::before { background-color: #efb4e1; }

.fum-scope .slab_color.pink-peach::before,
.fum-scope .item_colors.pink-peach::before { background-color: #efdcd3; }

.fum-scope .slab_color.gold-tan::before,
.fum-scope .item_colors.gold-tan::before { background-color: #efcb1e; }

/* =========================================================================
   FASCE CON TITOLO SOVRIMPRESSO

   Usate dalla scheda lastra, dal banner del materiale e dalle card
   Melbourne/Sydney della homepage ([fum_stone_gallery_card]).
   ========================================================================= */

.fum-scope .h50 {
    min-height: 50vh;
}

@media (min-width: 1000px) {
    .fum-scope .desktop-h100 {
        min-height: 72vh;
    }
}

.fum-scope .suggestive,
.fum-scope .suggestive_overlay,
.fum-scope .suggestive_overlay_dark {
    position: relative;
    display: block;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    text-decoration: none;
}

/* La velatura serve a rendere leggibile il testo sopra la foto.

   Al passaggio SCURISCE, non schiarisce. Nel vecchio overrides.css erano
   rgba(0,0,0,.7) a opacita .3 di riposo e opacita 1 in hover, cioe dal 21% al
   70%: la card su cui sei si stacca dall'altra e il testo diventa piu
   leggibile. Avevo invertito il verso senza accorgermene. */
.fum-scope .suggestive_overlay::before,
.fum-scope .suggestive_overlay_dark::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, .22);
    transition: background-color .4s var(--fum-ease, ease);
}

.fum-scope .suggestive_overlay_dark::before {
    background: rgba(0, 0, 0, .46);
}

.fum-scope .suggestive_overlay:hover::before {
    background: rgba(0, 0, 0, .6);
}

.fum-scope .absolute-center {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-content: center;
    padding: 24px;
}

/* --- Stone Gallery: le due colonne --------------------------------------

   Griglia CSS invece di .row + .col-md-6. Il motivo non e estetico: il .row di
   Bootstrap ha margini negativi di 15px per lato, e dentro una riga WPBakery
   impostata a stretch_row_content_no_spaces quei margini facevano sbordare il
   blocco di 15px. Era la differenza fra questa riga e le altre, che hanno la
   stessa impostazione.

   Larghezza e padding ora li decide la riga WPBakery, dove chi compone la
   pagina ha gia i controlli. */

.fum-stone-gallery {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .fum-stone-gallery {
        grid-template-columns: 1fr 1fr;
    }
}

/* --- Card della Stone Gallery -------------------------------------------

   L'immagine e un <img> vero e non un background, quindi srcset e lazy
   funzionano. Serve lo z-index esplicito: il ::before della velatura e il
   primo figlio nell'ordine del DOM, quindi senza z-index l'immagine, che viene
   dopo, gli finirebbe sopra e la velatura non si vedrebbe.

   object-fit: cover ritaglia al formato della card. Lo zoom al 240%
   dell'originale, se lo si rivuole, e il parametro zoom del blocco. */

.fum-scope .fum-stone-card {
    --fum-card-zoom: 1;
    position: relative;
    overflow: hidden;
}

.fum-scope .fum-stone-card__img,
.fum-scope .fum-stone-card__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(var(--fum-card-zoom, 1));
    transition: transform .8s var(--fum-ease, ease);
}

.fum-scope .fum-stone-card__bg {
    display: block;
    background-size: cover;
    background-position: center;
}

/* Lo zoom al passaggio e il movimento che il vecchio tema non aveva e che da
   vita alla card senza spostare nulla. */
.fum-scope .fum-stone-card:hover .fum-stone-card__img,
.fum-scope .fum-stone-card:hover .fum-stone-card__bg {
    transform: scale(calc(var(--fum-card-zoom, 1) * 1.06));
}

.fum-scope .sec-tit,
.fum-scope .sec-tit h3,
.fum-scope .sec-tit h4,
.fum-scope .sec-tit p {
    color: #fff;
}

.fum-scope .sec-tit p {
    margin: .6em 0 0;
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.fum-scope .height150,
.fum-scope .height-fit-content {
    height: auto;
}

.fum-scope .add-to-wishlist {
    display: inline-block;
    margin-top: 1rem;
    cursor: pointer;
}

.fum-scope .add-to-wishlist p {
    margin: 0;
    padding: 10px 22px;
    border: 1px solid #fff;
    border-radius: var(--fum-radius, 4px);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: background-color .25s var(--fum-ease, ease), color .25s var(--fum-ease, ease);
}

.fum-scope .add-to-wishlist:hover p {
    background: #fff;
    color: inherit;
}

/* =========================================================================
   BARRE DI NAVIGAZIONE  (gallery e progetti)

   La meccanica dei dropdown sta in fum-layout.css: qui solo l'aspetto.
   ========================================================================= */

.fum-scope .navi-nan {
    margin-bottom: 2rem;
    padding: 4px 0;
    border-top: 1px solid rgba(0, 0, 0, .08);
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.fum-scope .navi-nan .nav-link {
    display: block;
    padding: 10px 14px;
    color: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

.fum-scope .navi-nan .nav-link:hover,
.fum-scope .navi-nan .nav-link[aria-expanded="true"] {
    color: var(--fum-accent, #e1251b);
}

.fum-scope .dropdown-item {
    display: block;
    padding: 7px 18px;
    color: inherit;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}

.fum-scope .dropdown-item:hover,
.fum-scope .dropdown-item.active {
    background: rgba(0, 0, 0, .04);
    color: var(--fum-accent, #e1251b);
}

.fum-scope .dropdown-item small {
    color: inherit;
    opacity: var(--fum-muted, .68);
}

.fum-scope .cna_disclaimer {
    padding: 10px 0;
    font-size: 10px;
    letter-spacing: .08em;
    color: inherit;
    opacity: var(--fum-muted, .68);
}

/* =========================================================================
   MATERIALE: banner, descrizione, download
   ========================================================================= */

.fum-scope .material-banner {
    margin-bottom: 2.5rem;
}

.fum-scope .material-intro {
    margin-bottom: 3rem;
}

.fum-scope .material-description {
    font-size: 15px;
    line-height: 1.7;
}

.fum-scope .material-description p:last-child {
    margin-bottom: 0;
}

/* =========================================================================
   WISHLIST: pagina e testo informativo
   ========================================================================= */

.fum-scope #tabella-wishlist {
    margin-bottom: 3rem;
}

.fum-scope #tabella-wishlist img {
    display: block;
    width: 100%;
    max-width: 220px;
    height: auto;
    border-radius: var(--fum-radius, 4px);
}

.fum-scope #tabella-wishlist h4 {
    margin: 0 0 .4em;
    font-size: 16px;
}

.fum-scope .informazioni-utilizzo h4 {
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.fum-scope .sepa-linea {
    height: 1px;
    background: rgba(0, 0, 0, .1);
}

/* =========================================================================
   VARIE
   ========================================================================= */

.fum-scope .social-sharer {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, .08);
}

.fum-scope .social-sharer h3 {
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.fum-scope .categories {
    margin-bottom: 2rem;
    font-size: 12px;
    letter-spacing: .1em;
}

.fum-scope .categories ul {
    display: inline;
    padding: 0;
    list-style: none;
}

.fum-scope .categories li {
    display: inline-block;
    margin-right: 14px;
}

.fum-scope .blog-subtit {
    font-size: 13px;
    color: inherit;
    opacity: var(--fum-muted, .68);
}

.fum-scope .img-zoom {
    display: block;
    cursor: zoom-in;
}

.fum-scope .single-progetti-details {
    font-size: 14px;
    color: inherit;
    opacity: var(--fum-muted, .68);
}