/* =========================================================
   ROMA SPAZIO DESIGN — STILE GLOBALE
   Da incollare in: Aspetto > Personalizza > CSS Aggiuntivo
   (oppure nel file style.css del child theme GeneratePress)
   ========================================================= */

/* --- 1. IMPORT FONT -----------------------------------------------------
   Font stimati dal PDF (titoli serif elegante spaziato, corpo sans light).
   Se avete il brand kit ufficiale TECMA, sostituite qui i nomi corretti. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Jost:wght@300;400;500&display=swap');

/* --- 2. VARIABILI COLORE --------------------------------------------- */
:root{
  --rsd-navy:        #1B2733; /* testo principale */
  --rsd-blue-dark:   #4E6470; /* header/hero scuro */
  --rsd-blue-mid:    #5D7C8A; /* sfondo hero/sezioni scure */
  --rsd-blue-light:  #7FA0B0; /* sfondo sezioni intermedie */
  --rsd-blue-pale:   #A9C2CD; /* dettagli, hover */
  --rsd-accent:      #8FB4C4; /* icone, linee, accenti */
  --rsd-grey-bg:     #EDEDEA; /* sezioni alternate chiare */
  --rsd-grey-line:   #D8D8D5; /* separatori */
  --rsd-white:       #FFFFFF;

  --rsd-font-title:  'Cormorant Garamond', serif;
  --rsd-font-body:   'Jost', sans-serif;

  --rsd-radius:      2px;
  --rsd-maxwidth:    1200px;
}

/* NOTA COLORE: valori stimati dagli screenshot del PDF.
   Se disponete degli HEX ufficiali, aggiornateli qui: è l'unico punto
   da modificare, tutto il resto del CSS eredita da queste variabili. */

/* --- 3. TIPOGRAFIA BASE ------------------------------------------------ */
body{
  font-family: var(--rsd-font-body);
  font-weight: 300;
  color: var(--rsd-navy);
  line-height: 1.6;
}
h1,h2,h3,h4,
.rsd-title{
  font-family: var(--rsd-font-title);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--rsd-navy);
}
.rsd-eyebrow{
  font-family: var(--rsd-font-body);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.72rem;
  color: var(--rsd-accent);
  font-weight: 500;
}
.rsd-logo{
  font-family: var(--rsd-font-title);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-size: 1.1rem;
}
.rsd-logo em{ font-style: italic; }

/* --- 4. BOTTONI --------------------------------------------------------- */
.rsd-button, .wp-block-button__link.rsd-button{
  display:inline-block;
  padding: 0.65em 1.6em;
  border:1px solid var(--rsd-navy);
  background: transparent;
  color: var(--rsd-navy);
  font-family: var(--rsd-font-body);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  border-radius: var(--rsd-radius);
  transition: all .25s ease;
}
.rsd-button:hover{
  background: var(--rsd-navy);
  color: var(--rsd-white);
}
.rsd-button.is-light{
  border-color: var(--rsd-white);
  color: var(--rsd-white);
}
.rsd-button.is-light:hover{
  background: var(--rsd-white);
  color: var(--rsd-navy);
}
/* Spaziatura automatica sotto la navbar per QUALSIASI sezione che la segue,
   tranne l'Hero (che deve restare sotto la navbar in overlay).
   Così non serve più aggiungere manualmente rsd-below-navbar da nessuna parte. */
/* Spazio sotto la navbar: applicato a tutte le pagine TRANNE
   quelle con l'Hero (dove la navbar deve restare in overlay) */
body:not(.rsd-hero-page) .entry-content{
  padding-top: 160px !important;
}
/* --- 5. NAVBAR (adattiva chiaro/scuro) ---------------------------------- */
/* --- NAVBAR: riquadro centrato, logo sopra + linea + menu sotto --- */
.rsd-navbar{
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  transition: background .3s ease, color .3s ease;
}
.rsd-navbar-inner{
  padding: 1em 3em;
  border-radius: 4px;
  text-align: center;
}
.rsd-navbar .rsd-logo{
  display: inline-block;
  padding-bottom: 0.6em;
  margin-bottom: 0.6em;
  border-bottom: 1px solid currentColor;
  opacity: 0.9;
}
.rsd-navbar .rsd-nav-links{
  display:flex;
  justify-content:center;
  gap: 2em;
  list-style:none;
  margin:0; padding:0;
  font-size: 0.7rem;
  text-transform:uppercase;
  letter-spacing: 0.1em;
}
.rsd-navbar .rsd-nav-links a{
  text-decoration:none;
  color:inherit;
  padding-bottom: 4px;
}
.rsd-navbar .rsd-nav-links a.is-active{
  font-weight: 600;
  border-bottom: 1px solid currentColor;
}

.rsd-navbar.on-dark{
  color: var(--rsd-white);
}
.rsd-navbar.on-dark .rsd-navbar-inner{
  background: rgba(255,255,255,0.12);
}
.rsd-navbar.on-light{
  color: var(--rsd-navy);
}
.rsd-navbar.on-light .rsd-navbar-inner{
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);
}

