/* Sito pubblico di CanoneScout: stessi colori e caratteri dell'app, nessun JavaScript. Palette Okabe-Ito per gli stati. */
:root {
  --paper: #EDF1F0; --surface: #FFFFFF; --sunk: #E1E8E7; --ink: #13212A; --muted: #55666E; --line: #C9D3D2;
  --accent: #0D5B70; --accent-soft: #D4E7EB; --on-accent: #FFFFFF; --shadow: rgb(19 33 42 / .12);
  --c-blue: #0072B2; --c-orange: #E69F00; --c-verm: #D55E00; --c-green: #009E73; --c-grey: #7C8B91;
  --f-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --f-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0D1518; --surface: #142027; --sunk: #0A1114; --ink: #E1E9EA; --muted: #93A5AB; --line: #283840;
    --accent: #72BED3; --accent-soft: #163742; --on-accent: #05222B; --shadow: rgb(0 0 0 / .45);
    --c-blue: #56B4E9; --c-grey: #8E9DA3;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0D1518; --surface: #142027; --sunk: #0A1114; --ink: #E1E9EA; --muted: #93A5AB; --line: #283840;
  --accent: #72BED3; --accent-soft: #163742; --on-accent: #05222B; --shadow: rgb(0 0 0 / .45);
  --c-blue: #56B4E9; --c-grey: #8E9DA3;
  color-scheme: dark;
}

* { box-sizing: border-box }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.6 }
h1, h2, h3, h4 { font-family: var(--f-display); line-height: 1.15; margin: 0 0 .5em; text-wrap: balance }
h1 { font-size: clamp(1.7rem, 2.2vw + 1.1rem, 2.6rem); font-weight: 800 }
h2 { font-size: clamp(1.3rem, 1vw + 1rem, 1.7rem); font-weight: 750; margin-top: 1.6em }
h3 { font-size: 1.1rem; font-weight: 700 }
p, ul, ol, dl, table { margin: 0 0 1em }
a { color: var(--accent) }
a:hover { text-decoration-thickness: 2px }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
small, .piccolo { font-size: .86rem; color: var(--muted) }
strong { font-weight: 650 }
.contenitore { width: min(1040px, 100% - 32px); margin-inline: auto }
.salta { position: absolute; left: -999px; top: 8px; background: var(--accent); color: var(--on-accent); padding: 8px 12px; border-radius: 6px; z-index: 100 }
.salta:focus { left: 8px }

/* testata */
.testata { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line) }
.barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; flex-wrap: wrap; padding: 6px 0 }
.marchio { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 800; font-size: 1.15rem; color: var(--ink); text-decoration: none; letter-spacing: -.01em }
.logo { width: 30px; height: 30px; color: var(--accent) }
.menu { display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; font-size: .95rem }
.menu a { color: var(--ink); text-decoration: none; padding: 6px 2px; border-bottom: 2px solid transparent }
.menu a[aria-current="page"] { border-bottom-color: var(--accent); color: var(--accent) }
.menu a.btn { border-bottom: 1px solid var(--accent) }
@media (max-width: 560px) { .nascondi-piccolo { display: none } }

/* bottoni */
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 8px; padding: 8px 14px; font: inherit; font-size: .95rem; font-weight: 600; text-decoration: none; cursor: pointer }
.btn:hover { border-color: var(--accent) }
.btn-pri { background: var(--accent); color: var(--on-accent); border-color: var(--accent) }
.btn-pri:hover { filter: brightness(1.08) }
.btn.grande { padding: 12px 20px; font-size: 1.02rem }
.menu .btn-pri { color: var(--on-accent) }
.azioni { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 }

/* sezioni */
main { padding: 8px 0 40px }
.eroe { padding: 36px 0 20px; max-width: 820px }
.sopratitolo { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 8px }
.sottotitolo { font-size: 1.08rem; color: var(--muted); max-width: 70ch }
.novita { background: var(--accent-soft); border-left: 4px solid var(--accent); border-radius: 6px; padding: 10px 14px; max-width: 70ch }
.blocco { margin-top: 36px }
.griglia-3, .griglia-2 { display: grid; gap: 14px; margin-top: 36px; grid-template-columns: minmax(0, 1fr) }
.griglia-3 h2, .griglia-2 h2 { margin-top: 0 }
.intera { grid-column: 1 / -1; margin-bottom: 0 }
@media (min-width: 700px) { .griglia-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) } .griglia-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.scheda { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 18px 18px 6px; box-shadow: 0 1px 2px var(--shadow) }
.scheda h3 { margin-top: 0 }
.scheda ul { padding-left: 1.2em }
.numero { font-family: var(--f-display); font-weight: 800; font-size: 1.6rem; color: var(--accent); margin: 0 0 4px; line-height: 1 }
.chip-elenco { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px }
.chip-elenco a { display: inline-block; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 14px; text-decoration: none; color: var(--ink); font-weight: 600 }
.chip-elenco a:hover { border-color: var(--accent); color: var(--accent) }
.elenco-guide { list-style: none; padding: 0; display: grid; gap: 14px }
.elenco-guide.grande li { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px }
.elenco-guide.grande h2 { margin: 0 0 6px; font-size: 1.25rem }
.elenco-guide.grande p { margin: 0; color: var(--muted) }
.nota { background: var(--accent-soft); border-radius: 10px; padding: 16px 18px; margin-top: 36px }
.nota h2 { margin-top: 0; font-size: 1.1rem }
.nota p:last-child { margin-bottom: 0 }

