/* ============================================================
   TOURME / PLANORYS — Custom CSS Completo
   Template Agentik (Joomla 5 + SP Page Builder)
   
   Inserire in: templates/agentik/css/custom.css
   Oppure: SP Page Builder → Global → Custom CSS
   ============================================================ */


/* === VARIABILI === */
:root {
    --tm-blu-notte: #0F1B2D;
    --tm-blu-royal: #1E3A6E;
    --tm-blu-acceso: #2B6CB0;
    --tm-arancio: #D4792A;
    --tm-arancio-chiaro: #E8943A;
    --tm-bianco: #FFFFFF;
    --tm-gradient: linear-gradient(135deg, var(--tm-blu-royal) 0%, var(--tm-blu-acceso) 40%, var(--tm-arancio) 100%);
}


/* ============================================================
   1. CTA PRIMARIO
   Normale: gradiente blu→arancio, testo bianco
   Hover:   sfondo bianco, testo blu, bordo 2px gradiente
   ============================================================ */

.sppb-btn-primary,
.sppb-btn-custom,
a.sppb-btn-primary,
a.sppb-btn-custom,
.sp-button {
    position: relative;
    background: var(--tm-gradient) !important;
    color: var(--tm-bianco) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 14px 32px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: 0.3px;
    text-decoration: none !important;
    cursor: pointer;
    overflow: hidden;
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Pseudo-elemento bordo gradiente (nascosto di default) */
.sppb-btn-primary::before,
.sppb-btn-custom::before,
a.sppb-btn-primary::before,
a.sppb-btn-custom::before,
.sp-button::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    padding: 2px;
    background: var(--tm-gradient);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s ease;
}

/* Hover primario */
.sppb-btn-primary:hover,
.sppb-btn-custom:hover,
a.sppb-btn-primary:hover,
a.sppb-btn-custom:hover,
.sp-button:hover {
    background: var(--tm-bianco) !important;
    color: var(--tm-blu-royal) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(30, 58, 110, 0.25);
}

.sppb-btn-primary:hover::before,
.sppb-btn-custom:hover::before,
a.sppb-btn-primary:hover::before,
a.sppb-btn-custom:hover::before,
.sp-button:hover::before {
    opacity: 1;
}

/* Active/Click */
.sppb-btn-primary:active,
.sppb-btn-custom:active,
.sp-button:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
}


/* ============================================================
   2. CTA SECONDARIO (l'opposto del primario)
   Normale: sfondo bianco, testo blu, bordo 2px gradiente
   Hover:   gradiente pieno, testo bianco
   ============================================================ */

.sppb-btn-secondary,
.sppb-btn-default,
a.sppb-btn-secondary,
a.sppb-btn-default {
    position: relative;
    background: var(--tm-bianco) !important;
    color: var(--tm-blu-royal) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 14px 32px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: 0.3px;
    text-decoration: none !important;
    cursor: pointer;
    overflow: hidden;
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Bordo gradiente (visibile di default) */
.sppb-btn-secondary::before,
.sppb-btn-default::before,
a.sppb-btn-secondary::before,
a.sppb-btn-default::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    padding: 2px;
    background: var(--tm-gradient);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 1;
    z-index: -1;
    transition: opacity 0.4s ease;
}

/* Hover secondario */
.sppb-btn-secondary:hover,
.sppb-btn-default:hover,
a.sppb-btn-secondary:hover,
a.sppb-btn-default:hover {
    background: var(--tm-gradient) !important;
    color: var(--tm-bianco) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(212, 121, 42, 0.25);
}

.sppb-btn-secondary:hover::before,
.sppb-btn-default:hover::before,
a.sppb-btn-secondary:hover::before,
a.sppb-btn-default:hover::before {
    opacity: 0;
}

/* Variante su sfondo scuro: trasparente invece di bianco */
.sppb-section[style*="0F1B2D"] .sppb-btn-secondary,
.sppb-section[style*="0f1b2d"] .sppb-btn-secondary,
.sppb-section[style*="rgb(15, 27, 45)"] .sppb-btn-secondary {
    background: transparent !important;
    color: var(--tm-bianco) !important;
}


/* ============================================================
   3. TICKER — Quadratino → Visto verde sull'item attivo
   
   Struttura DOM reale (da DevTools):
   .home-business-scroll
     .business-scroll-track
       .sppb-addon-wrapper.addon-root-heading  ← opacity inline
         .sppb-addon.sppb-addon-header          ← ha ::before
           <div class="sppb-addon-addon-header">
             <p>Testo item...</p>
   
   Lo script JS aggiunge .ticker-active sul wrapper con opacity >= 0.95
   ============================================================ */

