/* Reset basico */
*{box-sizing:border-box;margin:0;padding:0}
:root{--accent:#2445f5;--accent-light:#3b6efe;--accent-dark:#1d37c4}
body{font-family:Inter,Segoe UI,Arial,sans-serif;line-height:1.6;color:#222} 
.container{max-width:1100px;margin:0 auto;padding:1rem}
.site-header{background:var(--accent);color:#fff;padding:.75rem 0} 
/* align header items */
.site-header .container{display:flex;align-items:center;gap:1rem}
.logo{display:flex;align-items:center}
.logo a{color:#fff;text-decoration:none;font-weight:700}
.site-logo{height:48px;display:block;max-height:64px}
.main-nav{margin-left:auto}
.main-nav a{color:#fff;margin-left:1rem;text-decoration:none;display:inline-block;padding:.25rem 0}
@media (max-width:700px){
  .site-header .container{flex-direction:column;align-items:flex-start}
  .main-nav{margin-left:0}
  .site-logo{height:40px}
}
.hero{padding:2rem 0;text-align:center}
.hero h2{font-size:1.5rem;margin-bottom:.5rem}
.btn{background:var(--accent);color:#fff;padding:.5rem 1rem;border-radius:4px;text-decoration:none} 

/* Banner hero */
.hero-banner{background:linear-gradient(180deg, var(--accent) 0%, var(--accent-light) 100%);color:#fff;padding:4rem 0;border-top:4px solid #e74c3c;border-bottom:4px solid #e74c3c} 
.hero-banner .hero-inner{display:flex;flex-direction:column;align-items:center;gap:.75rem}
.hero-banner h2{font-size:1.8rem;font-weight:700}
.lead{opacity:.95;max-width:720px;margin:0 auto}

.section-sep{height:14px;background:transparent;border-top:3px solid #f2c2c2;margin:0}
.section-sep.light{border-top-color:#f0ecec}

.section-block{padding:2rem 0}
.section-block .container{max-width:1100px;margin:0 auto}

 /* Chi siamo page styles */
 /* .about .container rule removed to avoid empty ruleset */
 .page-logo{ display:block; margin:0 auto 0.5rem; height:96px; max-height:120px }
 .page-title{ text-align:center; font-size:2rem; margin:.25rem 0 0.5rem; font-weight:600; color:var(--accent-dark); }
 .page-sub{ text-align:center; color:var(--accent); margin-bottom:1rem; font-size:0.95rem }
 .section-subtitle{ text-align:center; font-size:1.05rem; color:#333; margin-top:1.5rem; margin-bottom:.75rem; font-weight:700; text-decoration:underline; }
 .about p{ text-align:justify; text-align-last:center; -webkit-hyphens:auto; -ms-hyphens:auto; hyphens:auto; margin-bottom:.75rem; color:#333; max-width:760px; margin-left:auto; margin-right:auto }
 .about ul{ display:block; text-align:left; margin-top:.5rem; padding-left:1.25rem; max-width:760px; margin-left:auto; margin-right:auto }
 .about ul li{ margin-bottom:.5rem; }

@media (max-width:600px){
  .about p{ -webkit-hyphens:none; -ms-hyphens:none; hyphens:none; text-align:justify; }
}
.teasers .grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.teasers .card{display:flex;flex-direction:column;justify-content:space-between;padding:1rem}
.teasers .card p{margin-bottom:.5rem}
/* extra space between description and button inside teaser cards */
.teasers .card .btn{display:inline-block;margin-top:.25rem}
@media (max-width:700px){
  .teasers .grid{grid-template-columns:1fr}
}

/* Footer bigger */
.site-footer{background:#f4f4f4;padding:1.25rem 0;margin-top:2rem;text-align:center}
.site-footer p{margin:0;color:#6b6b6b}
.services,.portfolio{padding:2rem 0}
.services h3,.portfolio h3{margin-bottom:1rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.card{border:1px solid #e6e6e6;padding:1rem;border-radius:6px;background:#fff}
.card img{width:100%;height:auto;border-radius:4px;margin-bottom:.5rem}
.site-footer{background:#f5f5f5;padding:1rem 0;margin-top:2rem;text-align:center}

/* Responsive small tweaks */
@media (max-width:600px){.main-nav{display:none}.hero h2{font-size:1.2rem}}

/* Contact form */
.contact{padding:2rem 0}
.contact-form{max-width:700px;margin:0 auto;display:grid;gap:.75rem}
.contact-form label{display:block;font-size:.95rem}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{width:100%;padding:.6rem;border:1px solid #ddd;border-radius:6px;font-size:1rem}
.contact-form textarea{min-height:140px;resize:vertical}
.errors{color:#9b1c1c;background:#ffecec;padding:.6rem;border-radius:6px;list-style:none}
.errors li{margin-bottom:.25rem}
.success{color:#086b35;background:#e6ffef;padding:.6rem;border-radius:6px}

/* Admin styles */
.admin-table{width:100%;border-collapse:collapse;margin-top:1rem}
.admin-table th,.admin-table td{border:1px solid #e6e6e6;padding:.5rem;text-align:left;vertical-align:top}
.admin-table thead{background:#f9fafb}
.admin a{color:var(--accent)} 
.admin-login{max-width:420px;margin:1rem auto}

/* Admin login card */
.admin-login{background:#fff;border:1px solid #eef2f6;border-radius:10px;padding:1.1rem;box-shadow:0 8px 18px rgba(15,23,42,0.06)}
.admin-login h3{margin-top:0;color:var(--accent-dark)}
.admin-login .errors{margin-bottom:.75rem}
.admin-login label{display:block;font-weight:600;margin-bottom:.45rem}
.admin-login input[type="text"],.admin-login input[type="password"]{width:100%;padding:.6rem;border:1px solid #dfe7f2;border-radius:8px;background:#fbfdff}
.admin-login .btn{width:100%;display:inline-block;text-align:center}

/* Admin UI improvements */
.admin{padding:2rem 0}
.admin h3{margin-bottom:0.5rem}
.admin .card{background:#fff;border:1px solid #e9eef5;padding:1rem;border-radius:8px}
.admin .contact-form{background:#fff;padding:1rem;border-radius:6px;border:1px solid #eee}
.admin .controls{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}

.admin-table{box-shadow:0 1px 2px rgba(15,23,42,0.04)}
.admin-table th,.admin-table td{padding:0.75rem;border:1px solid #eef2f6}
.admin-table tbody tr:nth-child(odd){background:#fbfcfd}
.admin-table td a{color:var(--accent)} 

/* Admin UI refinements */
.admin h3{margin-bottom:.75rem}
.admin h4{margin:.75rem 0 .5rem}
.admin .success,.admin .errors{margin:.75rem 0}
.admin .btn{padding:.45rem .85rem;border-radius:6px}
.admin .contact-form{max-width:560px;gap:.85rem}
.admin .contact-form label{font-weight:600}
.admin .contact-form input[type="text"],
.admin .contact-form input[type="password"],
.admin .contact-form select{font-size:.95rem}
.admin-table th{font-weight:600}
.admin-table td{line-height:1.45}
/* Make message column wider and wrap long text (contacts table) */
.admin-table th:nth-child(5),
.admin-table td:nth-child(5){width:48%;word-break:break-word}
/* Keep date/email a bit tighter */
.admin-table th:nth-child(2),
.admin-table td:nth-child(2){white-space:nowrap}
.admin-table th:nth-child(4),
.admin-table td:nth-child(4){white-space:nowrap}

/* Improved admin table visuals */
.admin-table thead th{position:sticky;top:0;background:#fbfdff;z-index:2}
.admin-table{border-radius:8px;overflow:hidden}
.admin-table tbody tr:hover{background:#f6f9ff}
.admin-table .actions{display:flex;gap:.4rem;align-items:center}
.admin .btn{border-radius:6px;padding:.45rem .75rem}
.admin .btn + .btn{margin-left:.35rem}
.admin .btn[onclick]{cursor:pointer}

/* Mobile: make rows stack nicely when narrow */
@media (max-width:600px){
  .admin-table thead{display:none}
  .admin-table tbody tr{display:block;border-bottom:1px solid #eef2f6;margin-bottom:.6rem;padding-bottom:.6rem}
  .admin-table tbody td{display:flex;justify-content:space-between;padding:.5rem 0;border:0}
  .admin-table tbody td:before{content:attr(data-label);font-weight:600;color:#333;margin-right:.6rem}
}

/* Small improvements for forms */
.admin .contact-form label{display:block}
.admin .contact-form input,.admin .contact-form select,.admin .contact-form textarea{width:100%}
.admin .contact-form .row{display:flex;gap:.6rem}
.admin .contact-form .row > *{flex:1}

.btn-primary{background:var(--accent);color:#fff;border:0}
.btn-primary:hover{background:var(--accent-dark)} 
.btn-danger{background:#d9534f;color:#fff;border:0}
.btn-danger:hover{background:#c9302c}

/* Tighten form elements */
.admin input[type="text"],
.admin input[type="password"],
.admin select{padding:.5rem;border:1px solid #ddd;border-radius:6px}

/* Responsive */
@media (max-width:700px){
  .admin .admin-table{display:block;overflow:auto;width:100%}
  .admin .contact-form{padding:.75rem}
}

/* Simple slideshow styles (W3Schools-like) */
.slideshow-container{position:relative;margin:1rem 0}
.slideshow-container{position:relative;margin:0.4rem 0;max-height:auto;margin-left:auto;margin-right:auto;padding:0.15rem 0.2rem;background:#fff;border-radius:10px;box-shadow:0 5px 10px rgba(0,0,0,0.06);border:2px solid #000}
.mySlides{display:none}
.mySlides img{vertical-align:middle;width:auto;max-width:100%;height:auto;max-height:240px;object-fit:contain;display:block;margin:0 auto}
.prev,.next{
  cursor:pointer;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  color:#fff;
  font-weight:700;
  font-size:22px;
  border-radius:50%;
  user-select:none;
  background:rgba(0,0,0,0.55);
  border:0;
  box-shadow:0 4px 10px rgba(0,0,0,0.18);
  z-index:12;
}
.prev{left:-28px}
.next{right:-28px}
.prev:hover,.next:hover{background:rgba(0,0,0,0.75)}
.text{color:#f2f2f2;font-size:15px;padding:8px 12px;position:absolute;bottom:8px;width:100%;text-align:center}
.numbertext{color:#f2f2f2;font-size:12px;padding:8px 12px;position:absolute;top:0}
.dot{cursor:pointer;height:12px;width:12px;margin:0 3px;background:#bbb;border-radius:50%;display:inline-block;transition:background-color 0.3s}
.active,.dot:hover{background:var(--accent)}

@media (max-width:700px){
  .prev,.next{font-size:14px;padding:0.35rem}
}

@media (max-width:1000px){
  .slideshow-container{max-width:380px}
  .mySlides img{max-height:200px}
}

@media (max-width:640px){
  .slideshow-container{max-width:300px;padding:0.2rem;border-radius:8px;border-width:2px}
  .mySlides img{max-height:140px}
}

/* Lightbox overlay */
.lightbox-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.9);display:none;align-items:center;justify-content:center;z-index:999}
.lightbox-overlay.open{display:flex}
.lightbox-inner{position:relative;max-width:95vw;max-height:95vh}
.lightbox-image{max-width:95vw;max-height:95vh;display:block;border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,0.35)}
.lightbox-image{transform-origin:center center;transition:transform .08s ease-out}
.lightbox-image.zoomed{cursor:grab}
.lightbox-image.grabbing{cursor:grabbing}
.lightbox-close{position:absolute;top:-10px;right:-10px;background:#fff;color:#000;border:0;border-radius:50%;width:32px;height:32px;font-size:20px;line-height:1;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,0.2)}
.lightbox-zoom-in,.lightbox-zoom-out{position:absolute;top:-10px;right:52px;background:#fff;color:#000;border:0;border-radius:50%;width:32px;height:32px;font-size:20px;line-height:1;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,0.2)}
.lightbox-zoom-out{right:94px}
.lightbox-prev,.lightbox-next{position:fixed;top:50%;transform:translateY(-50%);width:64px;height:64px;border-radius:50%;border:0;background:rgba(255,255,255,0.15);color:#fff;font-size:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,0.35);z-index:1000}
.lightbox-prev{left:16px}
.lightbox-next{right:16px}
.lightbox-prev:hover,.lightbox-next:hover{background:rgba(255,255,255,0.3)}

@media (max-width:700px){
  .lightbox-prev,.lightbox-next{width:50px;height:50px;font-size:30px}
  .lightbox-prev{left:10px}
  .lightbox-next{right:10px}
  .lightbox-zoom-in,.lightbox-zoom-out,.lightbox-close{top:-8px;width:28px;height:28px;font-size:16px}
  .lightbox-zoom-out{right:84px}
  .lightbox-zoom-in{right:44px}
}
.lightbox-overlay:hover{cursor:zoom-out}
