/* ==========================================================================
   TEMA IISS "Giudici Saetta e Livatino" — navy dominante + accento oro
   Caricato per ULTIMO (dopo bootstrap-italia, site.css, custom.css).
   Rimappa il colore primario di Bootstrap Italia (blu #0066CC) su navy #06305f
   e introduce l'oro SOLO come accento. Conforme WCAG 2.1 AA:
   - navy: contrasti elevati ovunque (testo bianco su navy 13:1)
   - oro brillante #c9a84c: solo sfondo/accento con testo navy (5,8:1) o decorativo
   - oro scuro #8a6d1f: unico oro ammesso come testo su bianco (4,9:1)
   ========================================================================== */

:root {
  /* --- Palette istituzionale (token unici, riusabili) --- */
  --navy: #06305f;
  --navy-600: #0a4a91;   /* navy chiaro: gradienti/accenti */
  --navy-800: #04213f;   /* navy scuro: hover pulsanti */
  --navy-900: #031a33;   /* navy profondo: active */
  --gold: #c9a84c;       /* oro brillante: SOLO sfondo/accento (testo navy sopra) */
  --gold-600: #b8933a;   /* oro medio: hover accenti */
  --gold-ink: #8a6d1f;   /* oro scuro: unico ammesso come TESTO su bianco (AA 4,9:1) */

  /* --- Override token Bootstrap Italia: primario → navy --- */
  --bs-primary: #06305f;
  --bs-primary-rgb: 6, 48, 95;
  --bs-link-color: #06305f;
  --bs-link-color-rgb: 6, 48, 95;
  --bs-link-hover-color: #04213f;
  --bs-link-hover-color-rgb: 4, 33, 63;

  /* Corpo del testo: dark navy-charcoal (leggibilità 15:1, tono coerente col navy) */
  --bs-body-color: #1b2432;
  --bs-body-color-rgb: 27, 36, 50;
}

/* ==========================================================================
   NAVY sui componenti Bootstrap Italia che erano blu
   ========================================================================== */

/* Header: barra ministero (più profonda) + fascia centrale + navbar */
.it-header-slim-wrapper { background: var(--navy-800); }
.it-header-center-wrapper { background: var(--navy); }
.it-header-navbar-wrapper,
.navbar { background: var(--navy); }
.it-header-navbar-wrapper.theme-dark-mobile .navbar .navbar-collapsable .menu-wrapper,
.navbar.theme-dark-mobile .navbar-collapsable .menu-wrapper { background: var(--navy); }

/* Pulsanti primari */
.btn-primary {
  --bs-btn-bg: var(--navy); --bs-btn-border-color: var(--navy);
  --bs-btn-hover-bg: var(--navy-800); --bs-btn-hover-border-color: var(--navy-800);
  --bs-btn-active-bg: var(--navy-900); --bs-btn-active-border-color: var(--navy-900);
  --bs-btn-disabled-bg: var(--navy); --bs-btn-disabled-border-color: var(--navy);
  --bs-btn-focus-shadow-rgb: 6, 48, 95;
}
.btn-outline-primary {
  --bs-btn-color: var(--navy); --bs-btn-border-color: var(--navy);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--navy); --bs-btn-hover-border-color: var(--navy);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--navy); --bs-btn-active-border-color: var(--navy);
  --bs-btn-disabled-color: var(--navy); --bs-btn-disabled-border-color: var(--navy);
  --bs-btn-focus-shadow-rgb: 6, 48, 95;
}

/* Focus dei campi form */
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: #6b7f99;
  box-shadow: 0 0 0 .25rem rgba(6, 48, 95, .25);
}
.form-check-input:checked { background-color: var(--navy); border-color: var(--navy); }

/* Paginazione (elenchi notizie/circolari): pagina attiva navy + testo bianco (13:1) */
.pagination .page-item.active .page-link,
.pagination .page-item.active > .page-link,
.page-item.active > .page-link {
  background-color: var(--navy) !important;
  border-color: var(--navy) !important;
  color: #fff !important;
}
.page-link { --bs-pagination-hover-color: var(--navy-800); --bs-pagination-focus-shadow-rgb: 6, 48, 95; }

/* ==========================================================================
   COLORE DEL TESTO — coerenza cromatica (titoli, voci menu, panoramica)
   ========================================================================== */

/* Titoli: navy (prima ereditavano il nero del corpo).
   Header (.school-title) e footer (.it-footer h4) restano bianchi grazie a
   regole già presenti con specificità maggiore; il banner cookie e la CTA
   usano <strong>/<p>, quindi non sono toccati. */
h1, h2, h3, h4, h5, h6 { color: var(--navy); }

/* Voci di 1° livello della navbar.
   Desktop: navbar a fondo navy → testo bianco.
   Mobile: il menu a tendina è a fondo bianco → testo navy (BI lo forza a blu #06c). */