/* Transizione fluida sul ::before di tutti gli item */
.home-business-scroll .business-scroll-track .sppb-addon-wrapper.addon-root-heading .sppb-addon.sppb-addon-header::before {
    transition: all 0.35s ease;
}

/* ITEM ATTIVO: quadratino → visto verde */
.home-business-scroll .business-scroll-track .sppb-addon-wrapper.addon-root-heading.ticker-active .sppb-addon.sppb-addon-header::before {
    content: '✓' !important;
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    color: #22C55E;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
    transform: translateY(-50%) scale(1.15);
}


/* ============================================================
   4. TIPOGRAFIA & PAROLE EVIDENZIATE
   ============================================================ */

/* Parola in corsivo nei titoli → colore arancio */
.sppb-addon-title .sppb-title-heading em,
.sppb-addon-title .sppb-title-heading i,
.sppb-title-heading em,
.sppb-title-heading i {
    color: var(--tm-arancio) !important;
    font-style: italic;
}

body {
    font-family: 'Open Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.sppb-addon-title,
.sppb-title-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}


/* ============================================================
   5. FOCUS / ACCESSIBILITÀ
   ============================================================ */

.sppb-btn-primary:focus,
.sppb-btn-secondary:focus,
.sp-button:focus {
    outline: 2px solid var(--tm-arancio);
    outline-offset: 3px;
}
#sp-header.header-sticky #sp-logo .logo-image {
    filter: none!important; 
}
.logo-image
 {
    height: 100px!important;
    margin-top: 30px!important;
}
#sp-header #sp-logo .logo-image {
    filter: none!important; 
}

.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span, .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
    color: #fff!important;
	font-weight: 700;
}
#sp-header.header-sticky #sp-menu .sp-megamenu-wrapper .sp-megamenu-parent .sp-menu-item>a {
	font-weight: 700!important;
}
#sp-header #sp-menu .sp-megamenu-wrapper .sp-megamenu-parent .sp-menu-item>a {
	font-weight: 700!important;
}
.home-default #sp-header #sp-menu .sp-megamenu-wrapper .sp-megamenu-parent .sp-menu-item.active>a {
	color: var(--sppb-text-secondary) !important;
}
#sp-header.header-sticky .sp-megamenu-parent > li > span {
    color: var(--sppb-text-secondary) !important;
	font-weight: 700;
}
.sppb-addon-articles .sppb-article-info-wrap {
    padding: 10px 0px 0px!important;
}
#sppb-addon-6b8d5edb-21c5-43c4-8013-a5c08cdafe87 .sppb-addon-articles .sppb-article-info-wrap h3 {
    margin-top: -10px!important;
	margin-bottom: 2px!important;
}
/* ============================================================
   TOURME — Aggiunte CSS
   Da AGGIUNGERE al custom.css già esistente
   ============================================================ */


/* ============================================================
   A. OMBRA HEADER STICKY
   Appare solo quando il menu diventa sticky (scroll down)
   ============================================================ */

#sp-header.header-sticky {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25),
                0 1px 4px rgba(0, 0, 0, 0.15);
}

/* Se il template usa una classe diversa per lo sticky, 
   copriamo anche le varianti comuni: */
#sp-header.is-sticky,
#sp-header[style*="fixed"],
.header-section.sticky,
.sp-megamenu-parent.sticky {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25),
                0 1px 4px rgba(0, 0, 0, 0.15);
}

/* Transizione fluida: l'ombra appare gradualmente */
#sp-header {
    transition: box-shadow 0.3s ease;
    box-shadow: none;
}

/* ============================================================
   TOURME — Produzioni: Disabilita e Nascondi Link
   Selettori esatti da DevTools
   
   Da AGGIUNGERE al custom.css
   ============================================================ */


/* === TUTTI I LINK DENTRO LA SEZIONE PRODUZIONI === */

/* Disabilita il click su OGNI link dentro le card articoli */
.sppb-addon-articles.home-articles a {
    pointer-events: none !important;
    cursor: default !important;
    text-decoration: none !important;
    color: inherit !important;
}

/* Link immagine: rimuovi href via CSS (visivamente disabilitato) */
.sppb-addon-articles.home-articles a.sppb-article-img-wrap {
    pointer-events: none !important;
    cursor: default !important;
}

