/*
Theme Name: Siris
Theme URI: https://siris-mua.it
Author: Siria Bianchi
Author URI: https://siris-mua.it
Description: Tema WordPress su misura per Siris - Trucco e make-up sposa Toscana. Palette, font e struttura fedeli al sito originale.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: siris
*/

:root{
  --cream:#FDF5F0;
  --sage:#AFBFAE;
  --sage-deep:#93A692;
  --sage-pale:#E9EEE6;
  --lilac:#EDCBF6;
  --lilac-deep:#DEB3EC;
  --ink:rgba(34,34,34,.56);
  --ink-solid:#222222;

  --font-serif:'Fraunces', serif;
  --font-script:'WindSong', cursive;
  --font-sans:'Inter', sans-serif;

  --container:1200px;
  --container-narrow:760px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-sans);
  font-weight:300;
  font-size:18px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
p{ margin:0 0 1.4em; }
p:last-child{ margin-bottom:0; }

h1,h2,h3{
  font-family:var(--font-serif);
  font-weight:300;
  color:var(--sage);
  margin:0 0 .5em;
  line-height:1.15;
  letter-spacing:-.5px;
}
h1.brand{
  font-size:clamp(2.6rem,5vw,3.7rem);
  text-transform:uppercase;
  letter-spacing:-1.5px;
  margin-bottom:.25em;
}
.hero__subtitle{
  font-size:clamp(1.4rem,2.6vw,2.05rem);
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:.9em;
}
section h2{ font-size:clamp(1.9rem,3.6vw,2.95rem); }
.metodo__item h3{ font-size:clamp(1.5rem,2.6vw,2.15rem); }

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 6vw;
}
.container--narrow{ max-width:var(--container-narrow); }
.center{ text-align:center; }
.center .checklist{ display:inline-flex; flex-direction:column; align-items:flex-start; text-align:left; }

/* ---------- Eyebrow (accenti script / label) ---------- */
.eyebrow{
  margin:0 0 1.1em;
  text-transform:lowercase;
  letter-spacing:4px;
}
.eyebrow--script{
  font-family:var(--font-script);
  font-size:clamp(1.5rem,2.6vw,2.1rem);
  font-weight:400;
}
.eyebrow--lilac{ color:var(--lilac-deep); }
.eyebrow--ink{ color:var(--ink); }
.label{
  font-family:var(--font-sans);
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:4px;
  color:var(--ink);
}

/* ---------- Bottoni ---------- */
.btn{
  display:inline-block;
  background:var(--sage);
  color:var(--ink-solid);
  opacity:.85;
  font-family:var(--font-sans);
  font-size:.8rem;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:3px;
  text-decoration:none;
  padding:1.05em 2.1em;
  border:0;
  border-radius:0;
  cursor:pointer;
  transition:background .25s ease, transform .25s ease;
}
.btn:hover{ background:var(--sage-deep); transform:translateY(-1px); }

/* ---------- Checklist ---------- */
.checklist{
  list-style:none;
  margin:1.4em 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.7em;
}
.checklist--center{ align-items:center; }
.checklist li{
  position:relative;
  padding-left:1.9em;
  color:var(--ink);
}
.checklist li::before{
  content:"";
  position:absolute;
  left:0; top:.15em;
  width:1.15em; height:1.15em;
  border-radius:50%;
  background:var(--sage);
}
.checklist li::after{
  content:"";
  position:absolute;
  left:.32em; top:.5em;
  width:.5em; height:.28em;
  border-left:2px solid var(--ink-solid);
  border-bottom:2px solid var(--ink-solid);
  transform:rotate(-45deg);
  opacity:.7;
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:92vh;
  background:var(--cream);
}
.hero__media{ overflow:hidden; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__content{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:8vw 6vw;
}
.hero__content p:not(.eyebrow){ max-width:32em; }
.hero__content .btn{ margin-top:.8em; align-self:flex-start; }

/* =========================================================
   BIO / PERCHÉ (sezioni centrate su crema)
   ========================================================= */
.bio, .perche{ padding:7rem 0; }
.bio .btn{ margin-top:1.6em; }

/* =========================================================
   METODO — griglia 2x2
   ========================================================= */
.metodo{ padding:2rem 0 7rem; }
.metodo__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem 5rem;
}

/* =========================================================
   COLLINE — sezione full-bleed salvia con foto
   ========================================================= */
.colline{
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--sage);
  min-height:80vh;
}
.colline__media{ overflow:hidden; order:2; }
.colline__media img{ width:100%; height:100%; object-fit:cover; }
.colline__content{
  order:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:6vw 7vw;
}
.on-sage{ color:var(--cream); }
.colline__content p:not(.eyebrow){ color:var(--ink); max-width:30em; }

