/* Definizione Famiglie */

/* In custom.css (caricato dopo bootstrap.min.css) */
:root {
  /* Esempio: Cambiamo il colore primario in un Rosso/Marrone Ebraico o Oro */
  /* Converti il tuo colore HEX in RGB. Es: #B8860B -> 184, 134, 11 */
  --bs-primary-rgb: 177, 154, 119;
  --bs-primary: #b19a77;
}


/* ==========================================================================
   HERO TYPEWRITER LIGHT - NO CURSOR (CLEAN)
   ========================================================================== */

.hero-typewriter-title {
  line-height: 1.3;
  font-weight: 700;
  color: #736c64;
}

/* FIX FONDAMENTALE: inline-block + min-height prevengono il collasso della riga quando vuota */
.typewriter-text {
  color: #a64437; /* Colore di accento Brand */
  display: inline-block;
  vertical-align: bottom; /* Mantiene la linea di base dell'H1 perfettamente allineata */
  min-height: 1.3em;       /* Riserva l'altezza esatta della riga anche quando il testo è vuoto */
}

/* Cursore lampeggiante con linea di base allineata */
.typewriter-cursor {
  display: inline-block;
  vertical-align: bottom;
  color: #e0a96d;
  font-weight: 300;
  margin-left: 2px;
  animation: blink-cursor 0.8s infinite;
}

@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Responsiveness Mobile */
@media (max-width: 768px) {
  .hero-typewriter-title {
    font-size: 2.8rem;
  }
}

@media (max-width: 360px) {
  .hero-typewriter-title {
    font-size: 4rem;
  }
}


.btn-solid.btn-white { color: #a64437; }



/* Ottimizzazione rendering hardware su elementi in movimento/parallasse */
.rellax, 
.section-hero-d, 
.item-image-e {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 1. Hardware Offloading forzato per Vegas.js Slider */
.vegas-slide, 
.vegas-container {
  will-change: opacity, transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* 2. Disattiva le animazioni pesanti se il dispositivo dell'utente è in modalità Risparmio Energetico */
@media (prefers-reduced-motion: reduce) {
  .vegas-slide {
    animation: none !important;
    transition: none !important;
  }
}


h1, h2, h3, h4, h5, h6, h7 .titolo-museo {
  font-family: 'Miller Display', Georgia, serif;
}

.hero-title-stroke {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.9);
}

.display-title-1 { font-weight: 500; }

body {
  font-family: 'Source Sans Pro', sans-serif; /* Già definito nel tema */
}

.drop-shadow-dark {
  /* Ombra nera al 35% di opacità, morbida e leggermente staccata */
  filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.35));
  transition: filter 0.3s ease; /* Transizione fluida se vuoi animarla */
}

.drop-shadow-light {
  /* Alone bianco/chiaro sfumato attorno ai contorni del logo */
  filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.6));
}

section#home.section { background: #fff url("../img/hero-banner-01.jpg") center center no-repeat; background-size: 75%; background-color: #e5e5e5; background-position: bottom right; background-repeat: no-repeat; }

section#about.section { background: #fff url("../img/mappa-antica-ghetto.jpg") center center no-repeat; background-size: 50%; }

section#hours.section { background: #fff url("../img/bg-hours.jpg") center center no-repeat; background-size: cover; }

section#map.section { background: #fff url("../img/bg-map.avif") center center no-repeat; background-size: cover; }
  
section#subscribe.section { background: #fff url("../img/bg-newsletter.jpg") center center no-repeat; background-size: cover; }

section#subscribe .form-control::placeholder {
	color: #e5e5e5;
}

.section.content-white .title-desc p { font-weight: 300; color: rgba(255, 255, 255, 1); }
p.anim-2 { font-weight: 300; }

/* Stili per trasformare l'SVG in filigrana di sfondo */

.section-title { top: 70%; }

.section-title img.watermark-svg,
.section-title .text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 0%); /* Centra l'SVG nel contenitore */
  
  /* Dimensioni della filigrana sullo sfondo */
  width: 40vw;         /* Occupa il 40% della larghezza dello schermo (regolabile) */
  max-width: 600px;    /* Limite massimo su schermi grandi */
  height: auto;        /* Mantiene le proporzioni vettoriali */
  
  /* Integrazione visiva e livello di profondità */
  z-index: -1;         /* Va SOTTO il testo H1 "Museo del Ghetto" */
  opacity: 0.05;       /* Sfumatura al 8% per non disturbare la lettura */
  pointer-events: none;/* Evita che l'SVG blocchi i click del mouse sugli elementi sopra */
}

section#works { background-color: #e5e5e5; }

.nav-social-a ul { align-items: flex-end; }

.navbar-a .navbar-menu-wrapper { align-content: space-around; }



/* Tabelle Orario */

.item-pricing-a {
    background: transparent;
	background: rgba(0, 0, 0, 0.5);
}

.item-pricing-a .item-header .title { font-family: 'Source Sans Pro', sans-serif; }

.item-pricing-a .price .amount {
  font-size: 1.5rem;
  font-weight: 500;
  color: #d9bea9;
}

