/* Stili condivisi — Sardex Magazine Landing */

:root {
  --verde: #34442d;
  --chiaro: #f3f3f3;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "Catamaran", sans-serif;
  background-color: var(--verde);
  color: var(--chiaro);
}

/* Il design è nato mobile (375px): fino a 1023px la colonna resta
   una "pagina" mobile centrata; da 1024px il layout diventa fluido
   e le pagine usano le varianti lg: di Tailwind. */
.page {
  width: 100%;
  max-width: 430px;
  margin-inline: auto;
  min-height: 100dvh;
  position: relative;
  overflow-x: clip;
}

@media (min-width: 431px) and (max-width: 1023px) {
  body {
    background-color: #222d1e; /* verde più scuro attorno alla colonna */
  }
  .page {
    background-color: var(--verde);
    box-shadow: 0 0 40px rgb(0 0 0 / 0.4);
  }
}

@media (min-width: 1024px) {
  .page {
    max-width: none;
  }
}

/* splash screen (prima apertura della home) */
#splash {
  transition: opacity 0.6s ease;
}
#splash.splash-hide {
  opacity: 0;
  pointer-events: none;
}

/* marquee della barra sticky (pagine struttura) */
.marquee-track {
  width: max-content;
  animation: marquee 18s linear infinite;
}
.marquee-track:hover {
  animation-play-state: paused;
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* nasconde la scrollbar del carosello su WebKit */
.carousel::-webkit-scrollbar {
  display: none;
}

/* blocco scroll quando il menù overlay è aperto */
body.menu-open {
  overflow: hidden;
}