/* Stile FORTE per logo e link della navbar: vince su qualsiasi
   stile blu/sottolineato di default applicato dal tema o dal browser */
.rsd-navbar .rsd-logo,
.rsd-navbar .rsd-nav-links a{
  text-decoration: none !important;
  color: inherit !important;
}
.rsd-navbar a.rsd-logo:hover,
.rsd-navbar .rsd-nav-links a:hover{
  color: inherit !important;
  opacity: 0.75;
}

/* --- 6. HERO / APERTURA SITO -------------------------------------------- */
.rsd-hero{
  position:relative;
  height: 100vh;
  min-height: 600px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  background: var(--rsd-blue-mid);
}
.rsd-hero video,
.rsd-hero .rsd-hero-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.8s ease;
}
.rsd-hero.is-loaded video{ opacity: 1; }
.rsd-hero.show-bg .rsd-hero-bg{ opacity: 1; }
.rsd-hero-content{
  position:relative;
  z-index: 2;
  color: var(--rsd-white);
}
.rsd-hero-content .rsd-payoff{
  font-family: var(--rsd-font-title);
  font-style: italic;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}
.rsd-hero.show-payoff .rsd-payoff{ opacity:1; transform:none; }
.rsd-hero-scroll{
  position:absolute;
  bottom: 5.0em; left:50%; transform:translateX(-50%);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform:uppercase;
  color: var(--rsd-white);
}

/* --- 7. SEZIONE MOSAICO -------------------------------------------------- */
/* --- SEZIONE MOSAICO (blocco completo, sostituisce tutte le versioni precedenti) --- */
.rsd-mosaic{
  display:flex;
  height: 320px;
  gap: 4px;
}
.rsd-mosaic-col{
  display:flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
}
.rsd-mosaic-col-left{ flex: 1.2; }
.rsd-mosaic-col-center{ flex: 0.8; }
.rsd-mosaic-col-right{ flex: 1; }

.rsd-mosaic-cell{ overflow:hidden; background-color: var(--rsd-blue-pale); flex: 1; }
.rsd-mosaic-cell-2x{ flex: 2; }
.rsd-mosaic-cell img{ width:100%; height:100%; object-fit:cover; display:block; }

.rsd-mosaic-col-center{
  background: var(--rsd-grey-bg);
  display:flex; align-items:center; justify-content:center;
}
.rsd-mosaic-logo{
  writing-mode: vertical-rl;
  color: var(--rsd-blue-mid);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.75rem;
}
@media (max-width: 768px){
  .rsd-mosaic{ flex-direction: column; height: auto; }
  .rsd-mosaic-col{ flex-direction: row; height: 160px; }
}
/* --- 8. STEPS (scroll orizzontale) --------------------------------------- */
.rsd-steps{
  display:flex;
  gap: 2px;
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1em;
}
.rsd-steps::-webkit-scrollbar{ height:4px; }
.rsd-steps::-webkit-scrollbar-thumb{ background: var(--rsd-blue-pale); }
.rsd-step{
  flex: 0 0 200px;
  scroll-snap-align: start;
  background: var(--rsd-white);
  border-right: 1px solid var(--rsd-grey-line);
  padding: 2em 1.5em;
  cursor:pointer;
  transition: background .2s ease;
}
.rsd-step:hover{ background: var(--rsd-grey-bg); }
.rsd-step .rsd-step-number{
  font-family: var(--rsd-font-title);
  font-size: 1.4rem;
  color: var(--rsd-blue-light);
}
.rsd-step .rsd-step-icon{ width: 40px; height:40px; margin-bottom: .8em; color: var(--rsd-blue-mid); }

/* --- 9. POPUP / MODALE --------------------------------------------------- */
.rsd-popup-overlay{
  position:fixed; inset:0;
  background: rgba(27,39,51,0.55);
  display:none;
  align-items:center; justify-content:center;
  z-index: 1000;
}
.rsd-popup-overlay.is-open{ display:flex; }
.rsd-popup{
  background: var(--rsd-white);
  max-width: 480px; width: 90%;
  padding: 2.5em;
  position:relative;
  border-radius: var(--rsd-radius);
}
.rsd-popup-close{
  position:absolute; top:1em; right:1em;
  background:none; border:none; cursor:pointer; font-size:1.2rem;
}
.rsd-popup-nav{ display:flex; gap:1em; margin-bottom:1em; }

