/* ==========================================================
   Joker Style v1.0.1, stili principali
   ========================================================== */

@font-face{
	font-family:"Unbounded";
	src:url("../fonts/unbounded.woff2") format("woff2");
	font-weight:200 900;
	font-style:normal;
	font-display:swap;
}
@font-face{
	font-family:"Bricolage Grotesque";
	src:url("../fonts/bricolage-grotesque.woff2") format("woff2");
	font-weight:200 800;
	font-style:normal;
	font-display:swap;
}

:root{
	--nero:#000000;
	--grafite:#16141B;
	--grafite-2:#211E28;
	--linea:#2F2B38;
	--rosso:#E3122A;
	--acido:#B8FF2C;
	--viola:#8B3DFF;
	--carta:#ECE8DF;
	--testo:#F2F0F5;
	--muto:#A29DAE;
	--display:"Unbounded","Arial Black",system-ui,sans-serif;
	--corpo:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
	--larghezza:1240px;
	--margine:clamp(18px,4vw,40px);
	--raggio:16px;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--nero);color:var(--testo);font-family:var(--corpo);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3,h4{font-family:var(--display);line-height:1.05;letter-spacing:-.02em;margin:0;font-weight:800}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acido);outline-offset:3px}
::selection{background:var(--rosso);color:#fff}
[hidden]{display:none!important}

.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.salta{position:absolute;left:12px;top:-60px;z-index:1000;background:var(--rosso);color:#fff;padding:10px 16px;border-radius:10px;font-weight:800;text-decoration:none}
.salta:focus{top:12px}

/* ---------- pulsanti ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:11px 20px;font-weight:800;font-size:15px;line-height:1.2;text-decoration:none;cursor:pointer;transition:transform .15s ease,background-color .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-grande{padding:15px 26px;font-size:16px}
.btn-rosso{background:var(--rosso);color:#fff}
.btn-rosso:hover{background:color-mix(in srgb,var(--rosso) 88%,#fff)}
.btn-acido{background:var(--acido);color:var(--nero)}
.btn-vuoto{background:transparent;color:var(--testo);box-shadow:inset 0 0 0 1.5px var(--linea)}
.btn-vuoto:hover{box-shadow:inset 0 0 0 1.5px var(--testo)}
.btn-nero{background:var(--nero);color:var(--testo)}
.is-disabilitato{opacity:.6;cursor:default}
.is-disabilitato:hover{transform:none}

/* ---------- testata ---------- */
.testata{position:sticky;top:0;z-index:100;background:rgba(0,0,0,.92);border-bottom:1px solid transparent}
@supports (backdrop-filter:blur(8px)){.testata{background:rgba(0,0,0,.78);backdrop-filter:blur(12px)}}
.testata.is-scesa{border-bottom-color:var(--linea)}
.admin-bar .testata{top:32px}
@media (max-width:782px){.admin-bar .testata{top:46px}}
@media (max-width:600px){.admin-bar .testata{top:0}}
.testata-dentro{max-width:var(--larghezza);margin:0 auto;padding:14px var(--margine);display:flex;align-items:center;gap:24px}
.logo{font-family:var(--display);font-weight:900;font-size:19px;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.logo{text-transform:uppercase}
.logo span{color:var(--rosso)}
.custom-logo-link img{max-height:46px;width:auto}
.menu{margin-left:auto}
.menu ul{list-style:none;margin:0;padding:0;display:flex;gap:28px}
.menu a{text-decoration:none;color:var(--muto);font-weight:600;font-size:15px}
.menu a:hover,.menu .current-menu-item>a{color:var(--testo)}
.menu-cta-mobile{display:none}
.testata-azioni{display:flex;align-items:center;gap:10px}
.carrello{position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--linea)}
.carrello svg{width:20px;height:20px}
.carrello-numero{position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--rosso);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center}
.menu-apri{display:none;width:42px;height:42px;border:0;border-radius:50%;background:var(--grafite);cursor:pointer;place-items:center}
.menu-apri svg{width:22px;height:22px}
.testata-app .testata-dentro{justify-content:center}

/* ---------- layout ---------- */
.contenuto{min-height:60vh}
.sezione{max-width:var(--larghezza);margin:0 auto;padding:72px var(--margine) 0}
.sezione-testa{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.sezione-testa h2{font-size:clamp(26px,3.4vw,40px)}
.sezione-sotto{color:var(--muto);margin:0;max-width:60ch}
.link-freccia{display:inline-block;margin-top:22px;font-weight:700;text-underline-offset:5px;text-decoration-color:var(--rosso);text-decoration-thickness:2px}
.azioni{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- hero ---------- */
.hero{max-width:var(--larghezza);margin:0 auto;padding:56px var(--margine) 64px;display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center}
.hero-testo{container-type:inline-size;min-width:0}
.hero h1{font-size:clamp(32px,5vw,60px);font-size:clamp(32px,10.6cqi,66px);font-weight:900;line-height:.98;overflow-wrap:break-word}
.hero-testo p{color:var(--muto);font-size:clamp(17px,1.6vw,20px);max-width:42ch;margin:24px 0 30px}

.ventaglio{position:relative;height:clamp(340px,40vw,470px)}
.carta{position:absolute;left:50%;top:6%;width:clamp(210px,24vw,290px);aspect-ratio:7/10;border-radius:18px;transform-origin:50% 115%}
.carta-dorso{border:7px solid var(--carta)}
.carta-dorso-viola{background:var(--viola);background:repeating-linear-gradient(45deg,var(--viola) 0 11px,color-mix(in srgb,var(--viola) 78%,#000) 11px 22px);transform:translateX(-50%) rotate(-16deg)}
.carta-dorso-rosso{background:var(--rosso);background:repeating-linear-gradient(-45deg,var(--rosso) 0 11px,color-mix(in srgb,var(--rosso) 75%,#000) 11px 22px);transform:translateX(-50%) rotate(-6deg)}
.carta-fronte{background:var(--carta);color:var(--nero);padding:12px;transform:translateX(-44%) rotate(7deg);box-shadow:0 36px 70px color-mix(in srgb,var(--rosso) 30%,transparent);display:flex;flex-direction:column}
.angolo{font-family:var(--display);font-weight:900;font-size:24px;line-height:1;display:block;color:var(--rosso)}
.angolo small{display:block;font-size:10px;color:var(--viola)}
.angolo-giu{align-self:flex-end;transform:rotate(180deg);text-align:center}
.carta-fronte .foto{flex:1;margin:8px 0;border-radius:10px}

/* ---------- foto e tagli ---------- */
.foto{position:relative;margin:0;overflow:hidden;border-radius:12px;color:var(--acido);background:radial-gradient(circle at 50% 38%,#3a3544 0 28%,transparent 29%),linear-gradient(160deg,#2a2631,#121016)}
.foto img{width:100%;height:100%;object-fit:cover}
.foto .sagoma{position:absolute;left:15%;bottom:0;width:70%;height:88%}
.etichetta{position:absolute;left:10px;bottom:10px;background:var(--nero);color:var(--testo);font-family:var(--corpo);font-size:13px;font-weight:600;padding:4px 11px;border-radius:999px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:0;box-shadow:inset 0 0 0 1.5px var(--linea);background:transparent;border-radius:999px;padding:7px 15px;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;color:var(--testo)}
.chip:hover{box-shadow:inset 0 0 0 1.5px var(--muto)}
.chip.is-attivo{background:var(--testo);color:var(--nero);box-shadow:none}
.chips-link{margin-bottom:22px}

.griglia-tagli{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(190px,20vw,260px);gap:10px}
.griglia-tagli .taglio:first-child{grid-column:span 2;grid-row:span 2}
.griglia-tagli.is-filtrata .taglio:first-child,.griglia-archivio .taglio:first-child{grid-column:auto;grid-row:auto}
.griglia-archivio{grid-auto-rows:clamp(220px,26vw,340px)}
.griglia-vuota{color:var(--muto);margin-top:12px}

/* ---------- dove trovi Simo ---------- */
.banner-simo{background:rgba(184,255,44,.06);max-width:calc(var(--larghezza) - 2 * var(--margine));margin:0 auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 22px;border-radius:14px;box-shadow:inset 0 0 0 1.5px var(--acido);background:color-mix(in srgb,var(--acido) 6%,transparent)}
@media (max-width:1320px){.banner-simo{margin:0 var(--margine)}}
.banner-simo p{flex:1;min-width:220px;margin:0;font-size:17px}
.banner-simo strong{color:var(--acido)}
.banner-simo .live{flex:none;width:11px;height:11px;border-radius:50%;background:var(--acido);animation:pulsa 1.8s infinite}
.banner-simo-fuori{box-shadow:inset 0 0 0 1.5px var(--linea);background:var(--grafite)}
.banner-simo-fuori .live{background:var(--muto);animation:none}
.banner-link{display:inline-flex;align-items:center;gap:6px;font-weight:700;text-underline-offset:4px}
.banner-link svg{width:18px;height:18px;color:var(--acido)}
@keyframes pulsa{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acido) 60%,transparent)}70%{box-shadow:0 0 0 12px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ---------- torneo ---------- */
.torneo{max-width:calc(var(--larghezza) - 2 * var(--margine));margin:18px auto 0;display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;padding:26px 28px;border-radius:var(--raggio);background:var(--viola);color:#fff;scroll-margin-top:90px}
@media (max-width:1320px){.torneo{margin:18px var(--margine) 0}}
.torneo-data{font-family:var(--display);font-weight:900;font-size:44px;line-height:.9;text-align:center;min-width:78px}
.torneo-data small{display:block;font-size:13px;font-weight:700;margin-top:4px}
.torneo-info h2{font-size:clamp(20px,2.2vw,26px);margin-bottom:6px}
.torneo-info p{margin:0}
.posti{height:7px;border-radius:9px;background:rgba(0,0,0,.35);margin-top:12px;max-width:340px;overflow:hidden}
.posti i{display:block;height:100%;border-radius:9px;background:var(--acido)}

/* ---------- recensioni ---------- */
.recensioni{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.recensione{background:var(--grafite);border-radius:var(--raggio);padding:22px;display:flex;flex-direction:column}
.stelle{color:var(--acido);letter-spacing:2px}
.stelle-vuote{color:var(--linea)}
.recensione-testo{margin:10px 0 16px;flex:1}
.recensione-testo p:last-child{margin:0}
.recensione footer{display:flex;justify-content:space-between;gap:10px;font-size:14px;color:var(--muto)}
.recensione footer b{color:color-mix(in srgb,var(--viola) 70%,#fff);font-weight:600}

/* ---------- store in home ---------- */
.store-griglia{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.prodotto{background:var(--grafite);border-radius:var(--raggio);padding:14px}
.prodotto-foto{display:block;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--grafite-2)}
.prodotto-foto img{width:100%;height:100%;object-fit:cover}
.prodotto h3{font-family:var(--corpo);font-size:17px;font-weight:700;letter-spacing:0;margin:14px 0 4px}
.prodotto h3 a{text-decoration:none}
.prodotto-riga{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:8px}
.prodotto .prezzo{font-family:var(--display);font-weight:700}
.prodotto .prezzo del{color:var(--muto);font-weight:400;font-size:.85em}
.prodotto .prezzo ins{text-decoration:none}

/* ---------- sedi ---------- */
.sedi{display:grid;grid-template-columns:1fr 1fr;gap:12px;scroll-margin-top:90px}
#sedi{scroll-margin-top:80px}
.sede{position:relative;border-radius:var(--raggio);padding:26px;box-shadow:inset 0 0 0 1px var(--linea)}
.sede h3{font-size:clamp(22px,2.4vw,30px);margin-bottom:10px;padding-right:130px}
.sede-indirizzo{color:var(--testo);margin-bottom:6px}
.sede-orari{color:var(--muto)}
.sede-azioni{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.tag-simo{position:absolute;top:22px;right:22px;background:var(--acido);color:var(--nero);font-weight:800;font-size:13px;padding:5px 12px;border-radius:999px}

/* ---------- footer ---------- */
.piede{margin-top:110px;border-top:1px solid var(--linea)}
.piede-dentro{max-width:var(--larghezza);margin:0 auto;padding:48px var(--margine);display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px}
.piede-marchio p{color:var(--muto);margin:12px 0 16px;max-width:36ch}
.social{display:flex;gap:10px}
.social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--linea)}
.social a:hover{box-shadow:inset 0 0 0 1.5px var(--acido);color:var(--acido)}
.social svg{width:19px;height:19px}
.piede-sede h2{font-size:17px;margin-bottom:10px}
.piede-sede p{color:var(--muto);font-size:15px;margin-bottom:8px}
.piede-sede a{font-size:15px;text-underline-offset:4px}
.piede-fondo{max-width:var(--larghezza);margin:0 auto;padding:18px var(--margine) 30px;display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;color:var(--muto);font-size:14px;border-top:1px solid var(--linea)}
.piede-fondo ul{list-style:none;margin:0;padding:0;display:flex;gap:18px}
.piede-fondo a{text-decoration:none}
.piede-fondo a:hover{color:var(--testo)}

/* ---------- pagine ---------- */
.pagina-testa h1{font-size:clamp(36px,5.4vw,72px);font-weight:900;max-width:16ch}
.pagina-testa .sezione-sotto{margin-top:16px}
.pagina-testa .data{color:var(--acido);font-weight:600}
.testo-pagina{max-width:72ch}
.testo-pagina h2{font-size:clamp(24px,2.8vw,32px);margin:1.6em 0 .6em}
.testo-pagina h3{font-size:clamp(19px,2vw,23px);margin:1.4em 0 .5em}
.testo-pagina a{color:var(--acido);text-underline-offset:4px}
.testo-pagina ul,.testo-pagina ol{padding-left:1.2em}
.testo-pagina blockquote{margin:1.4em 0;padding:4px 0 4px 20px;border-left:3px solid var(--viola)}
.testo-pagina img{border-radius:12px}
.testo-pagina .wp-block-button__link{background:var(--rosso);color:#fff;border-radius:999px;font-weight:800;text-decoration:none}
.sezione-libera,.sezione-app{padding-top:40px}
.sezione-app{max-width:560px}
.foto-articolo img{border-radius:var(--raggio);width:100%}
.articoli{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.articolo-foto{display:block;border-radius:12px;overflow:hidden;margin-bottom:14px}
.articolo h2{font-size:20px;margin-bottom:8px}
.articolo h2 a{text-decoration:none}
.articolo p{color:var(--muto)}
.vuoto{color:var(--muto)}
.vuoto a{color:var(--acido)}
.navigation.pagination{margin-top:34px}
.nav-links{display:flex;gap:8px;flex-wrap:wrap}
.page-numbers{display:inline-grid;place-items:center;min-width:42px;height:42px;padding:0 14px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--linea);text-decoration:none;font-weight:700}
.page-numbers.current{background:var(--rosso);color:#fff;box-shadow:none}
.taglio-singolo{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.taglio-singolo-foto{aspect-ratio:4/5}
.taglio-singolo h1{font-size:clamp(32px,4.6vw,60px);margin-bottom:14px}
.taglio-stili a{color:var(--acido);text-decoration:none;font-weight:700}
.taglio-singolo .azioni{margin-top:26px}
.pagina-404{text-align:center;padding-top:110px}
.pagina-404 h1{font-size:clamp(32px,5vw,60px);margin-bottom:14px}
.pagina-404 .sezione-sotto{margin:0 auto 30px}
.pagina-404 .azioni{justify-content:center}
.risata-404{font-family:var(--display);font-weight:900;font-size:clamp(46px,9vw,110px);display:flex;justify-content:center;gap:.25em;margin-bottom:10px;line-height:1}
.risata-404 span:nth-child(1){color:var(--rosso)}
.risata-404 span:nth-child(3){color:var(--acido)}
.risata-404 span:nth-child(2){color:var(--viola)}
.vuoto-admin{padding:22px;border-radius:var(--raggio);border:1.5px dashed var(--viola);color:var(--muto)}
.vuoto-admin strong{color:var(--testo)}
.vuoto-admin a{color:var(--acido)}

/* ---------- caricamento con la risata ---------- */
.joker-loader{display:none}
.con-loader .joker-loader{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--nero);font-family:"Unbounded",sans-serif;font-weight:900;font-size:34px;line-height:1;transition:opacity .35s ease}
/* La risata si vede solo quando il font è pronto, mai con il font di riserva */
.joker-loader span{opacity:0;transition:opacity .15s ease}
.font-pronto .joker-loader span{opacity:1}
.font-pronto .joker-loader span{color:var(--rosso);animation:ride 1.2s infinite ease-in-out}
.font-pronto .joker-loader span:nth-child(2){color:var(--viola);animation-delay:.15s}
.font-pronto .joker-loader span:nth-child(3){color:var(--acido);animation-delay:.3s}
.loader-via .joker-loader{opacity:0;pointer-events:none}
@keyframes ride{0%,100%{transform:translateY(0)}40%{transform:translateY(-10px) rotate(-4deg)}}

/* ---------- responsive ---------- */
@media (max-width:980px){
	.testata{backdrop-filter:none;background:rgba(0,0,0,.95)}
	.menu-apri{display:grid}
	.menu-cta{display:none}
	.menu{position:fixed;inset:0;top:0;z-index:99;margin:0;padding:96px var(--margine) 30px;background:var(--nero);display:flex;flex-direction:column;gap:28px;transform:translateY(-100%);visibility:hidden;transition:transform .3s ease,visibility 0s .3s}
	.menu.is-aperto{transform:none;visibility:visible;transition:transform .3s ease}
	.menu ul{flex-direction:column;gap:6px}
	.menu a{font-family:var(--display);font-size:32px;font-weight:800;color:var(--testo)}
	.menu-cta-mobile{display:inline-flex;align-self:flex-start;padding:15px 26px;font-family:var(--corpo);font-size:17px}
	.testata-dentro{position:relative}
	.testata-dentro .logo,.testata-dentro .custom-logo-link,.testata-azioni{position:relative;z-index:101}
	.testata-azioni{margin-left:auto}
	.hero{grid-template-columns:1fr;padding-top:34px;gap:10px}
	.ventaglio{height:360px;order:-1}
	.griglia-tagli{grid-template-columns:repeat(2,1fr)}
	.recensioni,.store-griglia,.articoli{grid-template-columns:1fr 1fr}
	.piede-dentro{grid-template-columns:1fr 1fr}
	.piede-marchio{grid-column:span 2}
	.taglio-singolo{grid-template-columns:1fr}
}
@media (max-width:680px){
	body{font-size:16px}
	.sezione{padding-top:56px}
	.ventaglio{height:350px}
	.torneo{grid-template-columns:1fr;gap:14px;padding:22px}
	.torneo-data{text-align:left;display:flex;align-items:baseline;gap:8px}
	.torneo .btn{justify-self:start}
	.recensioni,.store-griglia,.articoli,.sedi{grid-template-columns:1fr}
	.griglia-tagli .taglio:first-child{grid-column:span 2;grid-row:auto}
	.sede h3{padding-right:0}
	.tag-simo{position:static;display:inline-block;margin-bottom:12px}
	.piede-dentro{grid-template-columns:1fr}
	.piede-marchio{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	*,*::before,*::after{animation:none!important;transition:none!important}
}
