/* =========================================================
   Meccanici della Risata — Theme v2.1 (backup + integrazioni)
   ========================================================= */
:root{
  /* palette e layout */
  --brand:#c28800; --dark:#222; --light:#fff; --muted:#666; --bg:#f7f7f7; --maxw:1100px;
  --accent:#e94e1b; --neon:#ffd86b;
  --logo-size-desktop: 48px;
  --logo-size-mobile:96px;

  /* layering (z-index) */
  --z-header: 1000;
  --z-polaroids: 900;
  --z-content: 5;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; overflow-x:hidden; }
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--dark);
  background:var(--bg);
  line-height:1.5;
}

img{ max-width:100%; display:block; height:auto; }
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }
small,.small{ color:#999; }

.container{ max-width:var(--maxw); margin:0 auto; padding:0 16px; }

/* ---------------------------------------------------------
   Header / Navigation
--------------------------------------------------------- */
header{
  background:var(--light);
  border-bottom:1px solid #eee;
  position:sticky;           /* sticky */
  top:0;
  z-index:var(--z-header);   /* sopra tutto */
  pointer-events:none;       /* l'area vuota dell'header non intercetta click */
}

/* MENU PRINCIPALE: regole limitate all'header */
header .nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  height:64px;
  flex-wrap:wrap;
  padding:0 16px;
}
header .nav .brand{ display:flex; align-items:center; gap:10px; font-weight:700; }
header .nav img{ height:36px; width:auto; }
header .nav ul{
  display:flex; gap:14px; list-style:none;
  margin:0; padding:0; flex-wrap:wrap;
}
header .nav li a{ padding:8px 10px; border-radius:10px; }
header .nav li a[aria-current="page"],
header .nav li a:hover{
  background:#f1f1f1;
  text-decoration:none;
}

/* Link/bottoni dell'header DEVONO restare cliccabili */
header a, header button{ pointer-events:auto; }

/* Mobile nav spacing fix */
@media (max-width:640px){
  header .nav{ height:auto; padding:8px 16px; }
  header .nav ul{ gap:8px; row-gap:6px; }
}

/* Logo responsive override */
header .logo img,
header .nav .logo img,
header .brand img,
img.logo,
.logo img {
  height: var(--logo-size-desktop) !important;
  width: auto !important;
  display: block;
}
@media (max-width:640px){
  header .logo img,
  header .nav .logo img,
  header .brand img,
  img.logo,
  .logo img {
    height: var(--logo-size-mobile) !important;
  }
}

/* Spazio sotto header sticky */
@media (min-width:641px){ body{ padding-top:64px; } }
@media (max-width:640px){ body{ padding-top:72px; } }

/* ---------------------------------------------------------
   Hero
--------------------------------------------------------- */
.hero{
  background:radial-gradient(circle at center,#ffffff 0%,#f0f0f0 100%);
  padding:56px 0;
  text-align:center;
  position:relative;
  overflow:hidden;
  z-index:var(--z-content);
}
.hero .container{ position:relative; z-index:2; }
.hero .logos{
  display:flex; gap:28px; justify-content:center; align-items:center;
  flex-wrap:wrap; margin-bottom:16px; position:relative; z-index:2;
}
.hero .logos img{ height:110px; width:auto; animation:float 6s ease-in-out infinite; }
.hero .logos img:nth-child(2){ animation-delay:1.2s; }

.hero .gears{ position:absolute; inset:0; pointer-events:none; opacity:0.12; z-index:1; }
.hero .gears svg{ position:absolute; width:180px; height:180px; fill:var(--brand); }
.hero .gears .g1{ top:-30px; left:-30px; animation:spin 22s linear infinite; }
.hero .gears .g2{ bottom:-40px; right:-40px; animation:spin-rev 32s linear infinite; }
.hero .gears .g3{ top:10%; right:8%; width:120px; height:120px; opacity:0.1; animation:spin 26s linear infinite; }

@keyframes spin{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
@keyframes spin-rev{ from{transform:rotate(360deg);} to{transform:rotate(0deg);} }
@keyframes float{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }

.hero h1{ margin:10px 0 8px; font-size:clamp(24px,4vw,40px); }
.hero p{ margin:0 auto 20px; max-width:720px; color:var(--muted); }

/* ---------------------------------------------------------
   CTA Buttons
--------------------------------------------------------- */
.cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn{
  display:inline-block; padding:10px 16px; border-radius:10px;
  background:var(--brand); color:#fff; font-weight:600; border:0;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}
.btn.secondary{ background:#333; }
.btn:hover{ filter:brightness(1.05); }

/* ---------------------------------------------------------
   Grid + Cards
--------------------------------------------------------- */
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin:28px 0; }
.card{
  background:var(--light);
  border:1px solid #eee;
  border-radius:14px;
  padding:16px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.08); }

/* ---------------------------------------------------------
   Polaroids (vecchia struttura del backup)
--------------------------------------------------------- */
.polaroids-wrap{
  position:fixed;
  inset:0;
  pointer-events:none;               /* non blocca i click */
  z-index:var(--z-polaroids);        /* sopra i contenuti, sotto l'header */
  opacity:0;
  transition:opacity .6s ease;
}
.polaroids-wrap.show{ opacity:1; }
.polaroid-item{
  position:fixed;                    /* coerente con eventuale script legacy */
  width:180px;
  height:auto;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.25));
  transition:transform .4s ease;
  z-index:var(--z-polaroids);
  pointer-events:none;
}
.polaroid-item:hover{ transform:scale(1.05) !important; }
@media (max-width:700px){ .polaroids-wrap{ display:none; } }

