/* =====================================================================
   PW–MT • Stili base
   ===================================================================== */

/* Palette */
:root{
  --monza-blue:   #0e3a4e;
  --monza-blue-2: #123f56;
  --monza-red:    #c4312a;
  --monza-gold:   #c59d3b;

  --text:         #1f2937;
  --muted:        #6b7280;
  --bg:           #f6f7fb;
  --card:         #ffffff;
  --line:         #e5e7eb;

  --radius: 12px;
  --shadow: 0 6px 22px rgba(0,0,0,.06);
}

/* Reset minimale */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--monza-blue);text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Layout */
.wrap{max-width:1100px;margin:0 auto;padding:16px}
@media (min-width:960px){ .wrap{padding:24px 16px} }

/* =====================================================================
   Header con partial e contrasto corretto
   ===================================================================== */
.header{
  background: linear-gradient(90deg, var(--monza-blue), var(--monza-blue-2));
  color:#fff;
  border-bottom:4px solid var(--monza-red);
  padding:12px 0;
}
.header .topbar{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 16px;
}
.header .topbar img{
  height:44px;
  width:auto;
}
.header .topbar .site{
  font-size:.9rem;
  color:#e5eaf1;
  line-height:1.1;
}
.header .topbar .brand{
  font-size:1.1rem;
  color:#fff;
  line-height:1.2;
}

/* =====================================================================
   Navigazione principale
   ===================================================================== */
.nav{
  background:#fff;
  border-bottom:1px solid var(--line);
}
.nav ul{
  max-width:1100px;margin:0 auto;
  display:flex;gap:10px;list-style:none;padding:10px 16px;
  overflow:auto;
}
.nav a{
  display:inline-block;
  padding:8px 12px;
  border-radius:8px;
  color:var(--monza-blue);
  font-weight:600;
}
.nav a.active,
.nav a:hover{
  background:rgba(12,49,78,.08);
  text-decoration:none;
}

/* Breadcrumb */
.breadcrumb{
  font-size:.92rem;color:var(--muted);
  margin:10px 0 16px;
}
.breadcrumb a{color:var(--monza-blue)}

/* =====================================================================
   Componenti UI
   ===================================================================== */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}
.card h1,.card h2,.card h3{margin-top:.2em}

.grid{
  display:grid;
  grid-template-columns: repeat(1, minmax(0,1fr));
  gap:14px;
}
@media (min-width:720px){
  .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width:1024px){
  .grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
.service h3{margin:.2rem 0}
.service .meta{color:var(--muted);font-size:.9rem;margin:.2rem 0 .4rem}

input,select,button,textarea{
  font:inherit;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  outline:0;
  background:#fff;
}
input:focus,select:focus,textarea:focus{border-color:var(--monza-blue);box-shadow:0 0 0 3px rgba(12,58,78,.12)}

button{
  background:var(--monza-blue);
  color:#fff;border-color:transparent;
  cursor:pointer;font-weight:600;
}
button:hover{background:#0b3346}
button.secondary{background:#fff;color:var(--monza-blue);border:1px solid var(--monza-blue)}
button.secondary:hover{background:rgba(12,58,78,.06)}
.cta{
  display:inline-block;
  color:#fff !important;
  background:var(--monza-red);
  padding:8px 12px;border-radius:8px;
  text-decoration:none;font-weight:700;
}
.cta:hover{filter:brightness(.95);text-decoration:none}

/* Tabelle leggere (se servono) */
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid var(--line)}
.table th{background:#f1f4f9;text-align:left}

/* Footer */
.footer{
  text-align:center;color:var(--muted);
  padding:26px 12px;
}

/* =====================================================================
   Chatbot
   ===================================================================== */
#chatbox{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);
  padding:0;max-width:800px;margin:auto;
}
#chatlog{
  height:420px;overflow:auto;padding:16px;
  display:flex;flex-direction:column;gap:10px
}
.msg{
  padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;max-width:85%;
}
.msg.user{
  align-self:flex-end;background:#eef3ff;border-color:#cfe0ff
}
.msg.bot{
  align-self:flex-start;background:#f8fafc
}
.toolbar{
  display:flex;gap:8px;border-top:1px solid var(--line);padding:10px
}
.toolbar input{flex:1}
.suggestion{display:inline-block;margin-right:8px;margin-top:6px}

/* =====================================================================
   Utility
   ===================================================================== */
.m-0{margin:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}
.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}
.text-center{text-align:center}