/* Link titolo nell'h3 */
.sppb-addon-articles.home-articles .sppb-article-info-wrap h3 a {
    pointer-events: none !important;
    cursor: default !important;
    color: inherit !important;
}

/* Link categoria */
.sppb-addon-articles.home-articles .sppb-article-meta-category a {
    pointer-events: none !important;
    cursor: default !important;
    color: inherit !important;
}

/* Nascondi completamente il "Read More" / "Leggi tutto" */
.sppb-addon-articles.home-articles .sppb-readmore,
.sppb-addon-articles.home-articles .sppb-article-readmore,
.sppb-addon-articles.home-articles a.sppb-readmore {
    display: none !important;
}


/* ============================================================
   ANTI-INDICIZZAZIONE: Nascondi gli href ai crawler
   
   Il CSS sopra blocca il click per gli utenti, ma Google 
   può ancora vedere gli href nel DOM. Per evitarlo hai 
   DUE opzioni (scegli quella che preferisci):
   
   ─────────────────────────────────────────────────────
   OPZIONE A — JavaScript (consigliata, più pulita)
   Rimuove gli href dal DOM al caricamento della pagina.
   Aggiungi lo script qui sotto al modulo Custom HTML 
   che hai già creato per il ticker, oppure creane uno 
   nuovo assegnato alla Home.
   ─────────────────────────────────────────────────────
   OPZIONE B — Robots / Noindex sugli articoli
   Nei singoli articoli Joomla:
   Articolo → Tab "Opzioni pubblicazione" →
   Campo "Robots" → "noindex, nofollow"
   Questo dice a Google di non indicizzare la scheda.
   Combina con Opzione A per sicurezza totale.
   ─────────────────────────────────────────────────────
   ============================================================ */


/* ============================================================
   PAGINA PORTFOLIO (/case-study) — stesse regole
   
   Se usi SP Page Builder con addon Articles e classe 
   "home-articles" anche lì, il CSS sopra funziona già.
   
   Se usi un layout Category Blog nativo o classe diversa,
   aggiungi "produzioni-vetrina" come Page Class nel menu item
   e usa queste regole aggiuntive:
   ============================================================ */

.produzioni-vetrina a {
    pointer-events: none !important;
    cursor: default !important;
    text-decoration: none !important;
    color: inherit !important;
}

.produzioni-vetrina .readmore,
.produzioni-vetrina .sppb-readmore {
    display: none !important;
}

/* Le card mantengono un hover visivo elegante sull'immagine */
.sppb-addon-articles.home-articles .sppb-article-img-wrap img,
.produzioni-vetrina .sppb-article-img-wrap img {
    transition: transform 0.4s ease;
}

.sppb-addon-articles.home-articles .sppb-addon-article-layout-content:hover .sppb-article-img-wrap img,
.produzioni-vetrina .sppb-addon-article-layout-content:hover .sppb-article-img-wrap img {
    transform: scale(1.03);
}
.real-stories-testimonials .sppb-carousel-inner .sppb-item .sppb-item-wrap .sppb-testimonial-message .designation {
    color: #fff!important;
}
.real-stories-testimonials .sppb-carousel-inner .sppb-item .sppb-item-wrap .sppb-testimonial-message .name {
    color: #fff!important;
}
.tags {
	display: block!important;
    position: absolute!important;
    margin-top: -35px!important;
    right: 0px!important;
    background: transparent!important;
}
.tags>li a {
    background: transparent!important;
}
.sppb-addon-clients .sppb-carousel-extended-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px; /* regola questo valore a piacere */
}

.sppb-addon-clients .sppb-addon-clients-image {
  max-height: 60px; /* stesso valore di sopra */
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
#section-id-1767607152713 .sppb-div-addon {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

#section-id-1767607152713 .sppb-addon-wrapper.addon-root-animated-number {
  flex: 1 !important;
  min-width: 0 !important;
  align-self: center !important;
}

#section-id-1767607152713 .sppb-addon-wrapper.addon-root-icon {
  flex-shrink: 0 !important;
  align-self: center !important;
}

/* Numero più compatto */
#section-id-1767607152713 .sppb-animated-number {
  font-size: 1.6rem !important;
  line-height: 1.1 !important;
  margin-bottom: 4px !important;
}

/* Testo descrittivo più piccolo */
#section-id-1767607152713 .sppb-animated-number-title {
  font-size: 0.72rem !important;
  line-height: 1.3 !important;
}

/* Icona allineata */
#section-id-1767607152713 .sppb-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
}