/* =========================================================
   CUSTOM CSS - Helix Ultimate / Joomla 6
   Palette: grigio scuro, viola polveroso, oro
   Font: Bodoni Moda (titoli, maiuscolo), Instrument Sans (testi),
         DM Mono (etichette e crediti)

   DOVE METTERLO
   - Opzione 1: Sistema > Stili template > (stile Helix) > Custom Code >
     campo "Custom CSS" (incolla tutto il contenuto).
   - Opzione 2: carica il file come custom.css nella cartella css del
     template (il percorso puo' variare con la versione di Helix).

   FONT IN LOCALE (GDPR)
   Scarica i file .woff2 e caricali in /images/fonts/ del tuo sito:
     bodoni-moda-700.woff2
     bodoni-moda-700-italic.woff2
     instrument-sans-400.woff2
     instrument-sans-500.woff2
     instrument-sans-600.woff2
     dm-mono-400.woff2
   Licenza: tutti i font sono SIL Open Font License (uso commerciale ok).
   ========================================================= */

/* ---------- 1. FONT IN LOCALE ---------- */
@font-face {
  font-family: "Bodoni Moda";
  src: url("/images/fonts/bodoni-moda-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("/images/fonts/bodoni-moda-700-italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/images/fonts/instrument-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/images/fonts/instrument-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/images/fonts/instrument-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("/images/fonts/dm-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. VARIABILI ---------- */
:root {
  /* grigi */
  --bg: #141416;
  --panel: #1e1e23;
  --card: #2a2a31;
  --line: #2d2d35;

  /* viola polveroso */
  --purple: #6b5a85;
  --purple-deep: #5e4e78;
  --purple-darker: #46375d;
  --purple-soft: #8b7aa8;
  --purple-light: #a998c4;

  /* oro */
  --gold: #e3b341;

  /* testi */
  --text: #f2f1f4;
  --muted: #b8b4c2;
  --muted-2: #a7a3b2;

  /* font */
  --font-display: "Bodoni Moda", Georgia, "Times New Roman", serif;
  --font-body: "Instrument Sans", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* ---------- 3. BASE ---------- */
body,
body.site {
  background: var(--bg);
  color: var(--muted-2);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
}

a {
  color: var(--gold);
  text-decoration: none;
}
a:hover,
a:focus {
  color: #f1c866;
  text-decoration: underline;
}

/* focus visibile per la tastiera */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.sppb-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

::selection {
  background: var(--purple-soft);
  color: var(--text);
}

/* ---------- 4. TITOLI (GRANDI, MAIUSCOLO) ---------- */
h1,
h2,
.sppb-addon-title,
.sppb-title-heading,
.sp-page-title .sp-page-title-heading,
.t-display {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: var(--text);
}

h1,
.t-display {
  font-size: clamp(2rem, 5vw, 3.4rem);
}
h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
}

/* titoli piccoli: sans, NON Bodoni (i tratti sottili si perdono) */
h3,
h4,
h5,
h6 {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  line-height: 1.3;
}

/* parola in evidenza: corsivo dorato (<em> o classe) dentro un titolo */
h1 em,
h2 em,
.t-accent,
.sppb-addon-title em {
  font-style: italic;
  color: var(--gold);
}

/* ---------- 5. ETICHETTE E CREDITI (DM Mono) ---------- */
.t-mono {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--purple-light);
}

/* ---------- 6. HEADER E MENU (Helix) ---------- */
#sp-header {
  background: var(--bg);
  box-shadow: none;
  border-bottom: 1px solid var(--line);
}
#sp-header .logo a,
#sp-header .logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text);
}
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
}
.sp-megamenu-parent > li:hover > a,
.sp-megamenu-parent > li.active > a {
  color: var(--gold);
}
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
  background: var(--panel);
  border: 1px solid var(--line);
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
  color: var(--muted);
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover {
  color: var(--gold);
}

/* menu mobile / offcanvas */
.offcanvas-menu {
  background: var(--panel);
  color: var(--muted);
}
.offcanvas-menu .menu > li > a {
  color: var(--text);
  font-family: var(--font-display);
  text-transform: uppercase;
}

/* ---------- 7. SEZIONI ---------- */
#sp-main-body,
.sppb-section {
  background-color: transparent;
}

/* classi da assegnare alle sezioni in SP Page Builder
   (Sezione > Opzioni > Classe CSS) */
