/* ConsultaPA — CSS del sito pubblico (tema C2). Generato da tokens + bundle del Design System. */
@font-face{font-family:"Titillium Web";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/Titillium_Web/titillium-web-v10-latin-ext_latin-300.woff2") format("woff2")}
@font-face{font-family:"Titillium Web";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/Titillium_Web/titillium-web-v10-latin-ext_latin-regular.woff2") format("woff2")}
@font-face{font-family:"Titillium Web";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/Titillium_Web/titillium-web-v10-latin-ext_latin-600.woff2") format("woff2")}
@font-face{font-family:"Titillium Web";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/Titillium_Web/titillium-web-v10-latin-ext_latin-700.woff2") format("woff2")}
@font-face{font-family:"Titillium Web";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/Titillium_Web/titillium-web-v10-latin-ext_latin-italic.woff2") format("woff2")}
@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/Roboto_Mono/roboto-mono-v13-latin-ext_latin-regular.woff2") format("woff2")}
@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700.woff2") format("woff2")}

/* ConsultaPA — variabili CSS dal tema C2 (chiaro, marchio petrolio) */
:root {
  --brand: #0b4f6c; --brand-deep: #082f42; --brand-accent: #7ec8e3; --brand-tint: #e1f1f8;
  --action: #0066cc; --action-hover: #004d99; --on-action: #ffffff;
  --ink: #17324d; --ink-muted: #4f6276; --on-dark: #e6ecf3; --on-dark-muted: #b7c4d3;
  --surface: #ffffff; --surface-alt: #eef7fb; --border: #d2d9e0; --border-control: #6b7c8f;
  --focus: #082f42; --focus-on-dark: #7ec8e3;
  --slim-bg: #0b4f6c; --on-slim: #ffffff; --header-bg: #ffffff; --mark-ink: #0b4f6c; --mark-pa: #2a86ad; --on-header-muted: #4f6276;
  --nav-bg: #ffffff; --on-nav: #17324d; --nav-current: #0066cc; --nav-rule: #d2d9e0;
  --band: #e4f2f8; --on-band: #17324d; --on-band-muted: #4f6276; --band-label: #0b4f6c;
  --band-btn-bg: #0066cc; --band-btn-fg: #ffffff; --band-btn2: #0066cc; --focus-band: #082f42;
  --ok-fg: #00603e; --ok-bg: #e3f4ec; --warn-fg: #6e3f00; --warn-bg: #fff1d6; --ko-fg: #a3132f; --ko-bg: #fbe3e7; --off-fg: #3d4d5c; --off-bg: #ebeef2;
  --cz-1: #4b1e78; --cz-2: #7a3db8; --cz-3-bg: #f1e8fa;
  --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 40px; --space-6: 64px;
  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-pill: 999px;
  --font-sans: "Titillium Web", Geneva, Tahoma, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* ConsultaPA — componenti del sito pubblico, sopra Bootstrap Italia 2.15.
   Ogni colore viene dai token. Fonte: Design System «ConsultaPA» (components/bundle.css). */

:root { --cpa-icon: url("consultapa-icon.svg"); }

.cpa { font-family: var(--font-sans); color: var(--ink); background: var(--surface); font-size: 18px; line-height: 28px; }
.cpa *, .cpa *::before, .cpa *::after { box-sizing: border-box; }
.cpa a { color: var(--action); }
.cpa :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cpa .cpa-dark :focus-visible { outline-color: var(--focus-band); }

/* Marchio */
.cpa-mark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.cpa-mark-icon { width: 48px; height: 48px; flex: none; background: var(--cpa-icon) center / contain no-repeat; border-radius: var(--radius-lg); }
.cpa-mark-name { font-weight: 700; font-size: 28px; line-height: 32px; letter-spacing: -0.3px; }
.cpa-mark-name { color: var(--mark-ink); }
.cpa-mark-name span { color: var(--mark-pa); }
.cpa-mark-sub { display: block; font-weight: 400; font-size: 14px; line-height: 20px; color: var(--on-header-muted); }

/* Header: fascia sottile, fascia del marchio, navigazione pubblica */
.cpa-slim { background: var(--slim-bg); color: var(--on-slim); font-size: 14px; line-height: 20px; }
.cpa-slim-in, .cpa-center-in, .cpa-nav-in, .cpa-wrap { max-width: 1140px; margin: 0 auto; padding-inline: 24px; }
.cpa-slim-in { display: flex; justify-content: space-between; align-items: center; min-height: 40px; gap: 16px; }
.cpa-slim a { color: var(--on-slim); text-decoration: none; font-weight: 600; }
.cpa-center { background: var(--header-bg); }
.cpa-center-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 20px; }
.cpa-nav { background: var(--nav-bg); color: var(--on-nav); border-top: 1px solid var(--nav-rule); border-bottom: 1px solid var(--nav-rule); }
.cpa-nav-in { display: flex; flex-wrap: wrap; gap: 4px 28px; padding-block: 12px; }
.cpa-nav a { color: var(--on-nav); text-decoration: none; font-weight: 600; font-size: 16px; line-height: 24px; padding-block: 4px; border-bottom: 2px solid transparent; }
.cpa-nav a[aria-current="page"] { border-bottom-color: var(--nav-current); }

/* Pulsanti */
.cpa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px; border-radius: var(--radius-md); font: 600 16px/24px var(--font-sans); text-decoration: none; border: 2px solid var(--action); cursor: pointer; }
.cpa-btn-primary { background: var(--action); color: var(--on-action); }
.cpa-btn-primary:hover { background: var(--action-hover); border-color: var(--action-hover); }
.cpa-btn-secondary { background: transparent; color: var(--action); }
.cpa-btn-secondary:hover { color: var(--action-hover); border-color: var(--action-hover); }
.cpa-dark .cpa-btn-primary { background: var(--band-btn-bg); color: var(--band-btn-fg); border-color: var(--band-btn-bg); }
.cpa-dark .cpa-btn-secondary { color: var(--band-btn2); border-color: var(--band-btn2); }

/* Sezioni */
/* Banda in evidenza: celeste chiaro */
.cpa-dark { background: var(--band); color: var(--on-band); }
.cpa-alt { background: var(--surface-alt); }
.cpa-label { display: block; font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--action); margin: 0 0 8px; }
.cpa-dark .cpa-label { color: var(--band-label); }
.cpa-h1 { font-size: 48px; line-height: 54px; font-weight: 700; letter-spacing: -0.5px; margin: 0 0 16px; text-wrap: balance; }
.cpa-h2 { font-size: 32px; line-height: 40px; font-weight: 700; margin: 0 0 16px; text-wrap: balance; }
.cpa-h3 { font-size: 22px; line-height: 28px; font-weight: 600; margin: 0 0 8px; }
.cpa-lead { font-size: 20px; line-height: 30px; max-width: 62ch; margin: 0 0 24px; }
.cpa-dark .cpa-lead, .cpa-dark .cpa-muted { color: var(--on-band-muted); }
.cpa-muted { color: var(--ink-muted); font-size: 16px; line-height: 24px; }
.cpa-data { font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; }

/* Hero */
.cpa-hero-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; padding-block: 64px; }
.cpa-actions { display: flex; flex-wrap: wrap; gap: 16px; }
@media (max-width: 760px) { .cpa-hero-in { grid-template-columns: 1fr; padding-block: 40px; } .cpa-h1 { font-size: 36px; line-height: 42px; } }

/* Stato del modulo */
.cpa-stato { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--radius-sm); font-size: 14px; line-height: 20px; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.cpa-stato::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.cpa-stato-prod { background: var(--ok-bg); color: var(--ok-fg); }
.cpa-stato-svil { background: var(--warn-bg); color: var(--warn-fg); }
.cpa-stato-prog { background: var(--off-bg); color: var(--off-fg); border: 1px dashed var(--border-control); }
.cpa-stato-prog::before { background: transparent; border: 1.5px solid currentColor; }

/* Scheda */
.cpa-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cpa-card .cpa-stato { align-self: flex-start; margin-top: auto; }
.cpa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }

/* Grado di certezza (prodotto) */
.cpa-cz { display: inline-flex; white-space: nowrap; padding: 2px 8px; border-radius: var(--radius-sm); font-size: 14px; line-height: 20px; font-weight: 700; border: 1px solid transparent; }
.cpa-cz-1 { background: var(--cz-1); color: var(--on-action); }
.cpa-cz-2 { background: var(--cz-2); color: var(--on-action); }
.cpa-cz-3 { background: var(--cz-3-bg); color: var(--cz-1); border-color: var(--cz-2); }

/* Scheda di un caso, come schermata del prodotto */
.cpa-caso { background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.cpa-caso-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; background: var(--surface-alt); border-bottom: 1px solid var(--border); }
.cpa-caso-body { padding: 16px; display: grid; gap: 12px; }
.cpa-caso dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin: 0; font-size: 16px; line-height: 24px; }
.cpa-caso dt { color: var(--ink-muted); }
.cpa-caso dd { margin: 0; }
.cpa-regola { background: var(--brand-tint); color: var(--ink); border-radius: var(--radius-md); padding: 8px 12px; font-size: 16px; line-height: 24px; }
.cpa-esempio { font-size: 14px; line-height: 20px; color: var(--ink-muted); padding: 8px 16px; border-top: 1px solid var(--border); }