@media (min-width: 992px) {
  .navbar .navbar-nav > .nav-item > .nav-link,
  .navbar .navbar-nav > .nav-item > .nav-link span,
  .navbar .navbar-nav > .nav-item > .nav-link:hover,
  .navbar .navbar-nav > .nav-item > .nav-link:hover span,
  .navbar .navbar-nav > .nav-item > .nav-link:focus-visible,
  .navbar .navbar-nav > .nav-item.active > .nav-link { color: #fff; }
}
@media (max-width: 991.98px) {
  .navbar .navbar-collapsable .navbar-nav li a.nav-link,
  .navbar .navbar-collapsable .navbar-nav li a.nav-link span,
  .navbar .navbar-collapsable .navbar-nav li button.nav-link { color: var(--navy) !important; }

  /* Apertura del sottomenu di 1° livello anche al passaggio del mouse
     (oltre al tap, già gestito da Bootstrap Italia) */
  .navbar .navbar-collapsable .nav-item.dropdown:hover > .dropdown-menu,
  .navbar .navbar-collapsable .nav-item.dropdown:focus-within > .dropdown-menu { display: block; }
}

/* Voci delle pagine di panoramica e link-list di contenuto: navy (prima grigio/nero).
   BI colora di blu (#06c) lo <span> interno con ".link-list-wrapper ul li a span":
   qui si sovrascrive lo span (anche in hover/focus). Il footer resta bianco perché
   ".it-footer .link-list .list-item span" ha specificità maggiore. */
.link-list .list-item { color: var(--navy); }
.link-list-wrapper ul li a.list-item span,
.link-list-wrapper ul li a.list-item:hover span,
.link-list-wrapper ul li a.list-item:focus span { color: var(--navy); }

/* Voci dei menu a tendina e dei sottomenu: navy. Bootstrap Italia le rende blu
   (#06c) con regole molto specifiche sullo <span> interno: qui serve forzarle,
   ma solo nello scope del navbar (footer e contenuto non sono toccati). */
.navbar .dropdown-menu .link-list a.list-item,
.navbar .dropdown-menu .link-list a.list-item span,
.navbar .dropdown-menu .link-list a.list-item strong,
.submenu a.list-item,
.submenu a.list-item span { color: var(--navy) !important; }
/* Voce attiva del menu: navy invece del blu BI */
.link-list a.list-item.active,
.navbar .dropdown-menu .link-list a.list-item.active,
.navbar .dropdown-menu .link-list a.list-item.active span { color: var(--navy) !important; border-bottom-color: var(--navy); }

/* ==========================================================================
   ACCENTO ORO (parsimonioso, decorativo o su fondo con testo navy)
   ========================================================================== */

/* Filetto oro sotto i titoli di sezione */
.section-title::after {
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-600) 100%);
}

/* Filetto oro sotto gli H2 di contenuto delle pagine interne.
   Il selettore "> h2" prende solo i titoli di primo livello del contenuto:
   esclude i titoli delle card e dei libri (annidati) e l'H1 di pagina.
   Il testo resta navy (leggibile, AA); l'oro è solo accento decorativo. */