.sez-scura {
  background: var(--bg) !important;
}
.sez-grafite {
  background: var(--panel) !important;
}
.sez-viola {
  background: var(--purple) !important;
  color: #ece8f3;
}
.sez-viola h1,
.sez-viola h2 {
  color: var(--text);
}

/* linea oro sotto i titoli di sezione (classe: linea-oro) */
.linea-oro::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: var(--gold);
  margin-top: 0.8rem;
}

/* ---------- 8. PULSANTI ---------- */
.sppb-btn,
.btn,
button.btn,
.sppb-btn-primary {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  border-radius: 4px;
  padding: 0.7rem 1.3rem;
  text-transform: none;
  letter-spacing: 0;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* primario: oro */
.sppb-btn-primary,
.btn-primary,
.sppb-btn-custom.btn-oro {
  background: var(--gold);
  border: 1px solid var(--gold);
  color: var(--bg);
}
.sppb-btn-primary:hover,
.btn-primary:hover,
.sppb-btn-custom.btn-oro:hover {
  background: #f1c866;
  border-color: #f1c866;
  color: var(--bg);
  text-decoration: none;
}

/* secondario: contorno viola (classe: btn-contorno) */
.btn-contorno,
.sppb-btn-default,
.btn-secondary {
  background: transparent;
  border: 1px solid var(--purple-soft);
  color: var(--text);
}
.btn-contorno:hover,
.sppb-btn-default:hover,
.btn-secondary:hover {
  background: var(--purple-deep);
  border-color: var(--purple-light);
  color: var(--text);
  text-decoration: none;
}

/* ---------- 9. CARD (servizi, lavori) ---------- */
.card-servizio {
  background: var(--card);
  border-top: 3px solid var(--purple-soft);
  padding: 1.1rem;
  color: var(--muted);
}
.card-servizio h3 {
  font-size: 1rem;
  margin: 0.5rem 0 0.25rem;
}

.card-lavoro {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.card-lavoro .card-lavoro-body {
  padding: 0.7rem 0.9rem;
}
.card-lavoro .t-mono {
  margin-top: 0.2rem;
  display: block;
}

/* scheda crediti nell'hero (classe: scheda-crediti) */
.scheda-crediti {
  background: var(--purple-deep);
  border: 1px solid var(--purple-soft);
  border-radius: 6px;
  padding: 1rem 1.15rem;
  color: #e2dcee;
}
.scheda-crediti .titolo-brano {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.15rem;
  line-height: 1.15;
  color: var(--text);
}

/* ---------- 10. FASCIA SCORREVOLE (marquee) ----------
   HTML da inserire in un modulo "Custom HTML" o addon codice:
   <div class="marquee"><div class="marquee-track">
     <span>Scrittura</span><span>Arrangiamento</span><span>Produzione</span>
     <span>Mix e master</span><span>Distribuzione</span><span>Videoclip</span>
     <span>Branding</span>
     (ripeti lo stesso gruppo una seconda volta per un loop continuo)
   </div></div>
   ------------------------------------------------------ */
.marquee {
  background: var(--purple);
  color: #eee9f5;
  overflow: hidden;
  white-space: nowrap;
  padding: 0.7rem 0;
}
.marquee-track {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 30s linear infinite;
}
.marquee-track span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 1.2rem;
}
.marquee-track span::after {
  content: "/";
  color: var(--gold);
  margin-left: 2.4rem;
}
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/* rispetto per chi disattiva le animazioni */
@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
    padding-left: 0;
  }
}

/* ---------- 10bis. MODIFICA MARQUEE ---------- */
.marquee-track {
  display: flex;
  width: max-content;
  padding-left: 0;
  animation: marquee-loop 45s linear infinite;
}
.marquee-group {
  display: flex;
  flex-shrink: 0;
}
.marquee-track span {
  white-space: nowrap;
}
@keyframes marquee-loop {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- 11. MODULI E FORM ---------- */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select,
.form-control {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 4px;
  font-family: var(--font-body);
}
input::placeholder,
textarea::placeholder {
  color: var(--muted-2);
}
input:focus,
textarea:focus,
select:focus,
.form-control:focus {
  background: var(--panel);
  border-color: var(--purple-soft);
  color: var(--text);
  box-shadow: 0 0 0 2px rgba(139, 122, 168, 0.35);
}

/* ---------- 12. FOOTER ---------- */
#sp-footer,
#sp-bottom {
  background: var(--bg);
  color: var(--purple-light);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
}
#sp-footer a,
#sp-bottom a {
  color: var(--muted);
}
#sp-footer a:hover,
#sp-bottom a:hover {
  color: var(--gold);
}

