/*
Theme Name: Masseria Landing
Theme URI: https://example.com
Author: La tua agenzia
Author URI: https://example.com
Description: Mini tema WordPress per la landing page "Una giornata tra i vigneti" di Masseria Sant'Elia. One-page, form di prenotazione gestito via PHP/AJAX, contenuti e colori centralizzati in inc/theme-config.php.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: masseria-landing
*/

:root{
  --color-primary:#2B2A21;    /* legno/ombra d'ulivo, quasi nero caldo */
  --color-secondary:#F6F1E6; /* pietra e grano */
  --color-accent:#6B1F2B;    /* vino */
  --color-accent-2:#A6874F;  /* ottone/oro invecchiato */
  --color-ink:#2B2A21;
  --color-white:#FFFDF8;
  --radius:2px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body,'Jost',sans-serif); font-weight:300; color:var(--color-ink); background:var(--color-white); line-height:1.65; -webkit-font-smoothing:antialiased;}
img{max-width:100%; display:block;}
a{color:inherit;}
.container{max-width:1080px; margin:0 auto; padding:0 28px;}
h1,h2,h3{font-family:var(--font-display,'Cormorant Garamond',serif); font-weight:500; line-height:1.12; letter-spacing:.005em;}
.eyebrow{font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; font-weight:500; color:var(--color-accent);}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 34px; border-radius:var(--radius); font-family:var(--font-body,'Jost',sans-serif); font-weight:500; font-size:13px; letter-spacing:.12em; text-transform:uppercase; border:1.5px solid var(--color-accent); cursor:pointer; text-decoration:none; transition:background .25s ease, color .25s ease;}
.btn-primary{background:var(--color-accent); color:var(--color-white);}
.btn-primary:hover{background:transparent; color:var(--color-accent);}
.btn-outline{background:transparent; border-color:rgba(255,255,255,.55); color:var(--color-white);}
.btn-outline:hover{background:rgba(255,255,255,.1);}
.btn:focus-visible{outline:2px solid var(--color-accent-2); outline-offset:3px;}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} }

/* ornamento a divisore, motivo ricorrente della pagina */
.ornament{display:flex; align-items:center; justify-content:center; gap:14px; margin:0 auto; width:100%; max-width:220px;}
.ornament::before, .ornament::after{content:""; flex:1; height:1px; background:rgba(43,42,33,.25);}
.ornament span{width:6px; height:6px; background:var(--color-accent-2); transform:rotate(45deg);}
.ornament.on-dark::before, .ornament.on-dark::after{background:rgba(255,255,255,.3);}

header.site-header{position:sticky; top:0; z-index:40; background:var(--color-white); border-bottom:1px solid rgba(43,42,33,.1);}
.nav{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:20px 28px; max-width:1080px; margin:0 auto;}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display,'Cormorant Garamond',serif); font-size:22px; letter-spacing:.03em;}
.brand img{max-height: 100px; width:auto;}
.nav a.btn{padding:11px 22px; font-size:11.5px;}

/* ---------- HERO ---------- */
.hero{position:relative; height:78vh; min-height:520px; color:var(--color-white); overflow:hidden;}
.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(43,42,33,.15) 0%, rgba(20,19,14,.65) 100%);}
.hero-inner{position:relative; z-index:1; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px;}
.hero-inner .eyebrow{color:var(--color-accent-2);}
.hero-inner h1{font-size:clamp(34px,6vw,64px); margin:16px 0 20px; font-style:italic; font-weight:500; max-width:16ch;}
.hero-inner p{font-size:16px; opacity:.88; max-width:46ch; margin-bottom:30px; font-weight:300;}

section{padding:96px 0;}
.section-head{max-width:620px; margin:0 auto 20px; text-align:center;}
.section-head h2{font-size:clamp(26px,3.4vw,40px); margin:14px 0;}

/* ---------- INTRO EDITORIALE ---------- */
.intro{max-width:680px; margin:0 auto; text-align:center;}
.intro p{font-size:17.5px; line-height:1.8; color:rgba(43,42,33,.85);}
.intro p::first-letter{font-family:var(--font-display,'Cormorant Garamond',serif); font-size:3.4em; float:left; line-height:.8; padding:.06em .08em 0 0; color:var(--color-accent);}

