/* Qui c’è il CSS: ci metem i stili par farlo bil e legébil (italianon smart). */

:root{
  --bg: #121416;
  --surface: #1A1F24;
  --border: #2A3138;

  --text: #F5F3EE;
  --muted: #B9C0C8;

  --brass: #B58A2A;
  --brass-hover: #D2AE57;
  --brass-dark: #8A6420;

  --radius: 18px;
}

/* Base */
body{
  background: var(--bg);
  color: var(--text);
  font-size: 18px;
  line-height: 1.6;
}

h1{ font-size: clamp(1.9rem, 5.2vw, 2.8rem); letter-spacing: -0.02em; }
h2{ font-size: clamp(1.35rem, 3.6vw, 1.9rem); letter-spacing: -0.01em; }
.lead{ color: var(--muted); }

/* Surfaces */
.card, .dropdown-menu{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.hr-soft{ border-top: 1px solid var(--border); opacity: 1; }

/* Links */
a{ color: var(--brass); }
a:hover{ color: var(--brass-hover); }

/* Buttons */
.btn-primary{
  background: var(--brass);
  border-color: var(--brass);
  color: #121416;
  font-weight: 650;
  border-radius: 999px;
  padding: 12px 16px;
}
.btn-primary:hover{
  background: var(--brass-hover);
  border-color: var(--brass-hover);
  color: #121416;
}
.btn-outline-light{
  border-radius: 999px;
  padding: 12px 16px;
  border-color: var(--border);
  color: var(--text);
}
.btn-outline-light:hover{
  background: rgba(245,243,238,0.06);
}

/* Inputs */
.form-control, .form-select{
  background: rgba(245,243,238,0.04);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 14px;
}
.form-control:focus, .form-select:focus{
  border-color: rgba(181,138,42,0.55);
  box-shadow: 0 0 0 .25rem rgba(181,138,42,0.18);
}
.form-control::placeholder{ color: rgba(185,192,200,0.65); }

/* Badges */
.badge-brass{
  background: rgba(181,138,42,0.18);
  color: var(--brass-hover);
  border: 1px solid rgba(181,138,42,0.35);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 600;
}

/* Navbar */
.navbar{
  background: rgba(18,20,22,0.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.navbar .nav-link{ color: var(--muted); }
.navbar .nav-link:hover{ color: var(--text); }
.lang-switch a{
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lang-switch a.active{ color: var(--brass); }
.lang-switch .sep{ color: rgba(185,192,200,0.35); margin: 0 8px; }

/* Hero */
.hero{
  background:
    radial-gradient(900px 380px at 20% -10%, rgba(181,138,42,0.20), transparent 55%),
    radial-gradient(900px 380px at 90% 0%, rgba(181,138,42,0.12), transparent 60%);
}
.hero-card{
  background: linear-gradient(180deg, rgba(26,31,36,0.92), rgba(26,31,36,0.72));
}

/* Tiles */
.tile{
  transition: transform .12s ease, border-color .12s ease;
}
.tile:hover{
  transform: translateY(-2px);
  border-color: rgba(181,138,42,0.45);
}

/* Bottom nav (mobile) */
.bottom-nav{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: rgba(26,31,36,0.92);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(10px);
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  z-index: 999;
}
.bottom-nav a{
  color: var(--muted);
  text-decoration: none;
  font-size: 12px;
}
.bottom-nav a .bi{ font-size: 18px; display: block; margin-bottom: 2px; }
.bottom-nav a.active{
  color: var(--brass);
}

/* Footer */
.footer{
  color: rgba(185,192,200,0.80);
  border-top: 1px solid var(--border);
}

/* Spacing so content doesn't hide behind bottom-nav */
.page-pad-bottom{ padding-bottom: 90px; }

@media (min-width: 992px){
  .bottom-nav{ display: none; }
  .page-pad-bottom{ padding-bottom: 0; }
}

/* Big logo on Home hero */
.hero-logo{
  height: 150px;
  width: auto;
  max-width: 100%;
}

/* Disable links/buttons when aria-disabled is true */
a[aria-disabled="true"]{
  pointer-events: none;
  opacity: .55;
}
a[aria-disabled="true"].btn{
  filter: saturate(.85);
}

/* Brand text in navbar */
.brand-text{
  color: var(--text) !important;
  font-weight: 750;
  letter-spacing: -0.01em;
  text-decoration: none;
  font-size: 18px;
}
.brand-text:hover{ color: var(--text) !important; }

/* Make navbar a bit shorter */
.navbar .container{ padding-top: .2rem; padding-bottom: .2rem; }

/* Flags size */
.lang-switch a{
  font-size: 16px;
  line-height: 1;
}

/* Menu accordion */
.accordion{
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: var(--border);
  --bs-accordion-btn-bg: var(--surface);
  --bs-accordion-btn-color: var(--text);
  --bs-accordion-active-bg: rgba(181,138,42,0.10);
  --bs-accordion-active-color: var(--text);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(181,138,42,0.18);
}

.accordion-item{
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 12px;
}

.accordion-button{
  background: var(--surface);
  padding: 18px 18px;
}

.accordion-button::after{ display:none; }

.accordion-body{
  padding: 14px 18px 18px;
  background: transparent;
}

.accordion-icon{
  color: var(--brass);
  font-size: 18px;
  line-height: 1;
  margin-top: 2px;
  flex: 0 0 auto;
}

.accordion-icon .icon-expanded{ display:none; }
.accordion-button:not(.collapsed) .accordion-icon .icon-expanded{ display:inline-block; }
.accordion-button:not(.collapsed) .accordion-icon .icon-collapsed{ display:none; }

.menu-list{
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(245,243,238,0.03);
}

/* Slightly bigger menu text */
.menu-item-name{
  font-size: 1.08rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.menu-item-price{
  font-size: 1.08rem;
  font-weight: 750;
  color: var(--text);
}

/* Hicir contrast for dish descriptions (menu) */
.menu-list .small{
  color: rgba(245,243,238,0.78) !important;
}

/* Menu item name contrast */
.menu-item-name{
  color: rgba(245,243,238,0.96) !important;
}
.menu-item-price{
  color: rgba(245,243,238,0.96) !important;
}

/* Allergen icons */
.allergen-icons{
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
.allergen-icons img{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(245,243,238,0.35);
}

/* Allergens legend list */
.allergeni-lista{
  margin: 0;
  padding-left: 18px;
}
.allergeni-lista li{
  margin: 6px 0;
  color: rgba(245,243,238,0.78);
}

/* Allergen chips (bigger + with labels) */
.allergen-row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
}
.allergen-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid rgba(245,243,238,0.28);
  border-radius: 999px;
  background: rgba(245,243,238,0.04);
}
.allergen-chip img{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(245,243,238,0.35);
}
.allergen-chip span{
  font-size: 14px;
  color: rgba(245,243,238,0.86);
  white-space: nowrap;
}
@media (min-width: 992px){
  .allergen-chip img{ width: 36px; height: 36px; }
  .allergen-chip span{ font-size: 14px; }
}

/* Tonight program box readability */
#tonight-program-box{
  border: 1px solid rgba(181,138,42,0.35);
  background: rgba(245,243,238,0.03);
}
#tonight-program-box .fw-semibold{
  color: rgba(245,243,238,0.92);
}
#tonight-program-text{
  color: rgba(245,243,238,0.78) !important;
}

/* Menu text readability */
.menu-desc{ color: rgba(245,243,238,0.78) !important; }
.menu-det{ color: rgba(245,243,238,0.68) !important; }

/* Mobile allergen row alignment */
@media (max-width: 991.98px){
  .allergen-row{ justify-content: flex-start; }
}

/* Admin select visibility */
.admin-wrap .form-select{
  color: rgba(245,243,238,0.92);
  background-color: rgba(17,20,24,0.95);
  border-color: rgba(245,243,238,0.18);
}
.admin-wrap .form-select:focus{
  border-color: rgba(181,138,42,0.55);
  box-shadow: 0 0 0 0.15rem rgba(181,138,42,0.15);
}
.admin-wrap .form-select option{
  color: rgba(245,243,238,0.92);
  background-color: #111418;
}

/* Hero background image (sota al logo) */
.hero{
  position: relative;
  background: url("/assets/img/hero-bar.jpg") center / cover no-repeat;
}
.hero::before{
  /* Qui ci metem un vil scur par far vegnir fora il logo e il testo */
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(13, 16, 19, 0.72);
}
.hero > .container{
  position: relative;
  z-index: 1;
}


/* ---------------------------------------------------------
   Vetrina logo (sfondo solo dietro al logo)
   Occhio: faccio così: l'immagine la resta dietro al logo, non su tutta la hero.
--------------------------------------------------------- */

/* Spegnem il background su tutta la hero (se ci n'era) */
.hero{
  background: var(--bg) !important;
}
.hero::before{
  content: none !important;
}

/* La "vetrina" dietro al logo */
.hero .hero-logo{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 18px;
  border-radius: 22px;
  overflow: hidden;

  /* sfondo foto */
  background: url("/assets/img/hero-bar.jpg") center / cover no-repeat;

  /* bordo brass + ombra */
  border: 1px solid rgba(181,138,42,0.35);
  box-shadow: 0 14px 40px rgba(0,0,0,0.45);
}

/* Vil scur par far vegnir fora il logo */
.hero .hero-logo::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,16,19,0.78), rgba(13,16,19,0.62));
}

