/**
 * Theme Name: MAC film
 * Template: twentytwentyfive
 * Author: MAC film
 * Version: 0.1
 */

:root {
  --sm-accent: #E65100;
}

html, body {
  overflow-x: hidden;
}

.wp-site-blocks {
  overflow-x: hidden;
}

/* evita le sottolineature per i post-terms */
.wp-block-post-terms a {
  text-decoration: none;
}

.wp-block-post-terms a:hover {
  text-decoration: underline;
}

/* ===== SLIDER ===== */

.horizontal-slider, .brevi-slider, .img-slider {
  box-sizing: border-box;
  max-width: 100%;
  display: flex;
  overflow-x: auto;
  gap: 1.5rem;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
}

.horizontal-slider::-webkit-scrollbar,
.brevi-slider::-webkit-scrollbar,
.img-slider::-webkit-scrollbar {
  display: none;
}

/* Spacer finale */
.horizontal-slider::after,
.brevi-slider::after,
.img-slider::after {
  content: '';
  flex: 0 0 2rem;
  display: block;
}

@media (max-width: 768px) {
  .horizontal-slider::after,
  .brevi-slider::after,
  .img-slider::after {
    flex: 0 0 1rem;
  }
}

/* Desktop */
@media (min-width: 769px) {
  .horizontal-slider, .brevi-slider, .img-slider {
    padding: 0 2rem;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 2rem;
  }

  /* Nessuno spazio vuoto all'inizio degli slider (tranne .img-slider) */
  .horizontal-slider, .brevi-slider {
    padding-left: 0;
    scroll-padding-left: 0;
  }

  .horizontal-slider > * {
    flex: 0 0 auto;
    width: 370px;
    scroll-snap-align: start;
  }

  .brevi-slider > * {
    flex: 0 0 auto;
    width: 250px;
    scroll-snap-align: start;
  }

  .img-slider > * {
    flex: 0 0 auto;
    width: 300px;
    scroll-snap-align: start;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .horizontal-slider, .brevi-slider, .img-slider {
    padding: 0 1rem;
    scroll-padding: 0 1rem;
    gap: 1rem;
  }

  /* Nessuno spazio vuoto all'inizio degli slider (tranne .img-slider) */
  .horizontal-slider, .brevi-slider {
    padding-left: 0;
    scroll-padding-left: 0;
  }

  .horizontal-slider > * {
    flex: 0 0 auto;
    width: 90vw;
    max-width: 400px;
  }

  .brevi-slider > * {
    flex: 0 0 auto;
    width: 80vw;
    max-width: 320px;
  }

  .img-slider > * {
    flex: 0 0 auto;
    width: 85vw;
    max-width: 350px;
  }
}

.horizontal-slider > *, .brevi-slider > *, .img-slider > * {
  margin: 0;
  pointer-events: auto;
}

/* Centra le immagini di .img-slider quando non riempiono la riga
   (i margini auto assorbono solo lo spazio libero, lo scroll resta normale).
   !important + doppia classe: il layout constrained di WP impone ai figli
   margin-left/right auto !important e va sovrascritto */
.img-slider.img-slider > * { margin: 0 !important; }
.img-slider.img-slider > :first-child { margin-left: auto !important; }
.img-slider.img-slider > :last-child  { margin-right: auto !important; }

.horizontal-slider:active, .brevi-slider:active, .img-slider:active {
  cursor: grabbing;
}

.horizontal-slider.dragging,
.brevi-slider.dragging,
.img-slider.dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}

.horizontal-slider.dragging > *,
.brevi-slider.dragging > *,
.img-slider.dragging > * {
  pointer-events: none;
}

/* ===== BREVI — MODALITÀ TICKER SCORREVOLE =====
   Struttura: Gruppo con classe .brevi-ticker che contiene il Query Loop
   (il suo <ul class="wp-block-post-template brevi-slider">).
   Il JS duplica l'<ul> una volta per ottenere il loop continuo. */

.brevi-ticker,
.brevi-ticker.wp-block-group,
.brevi-ticker.wp-block-query {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  overflow: hidden;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
  -webkit-mask: linear-gradient(90deg, transparent, #000 3%, #000 94%, transparent);
  mask: linear-gradient(90deg, transparent, #000 3%, #000 94%, transparent);
}

/* neutralizza il layout "constrained"/flex del Gruppo sul track */
.brevi-ticker > .brevi-slider,
.brevi-ticker > * > .brevi-slider {
  margin: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
}

.brevi-ticker .brevi-slider {
  flex: 0 0 auto;
  width: max-content;
  min-width: max-content;
  max-width: none;
  overflow: visible;
  padding: 0 1.5rem 0 0;
  cursor: default;
  user-select: auto;
  scroll-snap-type: none;
  animation: brevi-scroll var(--brevi-speed, 45s) linear infinite;
  will-change: transform;
}

.brevi-ticker:hover .brevi-slider { animation-play-state: paused; }
.brevi-ticker .brevi-slider::after { content: none; }

/* gli item non sono più a larghezza fissa: si adattano al testo */
.brevi-ticker .brevi-slider > * {
  flex: 0 0 auto;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  scroll-snap-align: none;
  white-space: nowrap;
}

/* testo delle brevi su una riga sola */
.brevi-ticker .brevi-slider > * > *,
.brevi-ticker .brevi-slider p,
.brevi-ticker .brevi-slider h1,
.brevi-ticker .brevi-slider h2,
.brevi-ticker .brevi-slider h3,
.brevi-ticker .brevi-slider h4 {
  white-space: nowrap;
  margin: 0;
}

@keyframes brevi-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .brevi-ticker { overflow-x: auto; }
  .brevi-ticker .brevi-slider { animation: none; }
  .brevi-ticker .brevi-slider[aria-hidden="true"] { display: none; }
}

.copy-link__btn {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .4em .8em;
  border: 1px solid #ddd;
  border-radius: 5px;
  background: #fff;
  color: #000;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  transition: background .2s, border-color .2s, color .2s;
}
.copy-link__btn:hover { background: #f5f5f5; border-color: #bbb; }
.copy-link__icon { flex: 0 0 auto; }
.copy-link__btn.is-copied { border-color: var(--sm-accent); color: var(--sm-accent); }

.colonna-items {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.colonna-items > .item {
    flex: 1;
}

/* Stessa altezza per Query Loop (grid) */
.wp-block-post-template.is-layout-grid > .wp-block-post {
  display: flex;
  flex-direction: column;
}

.wp-block-post-template.is-layout-grid > .wp-block-post > * {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ===== Sillabazione italiana ===== */
/* Richiede lang="it" su <html> (sito impostato in Italiano). */

/* Corpo del testo: paragrafi, liste, citazioni → sillabazione automatica */
.entry-content p,
.wp-block-post-content p,
article p,
.wp-block-list li,
.wp-block-quote p,
.wp-block-pullquote p {
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphenate-limit-chars: 6 3 2; /* min parola / min prima / min dopo il trattino */
}

/* Evita che URL o parole lunghissime sfondino il layout */
.entry-content,
.wp-block-post-content {
  overflow-wrap: break-word;
}

/* Titoli: NO sillabazione, righe bilanciate (più elegante) */
.wp-block-post-title,
.wp-block-heading,
h1, h2, h3, h4 {
  text-wrap: balance;
}