/* FAQ */
.faq { margin-top: 36px }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 0 16px; margin-bottom: 8px }
.faq summary { cursor: pointer; font-weight: 650; padding: 12px 0 }
.faq details[open] summary { border-bottom: 1px solid var(--line) }
.faq p { padding: 12px 0 }

/* invito all'azione */
.cta { margin-top: 44px; background: var(--accent); color: var(--on-accent); border-radius: 12px; padding: 24px }
.cta h2 { margin-top: 0; color: inherit }
.cta p:last-child { margin: 0; display: flex; flex-wrap: wrap; gap: 10px }
.cta .btn { background: var(--on-accent); color: var(--accent); border-color: var(--on-accent) }
.cta .btn-pri { background: var(--paper); color: var(--accent) }

/* briciole */
.briciole { font-size: .86rem; color: var(--muted); margin: 12px 0 18px }
.briciole ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px }
.briciole li + li::before { content: "›"; margin: 0 6px; color: var(--muted) }

/* articoli */
.articolo-griglia { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr) }
@media (min-width: 900px) { .articolo-griglia { grid-template-columns: minmax(0, 1fr) 260px } }
.articolo { max-width: 72ch; font-size: 1.04rem }
.articolo.stretto { max-width: 76ch }
.articolo h2 { margin-top: 1.5em }
.articolo h3 { margin-top: 1.2em }
.articolo ul, .articolo ol { padding-left: 1.3em }
.articolo li { margin-bottom: .35em }
.laterale { font-size: .94rem }
.laterale h2 { font-size: 1rem; margin-top: 1.4em; text-transform: uppercase; letter-spacing: .06em; color: var(--muted) }
.laterale ul { list-style: none; padding: 0 }
.laterale li { margin-bottom: 6px }
@media (min-width: 900px) { .laterale { position: sticky; top: 76px; align-self: start } }
.tabella { width: 100%; border-collapse: collapse; font-size: .92rem; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden }
.tabella caption { text-align: left; color: var(--muted); font-size: .86rem; padding: 6px 0 }
.tabella th, .tabella td { padding: 8px 10px; border-top: 1px solid var(--line); text-align: left; vertical-align: top }
.tabella thead th { background: var(--sunk); border-top: 0; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em }
.tabella th[scope="row"] { font-weight: 600 }
@media (max-width: 560px) { .tabella { display: block; overflow-x: auto } }
.dati { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 6px 14px; font-size: .95rem }
.dati dt { color: var(--muted); font-weight: 600 }
.dati dd { margin: 0; overflow-wrap: anywhere }
@media (max-width: 560px) { .dati { grid-template-columns: minmax(0, 1fr) } .dati dd { margin-bottom: 6px } }
.compatto { padding-left: 1.2em; font-size: .94rem; columns: 1 }
.compatto li { margin-bottom: 2px }
.colonne { columns: 2; column-gap: 24px }
@media (min-width: 700px) { .colonne { columns: 3 } }

/* elenchi di comuni */
.elenco-comuni { list-style: none; padding: 0; display: grid; gap: 10px }
.elenco-comuni li { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; line-height: 1.5 }
.elenco-comuni li:target { outline: 2px solid var(--accent) }
.stato { display: inline-block; font-size: .78rem; font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; margin-left: 6px; vertical-align: middle }
.stato.ok { color: var(--c-green); border-color: color-mix(in srgb, var(--c-green) 50%, var(--line)) }
.griglia-regioni { list-style: none; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) }
.griglia-regioni li { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px }
.griglia-regioni a { font-weight: 650; text-decoration: none }
.griglia-regioni a:hover { text-decoration: underline }
.indice-province { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 }
.indice-province a { font-size: .86rem; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 3px 10px; text-decoration: none; color: var(--ink) }
.indice-province a:hover { border-color: var(--accent); color: var(--accent) }

/* modulo di richiesta */
.modulo { display: grid; gap: 14px; max-width: 560px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 20px }
.modulo label { display: grid; gap: 4px; font-weight: 600; font-size: .95rem }
.modulo input, .modulo textarea { font: inherit; padding: 9px 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); color: var(--ink); width: 100%; min-width: 0 }
.modulo input:focus, .modulo textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft) }
.modulo p { margin: 0 }
.trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.avviso { background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--c-grey); border-radius: 8px; padding: 12px 16px; max-width: 560px }
.avviso p { margin: 0 }
.avviso.ok { border-left-color: var(--c-green) }
.avviso.errore { border-left-color: var(--c-verm) }

/* piè di pagina */
.pie { border-top: 1px solid var(--line); background: var(--surface); padding: 28px 0 20px; margin-top: 40px; font-size: .92rem }
.pie-griglia { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) }
@media (min-width: 760px) { .pie-griglia { grid-template-columns: 1.4fr 1fr 1fr } }
.pie-marchio { font-family: var(--f-display); font-weight: 800; font-size: 1.1rem; margin-bottom: 6px }
.pie-link { display: grid; gap: 6px; align-content: start }
.pie-link a { color: var(--ink); text-decoration: none }
.pie-link a:hover { color: var(--accent); text-decoration: underline }
.pie-basso { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line) }

@media print { .testata, .cta, .pie, .menu { display: none } body { background: #fff; color: #000 } }