/* ---------- FLUSSO DELLA GIORNATA (stile menu, non numerato) ---------- */
.flow{max-width:640px; margin:0 auto;}
.flow-item{display:grid; grid-template-columns:110px 1fr; gap:24px; padding:26px 0; border-bottom:1px solid rgba(43,42,33,.12);}
.flow-item:first-child{border-top:1px solid rgba(43,42,33,.12);}
.flow-item .time{font-family:var(--font-display,'Cormorant Garamond',serif); font-size:20px; letter-spacing:.03em;}
.flow-item h3{font-size:19px; font-weight:500; margin-bottom:6px;}
.flow-item p{font-size:14.5px; color:rgba(43,42,33,.7); font-style:italic;}
@media (max-width:560px){.flow-item{grid-template-columns:1fr; gap:6px;}}

/* ---------- CARTA DEI VINI E DEI TAGLIERI ---------- */
.menu-wrap{background:var(--color-secondary);}
.menu-cols{display:grid; grid-template-columns:1fr 1fr; gap:60px; max-width:900px; margin:0 auto;}
.menu-col h3{font-size:15px; text-transform:uppercase; letter-spacing:.16em; font-weight:500; color:var(--color-accent); margin-bottom:22px; font-family:var(--font-body,'Jost',sans-serif);}
.menu-row{display:flex; justify-content:space-between; gap:16px; padding:16px 0; border-bottom:1px dotted rgba(43,42,33,.3);}
.menu-row .name{font-family:var(--font-display,'Cormorant Garamond',serif); font-size:19px;}
.menu-row .note{font-size:13px; color:rgba(43,42,33,.6); font-style:italic; margin-top:3px;}
@media (max-width:700px){.menu-cols{grid-template-columns:1fr; gap:36px;}}

/* ---------- GALLERY asimmetrica, poche immagini grandi ---------- */
.gallery{display:grid; grid-template-columns:1.4fr 1fr; gap:18px;}
.gallery .g-main{grid-row:span 2; aspect-ratio:4/5;}
.gallery .g-side{aspect-ratio:16/10;}
.gallery img{width:100%; height:100%; object-fit:cover;}
@media (max-width:700px){.gallery{grid-template-columns:1fr;} .gallery .g-main{grid-row:auto; aspect-ratio:4/3;}}

/* ---------- CITAZIONE ---------- */
.quote{max-width:660px; margin:0 auto; text-align:center;}
.quote blockquote{font-family:var(--font-display,'Cormorant Garamond',serif); font-style:italic; font-size:clamp(20px,2.6vw,28px); line-height:1.5; margin:26px 0 16px;}
.quote cite{font-style:normal; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:rgba(43,42,33,.55);}

/* ---------- FORM come un invito ---------- */
.form-section{background:var(--color-primary); color:var(--color-white);}
.form-card{max-width:600px; margin:0 auto; border:1px solid rgba(255,255,255,.25); padding:48px 40px;}
.field{margin-bottom:20px;}
.field label{display:block; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:8px; opacity:.8;}
.field input, .field select, .field textarea{width:100%; padding:12px 4px; border:none; border-bottom:1px solid rgba(255,255,255,.35); background:transparent; color:var(--color-white); font-family:inherit; font-size:15px;}
.field select option{color:var(--color-ink);}
.field input::placeholder, .field textarea::placeholder{color:rgba(255,255,255,.4);}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--color-accent-2);}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.consent{display:flex; gap:10px; font-size:12px; align-items:flex-start; opacity:.75; margin:24px 0 28px;}
.consent input{width:auto; margin-top:3px;}
.form-msg{margin-top:16px; font-size:13.5px; letter-spacing:.03em; display:none;}
.form-msg.show{display:block;}
.form-msg.ok{color:var(--color-accent-2);}
.form-msg.err{color:#D98C7A;}
@media (max-width:560px){.field-row{grid-template-columns:1fr;}}

footer.site-footer{background:var(--color-primary); color:var(--color-white); opacity:.7; padding:34px 0; font-size:12.5px; border-top:1px solid rgba(255,255,255,.12);}
.footer-row{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; letter-spacing:.02em;}

.reveal{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}