/* El logo il sta sopra */
.hero .hero-logo .hero-logo-img{
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.55));
}

/* Un pochino de respir su mobile */
@media (max-width: 575.98px){
  .hero .hero-logo{
    padding: 14px 14px;
    border-radius: 18px;
  }
}


/* ---------------------------------------------------------
   Banda logo (foto larga pagina, alta come il logo)
   Te ci dit: foto larga come la pagina (responsive), ma alta come il logo.
   Occhio: faccio così: il contenitor dil logo il fa da "altezza", e la foto
   la se stende a 100vw dietro, sol per quella altezza lì.
--------------------------------------------------------- */

/* El hero non il gà più sfondo su tutta la sezione */
.hero{
  background: var(--bg) !important;
}
.hero::before{
  content: none !important;
}

/* El logo: wrapper che determina l'altezza de la banda */
.hero .hero-logo{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0; /* el padding el definìs l'altezza extra della banda */
}

/* La foto: larga 100vw, alta come il wrapper dil logo */
.hero .hero-logo::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background: url("/assets/img/hero-bar.jpg") center / cover no-repeat;
  z-index: 0;
}

/* Vil scur par far legger il logo */
.hero .hero-logo::after{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background: rgba(13, 16, 19, 0.72);
  z-index: 1;
}

