/* =====================================================================
   Tenuta Serradesca: variabili del tema
   Tutto ciò che si ritocca sta qui. Le sezioni usano solo queste variabili.
   Valori misurati sul sito a 1512px (desktop), 1024px (tablet), 390px (mobile).
   ===================================================================== */

:root{
  color-scheme: dark;

  /* ---------- Colori ---------- */
  --ts-ink:#141413;          /* fondo scuro */
  --ts-sand:#ECD5C3;         /* beige */
  --ts-sand-light:#F3DFCE;   /* testo chiaro */
  --ts-olive:#D1CD84;        /* pulsanti, card */
  --ts-lavender:#A898C8;     /* voce attiva, link, chiusura modali */
  --ts-black:#000;
  --ts-product:#212529;      /* titoli prodotto */
  --ts-rail:rgba(236,213,195,.1);  /* linee verticali dello sfondo scuro (12vw e 88vw) */

  /* ---------- Font ---------- */
  --ts-display:"Coconat", "Cormorant Garamond", Georgia, serif;
  --ts-body:"DM Sans", "Helvetica Neue", Arial, sans-serif;

  /* ---------- Scala tipografica (vw, riferimento 1512px) ---------- */
  --fs-hero:6.1vw;        /* LOVE IS MAGIC */
  --fs-page:4.9vw;        /* titolo nel box carta degli hero (La Tenuta, Wedding, Shop) */
  --fs-h2:2.2vw;          /* titolo di sezione */
  --fs-h3:2.4vw;          /* titolo card e colonne */
  --fs-card:1.6vw;        /* titolo card oliva */
  --fs-modal:4.4vw;       /* titolo modale con galleria */
  --fs-modal-split:3vw;   /* titolo modale con foto */
  --fs-intro:2.4vw;       /* frasi introduttive Wedding */
  --fs-prod:2vw;          /* titolo prodotto */
  --fs-price:1.06vw;      /* prezzo prodotto */
  --fs-page-title:4.4vw;  /* titolo pagine divise, Acquaroli, Blog */
  --fs-post:1.7vw;        /* titoli nella griglia blog */
  --fs-post-title:3vw;    /* titolo articolo */
  --fs-label:1.1vw;       /* etichette form (upload CV) */
  --fs-sub:.9vw;          /* sottotitolo maiuscolo */
  --fs-text:.9vw;         /* paragrafo */
  --fs-btn:1vw;           /* pulsante */
  --fs-btn-sm:.9vw;       /* pulsante piccolo */
  --fs-menu:1.9vw;        /* voci del menù a tutto schermo */
  --fs-footnav:1.2vw;     /* voci del menù nel footer */
  --fs-legal:var(--fs-text); /* barra legale */

  /* ---------- Griglia ---------- */
  --col-side:35%;         /* colonne laterali delle sezioni a tre colonne */
  --col-mid:29.36%;       /* colonna centrale */
  --rail-l:12vw;          /* linea verticale sinistra dello sfondo */
  --rail-r:88vw;          /* linea verticale destra dello sfondo */
  --pad-page:11vw;        /* rientro sinistro dei testi su carta */
  --anim-dist:40px;       /* spostamento verticale dell'entrata in scena */

  /* ---------- Componenti ---------- */
  --box-left:8vw;         /* box carta negli hero */
  --box-width:32vw;
  --card-h:13.4vw;        /* altezza card oliva */
  --car-h:56vw;           /* altezza carosello Wedding */
  --car-per:3;            /* foto visibili nel carosello */
  --gal-row:25vw;         /* altezza riga galleria giustificata */
  --gal-gap:6px;          /* spazio tra le foto della galleria */
  --shop-width:70vw;      /* larghezza griglia prodotti */
  --title-gap:2.8vw;      /* spazio sotto i titoli di pagina */
  --blog-gap:10vw;        /* spazio sotto titolo e testo del blog */
  --posts-cols:3;         /* colonne della griglia blog */

  /* ---------- Scheda prodotto (rilevata dal sito attuale) ---------- */
  --fs-prod-single:3.2vw;   /* titolo nella scheda prodotto */
  --fs-prod-price-single:max(16px,1.32vw); /* prezzo nella scheda prodotto */
  --prod-left:17.66vw;      /* rientro della colonna di testo */
  --prod-text-w:30.1vw;     /* larghezza della colonna di testo */
  --prod-img-w:24.5vw;      /* larghezza della foto */
  --prod-gap:11.8vw;        /* spazio tra testo e foto */
  --field-h:50px;           /* altezza del campo quantità */

  /* ---------- Header ---------- */
  --header-h:93px;        /* altezza della fascia dell'header */
  --logo-w:9.85vw;        /* larghezza logo */
  --logo-left:1vw;        /* distanza del logo dal bordo sinistro */
  --logo-top:28px;        /* distanza del logo dall'alto */
  --menu-btn-w:4.37vw;    /* larghezza icona menù */
  --menu-btn-right:2vw;   /* distanza icona menù dal bordo destro */
  --menu-btn-top:17px;    /* distanza icona menù dall'alto */
  --plain-top:13vw;       /* pagine senza foto in cima: spazio scuro sotto logo e menù */

  /* ---------- Menù a tutto schermo ---------- */
  --menu-mono:17%;        /* larghezza del monogramma sullo sfondo */
  --menu-item-pad:23px 20px; /* spazio attorno alle voci */
  --menu-close-top:24px;  /* posizione della X */

  /* ---------- Pulsanti fissi (lingua, WhatsApp) ---------- */
  --float-size:38px;      /* diametro */
  --float-right:45px;     /* distanza dal bordo destro */
  --float-bottom:34px;    /* distanza dal fondo */
  --float-gap:22px;       /* spazio tra i due pulsanti */

  /* ---------- Footer ---------- */
  --award-w:6.9vw;        /* larghezza di ogni bollino premi */
  --social-w:1.7vw;       /* larghezza icone social */
  --social-gap:1.9vw;     /* spazio tra le icone social */
  --footnav-pad:13px 20px;/* spazio attorno alle voci del menù footer */
  --legal-logo:26.65vw;   /* logo Agriturismo nella barra legale */

  /* ---------- Tempi delle animazioni ---------- */
  --reveal-time:1.2s;     /* entrata in scena (fadeInUp, fadeIn) */
  --award-step:200ms;     /* ritardo tra un bollino e il successivo */
  --menu-fade:.5s;        /* dissolvenza del menù */
  --modal-in:.6s;         /* animazione apertura modali */
  --modal-out:.4s;        /* animazione chiusura modali */
  --slide-step:300ms;     /* cambio foto dello slideshow in home */
  --car-step:3000ms;      /* avanzamento automatico del carosello */
  --car-speed:.9s;        /* transizione del carosello */
  --intro-step:500ms;     /* intro Wedding: ritardo tra una riga e la successiva */
  --intro-fade:600ms;     /* intro Wedding: dissolvenza di ogni riga */
  --intro-hold:1000ms;    /* intro Wedding: pausa dopo l'ultima riga */
  --intro-out:800ms;      /* intro Wedding: dissolvenza in uscita */
}

