/* CalcolaSonno.it */
:root{
  --night:#0f1b33; --night2:#16264a; --ink:#1a2238; --muted:#5b6478;
  --bg:#f6f7fb; --card:#ffffff; --accent:#f5b83d; --accent-ink:#7a5200;
  --good:#1d9a6c; --line:#e6e9f2; --radius:16px;
  --shadow:0 4px 20px rgba(15,27,51,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;font-size:17px}
.wrap{max-width:980px;margin:0 auto;padding:0 20px}
a{color:#1d4ed8;text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.25;font-weight:750}
h1{font-size:clamp(1.6rem,4.5vw,2.4rem);margin:.2em 0 .45em}
h2{font-size:clamp(1.25rem,3vw,1.6rem);margin:1.8em 0 .5em}
h3{font-size:1.1rem}
p{margin:.7em 0}
.site-header{background:var(--night);position:sticky;top:0;z-index:50;box-shadow:0 2px 12px rgba(0,0,0,.25)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:9px;color:#fff;font-size:1.25rem;letter-spacing:.2px}
.logo b{color:var(--accent);font-weight:800}
.logo:hover{text-decoration:none}
.main-nav{display:flex;gap:4px;flex-wrap:wrap}
.main-nav a{color:#cdd6ea;padding:7px 11px;border-radius:9px;font-size:.92rem}
.main-nav a:hover{background:var(--night2);color:#fff;text-decoration:none}
.hero{background:linear-gradient(180deg,var(--night) 0%,var(--night2) 100%);color:#eef1f8;padding:40px 0 56px}
.hero h1{color:#fff;max-width:640px}
.hero .sub{color:#b9c3da;max-width:600px;font-size:1.05rem}
.calc-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 22px;margin-top:-34px;position:relative}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.tab{flex:1;min-width:150px;border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:11px 14px;font-size:.95rem;font-weight:650;color:var(--muted);cursor:pointer;transition:.15s}
.tab[aria-selected="true"]{border-color:var(--accent);background:#fff8e8;color:var(--accent-ink)}
.calc-row{display:flex;gap:12px;flex-wrap:wrap;align-items:end}
.calc-row label{font-weight:650;font-size:.95rem;display:block;margin-bottom:6px}
input[type="time"]{font-size:1.5rem;font-weight:700;padding:10px 14px;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);width:160px}
.btn{background:var(--accent);color:#231a00;border:0;border-radius:12px;padding:14px 26px;font-size:1.05rem;font-weight:750;cursor:pointer;box-shadow:0 3px 10px rgba(245,184,61,.4)}
.btn:hover{filter:brightness(1.05)}
.presets{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 13px;font-size:.88rem;cursor:pointer;color:var(--muted)}
.chip:hover{border-color:var(--accent);color:var(--accent-ink)}
.results{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:22px}
.res-card{border:1.5px solid var(--line);border-radius:14px;padding:16px 14px;text-align:center;background:#fff;position:relative}
.res-card.best{border-color:var(--good);background:#f2fbf7}
.res-card .badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--good);color:#fff;font-size:.72rem;font-weight:750;border-radius:999px;padding:2px 10px;white-space:nowrap}
.res-card .time{font-size:1.9rem;font-weight:800;letter-spacing:-.5px}
.res-card .meta{font-size:.85rem;color:var(--muted);margin-top:4px}
.res-note{font-size:.9rem;color:var(--muted);margin-top:14px}
main.wrap, .content{padding-top:8px;padding-bottom:30px}
.section{margin-top:34px}
table{border-collapse:collapse;width:100%;margin:14px 0;background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);font-size:.98rem}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line)}
th{background:var(--night);color:#fff;font-weight:650}
tr:last-child td{border-bottom:0}
tr.best-row td{background:#f2fbf7;font-weight:650}
.tag-good{display:inline-block;background:var(--good);color:#fff;border-radius:999px;font-size:.72rem;font-weight:700;padding:1px 9px;margin-left:8px;vertical-align:middle}
.linkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:9px;margin:14px 0}
.linkgrid a{background:#fff;border:1.5px solid var(--line);border-radius:11px;padding:10px 6px;text-align:center;font-weight:700;color:var(--ink);font-size:1.02rem}
.linkgrid a:hover{border-color:var(--accent);text-decoration:none;background:#fff8e8}
.faq details{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:14px 18px;margin:9px 0}
.faq summary{font-weight:700;cursor:pointer}
.faq details[open]{box-shadow:var(--shadow)}
.breadcrumb{font-size:.85rem;color:var(--muted);margin:18px 0 2px}
.breadcrumb a{color:var(--muted)}
.callout{background:#fff8e8;border-left:4px solid var(--accent);border-radius:0 12px 12px 0;padding:12px 16px;margin:16px 0}
.prose ul{padding-left:22px}
.prose li{margin:6px 0}
.next-prev{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 6px}
.next-prev a{flex:1;min-width:200px;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:12px 16px;font-weight:650;color:var(--ink)}
.next-prev a:hover{border-color:var(--accent);text-decoration:none}
.cta-box{background:var(--night);color:#dfe6f5;border-radius:var(--radius);padding:22px;margin:30px 0;text-align:center}
.cta-box a.btn{display:inline-block;margin-top:10px;text-decoration:none}
.site-footer{background:var(--night);color:#aab6cf;margin-top:50px;padding:34px 0 18px;font-size:.88rem}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px}
.site-footer h3{color:#fff;font-size:.95rem;margin:0 0 8px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:4px 0}
.site-footer a{color:#aab6cf}
.site-footer a:hover{color:#fff}
.footer-note{border-top:1px solid #24355c;margin-top:26px;padding-top:14px;color:#7787a5;font-size:.8rem}
@media(max-width:560px){
  .calc-row{flex-direction:column;align-items:stretch}
  input[type="time"]{width:100%}
  .btn{width:100%}
}