/* ====== Trombologna base ====== */
:root{
  --bg: #f6f3eb;            /* carta/“pergamena” */
  --ink: #1c1a16;
  --muted: #6a645c;
  --brand: #ff6a00;         /* arancione cantiere */
  --brand-ink: #2b2118;
  --rail: #9aa0a6;
  --card: #fffdf8;
  --shadow: rgba(0,0,0,.08);
  --radius: 12px;
  --container: 1100px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font: 16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  color:var(--ink);
  background: var(--bg);
  min-height:100dvh;
}

/* Watermark: tram/rotaie + stripe cantiere, molto leggero */
body.has-watermark{
  background:
    /* sottili rotaie diagonali */
    linear-gradient(135deg, transparent 47%, rgba(0,0,0,.035) 47.5%, rgba(0,0,0,.035) 52.5%, transparent 53%) 0 0/48px 48px,
    /* strisce arancioni molto sbiadite, grandi */
    repeating-linear-gradient( -25deg,
      rgba(255,106,0,.045) 0 22px,
      transparent 22px 44px) 0 0/100% 100%,
    var(--bg);
}
/* Sfondo binario che si ripete */
body.has-binary{
  /* colore di fondo di sicurezza */
  background-color: var(--bg);
  /* il tuo pattern */
  background-image: url('images/binaribackground.jpg');
  background-repeat: repeat;    /* ripeti in entrambe le direzioni */
  background-position: 0 0;     /* parti dall'angolo */
  background-size: auto;        /* usa la dimensione reale del file */
}

/* Facoltativo: se il pattern è troppo grande/piccolo,
   impostare una dimensione del tassello, es. 220px */
 /* body.has-binary{ background-size: 220px auto; } */

/* Utilities */
.container{max-width:var(--container); margin:0 auto; padding:0 16px}
.block{margin:56px 0}
.small{font-size:.9rem;color:var(--muted)}
.lede{margin:.7rem 0 0; color:var(--muted)}
.hint{display:block;margin-top:.25rem;color:var(--muted);font-size:.9rem}