/* =================== Tablet (≤1024px, rilievo Elementor) =================== */
@media (max-width:1024px){
  :root{
    --fs-hero:5.6vw;
    --fs-h2:max(19px,2.45vw);
    --fs-h3:max(19px,2.45vw);
    --fs-card:max(16px,2vw);
    --fs-sub:max(12px,1.27vw);
    --fs-text:max(13px,1.27vw);
    --fs-btn:max(14px,1.46vw);
    --fs-btn-sm:max(13px,1.3vw);
    --fs-menu:4vw;
    --fs-footnav:2.2vw;
    --fs-prod:2.4vw;
    --fs-price:max(13px,1.4vw);
    --fs-modal:5vw;
    --fs-modal-split:4vw;
    --fs-intro:3.4vw;
    --fs-page-title:5.6vw;
    --fs-post:max(19px,2.4vw);
    --fs-post-title:max(25px,3.4vw);
    --fs-label:max(13px,1.3vw);
    --box-width:44vw;
    --shop-width:84vw;
    --posts-cols:2;
    --blog-gap:6vw;

    --fs-prod-single:5vw;
    --prod-left:8vw;
    --prod-text-w:44vw;
    --prod-img-w:34vw;
    --prod-gap:6vw;

    --award-w:10vw;
    --social-w:3vw;
    --legal-logo:50vw;
  }
}

/* =================== Mobile (≤767px, rilievo Elementor) =================== */
@media (max-width:767px){
  :root{
    --fs-hero:16.4vw;
    --fs-page:13vw;
    --fs-h2:7.7vw;
    --fs-h3:7.7vw;
    --fs-card:6.2vw;
    --fs-sub:3.3vw;
    --fs-text:3.6vw;
    --fs-btn:3.3vw;
    --fs-btn-sm:3.3vw;
    --fs-menu:8vw;
    --fs-footnav:5vw;
    --fs-modal:10vw;
    --fs-modal-split:9vw;
    --fs-intro:6.4vw;
    --fs-prod:4.6vw;
    --fs-price:3.4vw;
    --fs-legal:2.8vw;
    --fs-page-title:13vw;
    --fs-post:5.6vw;
    --fs-post-title:9.7vw;
    --fs-label:3.6vw;
    --rail-l:0px;
    --rail-r:100vw;
    --car-per:1;
    --car-h:130vw;
    --gal-row:44vw;
    --gal-gap:4px;
    --shop-width:88vw;
    --posts-cols:1;
    --title-gap:3vw;
    --blog-gap:7vw;

    /* Header: logo al centro, icona menù centrata sotto */
    --logo-w:37vw;
    --logo-top:18px;
    --menu-btn-w:17vw;
    --menu-btn-top:calc(18px + 30vw);
    --plain-top:calc(36px + 40vw);

    --menu-mono:40%;

    --fs-prod-single:9vw;
    --prod-left:18%;
    --prod-text-w:100%;
    --prod-img-w:100%;
    --prod-gap:8vw;

    --float-size:10vw;
    --float-right:16px;
    --float-bottom:16px;
    --float-gap:12px;

    --award-w:25%;
    --social-w:7vw;
    --social-gap:8vw;
    --footnav-pad:10px 12px;
    --legal-logo:80vw;
  }
}