/* --- 10. PARAGRAFO (varianti) -------------------------------------------- */
.rsd-paragraph{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 3em;
  align-items:center;
  padding: 4em 3em;
  max-width: var(--rsd-maxwidth);
  margin: 0 auto;
}
.rsd-paragraph.variant-quote{
  grid-template-columns: 1fr;
  text-align:center;
  max-width: 640px;
}
.rsd-paragraph.variant-double-image .rsd-paragraph-media{
  display:grid; grid-template-columns: 1fr 1fr; gap: 2px;
}
.rsd-paragraph-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.rsd-paragraph h2{ font-size: clamp(1.4rem, 2.5vw, 2rem); margin-bottom: .5em; }
.rsd-paragraph p{ font-size: 0.9rem; opacity:.8; margin-bottom: 1.5em; }
@media (max-width: 768px){
  .rsd-paragraph{ grid-template-columns: 1fr; padding: 2.5em 1.5em; }
}

/* --- 11. CASE STUDY: card + slider homepage ------------------------------- */
.rsd-cs-slider{
  display:flex;
  gap: 1.5em;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding: 2em 3em;
}
.rsd-cs-card{
  flex: 0 0 300px;
  scroll-snap-align:start;
  position:relative;
  border-bottom: 3px solid var(--rsd-blue-light);
}
.rsd-cs-card img{ width:100%; height:220px; object-fit:cover; display:block; }
.rsd-cs-card .rsd-cs-corner{
  position:absolute; top:0; left:0;
  width:0; height:0;
  border-style:solid;
  border-width: 24px 24px 0 0;
  border-color: var(--rsd-blue-light) transparent transparent transparent;
}
.rsd-cs-card .rsd-cs-caption{ padding: .8em 0; }
.rsd-cs-card .rsd-cs-caption .rsd-cs-address{ font-size:.7rem; opacity:.6; }

/* --- 12. PAGINA CASE STUDY: tab verticali sticky --------------------------- */
.rsd-cs-layout{
  display:grid;
  grid-template-columns: 200px 1fr;
  gap: 2em;
  max-width: var(--rsd-maxwidth);
  margin: 0 auto;
  padding: 2em 3em;
}
.rsd-cs-tabs{
  position: sticky;
  top: 6em;
  align-self: start;
  list-style:none; margin:0; padding:0;
}
.rsd-cs-tabs li{ margin-bottom: 1em; font-size:.8rem; }
.rsd-cs-tabs a{ color: var(--rsd-navy); text-decoration:none; opacity:.6; }
.rsd-cs-tabs a.is-active{ opacity:1; font-weight:500; }
.rsd-cs-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5em;
}
@media (max-width: 768px){
  .rsd-cs-layout{ grid-template-columns: 1fr; }
  .rsd-cs-tabs{ position:static; display:flex; gap:1em; overflow-x:auto; }
}

/* --- 13. SCHEDA CASE STUDY (hero + KPI) ------------------------------------ */
.rsd-cs-hero{
  position:relative;
  height: 60vh;
  min-height: 380px;
}
.rsd-cs-hero img{ width:100%; height:100%; object-fit:cover; }
.rsd-cs-hero-caption{
  position:absolute; bottom:0; left:0; right:0;
  display:flex; justify-content:space-between;
  padding: 1.2em 3em;
  background: linear-gradient(transparent, rgba(0,0,0,.35));
  color: var(--rsd-white);
  font-size: .8rem;
}
.rsd-cs-kpis{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 1px;
  background: var(--rsd-grey-line);
  max-width: var(--rsd-maxwidth); margin: 0 auto;
}
.rsd-cs-kpi{
  background: var(--rsd-white);
  padding: 1.5em;
}
.rsd-cs-kpi .rsd-kpi-value{ font-family: var(--rsd-font-title); font-size: 1.8rem; }
.rsd-cs-kpi .rsd-kpi-label{ font-size: .65rem; text-transform:uppercase; letter-spacing:.1em; opacity:.6; }

/* --- 14. NEWS & PRESS -------------------------------------------------------- */
.rsd-news-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5em;
  max-width: var(--rsd-maxwidth);
  margin: 0 auto;
  padding: 2em 3em;
}
.rsd-news-card img{ width:100%; height:220px; object-fit:cover; filter:grayscale(1); }
.rsd-news-card .rsd-news-title{ font-weight:600; font-size:.85rem; margin-top:.8em; }
.rsd-news-card .rsd-news-subtitle{ font-size:.75rem; opacity:.6; }
@media (max-width: 768px){ .rsd-news-grid{ grid-template-columns:1fr; } }

/* --- 15. FOOTER -------------------------------------------------------------- */
.rsd-footer{
  border-top: 1px solid var(--rsd-grey-line);
  padding: 2em 3em;
}
.rsd-footer-top{
  display:flex; justify-content:space-between; align-items:center;
  padding-bottom: 1.5em;
}
.rsd-footer-bottom{
  display:flex; justify-content:space-between;
  border-top: 1px solid var(--rsd-grey-line);
  padding-top: 1em;
  font-size: .7rem; opacity:.6;
}
/* Nasconde il footer di default di GeneratePress su tutto il sito,
   lasciando visibile solo il nostro footer custom (quello caricato via PHP) */
.site-footer,
#colophon {
  display: none !important;
}