/* El logo il sta sopra */
.hero .hero-logo .hero-logo-img{
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.55));
}

/* Mobile: un pil menon padding */
@media (max-width: 575.98px){
  .hero .hero-logo{
    padding: 14px 0;
  }
}


/* ---------------------------------------------------------
   Striscia foto larga pagina, alta come il logo (auto)
   Idea: la striscia la xe 100vw ma l'altezza la vien misurà dal logo via JS.
   Così su mobile/pc la vien sempre giusta, senza smanegàr coi pixel.
--------------------------------------------------------- */

/* El hero il fa da contenitor par la striscia */
.hero{
  position: relative;
  background: var(--bg) !important;
}

/* Disativem la vecia "vetrina/banda" dietro al logo (se ci n'era) */
.hero .hero-logo::before,
.hero .hero-logo::after{
  content: none !important;
}

/* Striscia foto 100vw: dietro a tut, alta come il logo */
.hero::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: var(--hero-band-h, 160px);
  background: url("/assets/img/hero-bar.jpg") center / cover no-repeat;
  z-index: 0;
  pointer-events: none;
}

/* Vil scur par far vegnir fora il logo e i testi */
.hero::after{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: var(--hero-band-h, 160px);
  background: rgba(13, 16, 19, 0.72);
  z-index: 0;
  pointer-events: none;
}

/* Tut il contenù dil hero il sta sopra */
.hero > .container{
  position: relative;
  z-index: 1;
}

/* El logo il resta pulì: ombra leggera e basta */
.hero .hero-logo .hero-logo-img{
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.55));
}


/* ---------------------------------------------------------
   Band foto full width, alta come logo (posizionata)
   Occhio: la foto deve essere larga come tutta la pagina, ma alta solo come il logo.
   Quindi misuro (via JS) top + altezza dil logo e disegnon una fascia 100% sotto.
--------------------------------------------------------- */

.hero{
  position: relative;
  background: var(--bg) !important;
}