/* ---------- 13. MOBILE ---------- */
@media (max-width: 767px) {
  h1,
  .t-display {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.55rem;
  }
  .sppb-btn,
  .btn {
    width: 100%;
    text-align: center;
    margin-bottom: 0.5rem;
  }
}

/* ---------- AGGIUNTA x schiarire testo hero ---------- */
.hero-testo {
  max-width: 440px;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  color: #e4e1ea;
  text-shadow: 0 1px 8px rgba(20, 20, 22, 0.6);
}
.t-mono { text-shadow: 0 1px 6px rgba(20, 20, 22, 0.6); }

/* ---------- ALLARGA a tutto schermo il marquee ---------- */
.marquee {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ---------- RIDUCE margine alto hero in vista cellulare ---------- */
@media (max-width: 767px) {
  .hero-video {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    min-height: 0 !important;
  }
  .hero-video .sppb-column {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* ----------Linea oro di zona grafite ---------- */
.linea-oro .sppb-addon-title::after,
.linea-oro h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: var(--gold);
  margin-top: 0.8rem;
}

/* ---------- VIDEO YOUTUBE ---------- */
.video-16x9 {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}
.video-16x9 iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* una sola barretta oro sotto i titoli */
.linea-oro::after {
  display: none !important;
  content: none !important;
}

/* titolo piccolo nelle card dei lavori */
.card-lavoro h3,
.card-lavoro .card-lavoro-body h3 {
  font-size: 1rem !important;
  line-height: 1.3 !important;
  margin: 0 0 0.25rem !important;
}

/* spazio sotto il titolo sez viola */
.sez-viola .sppb-addon-title,
.sez-viola .sppb-addon-title h2,
.sez-viola h2 {
  margin-bottom: 1.5rem !important;
}
/* STILE DEL LOGO */
#sp-header .logo a,
#sp-header .logo-text,
#sp-header .logo h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--text);
  text-decoration: none;
}
#sp-header .logo em {
  font-style: italic;
  color: var(--gold);
}

#sp-header .logo em,
#sp-header .logo a em,
.logo em {
  font-style: italic !important;
  color: #e3b341 !important;
}

/* IMPILAMENTO FOOTER DA taBlet in giu */
@media (max-width: 991px) {
  #sp-footer .row {
    flex-direction: column;
  }
  #sp-footer .row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    text-align: center !important;
  }
  #sp-footer .text-end,
  #sp-footer .text-md-end,
  #sp-footer .sp-module,
  #sp-footer .sp-module * {
    text-align: center !important;
  }
  #sp-footer .sp-module {
    margin: 0.25rem 0;
  }
}

/* =========================================================
   LOGO + INTESTAZIONE + MENU A TRE LINEE (blocco unico, v4)
   Da incollare IN FONDO al Custom CSS di Helix.

   PRIMA DI INCOLLARE, nel Custom CSS cancella tutti i blocchi
   precedenti che contengono:
     - "#sp-header .logo"   (stile del logo, em, ::before, @media del cellulare)
     - ".logo em"
     - ".burger-icon"
   comprese le versioni v1, v2 e v3 di questo blocco, se le avevi incollate.

   FILE NECESSARI in /images/logo/ :
     serepta-logo-animato-v3.svg
     serepta-logo-statico-v3-512.png
   ========================================================= */

/* ---------- 1. LOGO (tutte le viste) ---------- */
#sp-header .logo,
#sp-header .logo h1 {
  margin: 0;
  line-height: 1;
}

#sp-header .logo a,
#sp-header .logo-text,
#sp-header .logo h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--text);
  text-decoration: none;
}

#sp-header .logo a {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  white-space: nowrap;
}

/* "Records": oro, dritto (senza corsivo) */
#sp-header .logo em,
#sp-header .logo a em,
.logo em {
  font-style: normal !important;
  color: #e3b341 !important;
  margin-left: 0.28em;
}