/* Banda della fiducia */
.cpa-fiducia { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.cpa-fiducia li { border-top: 2px solid var(--action); padding-top: 12px; }
.cpa-fiducia b { display: block; font-size: 18px; line-height: 26px; margin-bottom: 4px; }
.cpa-cz-4 { background: var(--off-bg); color: var(--off-fg); border: 1px dashed var(--border-control); }

/* ===== Sito pubblico: impaginazione comune (non fa parte del Design System) ===== */
body.sito { margin: 0; background: var(--surface); font-family: var(--font-sans); color: var(--ink); }
.sito .cpa a { color: var(--action); }
.sito .cpa a:hover { color: var(--action-hover); }
.sito .cpa h1, .sito .cpa h2, .sito .cpa h3 { color: inherit; }
.sito .cpa p { font-family: var(--font-sans); }
.sito .cpa .cpa-btn-primary, .sito .cpa .cpa-btn-primary:hover { color: var(--on-action); }
.sito .cpa .cpa-slim a, .sito .cpa .cpa-slim a:hover { color: var(--on-slim); }
.sito .cpa .cpa-nav a, .sito .cpa .cpa-nav a:hover { color: var(--on-nav); }
.sito .cpa .cpa-nav a:hover { border-bottom-color: var(--border-control); }
.sito .cpa .cpa-nav a[aria-current="page"] { border-bottom-color: var(--nav-current); }
.sito .cpa-mark:hover { text-decoration: none; }

.sito-salta { position: absolute; left: -10000px; top: 0; z-index: 10; background: var(--focus); color: #fff; padding: 8px 16px; font-weight: 600; }
.sito-salta:focus { left: 16px; top: 8px; color: #fff; }

.sito-menu-btn { display: none; min-height: 48px; padding: 8px 16px; border: 2px solid var(--action); border-radius: var(--radius-md); background: transparent; color: var(--action); font: 600 16px/24px var(--font-sans); cursor: pointer; }

/* Footer */
.sito-footer { background: var(--brand-deep); color: var(--on-dark); padding-block: 40px; font-size: 16px; line-height: 24px; }
.sito-footer-in { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; }
.sito-footer p { margin: 16px 0 0; }
.sito .cpa .sito-footer a { color: var(--on-dark); }
.sito .cpa .sito-footer a:hover { color: #fff; }
.sito-footer-menu { display: grid; gap: 8px; align-content: start; }
.sito .cpa .sito-mark-chiaro .cpa-mark-name, .sito .cpa .sito-mark-chiaro .cpa-mark-name span { color: #fff; }
.sito .cpa .sito-mark-chiaro .cpa-mark-sub { color: var(--on-dark-muted); }
.sito-mark-chiaro .cpa-mark-icon { box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.sito .cpa .sito-footer :focus-visible { outline-color: var(--focus-on-dark); }

/* Telefono e tablet: le griglie scritte nelle pagine passano a una colonna */
@media (max-width: 991px) {
  .sito-footer-in { grid-template-columns: 1fr 1fr; }
  .sito-footer-in > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .cpa-h2 { font-size: 28px; line-height: 34px; }
  .cpa-lead { font-size: 18px; line-height: 28px; }
  .cpa-center-in { padding-block: 12px; }
  .cpa-mark-icon { width: 40px; height: 40px; }
  .cpa-mark-name { font-size: 24px; line-height: 28px; }
  .cpa-center .cpa-mark-sub { display: none; }
  .sito-cta-header { display: none; }
  .sito-menu-btn { display: inline-flex; align-items: center; }
  .cpa-nav { display: none; }
  .cpa-nav.aperto { display: block; }
  .cpa-nav-in { flex-direction: column; gap: 0; padding-block: 8px; }
  .cpa-nav a { padding-block: 12px; border-bottom: 1px solid var(--nav-rule); }
  .cpa-nav a:last-child { border-bottom: 0; }
  .cpa-nav a[aria-current="page"] { border-bottom: 1px solid var(--nav-rule); border-left: 4px solid var(--nav-current); padding-left: 12px; }
  main [style*="grid-template-columns"]:not([style*="auto-fit"]):not([style*="auto-fill"]) { grid-template-columns: 1fr !important; }
  main [style*="grid-column"] { grid-column: auto !important; }
  main [style*="padding-block: 64px"] { padding-block: 40px !important; }
  main table { display: block; overflow-x: auto; }
  .sito-footer-in { grid-template-columns: 1fr; }
}