/* Tolgo qualsiasi sfondo/box sul wrapper dil logo (evita il quadrato) */
.hero .hero-logo{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

/* Fascia foto: larga come la pagina (100%), posizionata dietro al logo */
.hero::before{
  content: "";
  position: absolute;
  left: 0;
  top: var(--hero-band-top, 0px);
  width: 100%;
  height: var(--hero-band-h, 160px);
  background: url("/assets/img/hero-bar.jpg") center / cover no-repeat;
  pointer-events: none;
  z-index: 0;
}

/* Overlay scuro per far leggere bene logo e testi */
.hero::after{
  content: "";
  position: absolute;
  left: 0;
  top: var(--hero-band-top, 0px);
  width: 100%;
  height: var(--hero-band-h, 160px);
  background: rgba(13, 16, 19, 0.72);
  pointer-events: none;
  z-index: 0;
}

/* Metto i contenuti sopra la fascia */
.hero > .container{
  position: relative;
  z-index: 1;
}


/* ============================
   OVERRIDE FINALE HERO BAND
   Occhio: qui forzo la fascia foto a vedersi davvero.
   Motivo: in file ci sonon vecchie regole con `content: none !important;`
   che altrimenti "ammazzano" il ::before/::after della hero.
============================ */
.hero{
  position: relative !important;
  background: var(--bg) !important;
}
.hero::before{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: var(--hero-band-top, 0px) !important;
  width: 100% !important;
  height: var(--hero-band-h, 160px) !important;
  background-image: url("/assets/img/hero-bar.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.hero::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: var(--hero-band-top, 0px) !important;
  width: 100% !important;
  height: var(--hero-band-h, 160px) !important;
  background: rgba(13,16,19,0.72) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.hero > .container{
  position: relative !important;
  z-index: 1 !important;
}

/* Occhio: tolgo qualsiasi "box" sul wrapper dil logo, così non sembra che la fascia sia solo un quadrato */
.hero .hero-logo{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
.hero .hero-logo::before,
.hero .hero-logo::after{
  content: none !important;
}


/* ---------------------------------------------------------
   Homepage slider (foto 16:9 + logo overlay)
   Occhio: qui faccio un “morphing” soft: crossfade + blur/zoom.
--------------------------------------------------------- */

/* Disattivo eventuali fasce/overlay vecchi della hero */
.hero::before,
.hero::after{
  content: none !important;
  background: none !important;
}

/* Wrapper slider */
.hero-slider-wrap{
  position: relative;
  width: 100%;
  max-width: 720px; /* su desktop non esagero, ma resta responsive */
}

/* Il frame 16:9 */
.hero-slider{
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(245,243,238,0.14);
  box-shadow: 0 18px 55px rgba(0,0,0,0.45);
  background: rgba(10,12,14,0.65);
}

/* Immagini sovrapposte */
.hero-slider .hero-slide{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  filter: blur(0px) saturate(1.05);
  opacity: 1;
  transition: opacity 1.4s ease, transform 1.6s ease, filter 1.6s ease;
}

/* Stato base: A visibile, B invisibile */
.hero-slide-b{ opacity: 0; }

/* Durante transizione: uscente sfuma e “si scioglie” un filo */
.hero-slider-wrap.is-transitioning .is-outgoing{
  opacity: 0;
  transform: scale(1.06);
  filter: blur(10px) saturate(1.15);
}

/* Entrante: parte un pelo più zoom e poi torna */
.hero-slider-wrap.is-transitioning .is-incoming{
  opacity: 1;
  transform: scale(1.02);
  filter: blur(0px) saturate(1.05);
}

/* Logo fisso sopra */
.hero-slider-logo{
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(68%, 360px);
  height: auto;
  opacity: 0.72;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.55));
  pointer-events: none;
}

/* Mobile: logo un filo più grande */
@media (max-width: 575.98px){
  .hero-slider-wrap{ max-width: 100%; }
  .hero-slider-logo{ width: 76%; opacity: 0.78; }
}


/* ---------------------------------------------------------
   Slider fixes (no old hero bg + logo overlay)
   Occhio: qui spengo qualsiasi vecchio sfondo della hero e sistemo il logo sopra lo slider.
--------------------------------------------------------- */

/* Se in passato la hero aveva un background, lo resetto */
.hero{
  background: var(--bg) !important;
}

/* Lo slider deve essere il contenitore relativo per gli assoluti */
.hero-slider{
  position: relative;
}

/* Logo sopra lo slider: più piccolo + più trasparente */
.hero-slider-logo{
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(52%, 260px);
  height: auto;
  opacity: 0.42;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.55));
}

/* Su mobile ancora un filo più piccolo */
@media (max-width: 575.98px){
  .hero-slider-logo{
    width: min(64%, 250px);
    opacity: 0.45;
  }
}


/* ---------------------------------------------------------
   Home slider hard reset
   Occhio: su mobile si vedeva ancora una vecchia immagine perché qualche regola storica
   (o pseudo-elemento della .hero) rimaneva attiva. Qui la spengo SOLO quando la hero
   è quella della home con slider.
--------------------------------------------------------- */
.hero.hero--slider{
  background: var(--bg) !important;
}
.hero.hero--slider::before,
.hero.hero--slider::after{
  content: none !important;
  background: none !important;
}