.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{left:12px;top:12px;z-index:999;background:#fff;padding:8px 10px;border-radius:8px}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(#fffdfc, rgba(255,253,252,.95));
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.header-inner{display:flex; align-items:center; gap:16px; padding:10px 0}
.logo{
  height:60px;
  width:auto;
  object-fit:contain;
  border-radius:10px;
  box-shadow:0 2px 6px var(--shadow);
}
.titles h1{font-size:1.35rem; margin:0}
.subtitle{margin:2px 0 0;color:var(--muted);font-weight:500}
.site-nav{margin-left:auto; display:flex; gap:14px; flex-wrap:wrap}
.site-nav a{
  color:var(--brand-ink); text-decoration:none; font-weight:700; padding:.45rem .7rem;
  border-radius:999px; background:rgba(255,106,0,.12);
}
.site-nav a:hover{background:rgba(255,106,0,.2)}

/* Hero */
.hero{margin-top:18px}
.hero img{width:100%; height:auto; border-radius:var(--radius); box-shadow:0 8px 30px var(--shadow)}
.hero .lede{font-size:1.05rem}

/* Carousel generic */
.carousel{position:relative}
.carousel .track{
  display:grid; grid-auto-flow:column; gap:12px; align-items:stretch;
  overflow:hidden; scroll-snap-type:x mandatory;
}
.carousel .track > *{scroll-snap-align:center}
.carousel button.prev,
.carousel button.next{
  position:absolute; top:50%; transform:translateY(-50%);
  border:0; background:#ffffffd9; color:var(--brand-ink); font-size:2rem;
  width:40px; height:40px; border-radius:50%; cursor:pointer;
  box-shadow:0 4px 16px var(--shadow);
}
.carousel button.prev{left:-6px}
.carousel button.next{right:-6px}
.carousel-dots{display:flex; gap:6px; justify-content:center; margin:10px 0 0}
.carousel-dots button{
  width:9px;height:9px;border-radius:50%;border:0;background:#d6d1c6;cursor:pointer
}
.carousel-dots button[aria-current="true"]{background:var(--brand)}

/* Video slides (16:9, responsive) */
.video-carousel .track{grid-auto-columns:100%}
.video-slide{position:relative; border-radius:var(--radius); overflow:hidden; background:#000}
.video-slide::before{content:""; display:block; padding-top:56.25%} /* 16:9 */
.video-slide iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* Image slides */
.image-carousel .track{grid-auto-columns:100%}
.image-slide{position:relative; border-radius:var(--radius); overflow:hidden; background:var(--card); box-shadow:0 8px 30px var(--shadow)}
.image-slide img{display:block; width:100%; height:auto}

/* Jokes */
.joke{font-size:1.2rem; background:var(--card); padding:18px; border-radius:var(--radius); box-shadow:0 8px 30px var(--shadow)}
.joke-actions{display:flex; gap:10px; margin-top:10px}
.btn{border:0; background:var(--brand); color:white; font-weight:800; padding:.6rem .9rem; border-radius:10px; cursor:pointer}
.btn:hover{filter:brightness(.95)}
.btn-ghost{background:transparent; color:var(--brand-ink); border:2px solid rgba(0,0,0,.12)}

/* CTA */
.cta{background:linear-gradient( to bottom right, rgba(255,106,0,.12), rgba(255,106,0,.06) ); padding:22px; border-radius:var(--radius); text-align:center}

/* Footer */
.site-footer{margin-top:60px; padding:24px 0; color:var(--muted); border-top:1px solid rgba(0,0,0,.06)}

/* Cards & forms */
.card{background:var(--card); padding:20px; border-radius:var(--radius); box-shadow:0 8px 30px var(--shadow)}
.feature-media{
  display:flex;
  justify-content:center;
  margin:20px auto;
}
.feature-media img{
  max-width:100%;
  height:auto;
  border-radius:var(--radius);
  box-shadow:0 8px 30px var(--shadow);
}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.grid .full{grid-column:1/-1}
label{display:flex; flex-direction:column; gap:6px; font-weight:700}
input, textarea{
  font:inherit; padding:.6rem .7rem; border-radius:8px; border:1px solid #d9d2c5; background:#fff;
}
input:focus, textarea:focus{outline:2px solid rgba(255,106,0,.35); border-color:rgba(255,106,0,.5)}
.form-actions{margin-top:14px; display:flex; gap:10px}
.hp{position:absolute; left:-9999px}

/* Back to top */
.to-top{
  position:fixed; right:12px; bottom:12px; width:44px; height:44px; border-radius:50%;
  border:0; background:#fff; box-shadow:0 8px 22px var(--shadow); cursor:pointer; display:none;
}
.to-top.show{display:block}

/* NEW: Reel (vertical) */
.reel-carousel .track { grid-auto-columns: 100%; }
.reel-slide{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  min-height: 480px;           /* gives space before FB SDK renders */
  box-shadow: 0 8px 30px var(--shadow);
}


/* Responsive tweaks */
@media (max-width:760px){
  .grid{grid-template-columns:1fr}
  .header-inner{flex-wrap:wrap}
  .site-nav{margin-left:0}
  .titles h1{font-size:1.1rem}
}

/* Opaque content boxes over the binary background */
body.has-binary main#contenuto{
  padding-top: 24px;
  padding-bottom: 40px;
}

/* Hero + all main sections become "cards" */
body.has-binary main#contenuto section.hero,
body.has-binary main#contenuto section.block{
  background: var(--card);            /* #fffdf8 */
  padding: 24px;
  border-radius: var(--radius);
  box-shadow: 0 8px 30px var(--shadow);
}

/* Space between stacked boxes */
body.has-binary main#contenuto section + section{
  margin-top: 32px;
}

/* Footer on binary background: give it a box too */
body.has-binary .site-footer{
  background: var(--card);
}