/* =========================================================
   TESTIMONIAL
   ========================================================= */
.testimonial{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  align-items:stretch;
  padding:7rem 0;
  gap:0;
  background:var(--sage-pale);
}
.testimonial__media{ overflow:hidden; margin-left:6vw; }
.testimonial__media img{ width:100%; height:100%; object-fit:cover; border-radius:2px; }
.testimonial__content{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:4vw 6vw;
}
.testimonial blockquote{
  margin:0;
  font-family:var(--font-serif);
  font-weight:300;
  font-size:clamp(1.4rem,2.6vw,2.05rem);
  line-height:1.4;
  color:var(--ink);
  text-transform:uppercase;
  letter-spacing:.3px;
}
.testimonial cite{
  display:block;
  margin-top:.8em;
  font-style:normal;
  font-family:var(--font-serif);
  font-size:1rem;
  letter-spacing:2px;
  color:var(--sage-deep);
}

/* =========================================================
   PRICING
   ========================================================= */
.pricing{ padding:7rem 0; }
.pricing__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:4rem 3rem;
  text-align:center;
}
.price-card__name{
  font-family:var(--font-script);
  font-weight:400;
  text-transform:lowercase;
  font-size:2.1rem;
  color:var(--sage);
  margin-bottom:.2em;
}
.price-card__price{
  font-family:var(--font-serif);
  font-weight:300;
  font-size:1.7rem;
  color:var(--lilac-deep);
  margin-bottom:.7em;
}
.price-card .checklist{ align-items:flex-start; text-align:left; margin-top:1.6em; }

/* =========================================================
   MOMENTO — sezione full-bleed lilla con foto
   ========================================================= */
.momento{
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--lilac);
  min-height:75vh;
}
.momento__media{ overflow:hidden; }
.momento__media img{ width:100%; height:100%; object-fit:cover; }
.momento__content{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:6vw 7vw;
}
.on-lilac{ color:var(--ink); }
.momento__content p{ color:var(--ink); max-width:28em; }
.momento__content .btn{ margin-top:.8em; align-self:flex-start; }

/* =========================================================
   FORM
   ========================================================= */
.contatti{ padding:7rem 0 8rem; }
.contatti form{
  margin-top:2.2em;
  display:flex;
  flex-direction:column;
  gap:1.3em;
  text-align:left;
}
.contatti label{
  display:flex;
  flex-direction:column;
  gap:.5em;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:2.5px;
  color:var(--ink);
}
.contatti input,
.contatti textarea{
  font-family:var(--font-sans);
  font-size:1rem;
  color:var(--ink-solid);
  background:#fff;
  border:1px solid var(--sage);
  padding:.9em 1em;
  border-radius:0;
  resize:vertical;
}
.contatti input:focus,
.contatti textarea:focus{
  outline:2px solid var(--sage-deep);
  outline-offset:1px;
}
.contatti .btn{ align-self:center; margin-top:.6em; min-width:180px; }
.hp-field{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.form-msg{
  margin-top:1.5em;
  padding:1em 1.3em;
  font-size:.95rem;
  border-left:3px solid var(--sage);
  background:#fff;
}
.form-msg--error{ border-left-color:#c0745a; }

/* =========================================================
   FOOTER
   ========================================================= */
footer{
  padding:4rem 0 3rem;
  text-align:center;
}
.social{
  list-style:none;
  display:flex;
  justify-content:center;
  gap:1rem;
  margin:0 0 1.8em;
  padding:0;
}
.social a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:2.6rem;
  height:2.6rem;
  border-radius:50%;
  background:var(--sage);
  color:#000;
  text-decoration:none;
}
.social svg{ width:1.15rem; height:1.15rem; }
footer p{
  margin:0;
  font-size:.8rem;
  letter-spacing:.5px;
  color:var(--ink);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:900px){
  .hero,
  .colline,
  .momento,
  .testimonial{
    grid-template-columns:1fr;
    min-height:0;
  }
  .colline__media,
  .colline__content{ order:0; }
  .hero__media{ height:60vw; }
  .colline__media{ height:70vw; }
  .momento__media{ height:70vw; }
  .testimonial{ padding:0 0 4rem; }
  .testimonial__media{ margin:0; height:80vw; order:-1; }
  .testimonial__content{ padding:3rem 6vw 0; }
  .metodo__grid{ grid-template-columns:1fr; gap:3rem; }
  .pricing__grid{ grid-template-columns:1fr; gap:3.5rem; }
  .bio,.perche,.pricing,.metodo,.contatti{ padding:4.5rem 0; }
  body{ font-size:16.5px; }
}