/* I contenuti della pagina restano sotto le polaroid */
main, .content, .container, .page, .wrapper, section, footer{
  position:relative;
  z-index:var(--z-content);
}

/* ---------------------------------------------------------
   Footer + Social
--------------------------------------------------------- */
footer{
  background:#111;
  color:#ddd;
  margin-top:40px;
  position:relative;
  z-index:var(--z-content);
}
.footer-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.footer-top{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.footer-top img{ height:28px; }

.social-links{ display:flex; align-items:center; gap:10px; margin:6px 0 2px; }
.social-links span{ color:#ccc; font-size:.95rem; }
.social{
  display:inline-flex;
  width:32px; height:32px;
  border-radius:50%;
  align-items:center; justify-content:center;
  background:#1d1d1d;
  border:1px solid rgba(255,255,255,.08);
  transition:transform .15s ease, filter .2s ease;
}
.social svg{
  width:18px !important;
  height:18px !important;
  fill:#fff;
}
.social:hover{ transform:translateY(-2px); filter:brightness(1.1); }

/* ---------------------------------------------------------
   Reveal on scroll / vari
--------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ transition:none; opacity:1; transform:none; } }

/* breadcrumb “base” (stilistica) */
.breadcrumb{ background:#fafafa; border-bottom:1px solid #eee; font-size:.95rem; }
.breadcrumb .container{ display:flex; align-items:center; gap:8px; padding:8px 16px; }
.breadcrumb a{ color:#444; text-decoration:none; }
.breadcrumb a:hover{ text-decoration:underline; }
.breadcrumb .current{ color:#999; }

/* ====== Nav/Breadcrumb interni ====== */
main nav, .content nav, section nav, .page nav, .wrapper nav,
main .nav, .content .nav, section .nav, .page .nav, .wrapper .nav,
main .breadcrumbs, .content .breadcrumbs, section .breadcrumbs, .page .breadcrumbs, .wrapper .breadcrumbs,
main .page-subnav, .content .page-subnav, section .page-subnav, .page .page-subnav, .wrapper .page-subnav,
main .subnav, .content .subnav, section .subnav, .page .subnav, .wrapper .subnav,
.breadcrumb {
  position: static !important;
  z-index: auto !important;
  margin: 0 0 .75rem 0 !important;
  pointer-events: auto;
  display: flow-root;               /* modern clearfix */
  line-height: 1.4;
}

/* Link interni sempre cliccabili */
main nav a, .content nav a, section nav a, .page nav a, .wrapper nav a,
main .nav a, .content .nav a, section .nav a, .page .nav a, .wrapper .nav a,
.breadcrumb a, .breadcrumbs a, .page-subnav a, .subnav a, .tabs a{
  pointer-events: auto;
}

/* elimina pseudo-elementi larghi */
.breadcrumbs a::before, .breadcrumbs a::after,
.page-subnav a::before, .page-subnav a::after,
.subnav a::before, .subnav a::after,
.tabs a::before, .tabs a::after,
.breadcrumb a::before, .breadcrumb a::after{
  content:none !important;
}

/* Back floating button (mobile only) */
.back-floating{
  position:fixed;
  left:12px;
  bottom:12px;
  z-index:60;
  background:#111;
  color:#fff;
  padding:10px 14px;
  border-radius:999px;
  text-decoration:none;
  box-shadow:0 10px 20px rgba(0,0,0,.18);
}
@media (min-width:801px){ .back-floating{ display:none; } }

/* ---------------------------------------------------------
   Loader (ingranaggio)
--------------------------------------------------------- */
.page-loader{
  position:fixed;
  inset:0;
  background:#0f0f0f;
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  z-index:9999;
  opacity:0;
  pointer-events:none;
  transition:opacity .4s ease;
}
.page-loader.show{ opacity:1; pointer-events:auto; }
.page-loader .gear{ width:64px; height:64px; position:relative; background:var(--brand); }
.page-loader span{ font-weight:600; letter-spacing:.4px; color:#fff; }

/* ---------------------------------------------------------
   INTRO SPLASH (logo che ruota 0.75s, pausa 1s, esce 0.75s)
--------------------------------------------------------- */
.page-splash{
  position:fixed;
  inset:0;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:99999;
  pointer-events:none;
  opacity:1;
  transition:opacity .3s ease;
}
.page-splash.hide{ opacity:0; }
.page-splash.gone{ display:none; }
.page-splash-logo{
  width:110px;
  max-width:40vw;
  height:auto;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.7));
  transform-origin:center center;
  animation:logoSequence 2.5s ease-in-out forwards;
}
/* 0-30% entra ~0.75s, 30-70% pausa 1s, 70-100% esce ~0.75s */
@keyframes logoSequence{
  0%   { transform:scale(.6) rotate(-200deg); opacity:0; }
  30%  { transform:scale(1) rotate(0deg);    opacity:1; }
  70%  { transform:scale(1) rotate(0deg);    opacity:1; }
  100% { transform:scale(.6) rotate(200deg); opacity:0; }
}

/* ---------------------------------------------------------
   POLAROID – compatibilità con lo script attuale
   (evita invasioni dell’hero; max 2 ai lati su desktop;
   su mobile solo barra in basso)
--------------------------------------------------------- */
/* di base: lo script potrebbe generare più .polaroid-floating:
   le nascondiamo tutte… */
.polaroid-floating{ display:none !important; }

/* …e riattiviamo SOLO le prime due, ancorandole ai lati in basso */
.polaroid-floating:nth-of-type(1),
.polaroid-floating:nth-of-type(2){
  display:block !important;
  position:fixed !important;
  z-index:var(--z-polaroids) !important;
  width:180px !important;
  max-width:180px !important;
  height:auto !important;
  background:#fff;
  border:2px solid #fff;
  border-bottom:40px solid #fff;
  box-shadow:0 20px 40px rgba(0,0,0,.45);
  pointer-events:none;
  transform-origin:center;
}
.polaroid-floating:nth-of-type(1){
  left:24px !important; bottom:24px !important; transform:rotate(-3deg);
}
.polaroid-floating:nth-of-type(2){
  right:24px !important; bottom:24px !important; left:auto !important; transform:rotate(3deg);
}
.polaroid-floating img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  object-fit:cover !important;
  border:none !important;
  box-shadow:none !important;
}

/* Barra mobile (generata dallo script come .polaroid-mobile-gallery) */
.polaroid-mobile-gallery{
  position:fixed;
  left:0; right:0; bottom:0;
  background:rgba(0,0,0,.8);
  padding:8px 8px 12px;
  display:flex;
  justify-content:center;
  gap:8px;
  z-index:var(--z-polaroids);
  box-shadow:0 -10px 30px rgba(0,0,0,.8);
}
.polaroid-mobile-gallery img.polaroid-mini{
  width:80px; height:80px; object-fit:cover;
  border-radius:6px;
  box-shadow:0 10px 20px rgba(0,0,0,.6);
  border:2px solid #fff;
}

/* mobile: niente polaroid flottanti, sì barra,
   E aggiungiamo spazio sotto al footer per non far coprire social/privacy */
@media(max-width:767px){
  .polaroid-floating{ display:none !important; }
  .polaroid-mobile-gallery{ display:flex !important; }

  /* spazio di sicurezza per il footer dietro la barra delle polaroid */
  footer{
    padding-bottom:120px !important;
  }
}

/* desktop: sì polaroid flottanti, no barra */
@media(min-width:768px){
  .polaroid-mobile-gallery{ display:none !important; }
}

/* ---------------------------------------------------------
   Responsive tweaks finali
--------------------------------------------------------- */
@media (max-width:600px){
  header .nav ul{ gap:8px; }
  .hero .logos img{ height:90px; }
  .polaroid-item{ width:140px; }
}