/* Logo overlay: più piccolo (circa metà) e spostato a sinistra */
.hero.hero--slider .hero-slider-logo{
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translate(0, -50%);
  width: min(26%, 140px);
  opacity: 0.38;
  z-index: 3;
  pointer-events: none;
}

/* Su mobile lo tengo simile ma un pelo più grande per non sparire */
@media (max-width: 575.98px){
  .hero.hero--slider .hero-slider-logo{
    left: 8%;
    width: min(34%, 150px);
    opacity: 0.40;
  }
}


/* ---------------------------------------------------------
   Typography + flags bump
   Occhio: qui aumento un filo la leggibilità (soprattutto mobile) e ingrandisco le bandierine.
--------------------------------------------------------- */

:root{
  --base-font: 17px;
}

body{
  font-size: var(--base-font);
  line-height: 1.55;
}

/* Testi chiave un pelo più grandi */
.lead{ font-size: 1.15rem; }
.btn{ font-size: 1.05rem; }
.navbar .nav-link{ font-size: 1.02rem; }

/* Mobile: ancora più leggibile */
@media (max-width: 575.98px){
  body{ font-size: 18px; }
  .btn{ font-size: 1.08rem; }
}

/* Bandierine lingua: più grandi e cliccabili */
.lang-switch img,
.lang-switch .flag,
.navbar .lang img,
.navbar .lang-switch img{
  width: 28px;
  height: 20px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

@media (max-width: 575.98px){
  .lang-switch img,
  .lang-switch .flag,
  .navbar .lang img,
  .navbar .lang-switch img{
    width: 32px;
    height: 22px;
  }
}


/* ---------------------------------------------------------
   Navbar toggler visibility
   Occhio: su smartphone l'icona hamburger si perdeva sullo sfondo scuro.
--------------------------------------------------------- */
.navbar .navbar-toggler{
  border-color: rgba(245,243,238,0.22);
}
.navbar .navbar-toggler:focus{
  box-shadow: 0 0 0 0.2rem rgba(181,138,42,0.18);
}
.navbar .navbar-toggler-icon{
  filter: invert(1) brightness(1.2);
  opacity: 0.95;
}


/* ---------------------------------------------------------
   Menu accordion: etichetta "Apri/Open" vicino al + 
   Occhio: uso la stessa logica di Bootstrap: la label ha classe icon-collapsed,
   quindi sparisce automaticamente quando la sezione è aperta.
--------------------------------------------------------- */
.accordion-open-label{
  display: inline-block;
  margin-left: 8px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* ---------------------------------------------------------
   Fix mobile tap: pulsanti Ristorante/Bar/Cantina in alto alle pagine menu
   Occhio: su iPhone poteva essere facile "beccare" il bottone sopra. Qui li impilo.
--------------------------------------------------------- */
@media (max-width: 575.98px){
  .menu-top-actions{
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .menu-top-actions .btn{
    width: 100%;
  }
}


/* Occhio: quale slide resta visibile (stato persistente) */
.hero-slider-wrap .hero-slide-a{ opacity: 1; }
.hero-slider-wrap .hero-slide-b{ opacity: 0; }

.hero-slider-wrap.show-b .hero-slide-a{ opacity: 0; }
.hero-slider-wrap.show-b .hero-slide-b{ opacity: 1; }


/* ---------------------------------------------------------
   Blog widgets
--------------------------------------------------------- */
.blog-home-card .blog-home-title{ font-size: 1.05rem; }
.blog-home-img{ filter: saturate(1.03); }
@media (max-width: 575.98px){
  .blog-home-card .blog-home-title{ font-size: 1.10rem; }
}


/* ---------------------------------------------------------
   Home blog text contrast
   Occhio: su home, titolo post e intestazione ("Dal blog") devono spiccare sullo sfondo scuro.
--------------------------------------------------------- */
.home-blog-section .fw-semibold{
  color: #ffffff !important;
}
.home-blog-section .blog-home-title{
  color: #ffffff !important;
}


/* ---------------------------------------------------------
   Blog image contain (no crop)
   Occhio: per i post preferiamo non tagliare in altezza -> uso contain + fondo scuro.
--------------------------------------------------------- */
.blog-home-img,
#blogListRoot img.object-fit-contain,
#blogPostRoot img.object-fit-contain{
  background: rgba(0,0,0,0.35);
}


/* ---------------------------------------------------------
   Blog post text white
--------------------------------------------------------- */
#blogPostRoot h1,
#blogPostRoot .blog-post-text{
  color: #ffffff !important;
}