/* =====================================================================
   ElbaMyLove - elm-share.css
   COMPONENTE UNICO DI CONDIVISIONE SOCIAL. Fonte unica per tutto il sito.

   PERCHE' ESISTE QUESTO FILE
   Lo stesso componente era scritto tre volte con nomi diversi:
     - .elm-sh-btn   -> schede dettaglio Dormire/Mangiare (scheda-dettaglio.css)
     - .v4-sh-btn    -> PromoLanding.aspx (style inline)
     - .nws-sh       -> scheda dettaglio News (style inline, con icone SVG
                        disegnate a mano: WhatsApp e X erano irriconoscibili)
   Da qui in poi il componente e' UNO: classe .elm-sh-btn, questo file.

   ICONE: Bootstrap Icons, gia' caricate globalmente dalla MasterPage
   (<i class="bi bi-whatsapp"></i>). MAI ridisegnare i loghi social a mano:
   i marchi hanno una forma precisa e un SVG "a occhio" si vede subito.

   TOKEN: --mute, --ink-2, --ink-3, --gold-dk, --line arrivano da
   guidelines.css (caricato dalla MasterPage su tutte le pagine), quindi
   questo file funziona ovunque senza dipendere da scheda-dettaglio.css.

   MARKUP DI RIFERIMENTO
   <div class="elm-side-share" data-url="..." data-title="..." data-copied="Link copiato">
       <div class="elm-side-share-lb">Condividi</div>
       <div class="elm-side-share-row">
           <a id="v4ShWa"   class="elm-sh-btn sh-wa"   ...><i class="bi bi-whatsapp"></i></a>
           <a id="v4ShFb"   class="elm-sh-btn sh-fb"   ...><i class="bi bi-facebook"></i></a>
           <a id="v4ShX"    class="elm-sh-btn sh-x"    ...><i class="bi bi-twitter-x"></i></a>
           <a id="v4ShMail" class="elm-sh-btn sh-mail" ...><i class="bi bi-envelope-fill"></i></a>
           <button id="v4ShCopy" class="elm-sh-btn sh-copy" ...><i class="bi bi-link-45deg"></i></button>
       </div>
   </div>

   LOGICA JS: App_Script/elm-share.js (costruisce gli href e gestisce la
   copia link + toast). Le schede dettaglio hanno ancora il loro script
   inline equivalente: quando verranno ripulite useranno questo.
   ===================================================================== */

/* ============ CONDIVIDI (flat: solo icone colorate, niente cerchi/bordi/box) ============ */
.elm-side-share{margin-top:1.4rem}
.elm-side-share-lb{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:.75rem;text-align:center}
.elm-side-share-row{display:flex;justify-content:center;gap:1.3rem;flex-wrap:wrap}
.elm-sh-btn{background:none;border:none;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:1.45rem;line-height:1;text-decoration:none;transition:transform .2s}
.elm-sh-btn:hover{transform:translateY(-3px)}
.elm-sh-btn.sh-wa{color:#25D366}
.elm-sh-btn.sh-fb{color:#1877F2}
.elm-sh-btn.sh-x{color:#000}
.elm-sh-btn.sh-mail{color:var(--gold-dk)}
.elm-sh-btn.sh-copy{color:var(--ink-3)}

/* Il colore deve restare quello del brand anche dopo :visited e anche se
   una regola generica del tema colora gli <a> dentro il testo (succede
   nel corpo dell'articolo news). */
.elm-sh-btn:link,.elm-sh-btn:visited,.elm-sh-btn:hover,.elm-sh-btn:focus{border-bottom:none;text-decoration:none}
.elm-sh-btn.sh-wa:link,.elm-sh-btn.sh-wa:visited,.elm-sh-btn.sh-wa:hover{color:#25D366}
.elm-sh-btn.sh-fb:link,.elm-sh-btn.sh-fb:visited,.elm-sh-btn.sh-fb:hover{color:#1877F2}
.elm-sh-btn.sh-x:link,.elm-sh-btn.sh-x:visited,.elm-sh-btn.sh-x:hover{color:#000}
.elm-sh-btn.sh-mail:link,.elm-sh-btn.sh-mail:visited,.elm-sh-btn.sh-mail:hover{color:var(--gold-dk)}

/* ============ VARIANTE IN LINEA (fine articolo, non sidebar) ============
   Stessi bottoni, stessi colori: cambia solo l'allineamento. In sidebar il
   blocco e' centrato; dentro un articolo va a sinistra sul filo del testo,
   con un filetto sopra che chiude il corpo dell'articolo. */
/* clear:both e' obbligatorio: il blocco e' un contenitore flex, quindi crea un
   contesto di formattazione e NON puo' sovrapporsi a un float. Se il corpo
   dell'articolo finisce con un'immagine flottata non chiusa, il blocco si
   stringe a larghezza 0 di fianco al float e le icone escono a destra
   (misurato il 22/09/2026 sulla news 471 EN: riga a 382px dentro 375px). */
.elm-side-share.is-inline{clear:both;margin:38px 0 0;padding-top:26px;border-top:1px solid var(--line);
    display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.elm-side-share.is-inline .elm-side-share-lb{margin:0;text-align:left}
.elm-side-share.is-inline .elm-side-share-row{justify-content:flex-start;gap:1.2rem}

/* ============ TOAST (feedback "link copiato") ============
   Stava in scheda-dettaglio.css: e' usato SOLO da questo componente,
   quindi vive qui insieme al resto. */
.elm-toast{
    position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(16px);
    background:var(--ink);color:#fff;padding:.7rem 1.15rem;border-radius:8px;
    font-size:.9rem;font-weight:500;opacity:0;pointer-events:none;z-index:9999;
    transition:opacity .25s ease,transform .25s ease;
}
.elm-toast.is-on{opacity:1;transform:translateX(-50%) translateY(0)}