﻿/* RESET & BASE */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:#fff;
  line-height:1.6;
  color:#000;
}

/* LAYOUT GENERALE */
#pagina{margin:0 auto;background:#fff}
.sezione{padding:1rem 0}
.contenuto{
  width:90%;
  max-width:760px;
  margin:0 auto;
}
.bg-chiaro{background:#EAFFF4}
.bg-scuro{background:#D5FFEA}
.bg-bianco{background:#fff}

/* ACCESSIBILITÀ */
.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.visually-hidden:focus,
.visually-hidden:active{
  position:static;
  width:auto;height:auto;
  margin:0;
  clip:auto;
  overflow:visible;
  padding:.5rem 1rem;
  background:#fff;
  border:2px solid #000;
  z-index:1000;
}

/* TIPOGRAFIA */
h1,h2,h3{
  line-height:1.2;
  margin:1.2rem 0 .5rem;
  font-weight:400;
}
h1{
  font-size:1.6rem;
  color:#1e4f91;
  text-align:center;
  border-bottom:1px solid #234e70;
  padding-bottom:.5rem;
  font-weight:300;
}
h2{font-size:1.375rem;color:#1e4f91}
h3{font-size:1.2rem;color:#008000}
h3.home{text-align:center}
.highlight{color:#008000}
p.centra{text-align:center}
p.nota{font-size:.95rem;color:#555}

/* HEADER VIASETTI – versione snella */
header.header-viasetti{padding-top:1.25rem}
.header-wrap{
  max-width:800px;
  margin:0 auto;
  padding:.5rem 1.25rem;
  display:flex;
  gap:.75rem;
  align-items:center;
  background:#fff;
  border:1px solid #ddd;
  border-radius:12px;
}
.header-text{flex:1}
.titolo-header{
  font-size:1.8rem;
  font-weight:700;
  color:#1e4f91;
  margin:0;
}
.sottotitolo-header{
  font-size:1rem;
  color:#555;
  line-height:1.4;
}
.header-wrap img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  background: #fff;   /* evita bordi strani */
  padding: 2px;       /* opzionale: evita che tocchi il bordo */
}

/* FOOTER */
.footer-viasetti-min{
  background:#234e70;
  color:#fff;
  padding:1.5rem 0 1rem;
  margin-top:2rem;
  font-size:.9rem;
}
.footer-viasetti-min .contenuto{
  max-width:800px;
  margin:0 auto;
  text-align:center;
}
.footer-viasetti-min a{
  color:#ffdd57;
  text-decoration:underline;
  font-weight:bold;
}
.footer-viasetti-min a:hover{font-weight:normal}
.footer-min-copy{
  margin-top:.8rem;
  font-size:.8rem;
  opacity:.9;
}

/* TESTIMONIANZE */
.testimonial{
  display:flex;
  gap:15px;
  background:#f3f7fa;
  border:1px solid #ddd;
  padding:15px;
  margin:15px auto;
  border-radius:6px;
  max-width:800px;
}
.testimonial-photo{
  width:80px;height:80px;
  border-radius:50%;
  object-fit:cover;
}
.testimonial-author{font-size:1.1em;color:#234e70}
.testimonial-excerpt{font-style:italic;color:#555}
details summary{
  color:#234e70;
  cursor:pointer;
  font-weight:bold;
}
details summary::after{content:"▼"}
details[open] summary::after{content:"▲"}

/* ELENCHI PERSONALIZZATI */
ul[class^="elenco-"]{
  list-style:none;
  margin:1.8rem 0 1rem;
  padding:0;
}
ul[class^="elenco-"] li{
  position:relative;
  padding-left:1.8em;
  margin:.4em 0;
  padding-bottom:.25rem;
}
ul[class^="elenco-"] li::before{
  position:absolute;
  left:0;top:.2em;
  font-weight:700;
}
ul.elenco-check li::before{content:"✅"}
ul.elenco-rombo li::before{content:"🔹"}
ul.elenco-dito li::before{content:"👉"}
ul.elenco-desideri li::before{content:"★"}
ul.elenco-no li::before{content:"❌"}

/* CTA */
.cta-gruppo{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  margin:1.25rem 0;
}
.cta-bottone{
  display:inline-block;
  padding:.625rem 1.125rem;
  background:#1e4f91;
  color:#fff;
  text-decoration:none;
  font-size:.95rem;
  font-weight:600;
  border-radius:.6rem;
  transition:.25s;
}
.cta-bottone:hover{
  background:#163a6b;
  transform:translateY(-2px);
}

/* RIQUADRO BIANCO */
.highlight-box {
  background: #fff;
  color: #234e70;
  padding: 0px 10px;
  border-radius: 14px;
  font-weight: normal;
  border: 1px solid #ccc;
  text-align: left;
}

/* BOX INFO */
.box-info{
  border:1px solid #008000;
  border-left-width:6px;
  border-radius:12px;
  padding:.9rem 1.2rem;
  margin:1.5rem 0;
  background:#FFF7C4;
}
.box-info h3{
  margin:0 0 .4rem;
  font-size:1.2rem;
  font-weight:bold;
  color:#1B5E20;
}
.box-info p{margin:0;font-size:1rem;line-height:1.5}

/* BADGE PAGESPEED */
.psi-badges{
  display:flex;
  gap:.9rem;
  flex-wrap:wrap;
}
.psi-badges .badge{
  margin:0;
  text-align:center;
  color:#006600;
}
.psi-badges .ring{
  width:60px;height:60px;
  margin:0 auto .6rem;
  display:grid;
  place-items:center;
  border:3px solid currentColor;
  border-radius:50%;
  font-size:16px;
  font-weight:600;
}

/* ICON BAR */
.icon-bar{
  position:fixed;
  bottom:5px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:.3rem;
  padding:.625rem 1.25rem;
  width:80%;
  max-width:700px;
  background:rgba(255,255,255,.7);
  border:1px solid #6ba3f6;
  border-radius:20px;
  z-index:999999;
}
.icon-bar img{
  width:52px;height:52px;
  transition:opacity .2s;
}
.icon-bar a:hover img{opacity:.6}

/* COOKIE BANNER */
#cookie-banner{
  position:fixed;
  bottom:0;left:0;
  width:100%;
  padding:12px 16px;
  background:navy;
  color:#fff;
  font-size:16px;
  display:none;
  border:1px solid #ffdd57;
  z-index:2147483647;
}
#cookie-banner .cookie-link{
  color:#ffdd57;
  text-decoration:underline;
}
#cookie-banner .cookie-buttons{
  margin-top:10px;
  text-align:right;
}
#cookie-banner .cookie-btn{
  padding:4px 10px;
  border-radius:4px;
  cursor:pointer;
  font-size:16px;
}
.cookie-btn-accept{
  margin-left:8px;
  border:none;
  background:#ffdd57;
  color:#234e70;
}
.cookie-btn-reject{
  margin-left:16px;
  margin-right:26px;
  border:1px solid #ffdd57;
  background:transparent;
  color:#ffdd57;
}
.cookie-settings-paragrafo{
  text-align:center;
  font-size:16px;
  margin:20px 0 110px;
}
.cookie-settings-link{
  color:#234e70;
  text-decoration:underline;
  cursor:pointer;
}

/* RESPONSIVE */
@media(max-width:700px){
  .header-wrap img{width:90px;height:90px}
  .cta-gruppo{flex-direction:column;gap:.625rem}
  .cta-bottone{
    text-align:center;
    padding:.75rem;
    font-size:1.3rem;
  }
  .psi-badges .ring{
    width:55px;height:55px;
    font-size:18px;
  }
}
