/* Base: alias dei token theme.json + utility globali da design/css/alba.css */
:root{
	--green:var(--wp--preset--color--green);
	--green-dark:var(--wp--preset--color--green-dark);
	--red:var(--wp--preset--color--red);
	--ink:var(--wp--preset--color--ink);
	--cream:var(--wp--preset--color--cream);
	--muted:var(--wp--preset--color--muted);
	--ease:var(--wp--custom--ease--out);
	--wipe:var(--wp--custom--ease--wipe);
}
body{-webkit-font-smoothing:antialiased}
/* Evita che il margine del primo blocco "attraversi" l'header flottante (alto 0) e sposti tutta la pagina. */
.wp-site-blocks{display:flow-root}
/* Le sezioni del tema sono attaccate come nel design: niente blockGap (24px) tra i blocchi albafood.
   Serve specificità (0,2,0): ":root :where(.is-layout-*) > *" dei global styles vince sul margin-block-start dei blocchi. */
.is-layout-constrained > [class*="wp-block-albafood-"],.is-layout-flow > [class*="wp-block-albafood-"],.wp-site-blocks > .wp-block-template-part{margin-block-start:0}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
.screen-reader-text{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}

.disp{font-family:var(--wp--preset--font-family--display);font-weight:800;letter-spacing:-.045em;line-height:.9}
.h3{font-family:var(--wp--preset--font-family--display);font-weight:700;letter-spacing:-.025em;line-height:1.05}
.it{font-family:var(--wp--preset--font-family--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.tag{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.tag::before{content:"";width:9px;height:9px;border-radius:99px;background:var(--red)}
.tag.w{color:#fff}.tag.w::before{background:#fff}
.muted{color:var(--muted)}
.chip{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:999px;background:rgba(27,23,18,.07);font-size:13px;font-weight:700;color:var(--ink);text-decoration:none;transition:background .3s,color .3s}
a.chip:hover{background:var(--ink);color:#fff}
.chip.w{background:rgba(255,255,255,.22);color:#fff}

/* Bottoni: riempimento circolare dal centro (--fill) + freccia .ar che ruota */
.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:56px;padding:0 9px 0 26px;border-radius:999px;font:700 15px var(--wp--preset--font-family--body);text-decoration:none;border:0;cursor:pointer;box-sizing:border-box;transition:color .45s}
.btn::before{content:"";position:absolute;left:50%;top:50%;width:130%;aspect-ratio:1;border-radius:50%;background:var(--fill,var(--ink));transform:translate(-50%,-50%) scale(0);transition:transform .6s var(--wipe);z-index:-1}
.btn:hover::before{transform:translate(-50%,-50%) scale(1)}
.btn .ar{width:38px;height:38px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.2);transition:transform .5s var(--wipe)}
.btn:hover .ar{transform:rotate(-45deg)}
.btn.np{padding:0 28px}
.btn-g{background:var(--green);color:#fff;--fill:var(--ink)}.btn-g:hover{color:#fff}
.btn-k{background:var(--ink);color:#fff;--fill:var(--green)}.btn-k:hover{color:#fff}
.btn-w{background:#fff;color:var(--ink);--fill:var(--ink)}.btn-w:hover{color:#fff}.btn-w .ar{background:rgba(27,23,18,.08)}
.btn-o{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);--fill:var(--ink)}.btn-o:hover{color:#fff}.btn-o .ar{background:rgba(27,23,18,.08)}
.btn-ow{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px #fff;--fill:#fff}.btn-ow:hover{color:var(--ink)}
.btn:focus-visible{outline:3px solid var(--green);outline-offset:4px}

/* Breadcrumb */
.crumb{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:14px;font-weight:600;color:var(--muted)}
.crumb a{color:inherit;text-decoration:none;min-height:32px;display:inline-flex;align-items:center}
.crumb a:hover{color:var(--green)}

/* Animazioni d'ingresso (design/css/alba.css) */
.ln{display:block;overflow:hidden;padding-bottom:.08em}.ln>span{display:inline-block;animation:up 1.1s var(--ease) both}
.ln:nth-child(2)>span{animation-delay:.1s}.ln:nth-child(3)>span{animation-delay:.2s}
.rise{animation:rise 1s var(--ease) both}
.pop{animation:pop .7s var(--ease) both}
.d1{animation-delay:.1s}.d2{animation-delay:.2s}.d3{animation-delay:.3s}.d4{animation-delay:.4s}.d5{animation-delay:.5s}
.spin{animation:spin 18s linear infinite}.bob{animation:bob 6s ease-in-out infinite}
@keyframes pop{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-18px) rotate(3deg)}}

/* Link sottolineato in rosso (la linea si ritira in hover) */
.ulink{position:relative;font-weight:700;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:8px;min-height:44px}
.ulink::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;background:var(--red);transform-origin:right;transition:transform .5s var(--wipe)}
.ulink:hover{color:var(--ink)}.ulink:hover::after{transform:scaleX(0)}

/* Card news (.nc): foto che si apre in hover */
.nc{display:flex;flex-direction:column;gap:18px;text-decoration:none;color:var(--ink)}
.nc:hover,.nc:focus{color:var(--ink)}
.nc .im{border-radius:var(--wp--custom--radius--card);overflow:hidden;clip-path:inset(5% 5% 5% 5% round 28px);transition:clip-path .8s var(--wipe)}
.nc:hover .im,.nc:focus-visible .im{clip-path:inset(0 0 0 0 round 28px)}
.nc .ph{position:relative;overflow:hidden;background:var(--wp--preset--color--sand);transition:transform 1.2s var(--ease);transform:scale(1.12)}
.nc:hover .ph,.nc:focus-visible .ph{transform:scale(1)}
.nc .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.nc .h3{transition:color .3s}.nc:hover .h3,.nc:focus-visible .h3{color:var(--green)}
.nc:focus-visible{outline:3px solid var(--green);outline-offset:6px;border-radius:12px}
@keyframes pulse{0%{transform:scale(.6);opacity:.7}100%{transform:scale(2.6);opacity:0}}

/* Blob "confettura" (.jam) con lucentezza animata + morph della forma */
.jam{background:radial-gradient(60% 45% at 28% 22%,rgba(255,255,255,.38),transparent 60%),radial-gradient(35% 30% at 78% 72%,rgba(0,0,0,.22),transparent 70%),radial-gradient(22% 18% at 62% 30%,rgba(255,255,255,.2),transparent 70%),radial-gradient(3px 3px at 20% 60%,rgba(0,0,0,.35) 60%,transparent 70%),radial-gradient(3px 3px at 44% 78%,rgba(0,0,0,.35) 60%,transparent 70%),radial-gradient(3px 3px at 70% 48%,rgba(0,0,0,.3) 60%,transparent 70%),radial-gradient(2px 2px at 84% 20%,rgba(0,0,0,.3) 60%,transparent 70%),var(--c,#ED1C24);background-size:100% 100%,100% 100%,100% 100%,60px 60px,74px 74px,52px 52px,46px 46px,auto;animation:glossy 9s ease-in-out infinite alternate}
.morph{animation:morph 14s ease-in-out infinite}
@keyframes glossy{from{background-position:0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0}to{background-position:4% 3%,-3% -2%,2% -3%,20px 30px,-18px 22px,14px -20px,-10px 16px,0 0}}
@keyframes morph{0%,100%{border-radius:42% 58% 63% 37%/41% 44% 56% 59%}33%{border-radius:58% 42% 38% 62%/57% 36% 64% 43%}66%{border-radius:36% 64% 52% 48%/48% 60% 40% 52%}}

@keyframes marq{to{transform:translateX(-50%)}}
@keyframes marqr{from{transform:translateX(-50%)}to{transform:none}}
@keyframes drop{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:none}}
@keyframes up{from{transform:translateY(110%)}to{transform:none}}
/* Contatore (.cnt): il numero è nel ::after, da --from a --to quando entra nello schermo (.is-in, reveal.js) */
@property --num{syntax:'<integer>';initial-value:0;inherits:false}
.cnt::after{--num:var(--to,0);counter-reset:n var(--num);content:counter(n)}
.js .cnt:not(.is-in)::after{--num:var(--from,0)}
.cnt.is-in::after{animation:count 2.4s var(--ease) both}
@keyframes count{from{--num:var(--from,0)}to{--num:var(--to,0)}}
@keyframes fillx{from{background-position:100% 0}to{background-position:0 0}}

@keyframes rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes clipup{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}

/* Reveal allo scroll: scroll-driven dove supportato, altrimenti IntersectionObserver (.is-in, assets/js/reveal.js) */
@supports (animation-timeline: view()){
	.rv{animation:rise linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
	.rvc{animation:clipup linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
}
@supports (animation-timeline: view()){
	/* Testo che si riempie di colore allo scroll (le parti .it mantengono il loro colore con -webkit-text-fill-color) */
	.fill{background:linear-gradient(90deg,var(--ink) 50%,rgba(27,23,18,.16) 50%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fillx linear both;animation-timeline:view();animation-range:entry 30% cover 60%}
}
@supports not (animation-timeline: view()){
	.js .fill{background:linear-gradient(90deg,var(--ink) 50%,rgba(27,23,18,.16) 50%);background-size:200% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent}
	.js .fill.is-in{animation:fillx 1.4s var(--ease) both}
	.js .rv:not(.is-in){opacity:0;transform:translateY(40px)}
	.js .rvc:not(.is-in){clip-path:inset(100% 0 0 0)}
	.js .rv.is-in{animation:rise 1s var(--ease) both}
	.js .rvc.is-in{animation:clipup 1s var(--wipe) both}
}

/* Editor: elementi sempre visibili, niente reveal allo scroll */
.editor-styles-wrapper .rv,.editor-styles-wrapper .rvc{animation:none!important;opacity:1;transform:none;clip-path:none}

@media (prefers-reduced-motion: reduce){
	.rv,.rvc,.js .rv.is-in,.js .rvc.is-in{animation:none!important;opacity:1!important;transform:none!important;clip-path:none!important}
	.btn,.btn::before,.btn .ar,.ulink::after,.nc .im,.nc .ph{transition-duration:.01ms!important}
	.jam,.morph,.spin,.bob,.rise,.pop,.ln>span{animation:none!important}
	.fill,.js .fill{animation:none!important;background:none!important;color:inherit!important}
	.cnt::after,.js .cnt:not(.is-in)::after,.cnt.is-in::after{animation:none!important;--num:var(--to,0)!important}
	.morph{border-radius:42% 58% 63% 37%/41% 44% 56% 59%}
}