/* style.css - Stile semplice e responsivo per Studio Peluso */

:root{
  --brand:#004080;
  --accent:#0066cc;
  --muted:#666;
  --bg:#fafafa;
  --card:#ffffff;
}

*{box-sizing:border-box}
html,body{height:100%}
body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  color: #222;
  background: var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container {
  max-width:1100px;
  margin: 0 auto;
  padding: 20px;
}

header.site-header{
  background: linear-gradient(180deg,var(--brand),var(--accent));
  color: #fff;
  padding: 28px 0;
}
header .container { display:flex; align-items:center; gap:20px; justify-content:space-between; flex-wrap:wrap; }
.logo { display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.logo img{height:56px; width:auto; border-radius:6px; background:#fff; padding:4px}
.site-title { font-size:1.35rem; margin:0; font-weight:700; letter-spacing:.2px }
.site-sub { font-size:0.95rem; margin:0; opacity:0.95 }

nav.main-nav{
  background: var(--accent);
  padding: 10px 0;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
nav.main-nav .container { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
nav.main-nav a {
  color: #fff;
  text-decoration:none;
  padding:8px 12px;
  border-radius:6px;
  font-weight:600;
}
nav.main-nav a:hover,
nav.main-nav a[aria-current="page"] { background: rgba(255,255,255,0.08); }

.hero {
  background: linear-gradient(180deg, rgba(0,70,140,0.03), rgba(0,70,140,0.00));
  padding: 36px 20px;
  margin-bottom: 18px;
}
.hero .container { display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
.hero .left { flex:1 1 480px; }
.hero h1 { margin:0 0 8px 0; font-size:1.9rem; color:var(--brand) }
.hero p.lead { margin:0; color:var(--muted) }

.grid {
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:18px;
  margin-top:20px;
}
.card {
  background: var(--card);
  border-radius:10px;
  padding:18px;
  box-shadow: 0 6px 18px rgba(20,30,60,0.04);
}
.card h3 { margin-top:0; color:var(--brand) }
.card p { margin:8px 0 0 0; color:var(--muted) }

main.container { padding-bottom: 40px; }

section.content { margin: 18px 0; background: transparent; }

.contact-card { display:flex; gap:18px; flex-wrap:wrap; align-items:flex-start; }
.contact-card .left { flex:1 1 360px; }
.contact-card .right { flex: 0 0 320px; }

footer.site-footer{
  background:#f2f4f7;
  padding:18px 0;
  margin-top: 30px;
  font-size:0.95rem;
  color:var(--muted);
}
.footer-inner { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center; }
footer.site-footer, 
footer.site-footer .small {
  color: #222222; /* stesso colore per tutti i testi del footer */
}

a.cta {
  background:var(--brand);
  color:#fff;
  text-decoration:none;
  padding:10px 14px;
  border-radius:8px;
  display:inline-block;
  font-weight:700;
}
.small { font-size:0.9rem; color:white }

/* form */
form.contact-form { display:flex; flex-direction:column; gap:10px; }
form label { font-size:0.9rem; color:var(--muted) }
form input[type="text"], form input[type="email"], form textarea {
  padding:10px;
  border-radius:6px;
  border:1px solid #ddd;
  font-size:0.95rem;
}
form button { padding:10px 14px; border-radius:8px; border:0; background:var(--accent); color:#fff; font-weight:700; cursor:pointer; }

/* responsive */
@media (max-width:900px){
  .grid{grid-template-columns: repeat(2,1fr)}
}
@media (max-width:640px){
  .grid{grid-template-columns: 1fr}
  header .container { flex-direction:column; align-items:flex-start }
  nav.main-nav .container { justify-content:space-around; }
}