.item-image-e .item-img { border: 1px solid #fff; }

/* Targettizziamo h4 e p all'interno del contenitore .desc o con classe custom */
.item-image-e .item-body .desc h4,
.item-image-e .item-body .desc p {
  /* 1. Rende lo sfondo avvolgente attorno al solo testo e non a tutto il blocco */
  display: inline;
  
  /* 2. Garantisce che il padding laterale venga applicato anche agli a capo */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  
  /* 3. Colore dello Sfondo Evidenziatore (Nero semi-trasparente elegante o Bianco) */
  background-color: rgba(255, 255, 255, 0.85); /* Es. Sfondo bianco al 85% */
  color: #111111 !important; /* Colore del testo scuro a contrasto netto */
  
  /* 4. Spaziatura interna per simulare il vero evidenziatore */
  padding: 0.2em 0.5em;
  
  /* 5. Separa l'h4 dal p evitando sovrapposizioni e regolando l'interlinea */
  line-height: 1.6;
}

/* Specifiche dedicate al Titolo h4 */
.item-image-e .item-body .desc h4 {
  font-weight: 700;
  /* Margine inferiore per staccare il box del titolo da quello del paragrafo */
  margin-bottom: 0.35rem; 
}

/* Specifiche dedicate al Paragrafo p */
.item-image-e .item-body .desc p {
  font-size: 1.25rem;
  font-weight: 500;
  display: inline-block;
}

/* Specifiche dedicate ai Video */
/* --- RIPRISTINO DIMENSIONI CARD ORIGINALI --- */
.custom-video-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: 8px; /* Mantieni il raggio bordi se presente nel tema */
  display: block;
}

/* Forzatura del contenimento video per evitare sfondamenti */
.custom-seo-video {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  display: block !important;
  object-fit: cover;
}

/* Pulsante Play sovrapposto proporzionato */
.play-overlay-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: 50px;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.65);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition: transform 0.25s ease, background-color 0.25s ease, opacity 0.25s ease;
  pointer-events: none;
}

.video-click-card:hover .play-overlay-btn {
  transform: translate(-50%, -50%) scale(1.1);
  background-color: rgba(0, 0, 0, 0.85);
}

/* Nasconde il Play quando il video è attivo */
.custom-video-wrapper.is-playing .play-overlay-btn {
  opacity: 0;
  visibility: hidden;
}



/* ==========================================================================
   MODALE MAPPA LIGHTBOX (BOOTSTRAP 5 CORE)
   ========================================================================== */

/* Wrapper e Cursore */
.map-modal-link {
  position: relative;
  display: block;
  cursor: zoom-in;
  overflow: hidden;
  border-radius: 8px;
}

/* Indicatore Zoom in Overlay */
.map-zoom-overlay {
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: rgba(0, 0, 0, 0.65);
  color: #ffffff;
  padding: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, background-color 0.25s ease;
  z-index: 2;
}

.map-modal-link:hover .map-zoom-overlay {
  transform: scale(1.15);
  background-color: rgba(0, 0, 0, 0.85);
}

/* Forza lo Z-Index della Modale sopra le sezioni di SimpleUX */
.modal-backdrop {
  z-index: 10050 !important;
}

.modal {
  z-index: 10055 !important;
}

/* Rendering nitido dell'immagine ingrandita */
.modal-map-img {
  max-height: 82vh;
  width: auto;
  object-fit: contain;
}




@media screen and (max-width: 2560px) {
	.navbar-a .navbar-brand img { height: 60px; }
}

@media screen and (max-width: 1920px) {
	.navbar-a .navbar-brand img { height: 40px; }
}

@media screen and (max-width: 1440px) {
	.navbar-a .navbar-brand img { height: 30px; }
}

@media screen and (max-width: 1024px) {
section#home.section { background-size: 140%; background-position: bottom center; }
}

@media screen and (min-width: 992px) {
    .section-a .section-body {
		padding-top: 10rem;}
	.nav-fullscreen-lg .nav-item {

        text-transform: uppercase;
		line-height: 0.8;
        font-weight: 400;
	}
}

@media screen and (max-width: 820px) {
.navbar-a { background-color: #a64437; }
}

/* Adattamento Responsive per Mobile */


@media (min-width: 768px) {
  .section-footer-md-left {
    margin-bottom: 10%;} 
}

@media screen and (max-width: 768px) {
	
  .nav-fullscreen-lg { display: none; }
	
  .navbar-a .navbar-nav .nav-link {
    font-size: 2rem;
    text-transform: uppercase;
	}
	
  .navbar-a .navbar-brand img { height: 35px; }
	
  .section-title { top: 80%; }
	
  .section-title img.watermark-svg {
    width: 70vw;       /* Più grande sui display piccoli per essere visibile */
  }
	
  .footer-page { background-color: #fff; }
  
  section#home.section { background-size: 170%; background-position: bottom center;}
  section#about.section { background-size: 100%; }
  section#hours.section { background-position: center; background-repeat: no-repeat; }
  section#subscribe.section { background-position: center; background-repeat: no-repeat; }
}


@media screen and (max-width: 360px) {
  .display-title-1 { font-size: 2.5rem; }
}