/*
Theme Name: Villaggio del Gusto
Description: Tema per il festival enogastronomico di Albano Laziale (Festival del Gusto). Home one-page a tutto schermo con foto, programma, prodotti e mappa; colori, nome e orari modificabili da Personalizza.
Version: 2.0.0
Author: I.T.S.D. srl
Text Domain: villaggio
Requires at least: 6.0
Requires PHP: 7.4
*/
:root{--accent:#F2C300;--ink-accent:#7A5C00;--night:#16110E;--night2:#221A15;--cream:#F6EFE2;--paper:#FBF7EF;--ink:#241C18;--muted:#5E514A;--green:#008C45;--red:#CD212A}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.015em;margin:0}
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}
.kicker{font-size:13px;letter-spacing:.24em;font-weight:700;color:var(--ink-accent);text-transform:uppercase}
.dark .kicker,.hero .kicker{color:var(--accent)}
.sec{padding:110px 0;position:relative}
.sec h2{font-size:clamp(44px,6vw,84px);line-height:.98;margin:14px 0 18px}
.sec .lead{font-size:18px;line-height:1.65;color:var(--muted);max-width:660px;margin:0 0 48px}
.dark{background:var(--night);color:#fff}.dark .lead{color:#D8CCB8}
.photo-bg{background-size:cover;background-position:center;background-color:var(--night)}
.btn{display:inline-block;padding:16px 32px;border-radius:999px;font-weight:700;font-size:15px;letter-spacing:.04em;text-transform:uppercase;transition:transform .2s,filter .2s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn-fill{background:var(--accent);color:#16110E}
.btn-line{border:2px solid #fff;color:#fff}
/* header */
.site-header{position:absolute;top:0;left:0;right:0;z-index:10;color:#fff}
body:not(.home) .site-header{position:relative;background:var(--night)}
.site-header .wrap{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding-top:22px;padding-bottom:22px}
.logo{font-family:'Anton',sans-serif;font-size:22px;letter-spacing:.08em;text-transform:uppercase}
.site-header ul{list-style:none;display:flex;flex-wrap:wrap;gap:26px;margin:0;padding:0;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.site-header a:hover{color:var(--accent)}
/* hero */
.hero{position:relative;min-height:100vh;min-height:max(100vh,720px);display:flex;align-items:flex-end;color:#fff;padding:140px 0 70px;
  background:linear-gradient(180deg,rgba(22,17,14,.55) 0,rgba(22,17,14,.35) 35%,rgba(22,17,14,.96) 100%),url('assets/bottiglie.jpg') center/cover,var(--night)}
.hero::before{content:'';position:absolute;left:0;top:0;bottom:0;width:8px;background:linear-gradient(180deg,var(--green) 0 33.3%,#F4F5F0 33.3% 66.6%,var(--red) 66.6%)}
.hero .wrap{width:100%}
.hero h1{font-size:clamp(76px,14vw,196px);line-height:.86;margin:18px 0 10px;color:var(--accent);text-shadow:0 6px 40px rgba(0,0,0,.45)}
.hero h1 em{display:block;font-style:normal;color:#fff}
.hero h1 .g{font-family:'Great Vibes',cursive;text-transform:none;color:var(--accent);font-size:1.18em;line-height:0;margin:0 -.02em 0 .02em}
.hero .sub{font-size:20px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:#fff;margin-bottom:34px}
.hero-row{display:flex;flex-wrap:wrap;gap:28px 56px;align-items:flex-end;justify-content:space-between}
.when{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(40px,6vw,80px);line-height:1}
.when small{display:block;font-family:'DM Sans',sans-serif;font-size:15px;letter-spacing:.2em;font-weight:700;color:var(--accent);margin-top:14px}
.hero .btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.countdown{background:rgba(22,17,14,.7);border:1px solid rgba(242,195,0,.5);border-radius:18px;padding:22px 28px;backdrop-filter:blur(6px);min-width:260px}
.countdown b{display:block;font-family:'Anton',sans-serif;font-size:54px;line-height:1;color:var(--accent);text-transform:uppercase;font-weight:400}
.countdown span{font-size:14px;color:#E8DCC4}
/* strip */
.strip{background:var(--accent);color:#16110E;padding:34px 0}
.strip .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.strip b{display:block;font-family:'Anton',sans-serif;font-weight:400;font-size:28px;text-transform:uppercase;letter-spacing:.02em}
.strip span{font-size:14px;color:#3A2E00}
/* quote band */
.band{padding:150px 0;text-align:center;color:#fff;background:linear-gradient(rgba(22,17,14,.72),rgba(22,17,14,.82)),url('assets/uva.jpg') center/cover fixed,var(--night)}
.band p{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(38px,6.4vw,96px);line-height:1.02;max-width:1000px;margin:0 auto}
.band p em{font-style:normal;color:var(--accent)}
.band .by{margin-top:26px;font-size:13px;letter-spacing:.3em;font-weight:700;color:var(--accent)}
/* come funziona */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:36px}
.step .num{font-family:'Anton',sans-serif;font-size:140px;line-height:.9;color:transparent;-webkit-text-stroke:2px var(--accent);opacity:.9}
.step h3{font-size:30px;margin:6px 0 10px}.step p{margin:0;font-size:16px;line-height:1.65;color:var(--muted)}
/* isole */
.isole{background:linear-gradient(rgba(22,17,14,.88),rgba(22,17,14,.92)),url('assets/formaggi.jpg') center/cover,var(--night)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px}
.isola{position:relative;overflow:hidden;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-top:5px solid var(--accent);border-radius:16px;padding:34px 28px 30px;backdrop-filter:blur(4px);transition:transform .25s,background .25s}
.isola:hover{transform:translateY(-6px);background:rgba(255,255,255,.1)}
.isola .n{position:absolute;right:14px;top:-6px;font-family:'Anton',sans-serif;font-size:96px;color:rgba(242,195,0,.18);line-height:1}
.isola h3{font-size:34px;position:relative}.isola p{margin:10px 0 0;font-size:15px;line-height:1.65;color:#D8CCB8;position:relative}
.pills{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.pills span{padding:12px 24px;border-radius:999px;border:2px solid var(--accent);color:var(--accent);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:14px}
/* prodotti */
.prodotti{background:var(--cream)}
.grid.sm{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.prod{background:#fff;border-radius:14px;padding:26px 24px;border-bottom:5px solid var(--accent);box-shadow:0 8px 24px rgba(36,28,24,.07);transition:transform .25s}
.prod:hover{transform:translateY(-5px)}
.prod h3{font-size:25px;line-height:1.1}.prod small{display:block;font-size:12px;letter-spacing:.18em;color:var(--ink-accent);font-weight:700;margin-top:10px;text-transform:uppercase}
.who{margin-top:44px;padding:34px 38px;background:var(--night);border-radius:18px;color:#fff;display:flex;flex-wrap:wrap;gap:14px 36px;align-items:center;border-left:10px solid var(--accent)}
.who h3{font-size:30px;color:var(--accent)}.who p{margin:0;flex:1 1 400px;font-size:16px;line-height:1.65;color:#E8DCC4}
/* programma */
.prog{background:linear-gradient(90deg,rgba(22,17,14,.96) 45%,rgba(22,17,14,.7)),url('assets/calice.jpg') right center/cover,var(--night);color:#fff}
.prog .wrap{max-width:1000px}.prog .lead{color:#D8CCB8}
.row{display:flex;flex-wrap:wrap;gap:6px 36px;align-items:baseline;padding:26px 0;border-top:1px solid rgba(255,255,255,.18)}
.row .t{flex:none;width:150px;font-family:'Anton',sans-serif;font-size:60px;line-height:1;color:var(--accent)}
.row div{flex:1 1 340px}.row h3{font-size:30px}.row p{margin:6px 0 0;font-size:16px;line-height:1.6;color:#CFC2AE}
.note{border-top:1px solid rgba(255,255,255,.18);padding-top:20px;font-size:13px;color:#B9AC98;line-height:1.6}
/* dove */
.dove .flex2{display:flex;flex-wrap:wrap;gap:56px;align-items:stretch}
.dove .flex2>div{flex:1 1 420px;min-width:0}
.facts{font-size:18px;line-height:2}
.info{background:var(--accent);color:#16110E;border-radius:20px;padding:40px}
.info h3{font-size:34px;margin-bottom:14px}.info div{padding:14px 0;border-top:1px solid rgba(22,17,14,.25);font-size:16px;line-height:1.55}
/* footer */
.site-footer{background:var(--night);color:#E8DCC4;padding:64px 0 40px;position:relative}
.site-footer::before{content:'';position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--green) 0 33.3%,#F4F5F0 33.3% 66.6%,var(--red) 66.6%)}
.site-footer .top{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between}
.site-footer .logo{font-size:34px;color:#fff}
.logos{display:flex;flex-wrap:wrap;gap:10px}
.logos{align-items:center;gap:16px}
.logos img{height:84px;width:auto;background:#fff;border-radius:10px;padding:8px 12px}
.logos img.wide{height:56px;padding:10px 16px}
.site-footer p{margin:28px 0 0;font-size:14px;line-height:1.8}
.copy{margin-top:24px;padding-top:18px;border-top:1px solid #4A3E58;font-size:12px;color:#8F8298}
/* pagine interne */
.page-body{padding:72px 0;max-width:820px}
.page-body h1{font-size:56px;margin-bottom:24px}.page-body .entry{font-size:17px;line-height:1.7}
/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .7s}.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.band{background-attachment:scroll}}
@media(max-width:760px){.wrap{padding:0 20px}.strip .wrap{grid-template-columns:repeat(2,1fr)}.sec{padding:80px 0}.band{background-attachment:scroll;padding:100px 0}.row .t{width:100%;font-size:48px}.site-header ul{gap:14px;font-size:12px}}