/*
Theme Name: Hostaria Vita
Theme URI: https://hostariavita.it/
Author: Videeco Design
Author URI: https://videe.co/
Description: Tema one-page per Hostaria Vita, Stresa. Realizzato sulla bozza Canva di Luana Sassi. Font Devasia, Buffalo e Open Sauce One; palette oliva/rosso/crema.
Version: 1.0.2
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
License: Proprietario — uso riservato al cliente
Text Domain: hostaria-vita
*/

/* ---------- Font (estratti dalla bozza Canva) ---------- */
@font-face{font-family:'Devasia';src:url('assets/fonts/Devasia-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Buffalo';src:url('assets/fonts/Buffalo-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Open Sauce One';src:url('assets/fonts/OpenSauceOne-Light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Open Sauce One';src:url('assets/fonts/OpenSauceOne-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Open Sauce One';src:url('assets/fonts/OpenSauceOne-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

/* ---------- Token ---------- */
:root{
  --oliva:#49532C;
  --rosso:#BF2020;
  --crema:#F6F4E6;
  --crema-testo:#FFF2E9;
  --scuro:#1C1C18;
  --display:'Devasia',Georgia,serif;
  --script:'Buffalo','Brush Script MT',cursive;
  --sans:'Open Sauce One',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --gutter:clamp(20px,5vw,80px);
  --stripe:clamp(14px,1.6vw,24px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--crema);color:var(--scuro);
  font-family:var(--sans);font-weight:300;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}

/* ---------- Elementi ricorrenti ---------- */
.display{font-family:var(--display);font-weight:400;line-height:.9;letter-spacing:.01em}
.kicker{
  font-family:var(--sans);font-weight:700;text-transform:uppercase;
  letter-spacing:.15em;line-height:1.3;
  font-size:clamp(1.05rem,2.1vw,1.9rem);
}
.btn{
  display:inline-block;padding:.85em 3.2em;border:1px solid currentColor;border-radius:999px;
  font-size:clamp(.82rem,1.1vw,1rem);letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:inherit;background:transparent;font-weight:400;
  transition:background .25s ease,color .25s ease;
}
.btn:hover,.btn:focus-visible{background:currentColor}
.btn--chiaro:hover span,.btn--chiaro:focus-visible span{color:var(--oliva)}
.btn--rosso:hover span,.btn--rosso:focus-visible span{color:var(--rosso)}
.btn--scuro:hover span,.btn--scuro:focus-visible span{color:var(--crema)}

/* Fasce a righe verticali */
.righe{height:clamp(46px,6vw,86px);width:100%}
.righe--oliva{background:repeating-linear-gradient(90deg,var(--oliva) 0 var(--stripe),var(--crema) var(--stripe) calc(var(--stripe)*2))}
.righe--rosse{background:repeating-linear-gradient(90deg,var(--rosso) 0 var(--stripe),var(--crema) var(--stripe) calc(var(--stripe)*2))}

/* ---------- 1. Hero ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;
  padding:clamp(70px,12vh,140px) var(--gutter) clamp(90px,14vh,160px);
  color:#fff;overflow:hidden;
}
.hero__sfondo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.hero::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,.12) 35%,rgba(0,0,0,.45) 100%);
}
.hero__logo{
  width:clamp(120px,14vw,210px);margin:0 auto clamp(28px,6vh,70px);
  filter:drop-shadow(0 2px 12px rgba(0,0,0,.35));
}
.hero__titolo{
  font-family:var(--display);font-weight:400;margin:0;
  font-size:clamp(3.6rem,15vw,13rem);line-height:.88;letter-spacing:.01em;
  text-shadow:0 3px 30px rgba(0,0,0,.35);
}
.hero__claim{
  font-family:var(--script);margin:.15em 0 0;
  font-size:clamp(1.7rem,6.2vw,4.6rem);line-height:1.1;letter-spacing:.06em;
  text-shadow:0 2px 20px rgba(0,0,0,.35);
}
.hero__tratto{width:clamp(160px,34vw,470px);margin:.1em auto 0;opacity:.95}
.hero .righe{position:absolute;left:0;right:0;bottom:0}

/* ---------- 2. Il menu (oliva) ---------- */
/* Le righe stanno sul contenitore a tutta larghezza: stessa origine (x=0) e stesso
   ordine dei colori delle altre fasce, così il ritmo non si spezza fra una sezione
   e l'altra. Il blocco di testo copre la sua metà con il colore pieno. */
.menu{
  background:repeating-linear-gradient(90deg,var(--oliva) 0 var(--stripe),var(--crema) var(--stripe) calc(var(--stripe)*2));
  color:var(--crema-testo);
  display:grid;grid-template-columns:1fr 1fr;align-items:center;
}
.menu__testo{background:var(--oliva);align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding:clamp(56px,9vw,130px) clamp(30px,5vw,70px) clamp(56px,9vw,130px) var(--gutter)}
.menu__titolo{margin:0 0 1.4em;color:#fff}
.menu__intro{margin:0 0 2.6em;font-size:clamp(1rem,1.35vw,1.35rem);max-width:34ch}
.menu__media{
  align-self:stretch;display:flex;align-items:center;justify-content:center;
  padding:clamp(34px,5vw,74px) clamp(20px,3vw,60px);
}
.menu__media img{width:100%;height:100%;max-height:min(60vh,520px);object-fit:cover}

/* ---------- 3. Fascia estate ---------- */
.estate{position:relative;min-height:min(64vh,560px);display:grid;place-items:center;text-align:center;color:#fff;padding:clamp(60px,10vw,120px) var(--gutter);overflow:hidden}
.estate__sfondo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.estate::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.30);z-index:-1}
.estate__titolo{margin:0 0 1.6em;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.4)}

/* ---------- 4. Orari (rosso) ---------- */
.orari{
  background:repeating-linear-gradient(90deg,var(--rosso) 0 var(--stripe),var(--crema) var(--stripe) calc(var(--stripe)*2));
  color:var(--crema-testo);display:grid;grid-template-columns:1fr 1fr;align-items:center;
}
.orari__media{
  align-self:stretch;display:flex;align-items:center;justify-content:center;
  padding:clamp(40px,6vw,90px) clamp(20px,4vw,70px);
}
.orari__media img{width:100%;max-width:420px;aspect-ratio:2/3;object-fit:cover}
.orari__testo{background:var(--rosso);align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding:clamp(50px,8vw,120px) var(--gutter) clamp(50px,8vw,120px) clamp(20px,3vw,50px)}
.orari__titolo{margin:0 0 .5em;font-size:clamp(4.4rem,11vw,11rem);color:#fff}
.orari__claim{margin:0 0 .7em;color:#fff}
.orari p{margin:.35em 0;font-size:clamp(1rem,1.35vw,1.35rem)}

/* ---------- 5. Instagram ---------- */
.social{background:var(--crema);padding:clamp(56px,9vw,120px) var(--gutter);text-align:center}
.social__griglia{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.6vw,26px);
  margin:0 auto clamp(38px,6vw,64px);max-width:1180px;
}
.social__griglia img{width:100%;aspect-ratio:3/4;object-fit:cover}
.social .btn{color:var(--scuro)}

/* ---------- 6. Footer ---------- */
.piede{
  position:relative;color:#fff;display:grid;grid-template-columns:1fr 1fr;
  align-items:center;gap:clamp(24px,4vw,60px);
  padding:clamp(70px,11vw,150px) var(--gutter);overflow:hidden;
}
.piede__sfondo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.piede::after{content:'';position:absolute;inset:0;background:rgba(10,12,8,.52);z-index:-1}
.piede__marchio{font-size:clamp(2.8rem,7.5vw,6.4rem);margin:0}
.piede__dati{font-size:clamp(.95rem,1.2vw,1.15rem);letter-spacing:.04em}
.piede__dati p{margin:0 0 1.5em}
.piede__dati a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.piede__dati a:hover{border-bottom-color:#fff}
.piede__indirizzo{text-transform:uppercase;line-height:1.5}

/* ---------- Barra admin ---------- */
body.admin-bar .hero{min-height:calc(100svh - 32px)}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .menu,.orari,.piede{grid-template-columns:1fr}
  .menu__testo{padding:clamp(50px,10vw,80px) var(--gutter) clamp(34px,6vw,50px)}
  .menu__media{padding:clamp(28px,7vw,50px) var(--gutter)}
  .menu__media img{max-height:52vh}
  .orari{display:flex;flex-direction:column-reverse}
  .orari__testo{padding:clamp(50px,10vw,80px) var(--gutter) clamp(34px,6vw,54px);width:100%}
  .orari__media{width:100%;padding:clamp(30px,7vw,54px) var(--gutter)}
  .social__griglia{grid-template-columns:repeat(2,1fr)}
  .piede{text-align:center;justify-items:center;gap:34px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}