/* style.css - template per Netlify */
/* Colori coordinati: beige di sfondo + colore brand (usato per testo e pallini del menu) */
:root{
--brand-beige: #f7f3ef;       /* fallback beige */
--brand-color: #5a4d41;       /* colore testo / pallini (adattabile) */
--max-content-width: 1200px;
}

/* Corpo: sfondo identico al logo (SVG remoto) con fallback colore beige */
html,body{
height:100%;
margin:0;
font-family: "Playfair Display", Georgia, serif;
background-color: var(--brand-beige);
background-image: url("[https://ik.imagekit.io/omiehsyhm/Logo%20Elegant%202.svg?updatedAt=1759908577259](https://ik.imagekit.io/omiehsyhm/Logo%20Elegant%202.svg?updatedAt=1759908577259)");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
color: var(--brand-color);
}

/* Header centrale */
.site-header{
width:100%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
padding:-30px 20px;
box-sizing:border-box;
}

/* Wrapper logo per controllo dimensione */
.logo-wrap{
width:100%;
max-width: var(--max-content-width);
display:flex;
justify-content:center;
align-items:center;
}

/* Logo molto grande e centrato; mantiene proporzioni */
.logo{
display:block;
width: min(920px, 96%); /* aumenta o diminuisci qui per variare grandezza */
height: auto;
max-height: 720px;
object-fit:contain;
margin: 6px 0 28px 0;
}

/* Menu: centrato e più largo */
.main-nav {
  width:100%;
  display:flex;
  justify-content:center;
  margin-top: -50px; /* sposta leggermente in su */
}

/* Lista menu - layout orizzontale, spaziatura generosa */
.menu{
list-style:none;
margin:0;
padding:0;
display:flex;
gap: 56px;                 /* distanza tra i link (più largo) */
align-items:center;
justify-content:center;
flex-wrap:wrap;
font-size: 22px;
font-weight: 600;
}

/* Link styling */
.menu a{
text-decoration:none;
color: var(--brand-color);
padding: 6px 12px;
letter-spacing: 0.2px;
transition: opacity .18s ease, transform .12s ease;
}

/* Pallino-divisore tra i link, dello stesso colore del logo */
.menu li{
position:relative;
padding: 0 6px;
}

/* Inserisce il pallino dopo ogni elemento tranne l'ultimo */
.menu li:not(:last-child)::after{
content: "•";
color: var(--brand-color);
font-size: 26px;
position: absolute;
right: -34px; /* posizionamento rispetto al gap: regola se cambi gap */
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}

/* Slogan in basso, coerente con brand */
.slogan{
margin-top: 28px;
font-family: "Great Vibes", "Playfair Display", serif;
font-size: 22px;
color: var(--brand-color);
opacity: 0.95;
}

/* Responsive: riduci gap e dimensioni su schermi piccoli */
@media (max-width: 900px){
.menu{
gap: 28px;
font-size: 18px;
}
.menu li:not(:last-child)::after{
right: -22px;
font-size:20px;
}
.logo{
width: min(680px, 92%);
max-height: 520px;
}

/* Pulsante coordinato per tutte le pagine */
.cta {
  display: inline-block;
  margin-top: 30px;
  padding: 12px 25px;
  background-color: #e4b5d3; /* Rosa/lilla coordinato homepage */
  color: #f7f3ef;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.1rem;
  text-decoration: none;
  border-radius: 25px;
  transition: all 0.3s ease;
}

.cta:hover {
  background-color: #b88ca4; /* Tono più scuro per hover */
}


@media (max-width: 480px){
.menu{
gap: 18px;
font-size: 16px;
}
.menu li:not(:last-child)::after{
right: -18px;
font-size:18px;
}
.logo{
width: min(420px, 92%);
max-height: 320px;
margin-bottom:18px;
}
.slogan{
font-size:18px;
}

/* Stili footer */
.site-footer {
  text-align: center;
  padding: 35px 20px;
  background-color: #f7f3ef;
  border-top: 1px solid #e5ddd4;
  font-family: 'Playfair Display', serif;
  color: #6b715c;
}

.footer-text {
  margin-bottom: 15px;
  font-size: 0.95rem;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.social-icons a {
  background-color: #e8dfd7;
  border-radius: 50%;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.social-icons img {
  width: 20px;
  height: 20px;
  filter: invert(35%) sepia(12%) saturate(300%) hue-rotate(60deg) brightness(85%);
  transition: all 0.3s ease;
}

.social-icons a:hover {
  background-color: #c8a2c8;
}

.social-icons a:hover img {
  filter: invert(98%) sepia(2%) saturate(50%) hue-rotate(30deg) brightness(120%);
}