/* Font Titillium Web - dichiarazioni @font-face (Bootstrap Italia 2.18.1 non le include nel bundle) */
@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'),url('../fonts/Titillium_Web/titillium-web-v10-latin-ext_latin-300.woff') format('woff')}
@font-face{font-family:'Titillium Web';font-style:italic;font-weight:300;font-display:swap;src:url('../fonts/Titillium_Web/titillium-web-v10-latin-ext_latin-300italic.woff2') format('woff2'),url('../fonts/Titillium_Web/titillium-web-v10-latin-ext_latin-300italic.woff') format('woff')}
@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'),url('../fonts/Titillium_Web/titillium-web-v10-latin-ext_latin-regular.woff') format('woff')}
@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'),url('../fonts/Titillium_Web/titillium-web-v10-latin-ext_latin-italic.woff') format('woff')}
@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'),url('../fonts/Titillium_Web/titillium-web-v10-latin-ext_latin-600.woff') format('woff')}
@font-face{font-family:'Titillium Web';font-style:italic;font-weight:600;font-display:swap;src:url('../fonts/Titillium_Web/titillium-web-v10-latin-ext_latin-600italic.woff2') format('woff2'),url('../fonts/Titillium_Web/titillium-web-v10-latin-ext_latin-600italic.woff') format('woff')}
@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'),url('../fonts/Titillium_Web/titillium-web-v10-latin-ext_latin-700.woff') format('woff')}
@font-face{font-family:'Titillium Web';font-style:italic;font-weight:700;font-display:swap;src:url('../fonts/Titillium_Web/titillium-web-v10-latin-ext_latin-700italic.woff2') format('woff2'),url('../fonts/Titillium_Web/titillium-web-v10-latin-ext_latin-700italic.woff') format('woff')}