/* tendone nel disco, animato (PNG come immagine di riserva) */
#sp-header .logo a::before {
  content: "";
  display: inline-block;
  width: 44px;
  height: 44px;
  margin-right: 0.6rem;
  background: url("/images/logo/serepta-logo-statico-v3-512.png") center / contain no-repeat;
  background-image: url("/images/logo/serepta-logo-animato-v3.svg");
}

/* ---------- 2. MENU A TRE LINEE: bianche (tutte le viste) ---------- */
.burger-icon > span {
  background-color: #f2f1f4 !important;
}
.offcanvas-toggler-secondary:hover .burger-icon > span,
.offcanvas-toggler-right:hover .burger-icon > span {
  background-color: #e3b341 !important;
}

/* ---------- 3. TELEFONO VERTICALE: blocco logo + scritta + menu centrato ----------
   Logo e menu a tre linee formano un unico gruppo al centro dell'intestazione:
   lo spazio a sinistra e a destra del gruppo e' sempre identico.
   Dimensioni di tendone (34 px) e scritta (1,2 rem) uguali alla versione v1.
   Per avvicinare o allontanare le tre linee dal logo, cambia "column-gap". */
@media (max-width: 575px) {
  #sp-header {
    height: 56px !important;
    padding: 0 !important;
  }
  #sp-header .container,
  #sp-header .container-inner,
  #sp-header .row {
    height: 100%;
  }
  #sp-header .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    column-gap: 14px;
    margin: 0 !important;
  }
  #sp-logo,
  #sp-menu {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #sp-logo .sp-column,
  #sp-menu .sp-column {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #sp-header .logo a,
  #sp-header .logo h1,
  #sp-header .logo-text {
    font-size: 1.2rem;
  }
  #sp-header .logo a::before {
    width: 34px;
    height: 34px;
    margin-right: 0.45rem;
  }
  #sp-header .logo em {
    margin-left: 0.2em;
  }
}

/* =========================================================
   INTRO SEREPTA RECORDS - PARTE 3 di 3
   Dove: Helix > Custom Code > Custom CSS, in fondo.

   Sequenza (4 secondi):
     0,15 s  il logo gira e si ferma dritto (1,5 s)
     0,8 s   il braccio si posa
     1,0 s   "Serepta" da sinistra e "Records" da destra (0,8 s)
     2,8 s   logo e scritte sfumano
     3,0 s   le due metà si aprono (1 s) e rivelano la Home
   ========================================================= */

/* blocco dello scorrimento mentre l'intro e' visibile */
html.intro-on,
html.intro-on body {
  overflow: hidden;
}

/* di base lo strato e' nascosto: se manca JavaScript non compare mai */
.serepta-intro {
  display: none;
}
html.intro-on .serepta-intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 99999;
  cursor: pointer;
}
.serepta-intro.si-skipping {
  opacity: 0;
  transition: opacity 0.35s ease;
}

/* le due metà del sipario */
.si-half {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.5%;
  background: #141416;
}
.si-l {
  left: 0;
  border-right: 1px solid rgba(227, 179, 65, 0.35);
}
.si-r {
  right: 0;
  border-left: 1px solid rgba(227, 179, 65, 0.35);
}

/* contenuto centrale */
.si-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 3vh, 20px);
  opacity: 0;
}
.si-logo {
  display: block;
  width: clamp(110px, 32vw, 170px);
  height: clamp(110px, 32vw, 170px);
}
.si-words {
  display: flex;
  gap: 0.3em;
  font-family: var(--font-display, "Bodoni Moda", Georgia, serif);
  font-weight: 700;
  font-size: clamp(1.7rem, 7.2vw, 2.6rem);
  line-height: 1;
  color: #f2f1f4;
  white-space: nowrap;
}
.si-words .si-b {
  color: #e3b341;
}