.it-page-section > h2,
.bacheca-archivio > h2 {
  position: relative;
  padding-bottom: .45rem;
  margin-top: 2.25rem;
}
.it-page-section > h2:first-child,
.bacheca-archivio > h2:first-child { margin-top: 0; }
.it-page-section > h2::after,
.bacheca-archivio > h2::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 2.75rem; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-600) 100%);
}
html.a11y-contrast .it-page-section > h2::after,
html.a11y-contrast .bacheca-archivio > h2::after { background: #000; }

/* Titoli-indirizzo dei libri di testo: stesso filetto oro (al posto della riga grigia) */
.libritesto-title { border-bottom: 0; position: relative; }
.libritesto-title::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 2.75rem; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-600) 100%);
}
html.a11y-contrast .libritesto-title::after { background: #000; }

/* --- Card della home: uniformi, cliccabili, bordo/accento dinamico NAVY ---
   Vale per Servizi online, Notizie, Eventi, Circolari, Progetti e Collegamenti.
   L'accento superiore resta navy (definito in site.css); l'hover intensifica il
   bordo in navy. Tutte le card mostrano il cursore a mano e sono cliccabili
   (stretched-link nel markup). */
.card-teaser, .card-teaser-image, .link-card-img { cursor: pointer; }

.card-teaser:hover, .card-teaser:focus-within,
.card-teaser-image:hover, .card-teaser-image:focus-within,
.link-card-img:hover, .link-card-img:focus-within { border-color: var(--navy); }

/* Progetti/Collegamenti (.link-card-img): stessa cornice + accento superiore navy
   dinamico delle altre card (prima ne era privo). */
.link-card-img {
  position: relative;
  border: 1px solid #e6ebf2;
  border-radius: .6rem;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.link-card-img::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 3;
  background: linear-gradient(90deg, var(--navy) 0%, var(--navy-600) 100%);
  transform: scaleX(0); transform-origin: left center; transition: transform .25s ease;
}
.link-card-img:hover::before, .link-card-img:focus-within::before { transform: scaleX(1); }
html.a11y-motion .link-card-img::before { transition: none !important; }

/* Filetto oro di raccordo: sotto la navbar e in cima al footer */
.it-header-navbar-wrapper { box-shadow: inset 0 -3px 0 var(--gold); }
.it-footer { border-top: 4px solid var(--gold); }

/* Link nel corpo pagina: sottolineatura che vira all'oro su hover (colore testo resta navy = AA) */
.it-page-section a:not(.btn):hover,
.it-page-section a:not(.btn):focus-visible,
article .it-page-section a:not(.btn):hover { text-decoration-color: var(--gold); }

/* Badge oro riutilizzabile (sfondo oro + testo navy = 5,8:1) */
.badge.bg-gold, .badge.badge-gold { background-color: var(--gold) !important; color: var(--navy) !important; }

/* Utility di testo oro accessibile (oro scuro su bianco = 4,9:1) */
.text-gold { color: var(--gold-ink) !important; }

/* ==========================================================================
   Contrasto elevato (pannello accessibilità): l'oro decorativo cede al nero/bianco
   ========================================================================== */
html.a11y-contrast .section-title::after,
html.a11y-contrast .card-teaser::before,
html.a11y-contrast .card-teaser-image::before,
html.a11y-contrast .link-card-img::before { background: #000; }
html.a11y-contrast .it-footer { border-top-color: #fff; }
html.a11y-contrast .it-header-navbar-wrapper { box-shadow: inset 0 -3px 0 #fff; }
html.a11y-contrast .card-teaser:hover, html.a11y-contrast .card-teaser:focus-within,
html.a11y-contrast .card-teaser-image:hover, html.a11y-contrast .card-teaser-image:focus-within,
html.a11y-contrast .link-card-img:hover, html.a11y-contrast .link-card-img:focus-within { border-color: #000; }

/* ==========================================================================
   CONDIVIDI (notizie ed eventi) — partial share.html + js/share.js
   Pulsanti a pillola: icona nel colore del social, al passaggio si riempiono.
   Tinte di hover scurite per il testo bianco (contrasto AA ≥ 4,5:1).
   ========================================================================== */
.sl-share { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; margin: 2rem 0 1rem; padding-top: 1.1rem; border-top: 1px dashed rgba(201, 168, 76, .7); }
.sl-share-lbl { font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); }
/* border-color: Bootstrap Italia forza «border-color: inherit» sui pulsanti vicini a quello cliccato col mouse */
.sl-share-btns { display: flex; flex-wrap: wrap; gap: .5rem; border-color: rgba(6, 48, 95, .18); }
.sl-share .sh { --c: var(--navy); display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1rem .55rem .8rem; border-radius: 100px;
  font-size: .875rem; font-weight: 600; line-height: 1; color: var(--navy); background: #fff; border: 1px solid rgba(6, 48, 95, .18);
  cursor: pointer; text-decoration: none; transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.sl-share .sh svg { width: 18px; height: 18px; flex: none; color: var(--i, var(--c)); transition: color .25s ease; }
.sl-share .sh:hover, .sl-share .sh:focus-visible { transform: translateY(-2px); color: #fff; background: var(--c); border-color: var(--c); box-shadow: 0 8px 18px -8px var(--c); }
.sl-share .sh:hover svg, .sl-share .sh:focus-visible svg { color: #fff; }
.sl-share .sh-wa { --c: #0f7a40; --i: #1faa55; }
.sl-share .sh-fb { --c: #1462c9; --i: #1877f2; }
.sl-share .sh-ig { --c: #b5307a; --i: #d62976; }
.sl-share .sh-link { --c: var(--gold-ink); }
.sl-share .sh.done { --c: #2e7d5b; color: #fff; background: #2e7d5b; border-color: #2e7d5b; }
.sl-share .sh.done svg { color: #fff; }
@media (max-width: 575.98px) {
  .sl-share { flex-direction: column; align-items: stretch; gap: .6rem; }
  .sl-share-btns { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .sl-share .sh { justify-content: center; padding: .75rem .8rem; }
}
.sl-toast { position: fixed; left: 50%; bottom: 1.5rem; z-index: 1200; max-width: calc(100% - 2rem); transform: translate(-50%, 1rem);
  padding: .7rem 1.1rem; border-radius: 10px; background: var(--navy); color: #fff; font-size: .9rem; font-weight: 600; text-align: center;
  box-shadow: 0 10px 30px -10px rgba(3, 26, 51, .6); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
.sl-toast.show { opacity: 1; transform: translate(-50%, 0); }
html.a11y-motion .sl-share .sh, html.a11y-motion .sl-toast { transition: none; }
html.a11y-motion .sl-share .sh:hover, html.a11y-motion .sl-share .sh:focus-visible { transform: none; }
html.a11y-contrast .sl-share .sh { color: #000; border-color: #000; }
html.a11y-contrast .sl-share .sh svg { color: #000; }
html.a11y-contrast .sl-share .sh:hover, html.a11y-contrast .sl-share .sh:focus-visible { background: #000; color: #fff; border-color: #000; }
html.a11y-contrast .sl-share .sh:hover svg, html.a11y-contrast .sl-share .sh:focus-visible svg { color: #fff; }
@media print { .sl-share, .sl-toast { display: none !important; } }