/* Font Lora (testo editoriale) e Roboto Mono (monospazio) - completano il set Bootstrap Italia */
@font-face{font-family:'Lora';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/Lora/lora-v20-latin-ext_latin-regular.woff2') format('woff2')}
@font-face{font-family:'Lora';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/Lora/lora-v20-latin-ext_latin-italic.woff2') format('woff2')}
@font-face{font-family:'Lora';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/Lora/lora-v20-latin-ext_latin-700.woff2') format('woff2')}
@font-face{font-family:'Lora';font-style:italic;font-weight:700;font-display:swap;src:url('../fonts/Lora/lora-v20-latin-ext_latin-700italic.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:italic;font-weight:400;font-display:swap;src:url('../fonts/Roboto_Mono/roboto-mono-v13-latin-ext_latin-italic.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')}
@font-face{font-family:'Roboto Mono';font-style:italic;font-weight:700;font-display:swap;src:url('../fonts/Roboto_Mono/roboto-mono-v13-latin-ext_latin-700italic.woff2') format('woff2')}

/* ==========================================================================
 * Global CSS Variables - Optimized for OGS Branding & Accessibility
 * ========================================================================== */

:root {
  /* Font Family Overrides - Bootstrap Italia Typography Standards */
  --bs-font-sans-serif: "Titillium Web", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-font-serif: "Lora", Georgia, "Times New Roman", Times, serif;
  --bs-font-monospace: "Roboto Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-heading-font-family: var(--bs-font-sans-serif);

  /* Brand Palette - OGS */
  --color-brand-primary: #11366D; /* Blu Zaffiro Profondo */
  --color-brand-secondary: #18b3dd; /* Accent cyan */
  --color-action-default: #005a9c; /* Default action color */
  --color-action-hover: #194680;  
  --color-action-active: #0D2952;  
  --color-link: var(--color-action-default);  

  /* Interactive State Colors */
  --color-state-error: #d32f2f;  
  --color-state-error-light: #ffebee;  
  --color-state-success: #2e7d32;  
  --color-state-success-light: #e8f5e8;  
  --color-state-info: var(--color-brand-secondary);  
  --color-state-info-light: #e1f5fe;  
  --color-state-warning: #f57c00;  
  --color-state-warning-light: #fff3e0;  

  /* Neutral Colors & Backgrounds */
  --color-neutral-light: #ffffff;  
  --color-neutral-dark: #193153;  
  --color-neutral-darker: #0f1f38;  
  --color-neutral-border: #b3b9c5;  
  --color-neutral-border-light: #e1e5eb;  
  --color-neutral-background: #f8fafc;  
  --color-neutral-gray: #64748b;  

  /* Semantic Backgrounds */
  --color-bg-body: var(--color-neutral-background);  
  --color-bg-main: var(--color-neutral-light);  

  /* Text Colors */
  --color-text-default: var(--color-neutral-dark);  
  --color-text-light: var(--color-neutral-gray);  

  /* Shadows */
  --shadow-opacity-low: 0.08;
  --shadow-opacity-medium: 0.15;
  --shadow-opacity-high: 0.25;
  --shadow-color-accent: 0, 90, 156;  
  --shadow-color-light: 148, 163, 184;  
  --shadow-main: 0 2px 8px rgba(var(--shadow-color-light), var(--shadow-opacity-medium));  
  --shadow-component: 0 1px 4px rgba(var(--shadow-color-accent), var(--shadow-opacity-low));  
  --shadow-hover: 0 8px 30px rgba(17, 54, 109, var(--shadow-opacity-medium));  

  /* Borders & Radii */
  --border-width-lg: 0.375rem;  
  --border-width-md: 2px;  
  --border-width-sm: 1px;  
  --border-width-focus: 3px;  
  --radius-xl: 1rem;
  --radius-lg: 0.75rem;
  --radius-md: 0.5rem;
  --radius-sm: 0.375rem;
  --radius-xs: 0.25rem;

  /* Spacing Scale */
  --space-10x: 5rem;
  --space-8x: 4rem;
  --space-7x: 3.5rem;
  --space-6x: 3rem;
  --space-5x: 2.5rem;
  --space-4x: 2rem;
  --space-3x: 1.5rem;
  --space-2x: 1rem;
  --space-1x: 0.5rem;
  --space-0_5x: 0.25rem;

  /* Responsive Font Sizes (Fluid Typography via clamp) */
  --font-h1: clamp(1.4rem, 5vw, 2.2rem);
  --font-h2: clamp(1.2rem, 4vw, 1.8rem);
  --font-h3: clamp(1.1rem, 3vw, 1.4rem);
  --font-h4: clamp(1rem, 2.5vw, 1.25rem);
  --font-h5: clamp(0.95rem, 2.2vw, 1.1rem);
  --font-h6: clamp(0.9rem, 2vw, 1rem);
  --font-header-title: clamp(1.2rem, 3vw, 1.6rem);
  --font-body: clamp(0.9rem, 2vw, 1.05rem);
  --font-editorial: clamp(1.05rem, 2.2vw, 1.2rem);
  --font-small: clamp(0.85rem, 1.8vw, 0.95rem);
  --font-xsmall: clamp(0.8rem, 1.6vw, 0.875rem);

  /* Z-index Scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal: 1040;
  --z-popover: 1050;
  --z-tooltip: 1060;
}

/* ==========================================================================
 * Base Styles & Resets
 * ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: #f8fafc; background-color: var(--color-bg-body);
  font-family: var(--bs-body-font-family);
  font-size: var(--font-body);
  line-height: 1.7;
  color: #193153; color: var(--color-text-default);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* WCAG Compliant Focus Ring - Esclusi gli input di sistema gestiti da Bootstrap */
:not(input):not(select):not(textarea):not(.form-check-input):focus-visible {
  outline: 3px solid #005a9c; outline: var(--border-width-focus) solid var(--color-action-default);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.8);
}

::selection {
  background-color: rgba(0, 90, 156, 0.2);
  color: #193153; color: var(--color-text-default);
}

/* ==========================================================================
 * Layout (Main Container)
 * ========================================================================== */

#main {
  background-color: #ffffff; background-color: var(--color-bg-main);
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 20px rgba(17, 54, 109, 0.08);
  margin-top: var(--space-4x);
  margin-bottom: var(--space-10x);
  max-width: 1140px; 
  margin-left: auto;
  margin-right: auto;
}

#main .col-lg-8,
#main .col-lg-10 {
  margin-left: auto;
  margin-right: auto;
}


/* ==========================================================================
 * Typography & Text Content
 * ========================================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.it-title {
  font-family: var(--bs-heading-font-family);
  color: #11366D; color: var(--color-brand-primary);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

h1 { font-size: var(--font-h1); margin-bottom: var(--space-4x); }
h2 { font-size: var(--font-h2); margin-top: var(--space-6x); margin-bottom: var(--space-3x); }
h3 { font-size: var(--font-h3); margin-top: var(--space-4x); margin-bottom: var(--space-2x); }
h4 { font-size: var(--font-h4); margin-top: var(--space-3x); margin-bottom: var(--space-1x); }
h5 { font-size: var(--font-h5); margin-top: var(--space-2x); margin-bottom: var(--space-1x); font-weight: 600; }
h6 { font-size: var(--font-h6); margin-top: var(--space-2x); margin-bottom: var(--space-1x); font-weight: 600; color: #475569; color: var(--color-text-light); }

h1.it-title {
  text-align: center;
  width: 100%;
  margin-bottom: var(--space-4x);
}

.mb-3:has(+ h1.it-title) {
  text-align: center;
  width: 100%;
}

.lead {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 3rem auto;
  color: #475569; color: var(--color-text-light);
}


/* Editorial Content (Articoli, Testi estesi) - Bootstrap Italia Lora Implementation */
article p, 
.editorial-content p {
  font-family: var(--bs-font-serif);
  font-size: var(--font-editorial);
  line-height: 1.8;
  color: #193153; color: var(--color-text-default);
  margin-bottom: var(--space-3x);
}

/* ==========================================================================
 * Header Overrides (Dark Theme Adaptation)
 * ========================================================================== */

.it-header-wrapper {
  position: relative;
  background: #11366D; /* = --color-brand-primary, lo stesso colore del ::before */
  background-image: none;
  box-shadow: none;
}

/* Creates the solid blue background behind the transparent header components */
.it-header-wrapper::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #11366D; background-color: var(--color-brand-primary); 
  z-index: 0; 
  pointer-events: none;
}

.it-header-wrapper .it-header-slim-wrapper,
.it-header-wrapper .it-header-center-wrapper,
.it-header-wrapper .it-header-navbar-wrapper {
  background: transparent;
  position: relative;
  z-index: 1;
}

.it-header-wrapper .it-header-center-wrapper {
  padding-top: var(--space-3x);
  padding-bottom: var(--space-7x);
}

/* Enforce white color for all elements inside the dark header, EXCEPT dropdowns */
.it-header-wrapper,
.it-header-wrapper *:not(.dropdown-menu):not(.dropdown-item):not(.dropdown-menu *) {
  color: #ffffff;
}

/* Restore default colors for dropdown menus — SOLO da scrivania.
   Sotto i 992 px Bootstrap Italia (theme-dark-mobile) colora le voci di bianco con
   specificità maggiore: lo sfondo bianco imposto qui le rendeva bianco su bianco (1:1,
   WCAG 1.4.3), e le pagine di secondo livello erano irraggiungibili dal menu su mobile.
   Misurato il 2026-09-22; la seconda regola copre i 992 px esatti. */
@media (min-width: 992px) {
  .it-header-wrapper .dropdown-menu,
  .it-header-wrapper .dropdown-menu *,
  .it-header-wrapper .dropdown-item {
    background-color: #ffffff;
    color: #0f1f38; color: var(--color-neutral-darker);
  }
  .it-header-wrapper .it-header-navbar-wrapper.theme-dark-mobile .navbar .dropdown-menu .link-list-wrapper ul li a span {
    color: #0066cc;
  }
}

/* Ensure center wrapper elements are properly aligned */
.it-header-center-wrapper .it-brand-text h5 {
  font-size: var(--font-header-title);
  margin-bottom: 0;
  text-align: center;
}
.it-header-center-wrapper .col-12.d-flex,
.it-header-center-wrapper .col-12 > div.d-flex.flex-column {
  align-items: center;
}

/* Logos */
.logo-header, .logo-footer {
  max-width: clamp(220px, 30vw, 500px);
  width: 100%;
  height: auto;
  display: inline-block;
  user-select: none;
}
.logo-header { margin: var(--space-3x) auto; }
.logo-footer { margin: var(--space-3x) 0; }

/* Constrain logo heights specifically */
.logo-header-img, .logo-sponsor-img {
  max-height: 80px;
  width: auto;
  object-fit: contain; /* Prevent stretching */
}

/* ==========================================================================
 * Language Selector
 * ========================================================================== */

.lang-selector { margin-bottom: var(--space-0_5x); }

.lang-selector .btn-group {
  display: inline-flex;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.lang-selector .btn-group .btn {
  border-radius: 0;
  padding: var(--space-0_5x) var(--space-2x);
  font-size: var(--font-small);
  font-weight: 600;
  background-color: transparent;
  color: #ffffff;
  border: none;
  transition: background-color 0.2s ease;
}

.lang-selector .btn-group .btn:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

/* Active State Logic */
.lang-selector .btn-group .btn.active,
html[lang="it"] .lang-selector .btn[lang="it"],
html[lang="en"] .lang-selector .btn[lang="en"] { 
  background-color: #005a9c; background-color: var(--color-action-default); 
  color: #ffffff; 
  font-weight: 700; 
}

/* ==========================================================================
 * UI Components (Cards, Buttons, Accordions)
 * ========================================================================== */

/* Cards */
.card-bg {
  background-color: #ffffff; background-color: var(--color-neutral-light); 
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-main);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-bg:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}
.card-bg .card-title, .card-bg h3, .card-bg .text-primary {
  color: #11366D; color: var(--color-brand-primary);
}

/* Buttons */
.btn-primary { 
  border-radius: 50px; 
}

/* Definizione strutturale per pulsanti con icona */
.btn.btn-icon {
  display: inline-flex;
  flex-direction: row; 
  align-items: center; 
  justify-content: center;
  gap: 0.5rem; 
  vertical-align: middle;
  padding: 0.5rem 1rem; 
}

/* Comportamento stringente per l'icona SVG: evita deformazioni e a-capo non desiderati */
.btn.btn-icon svg.icon { 
  margin: 0 !important; 
  display: block; 
  flex-shrink: 0; 
}

/* Comportamento stringente per lo span di testo: allinea il testo alla base dell'icona */
.btn.btn-icon span:not(.visually-hidden) { 
  display: block;
  margin: 0; 
  padding: 0; 
  line-height: 1; 
  white-space: nowrap; 
}

/* ==========================================================================
 * Detached Accordion Customization
 * ========================================================================== */

.custom-detached-accordion .accordion-item {
  background-color: #ffffff; background-color: var(--color-neutral-light);
  border: 1px solid #e1e5eb; border: 1px solid var(--color-neutral-border-light);
  border-left: 4px solid #11366D !important; border-left: 4px solid var(--color-brand-primary) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-component);
  margin-bottom: var(--space-3x);
  overflow: hidden;
}

/* Override dei bordi nativi di Bootstrap Italia per il primo e ultimo elemento */
.custom-detached-accordion .accordion-item:first-of-type,
.custom-detached-accordion .accordion-item:last-of-type {
  border-radius: var(--radius-md) !important;
}

.custom-detached-accordion .accordion-button {
  padding: 1.25rem 1.5rem;
  background-color: transparent;
  font-weight: 600;
  color: #11366D; color: var(--color-brand-primary);
  box-shadow: none !important; /* Rimuove l'outline blu nativa al click */
}

/* Stile quando il pannello è aperto */
.custom-detached-accordion .accordion-button:not(.collapsed) {
  background-color: #f8fafc;
  color: #11366D; color: var(--color-brand-primary);
}

/* Linea separatrice tra bottone e contenuto */
.custom-detached-accordion .accordion-collapse {
  border-top: 1px solid #e1e5eb; border-top: 1px solid var(--color-neutral-border-light);
}

/* Nasconde le pseudo-linee grigie native tra i blocchi accordion di Bootstrap */
.custom-detached-accordion .accordion-header::before,
.custom-detached-accordion .accordion-item::before,
.custom-detached-accordion .accordion-item::after {
  display: none !important;
}

/* Layout Flexbox per centramento e spaziatura del corpo interno */
.custom-detached-accordion .accordion-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.custom-detached-accordion .accordion-body p {
  margin-bottom: 1rem;
}

/* Rimuove il margine inferiore dell'ultimo figlio per bilanciare il padding */
.custom-detached-accordion .accordion-body > :last-child {
  margin-bottom: 0;
}

/* ==========================================================================
 * Footer Custom Link Styles
 * ========================================================================== */

.footer-custom-link {
  color: #ffffff !important;
  /* 🟥 Corretto il 2026-08-22: qui c'era «text-decoration: none !important».
     Nel pie' di pagina i collegamenti e il testo statico accanto (indirizzo, telefono)
     erano entrambi bianchi, senza sottolineatura e con lo stesso peso: rapporto di
     contrasto fra link e testo 1:1, e il colore non puo' essere l'unico mezzo per
     distinguerli (WCAG 1.4.1). La sottolineatura e' discreta e diventa piena al
     passaggio del mouse e al fuoco da tastiera. */
  text-decoration: underline !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: rgba(255, 255, 255, 0.55);
  transition: color 0.2s ease-in-out, text-decoration-color 0.2s ease-in-out;
}

.footer-custom-link:hover,
.footer-custom-link:focus-visible {
  color: #18b3dd !important; color: var(--color-brand-secondary) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px;
  outline: none;
}

footer.it-footer {
  background-color: #11366D; background-color: var(--color-brand-primary);
  background-image: none;
  color: #ffffff; color: var(--color-neutral-light);
  margin-top: var(--space-8x);
  padding: var(--space-6x) 0 0 0;
}

/* Force transparency to avoid framework overrides on background */
footer.it-footer *, footer.it-footer .container { background: transparent; }

footer.it-footer h4, footer.it-footer .fs-6 {
  color: #ffffff; color: var(--color-neutral-light); font-weight: 600; margin-bottom: var(--space-2x);
}

footer.it-footer a, footer.it-footer p { 
  color: #cbd5e1; 
  text-decoration: none; 
  transition: color 0.2s; 
}
footer.it-footer a:hover, footer.it-footer a:focus-visible { 
  color: #ffffff; color: var(--color-neutral-light); 
  text-decoration: underline; 
}

/* Reset for the nested UL elements inside footer */
footer.it-footer ul.footer-list { list-style: none; padding: 0; margin: 0; }
footer.it-footer ul.footer-list li { margin-bottom: var(--space-1x); color: #ffffff; color: var(--color-neutral-light); }

/* Footer Small Prints */
footer.it-footer .it-footer-small-prints {
  background-color: #0D2952; background-color: var(--color-action-active); 
  padding: var(--space-3x) 0;
  margin-top: var(--space-4x);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

footer.it-footer .it-footer-small-prints .d-flex {
  flex-wrap: wrap;
}

footer.it-footer .it-footer-small-prints a {
  color: #ffffff; color: var(--color-neutral-light);
  font-size: var(--font-small);
  font-weight: 600;
  text-decoration: none;
}
footer.it-footer .it-footer-small-prints a:hover {
  color: #18b3dd; color: var(--color-brand-secondary);
  text-decoration: underline;
}

/* ==========================================================================
 * Utilities
 * ========================================================================== */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.icon-white, .icon-white use { fill: #ffffff; fill: var(--color-neutral-light); color: #ffffff; color: var(--color-neutral-light); }
.icon-primary, .icon-primary use { fill: #11366D; fill: var(--color-brand-primary); color: #11366D; color: var(--color-brand-primary); }

/* ==========================================================================
 * Media Queries
 * ========================================================================== */

@media (max-width: 991.98px) {
  .it-header-wrapper::before { background-color: #11366D; background-color: var(--color-brand-primary); }
  .it-header-center-wrapper .col-12 { text-align: center; }
  .lang-selector .btn-group .btn { padding: 0.125rem var(--space-0_5x); font-size: var(--font-xsmall); line-height: 1.3; }
}

@media (max-width: 767.98px) {
  #main { padding: var(--space-2x); margin-top: var(--space-2x); }
}

/* A11y Media Queries */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { 
    animation-duration: 0.01ms !important; 
    animation-iteration-count: 1 !important; 
    transition-duration: 0.01ms !important; 
    scroll-behavior: auto !important; 
  }
}

@media (prefers-contrast: high) {
  :root { 
    --color-neutral-border: #000000; 
    --color-action-default: #0000ff; 
    --color-state-error: #ff0000;
    --radius-md: 0; 
    --radius-sm: 0;
  }
  .card-bg { border: 2px solid #000000 !important; }
}

/* ==========================================================================
 * Print Optimization
 * ========================================================================== */
@media print {
  body { background-color: #fff; color: #000; }
  .it-header-wrapper, footer.it-footer, .lang-selector { display: none !important; }
  #main { 
    box-shadow: none !important; 
    margin: 0 !important; 
    padding: 0 !important; 
    max-width: 100% !important; 
  }
  .card-bg { 
    border: 1px solid #000 !important; 
    box-shadow: none !important; 
    page-break-inside: avoid;
  }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.9em; color: #555; }
}

/* ===== Galleria fotografica della home (carosello autonomo) ===== */
.home-gallery{position:relative;border-radius:var(--radius-md);overflow:hidden;background: #11366D; background:var(--color-brand-primary)}
.home-gallery__viewport{position:relative;width:100%;height:440px}
.home-gallery__slide{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transition:opacity .6s ease}
.home-gallery__slide.is-active{opacity:1;visibility:visible}
.home-gallery__slide img{width:100%;height:100%;object-fit:cover;display:block}
.home-gallery__caption{position:absolute;left:0;right:0;bottom:0;margin:0;background:rgba(17,54,109,.88);color:#fff;font-size:.875rem;line-height:1.4;padding:.65rem 1rem}
.home-gallery__btn{position:absolute;z-index:3;display:inline-flex;align-items:center;justify-content:center;border:2px solid #fff;background:rgba(17,54,109,.82);color:#fff;cursor:pointer;transition:background-color .2s ease}
.home-gallery__btn:hover,.home-gallery__btn:focus-visible{background: #005a9c; background:var(--color-action-default);outline:none}
.home-gallery__btn--prev,.home-gallery__btn--next{top:50%;width:46px;height:46px;padding:0;border-radius:50%;transform:translateY(-50%)}
.home-gallery__btn--prev{left:14px}
.home-gallery__btn--next{right:14px}
.home-gallery__btn--prev .icon,.home-gallery__btn--next .icon{width:24px;height:24px;fill:#fff}
.home-gallery__btn--play{top:14px;right:14px;border-radius:20px;padding:.25rem .9rem;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
@media (max-width:768px){.home-gallery__viewport{height:280px}}
@media (prefers-reduced-motion:reduce){.home-gallery__slide{transition:none}}

/* ===== Schede istituzionali (Chi siamo) ===== */
.org-card-panel{background-color: #f8fafc; background-color:var(--color-neutral-background);min-height:150px}
.org-logo{max-width:100%;max-height:104px;width:auto;height:auto;display:block}

/* ==========================================================================
 * WCAG 2.1 AAA - Miglioramenti di accessibilità
 * ========================================================================== */

/* --- 1.4.6 Contrasto rinforzato del testo (rapporto minimo 7:1) --- */
:root{--color-neutral-gray:#475569}
#main a:not(.btn){color:#004c80}
.text-primary{color:#11366D !important}
.text-secondary{color:#475569 !important}
.figure-caption{color:#475569}
.btn-primary{--bs-btn-bg:#11366D;--bs-btn-border-color:#11366D;--bs-btn-hover-bg:#0c2a55;--bs-btn-hover-border-color:#0c2a55;--bs-btn-active-bg:#0c2a55;--bs-btn-active-border-color:#0c2a55}
.btn-outline-primary{--bs-btn-color:#11366D;--bs-btn-border-color:#11366D;--bs-btn-hover-color:#ffffff;--bs-btn-hover-bg:#11366D;--bs-btn-hover-border-color:#11366D;--bs-btn-active-color:#ffffff;--bs-btn-active-bg:#11366D;--bs-btn-active-border-color:#11366D}
.badge.text-bg-primary{background-color:#11366D !important}

/* --- 1.4.8 Presentazione visiva: larghezza del blocco di testo <= 80 caratteri --- */
.editorial-content p,.editorial-content li,.lead,p.fs-5{max-width:78ch}

/* --- 2.5.5 Dimensione minima dei target di puntamento (44x44 px) --- */
.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.btn-xs,.btn-icon,.navbar-toggler,.close-menu,.lang-selector .btn-group .btn,.home-gallery__btn,.dropdown-toggle.btn{min-width:44px;min-height:44px}
.it-header-navbar-wrapper .nav-link{min-height:44px;display:inline-flex;align-items:center}
.link-list .dropdown-item{min-height:44px;display:flex;align-items:center}

/* --- Intestazione su mobile: il marchio deve lasciare spazio all'hamburger ---
   Bootstrap Italia sovrappone .it-header-navbar-wrapper all'intestazione centrale
   sotto i 992px e riserva al marchio 32px di padding-left. La regola dei bersagli
   di tocco 44x44 (riga sopra) porta pero' .navbar-toggler a 58px di larghezza:
   il pulsante finiva sopra il logo OGS per 26x32 px, misurati a 375px di viewport.
   Qui si riserva lo spazio effettivamente occupato dal pulsante, piu' 6px di stacco. */
@media (max-width: 991.98px) {
  /* Stessa specificita' della regola di Bootstrap Italia
     (.it-header-wrapper .it-nav-wrapper .it-brand-wrapper, 0-3-0): vince per ordine
     di cascata perche' styles.css e' caricato dopo bootstrap-italia.min.css. */
  .it-header-wrapper .it-nav-wrapper .it-brand-wrapper { padding-left: 64px; }
}

/* --- Stringhe lunghe non spezzabili (URL, DOI) sui piccoli schermi ---
   Misurato il 2026-08-21: pages/riferimenti-bibliografici.html rendeva il documento
   largo 513px dentro una finestra di 320px, per un URL di 68 caratteri stampato come
   testo. «break-word» spezza solo quando la parola da sola non entra nella riga:
   il testo normale resta intatto. */
main p, main li, main dd, main dt, main td, main th, main figcaption,
.list-item-description, .list-item-title { overflow-wrap: break-word; }

/* --- Dimensione minima dei bersagli di tocco (WCAG 2.5.8) ---
   Misurato: .read-more 23.8px e .footer-custom-link 23.1px di altezza, appena sotto
   i 24px richiesti. Si agisce sulla sola altezza minima, senza toccare il testo. */
.read-more, .footer-custom-link { min-height: 24px; display: inline-flex; align-items: center; }

/* --- Icona del pulsante burger: contrasto ---
   Misurato il 2026-08-21: il markup usa <svg class="icon bg-override"> su tutte e 210 le pagine,
   ma «bg-override» non e' definita ne' da Bootstrap Italia ne' qui. L'icona ereditava quindi
   fill nero su sfondo blu rgb(17,54,109), con rapporto 1.77:1 — sotto il 3:1 richiesto da
   WCAG 1.4.11 per gli elementi non testuali. Si dipinge di bianco, come le altre icone
   dell'intestazione. */
.it-header-wrapper .navbar-toggler .icon,
.it-header-wrapper .navbar-toggler .icon.bg-override { fill: #ffffff; }

/* --- Freccia dei sottomenu: stesso difetto del burger, misurato il 2026-08-22 sul rendering ---
   Le 630 frecce <svg class="icon icon-xs bg-override"><use href="#it-expand"> dei pulsanti
   .dropdown-toggle ereditavano fill nero su rgb(17,54,109): 1.77:1, contro il 3:1 richiesto da
   WCAG 1.4.11 per gli elementi non testuali. La regola qui sopra copriva solo il burger, che
   vive sotto i 992px; queste frecce sono la vista predefinita da scrivania e restavano nere.
   Controllo positivo della misura: il testo del menu, bianco sullo stesso fondo, da' 11.85:1. */
.it-header-wrapper .dropdown-toggle .icon,
.it-header-wrapper .dropdown-toggle .icon.bg-override,
.it-header-wrapper .nav-item.dropdown .btn .icon { fill: #ffffff; }

/* --- Sottomenu sotto i 992px: il menu va a capo e prende tutta la riga ---
   Il 2026-08-22 il <div class="dropdown-menu"> e' stato spostato DENTRO il contenitore
   .d-inline-flex del pulsante, perche' e' li' che Bootstrap lo cerca
   (this._menu = next(button) || prev(button) || findOne(dentro il genitore del button)):
   prima stava fuori e nessuno dei tre sottomenu si apriva, su 210 pagine su 210.
   Sotto i 992px, pero', Bootstrap Italia rende .dropdown-menu con position:static, cosi'
   il menu finiva a scorrere DENTRO la riga flex, largo 386px su uno schermo da 375 e
   sporgente fino a 247px fuori dallo schermo, con le voci irraggiungibili.
   Misurato prima: right 622 su viewport 375. Dopo: right 327, tutte le voci dentro. */
@media (max-width: 991.98px) {
  .it-header-wrapper .nav-item.dropdown > .d-inline-flex { flex-wrap: wrap; width: 100%; }
  .it-header-wrapper .nav-item.dropdown > .d-inline-flex > .dropdown-menu {
    width: 100%; flex: 0 0 100%; min-width: 0;
  }
}
@media (max-width: 991.98px) {
  /* la voce lascia posto al pulsante da 44px: la freccia non va a capo da sola */
  .it-header-wrapper .nav-item.dropdown > .d-inline-flex > .nav-link { min-width: 0; max-width: calc(100% - 44px); }
}

/* --- Paragrafo introduttivo: centrato sul desktop, allineato a sinistra sul mobile ---
   La regola «.lead { text-align: center; max-width: 800px }» (riga 216) e' una scelta
   editoriale del sito e resta: entro gli 800px il testo occupa due o tre righe e il centraggio
   funziona. Misurato il 2026-08-21 a 375px di viewport: lo stesso paragrafo diventa di sette
   righe, e il testo centrato lungo e' faticoso da leggere perche' ogni riga comincia in un punto
   diverso. Sotto la soglia dei 768px si torna quindi all'allineamento a sinistra, senza toccare
   la resa su schermi grandi. */
@media (max-width: 767.98px) {
  .lead { text-align: left; }
}







/* --- Menu principale: voci perfettamente equidistanti su desktop --- */
@media (min-width:992px){
  .it-header-navbar-wrapper .menu-wrapper .navbar-nav{flex:1 1 auto;justify-content:space-between !important;align-items:center}
  /* Geometria identica per ogni voce: 16px di spazio a sinistra del testo e
     16px a destra. Nelle voci con sottomenu i 16px di destra sono occupati dal
     pulsante chevron, percio' la distanza testo-testo resta identica ovunque.
     L'!important serve a vincere la regola padding:13px 24px di Bootstrap Italia. */
  .it-header-navbar-wrapper .navbar-nav .nav-link{padding-left:1rem !important;padding-right:1rem !important}
  .it-header-navbar-wrapper .navbar-nav .nav-item.dropdown .nav-link{padding-right:0 !important}
  .it-header-navbar-wrapper .navbar-nav .nav-item.dropdown .dropdown-toggle.btn{width:1rem;min-width:1rem;height:44px;min-height:44px;padding:0;margin:0;display:flex;align-items:center;justify-content:flex-end;position:relative}
  .it-header-navbar-wrapper .dropdown-toggle .icon.icon-xs{width:12px;height:12px}
  /* Area cliccabile del chevron estesa a 44x44 (WCAG 2.5.5) senza incidere
     sul layout: si estende solo verso destra e in verticale, mai sul testo. */
  .it-header-navbar-wrapper .navbar-nav .nav-item.dropdown .dropdown-toggle.btn::before{content:"";position:absolute;top:50%;left:0;transform:translateY(-50%);width:44px;height:44px}
}

/* --- Header slim: rimossa la dicitura istituzionale, selettore lingua a destra ---
   margin-left:auto spinge il selettore lingua a destra anche con il
   justify-content:space-between imposto da Bootstrap Italia. */
.it-header-slim-wrapper-content .it-header-slim-wrapper-right{margin-left:auto}

/* --- Sprite SVG incorporato: contenitore non renderizzato (nessun ingombro).
   I simboli restano referenziabili da <use href="#id">. --- */
.bi-sprite-inline{display:none}

/* --- .link-list-content: la classe usata dal markup non esisteva ---
   Misurato il 2026-08-22 sul rendering: 30 voci di elenco documenti in 8 pagine di Cornegliano
   usano <div class="link-list-content"> dentro l'ancora, ma la classe non e' definita ne' da
   Bootstrap Italia ne' qui. Il <div> restava di livello blocco: l'icona del tipo file finiva su
   una riga e titolo+descrizione sulla successiva. Misura: icona a 603px, testo a 635px, voce
   alta 159px. Con la regola di base scendono sulla stessa riga (differenza 0) e la voce passa a
   125px; con :has() il contenitore diventa flex e la voce scende a 91px.
   La regola di base non richiede :has() e vale ovunque; il raffinamento e' progressivo. */
.link-list-content { display: inline-block; vertical-align: top; width: calc(100% - 2.5rem); min-width: 0; }
.link-list-wrapper ul li a.list-item > svg.icon.left { vertical-align: top; }

@supports selector(a:has(> div)) {
  .link-list-wrapper ul li a.list-item:has(> .link-list-content) {
    display: flex; align-items: flex-start; gap: .5rem;
  }
  .link-list-wrapper ul li a.list-item:has(> .link-list-content) > .link-list-content {
    flex: 1 1 auto; width: auto;
  }
}

/* ============================================================================
 * Portato da rete-collalto/css/styles.css il 2026-09-22 (uniformazione della
 * pagina download-token). Skip link visibile al fuoco e briciole di pane:
 * righe 758-782 di Collalto, blocco «Affinamenti UI v2». Il resto di quel
 * blocco NON e' stato portato: cambia l'aspetto di tutto il sito.
 * ============================================================================ */
/* --- Skip link reso visibile su focus (WCAG 2.4.1 Bypass Blocks)
   Il pattern Bootstrap Italia "visually-hidden-focusable" porta il link
   in scena solo durante la navigazione da tastiera. Aggiungiamo styling
   accessibile e ben visibile quando ottiene il focus. --- */
.skiplinks{position:absolute;top:0;left:0;z-index:10000;width:100%}
.skiplinks .visually-hidden-focusable:focus,
.skiplinks .visually-hidden-focusable:focus-visible{
  position:fixed;top:0.5rem;left:0.5rem;width:auto;height:auto;
  padding:0.75rem 1.5rem;background: #11366D; background:var(--color-brand-primary,#11366D);
  color:#fff;text-decoration:underline;font-weight:700;
  border:3px solid #fff;border-radius:0.25rem;
  box-shadow:0 0 0 4px var(--color-brand-primary,#11366D),0 4px 12px rgba(0,0,0,0.3);
  z-index:10001;font-size:1rem;line-height:1.4;
}

/* --- Breadcrumb micro-affinamenti (separatore visivo coerente) --- */
.breadcrumb-container .breadcrumb{padding:0;background:transparent;margin-bottom:0;flex-wrap:wrap}
.breadcrumb-container .breadcrumb-item{display:inline-flex;align-items:center;font-size:0.875rem}
.breadcrumb-container .breadcrumb-item .separator{
  color: #6B7280; color:var(--color-text-muted,#6B7280);margin:0 0.5rem;font-weight:400;
}
.breadcrumb-container .breadcrumb-item a{color: #005a9c; color:var(--color-action-default,#005a9c);text-decoration:none}
.breadcrumb-container .breadcrumb-item a:hover,
.breadcrumb-container .breadcrumb-item a:focus{text-decoration:underline}
.breadcrumb-container .breadcrumb-item.active{color: #1F2937; color:var(--color-text-primary,#1F2937);font-weight:600}
/* ============================================================================
 * Aggiunta del 2026-08-31 — stili mancanti per pages/download-token.html
 *
 * Perche': quella pagina usa le classi .cmd-box, .copy-btn, .copy-btn-wrapper,
 * .custom-fieldset e .custom-legend, che in questo foglio non erano definite
 * (verificato: 0 occorrenze qui, presenti in bootstrap-italia/css/styles.css
 * del sito San Potito). Le scatole dei comandi e i pulsanti "Copia" venivano
 * quindi resi senza alcuno stile.
 *
 * Regole portate alla lettera da bootstrap-italia/css/styles.css.
 * NON e' stata riportata la regola globale su h1..h6: questo foglio la ha gia'
 * identica alla riga 187, e riscriverla toccherebbe tutte le 127 pagine del sito.
 * Di quella regola serve solo l'estensione a .custom-legend, qui sotto.
 * ============================================================================ */

:root {
  --color-bg-component: #f8fbff;
  --color-bg-code: #1e293b;
  --color-text-code: #e2e8f0;
}

/* estensione della tipografia dei titoli alla sola .custom-legend */
.custom-legend {
  font-family: var(--bs-heading-font-family);
  color: #11366D; color: var(--color-brand-primary);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  background-color: #f8fbff; background-color: var(--color-bg-component);
  padding: 0 var(--space-1x);
  margin-left: var(--space-1x);
}

.custom-fieldset {
  background-color: #f8fbff; background-color: var(--color-bg-component);
  border: 2px solid #e1e5eb; border: var(--border-width-md) solid var(--color-neutral-border-light);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5x);
  padding: clamp(var(--space-2x), 4vw, var(--space-3x));
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.custom-fieldset:focus-within {
  border-color: #005a9c; border-color: var(--color-action-default);
  box-shadow: 0 0 0 3px rgba(0, 90, 156, 0.1);
}

.cmd-box {
  background-color: #1e293b; background-color: var(--color-bg-code);
  border: 2px solid #005a9c; border: var(--border-width-md) solid var(--color-action-default);
  border-radius: var(--radius-md);
  color: #e2e8f0; color: var(--color-text-code);
  font-family: var(--bs-font-monospace);
  font-size: var(--font-small);
  margin: var(--space-2x) 0;
  padding: clamp(var(--space-1x), 3vw, var(--space-2x));
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}

.cmd-box::before {
  content: "\00BB";
  color: #18b3dd; color: var(--color-brand-secondary);
  margin-right: var(--space-1x);
  font-weight: bold;
}

.copy-btn-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-2x);
  flex-wrap: wrap;
  margin-bottom: var(--space-1x);
}

.copy-btn {
  background-color: #005a9c; background-color: var(--color-action-default);
  border: none;
  border-radius: var(--radius-sm);
  color: #ffffff; color: var(--color-neutral-light);
  cursor: pointer;
  padding: var(--space-1x) var(--space-3x);
  font-size: var(--font-small);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1x);
  transition: background-color 0.2s ease;
  width: fit-content;
}

.copy-btn:hover, .copy-btn:focus-visible {
  background-color: #194680; background-color: var(--color-action-hover);
  color: #ffffff; color: var(--color-neutral-light);
}

.copy-btn:active {
  background-color: #0D2952; background-color: var(--color-action-active);
}

@media (max-width: 767.98px) {
  .copy-btn-wrapper { flex-direction: column; align-items: stretch; }
  .copy-btn { width: 100%; justify-content: center; }
}

@media (prefers-contrast: high) {
  .custom-fieldset, .cmd-box { border: 2px solid #000000 !important; }
}

@media print {
  .copy-btn { display: none !important; }
  .custom-fieldset { border: 1px solid #000 !important; box-shadow: none !important; page-break-inside: avoid; }
}

/* ----------------------------------------------------------------------------
 * Aggiunta del 2026-08-31 — il <code> dentro i titoli non deve rimpicciolirsi.
 * Bootstrap Italia impone "code { font-size: 0.875rem }" in misura ASSOLUTA:
 * dentro un h1 da clamp(1.4rem, 5vw, 2.2rem) il codice della rete (<code>OL</code>)
 * restava inchiodato a 14 px, molto piu piccolo del titolo che lo contiene.
 * Qui gli si fa ereditare dimensione, peso e colore, mantenendo il monospazio.
 * -------------------------------------------------------------------------- */
h1 code, h2 code, h3 code, .it-title code {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  letter-spacing: 0;
}

/* ============================================================================
 * Correzioni di accessibilità del 2026-09-22 (audit AgID / WCAG 2.1 AA)
 * ============================================================================ */

/* Reflow a 320 px (WCAG 1.4.10): il nowrap delle etichette dei pulsanti con icona
   faceva scorrere in orizzontale le pagine dei sismogrammi (349 px su 320). */
.btn.btn-icon { max-width: 100%; }
@media (max-width: 575.98px) {
  .btn.btn-icon span:not(.visually-hidden) { white-space: normal; line-height: 1.25; }
}

/* Il comando generato deve andare a capo (WCAG 1.4.10): il pre-wrap di .cmd-box
   stava sul contenitore, ma il testo è nel <pre>, che ha white-space:pre di suo.
   Il testo copiato non cambia: il pulsante copia textContent. */
.cmd-box pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
}

/* Focus visibile su ITA/ENG (WCAG 2.4.7): l'anello di Bootstrap Italia è un
   box-shadow esterno, e l'overflow:hidden del gruppo lo tagliava su tre lati. */
.lang-selector .btn-group .btn:focus:not([data-focus-mouse=true]) {
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 5px #000 !important;
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* Menu riordinato il 2026-09-22: l'ultima voce apre il sottomenu verso sinistra,
   altrimenti fra 992 e 1100 px circa esce dallo schermo. */
@media (min-width: 992px) {
  .it-header-navbar-wrapper .navbar .dropdown-menu.dropdown-menu-end { left: auto; right: 0; }
}

/* Card della home (2026-09-23): il collegamento «Approfondisci» resta dentro il margine interno
   anche quando va a capo; Bootstrap Italia lo posiziona in assoluto con right:0. */
.card .card-body .read-more { right: 24px; }

/* Voci dei sottomenu (2026-09-24): dopo il riallineamento ai titoli del vecchio sito alcune voci arrivano a
   85 caratteri («Presentazioni e video dell'incontro del 28/11/2012 alla Casa degli Alpini …»). Bootstrap Italia
   le tiene su una riga (white-space: nowrap): a 320 px la voce veniva tagliata (WCAG 1.4.10) e da scrivania il
   sottomenu arrivava a 713 px. Si va a capo, e da scrivania il sottomenu ha una larghezza massima. */
.it-header-wrapper .dropdown-menu .dropdown-item,
.it-header-wrapper .dropdown-menu .dropdown-item span { white-space: normal; }
@media (min-width: 992px) {
  .it-header-wrapper .dropdown-menu { max-width: 26rem; }
}

/* ============================================================================
 * Leggibilità per i validatori automatici (v5.2, 24/09/2026)
 * MAUVE++ 4.0.2 (CNR-ISTI) non risolve var(), non valuta :not() né box-shadow.
 * Nessuna di queste regole cambia i colori; la sottolineatura sì, di proposito.
 * ============================================================================ */
/* Bootstrap Italia: color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important = bianco */
.text-white { color: #fff !important; }
/* 1.4.1: i collegamenti con aspetto di pulsante nel contenuto si riconoscono anche senza colore */
main a.btn { text-decoration: underline; text-underline-offset: 0.2em; }
/* 2.4.7 e 1.4.11: indicatore di fuoco dichiarato con la geometria dell'anello di Bootstrap Italia
   (2 px bianchi + 3 px neri); nel browser, da tastiera, resta l'anello di Bootstrap Italia. */
.accordion-button:focus { outline: 3px solid #000; outline-offset: 2px; }
/* 1.4.3: il testo dell'intestazione è già bianco per la regola con :not() più sopra («Enforce white color»);
   qui lo stesso bianco con selettori semplici, perché MAUVE++ scarta le regole con :not(). */
.it-header-slim-wrapper .navbar-brand, .it-header-slim-wrapper .navbar-brand abbr, .it-header-slim-wrapper .navbar-brand span,
.it-header-center-wrapper .it-brand-text, .it-header-center-wrapper .it-brand-text span,
.it-header-navbar-wrapper .navbar-nav .nav-link, .it-header-navbar-wrapper .navbar-nav .nav-link span { color: #ffffff; }
/* 2.4.7: briciole di pane, indicatore di fuoco dichiarato con la geometria dell'anello di Bootstrap Italia */
.breadcrumb-container .breadcrumb-item a:focus { outline: 3px solid #000; outline-offset: 2px; }
/* 2.4.7: voci dei sottomenu dell'intestazione. Bootstrap Italia ha .dropdown-item:focus con sfondo trasparente,
   che MAUVE++ legge come indicatore tolto; outline dichiarato, interno alla voce. Nel browser resta l'anello. */
.it-header-wrapper .dropdown-menu .dropdown-item:focus { outline: 3px solid #000; outline-offset: -3px; }
/* 1.4.3: etichetta «PDF» dei comunicati. Bootstrap Italia: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)) !important;
   qui lo stesso colore letterale (misurato nel browser: rgb(204, 51, 77), bianco sopra 5,06:1). */
.bg-danger { background-color: #cc334d !important; }
/* 1.4.11 e 2.4.7: pulsante del menu a scomparsa (sotto i 992 px). Bootstrap Italia ha .navbar-toggler:focus con outline 0;
   outline bianco dichiarato sull'intestazione #11366D. Nel browser, da tastiera, resta l'anello di Bootstrap Italia. */
.it-header-navbar-wrapper .navbar-toggler:focus { outline: 3px solid #fff; outline-offset: 2px; }
/* Comandi delle pagine token: <code class="cmd-testo"> al posto di <pre> (MAUVE++ C8), stessa resa del <pre> */
.cmd-box .cmd-testo { display: block; white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto; margin: 0; color: inherit; font-size: 1rem; }
/* Ricerca nel sito (v5.8). 2.4.7: outline bianco dichiarato al fuoco sul blu dell'intestazione, per MAUVE++ che non legge il
   box-shadow. Nel browser, da tastiera, resta l'anello di Bootstrap Italia (bianco 2 px e nero 3 px, !important). */
.it-header-center-wrapper .it-header-center-content-wrapper .it-search-wrapper span { color: #fff; }
.it-header-center-wrapper .it-header-center-content-wrapper .it-search-wrapper a.rounded-icon:focus { outline: 3px solid #fff; outline-offset: 2px; }
/* Spazi della ricerca nell'intestazione: Bootstrap Italia mette 40 px (da 768) e 80 px (da 992) prima della ricerca e 16 px fra etichetta
   e cerchio; qui a destra c'è già il nome del Centro, con 24 px di margine. L'etichetta «Cerca» si vede da 1400 px (d-xxl-block). */
@media (min-width: 768px) { .it-header-center-wrapper .it-header-center-content-wrapper .it-search-wrapper { margin-left: 24px; } }
@media (min-width: 992px) {
  .it-header-center-wrapper .it-header-center-content-wrapper .it-search-wrapper { margin-left: 0; }
  .it-header-center-wrapper .it-header-center-content-wrapper .it-search-wrapper a.rounded-icon { margin-left: 0; }
}
@media (min-width: 1400px) { .it-header-center-wrapper .it-header-center-content-wrapper .it-search-wrapper a.rounded-icon { margin-left: 16px; } }
/* La zona destra non si restringe: «Centro di Ricerche Sismologiche» resta su due righe, come nella v5.7 da 1200 px */
.it-header-center-wrapper .it-header-center-content-wrapper .it-right-zone { flex-shrink: 0; }
/* Pagina di ricerca: parole trovate evidenziate, testo #1A1A1A su #FFF3A3 */
.risultati-ricerca mark { background-color: #fff3a3; color: #1a1a1a; padding: 0; }