/* pulsante Salta */
.si-skip {
  position: absolute;
  bottom: max(24px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  background: transparent;
  border: 1px solid rgba(139, 122, 168, 0.6);
  color: #b8b4c2;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.55rem 1.1rem;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
}
.si-skip:hover,
.si-skip:focus-visible {
  color: #e3b341;
  border-color: #e3b341;
}

/* parti del logo che si muovono */
.si-turn { transform-origin: 32px 32px; }
.si-arm  { transform-origin: 57px 7px; }
.si-spin { transform-origin: 32px 32px; }

/* ---------- animazioni: partono solo con la classe si-run ---------- */
.si-run .si-content { opacity: 1; animation: si-fo 0.5s ease 2.8s both; }
.si-run .si-skip    { animation: si-fi 0.4s ease 0.6s both, si-fo 0.3s ease 2.8s both; }
.si-run .si-l       { animation: si-oL 1s cubic-bezier(0.7, 0, 0.2, 1) 3s both; }
.si-run .si-r       { animation: si-oR 1s cubic-bezier(0.7, 0, 0.2, 1) 3s both; }
.si-run .si-turn    { animation: si-turn 1.5s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both; }
.si-run .si-arm     { animation: si-drop 1.2s cubic-bezier(0.45, 0, 0.2, 1) 0.8s both; }
.si-run .si-spin    { animation: si-spin 8s linear infinite; }
.si-run .si-a       { animation: si-inL 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 1s both; }
.si-run .si-b       { animation: si-inR 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 1s both; }

@keyframes si-fo   { to { opacity: 0; } }
@keyframes si-fi   { from { opacity: 0; } to { opacity: 1; } }
@keyframes si-oL   { to { transform: translateX(-101%); } }
@keyframes si-oR   { to { transform: translateX(101%); } }
@keyframes si-turn { from { transform: rotate(-340deg); } to { transform: rotate(0deg); } }
@keyframes si-drop { from { transform: rotate(-40deg); } to { transform: rotate(0deg); } }
@keyframes si-spin { to { transform: rotate(360deg); } }
@keyframes si-inL  { from { transform: translateX(-110px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes si-inR  { from { transform: translateX(110px); opacity: 0; } to { transform: none; opacity: 1; } }

/* chi ha disattivato il movimento non vede l'intro */
@media (prefers-reduced-motion: reduce) {
  .serepta-intro { display: none !important; }
  html.intro-on, html.intro-on body { overflow: auto; }
}

/* intro: simmetria perfetta attorno alla linea centrale */
.si-half {
  width: 50%;
}
.si-l {
  border-right: 0;
  box-shadow: inset -1px 0 0 rgba(227, 179, 65, 0.25);
}
.si-r {
  border-left: 0;
  box-shadow: inset 1px 0 0 rgba(227, 179, 65, 0.25);
}
.si-words {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0.5em;
  width: 100%;
}
.si-words .si-a {
  justify-self: end;
  text-align: right;
}
.si-words .si-b {
  justify-self: start;
}

/* pagina "lavori in corso" per i visitatori non loggati */
.wip-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #141416;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}
.wip-box {
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.wip-logo {
  width: clamp(110px, 30vw, 150px);
  height: auto;
}
.wip-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a998c4;
  margin: 0;
}
.wip-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2rem, 7vw, 3.2rem);
  line-height: 1.1;
  color: #f2f1f4;
  margin: 0;
}
.wip-title em {
  font-style: italic;
  color: #e3b341;
}
.wip-text {
  color: #a7a3b2;
  margin: 0;
  max-width: 40ch;
}
body:has(.wip-overlay) {
  overflow: hidden;
}

/* =========================================================
   PLAYER PRIMA / DOPO - PARTE 3 di 3 (v5: scheda con il grigio delle card dei servizi, #2a2a31)
   Dove: Helix > Custom Code > Custom CSS, in fondo.
   Sostituisce la versione precedente (cancella la vecchia).

   Il lettore si adatta alla larghezza della SUA colonna, non dello schermo:
     - sotto 560 px: tutto in colonna, interruttore a tutta larghezza (cellulare)
     - da 560 px in su: tasto, interruttore e barra stanno sulla stessa riga
   Occupa tutta la larghezza del contenitore, come le card dei lavori.
   ========================================================= */
.ba-player {
  container-type: inline-size;
  width: 100%;
}
.ba-card {
  background: #2a2a31;
  border: 1px solid #7d7d8c;
  border-radius: 8px;
  padding: clamp(16px, 3vw, 28px);
  color: #b8b4c2;
  font-family: var(--font-body);
}
.ba-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.ba-tab {
  background: transparent;
  border: 1px solid #8f8f9d;
  color: #cfcbd8;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.55rem 0.9rem;
  border-radius: 4px;
  cursor: pointer;
}
.ba-tab:hover { border-color: #d0c4e4; }
.ba-tab[aria-pressed="true"] { border-color: #e3b341; color: #e3b341; }
.ba-n { color: #d0c4e4; margin-right: 0.55em; }
.ba-tab[aria-pressed="true"] .ba-n { color: #e3b341; }

.ba-title { font-weight: 600; font-size: 1.1rem; color: #f2f1f4; }
.ba-what {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #d0c4e4;
  margin-top: 0.2rem;
}

.ba-ctrl { display: flex; align-items: center; gap: 16px; margin: 18px 0 16px; flex-wrap: wrap; }
.ba-play {
  width: 56px; height: 56px; flex: 0 0 56px;
  border-radius: 50%; border: 0;
  background: #e3b341; color: #141416;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.ba-play:hover { background: #f1c866; }
.ba-toggle { display: inline-flex; border: 1px solid #8f8f9d; border-radius: 6px; overflow: hidden; }
.ba-toggle button {
  background: transparent; border: 0; color: #cfcbd8;
  padding: 0.75rem 1.5rem; font-weight: 600; font-family: inherit; cursor: pointer;
}
.ba-toggle button[aria-pressed="true"][data-m="before"] { background: #7b6a97; color: #f2f1f4; }
.ba-toggle button[aria-pressed="true"][data-m="after"] { background: #e3b341; color: #141416; }

.ba-bar { display: flex; align-items: center; gap: 12px; }
.ba-t { font-family: var(--font-mono); font-size: 0.72rem; color: #cfcbd8; min-width: 2.8em; }
.ba-seek {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 5px; border-radius: 3px; cursor: pointer;
  background: linear-gradient(to right, var(--c, #e3b341) var(--p, 0%), #8f8f9d var(--p, 0%));
}
.ba-player[data-mode="before"] .ba-seek { --c: #d0c4e4; }
.ba-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #f2f1f4; border: 0; }
.ba-seek::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #f2f1f4; border: 0; }

.ba-msg { min-height: 1.2em; margin-top: 10px; font-size: 0.8rem; color: #d0c4e4; }
.ba-loading .ba-play { opacity: 0.6; }

.ba-play:focus-visible, .ba-tab:focus-visible, .ba-toggle button:focus-visible, .ba-seek:focus-visible {
  outline: 2px solid #e3b341; outline-offset: 3px;
}

/* stretto (cellulare) */
@container (max-width: 559px) {
  .ba-toggle { width: 100%; }
  .ba-toggle button { flex: 1; }
}
/* largo (tablet e computer): controlli su una sola riga */
@container (min-width: 560px) {
  .ba-card { display: grid; grid-template-columns: auto 1fr; column-gap: 28px; align-items: center; }
  .ba-tabs, .ba-info, .ba-msg { grid-column: 1 / -1; }
  .ba-ctrl { grid-column: 1; margin: 16px 0 0; }
  .ba-bar { grid-column: 2; margin-top: 16px; }
}

/* SPARIZIONE TOP BAR, POI DA RIVEDERE*/
#sp-top-bar,
#sp-top1,
#sp-top2 {
  display: none !important;
}

/* anteprima riservata: nasconde "Lavori in corso" a chi ha il link segreto */
html.preview-ok .wip-overlay {
  display: none !important;
}
html.preview-ok body:has(.wip-overlay) {
  overflow: auto;
}

/* ===== PAGINE PRIVACY E COOKIE - da aggiungere in fondo al Custom CSS ===== */
.legale { max-width: 760px; margin: 0 auto; color: var(--muted, #b7b4c0); line-height: 1.75; }
.legale h2 { font-size: 1.15rem !important; margin: 2.2rem 0 .6rem; }
.legale h3 { font-family: var(--font-body); font-size: .95rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text); margin: 1.4rem 0 .3rem; }
.legale p, .legale li { font-size: .95rem; }
.legale ul { padding-left: 1.2rem; }
.legale strong { color: var(--text); font-weight: 600; }
.legale a { color: var(--gold); }
.legale-tab { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .88rem; }
.legale-tab th, .legale-tab td { text-align: left; vertical-align: top; padding: .7rem .8rem; border-bottom: 1px solid var(--line, #34343c); }
.legale-tab th { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--purple-light, #a99bc0); font-weight: 400; }
@media (max-width: 600px) { .legale-tab thead { display: none; } .legale-tab tr { display: block; padding: .6rem 0; border-bottom: 1px solid var(--line, #34343c); } .legale-tab td { display: block; border: 0; padding: .15rem 0; } }

/* ===== MINIATURE VIDEO CLICCABILI - fondo del Custom CSS ===== */
.yt-facade { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; margin: 0; padding: 0; border: 0; border-radius: 0; background: #000; cursor: pointer; overflow: hidden; }
.yt-facade img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.yt-facade:hover img { transform: scale(1.03); }
.yt-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: var(--gold); transition: background-color .2s ease; }
.yt-play::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -11px 0 0 -6px; border-left: 20px solid var(--bg); border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.yt-facade:hover .yt-play { background: #f1c866; }
.yt-facade:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.yt-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.yt-avviso { margin: .5rem 0 0; font-size: .72rem; color: var(--muted-2, #9c9aa6); }
.yt-avviso a { color: var(--gold); }



/* ===== Pagina 404 (Serepta Records) ===== */
html:has(.error-code), body:has(.error-code){background:#141416 !important;min-height:100vh}
body:has(.error-code){display:flex !important;align-items:center;justify-content:center;text-align:center;margin:0;padding:2rem 1.2rem}
.error-code{font-family:'Bodoni Moda',Georgia,serif !important;font-weight:600 !important;font-size:clamp(5rem,18vw,10rem) !important;line-height:1 !important;letter-spacing:.02em;color:#e3b341 !important;margin:0 0 .6rem !important}
.error-message{font-family:'Bodoni Moda',Georgia,serif !important;font-weight:600 !important;text-transform:uppercase;font-size:clamp(1.3rem,3.4vw,2rem) !important;line-height:1.2 !important;color:#f2f1f4 !important;margin:0 0 2.4rem !important}
.error-message::after{content:"Il link potrebbe essere cambiato o non corretto. Da qui puoi tornare alla home.";display:block;font-family:'Instrument Sans',system-ui,sans-serif;font-weight:400;text-transform:none;font-size:1.05rem;line-height:1.6;color:#cfcbd8;max-width:30rem;margin:1rem auto 0}
.error-code ~ .btn{background:#e3b341 !important;border:1px solid #e3b341 !important;color:#17141d !important;font-family:'Instrument Sans',system-ui,sans-serif !important;font-weight:600 !important;font-size:1rem !important;border-radius:4px !important;padding:.8rem 1.6rem !important;text-decoration:none !important}
.error-code ~ .btn:hover,.error-code ~ .btn:focus{background:transparent !important;color:#e3b341 !important}




/* ===== Menu a tre righe (telefono) ===== */
.offcanvas-menu{background:#141416 !important;border-left:1px solid #2d2d35 !important}
.offcanvas-menu .close-offcanvas,.offcanvas-menu .close-offcanvas span{color:#e3b341 !important}
.offcanvas-menu .menu > li > a,
.offcanvas-menu ul.menu li > a{
  font-family:'DM Mono',ui-monospace,monospace !important;
  font-size:1rem !important;font-weight:400 !important;
  letter-spacing:.14em !important;text-transform:uppercase !important;
  color:#f2f1f4 !important;
  padding:.95rem 0 !important;
  border-bottom:1px solid #2d2d35 !important;
}
.offcanvas-menu .menu > li.active > a,
.offcanvas-menu .menu > li.current > a,
.offcanvas-menu .menu > li > a:hover,
.offcanvas-menu .menu > li > a:focus{color:#e3b341 !important}


/* ===== Barra menu desktop: stesso carattere del menu laterale ===== */
@media (min-width: 992px){
  .sp-megamenu-parent > li > a,
  .sp-megamenu-parent > li > span{
    font-family:'DM Mono',ui-monospace,monospace !important;
    font-size:.85rem !important;
    font-weight:400 !important;
    letter-spacing:.14em !important;
    text-transform:uppercase !important;
  }
}


/* ===== Logo nel menu laterale (telefono) ===== */
.offcanvas-menu::before{
  content:"";
  position:absolute;
  top:1rem;left:1.5rem;
  width:200px;height:46px;
  background:url('/images/logo/serepta-logo-animato-v3.svg') left center / contain no-repeat;
  pointer-events:none;
}

/* ===== Titolo dei popup Privacy e Cookie ===== */
.titolo-legale,
.titolo-legale .sppb-addon-title,
.titolo-legale h1,
.titolo-legale h2{
  font-size:clamp(1.6rem,6vw,2rem) !important;
  line-height:1.1 !important;
}