/*!
 * Tema OrdiniPA — Componenti Designers Italia (CSS statico)
 * ----------------------------------------------------------------------------
 * Questo file contiene gli stili per i componenti DI usati dai template
 * single-/archive-/front-page e dai template-parts/components/*.
 *
 * IMPORTANTE: è una copia "compilata a mano" delle regole presenti in
 * src/scss/_custom.scss (sezione "Componenti DI"). Caricandolo direttamente
 * il tema funziona anche senza eseguire `npm run build`. Se in futuro si
 * compila lo SCSS, il bundle build/index.css ha priorità (vedi Assets.php).
 * ----------------------------------------------------------------------------
 */

/*
 * Niente scroll orizzontale: previene asimmetrie visive su mobile causate
 * da elementi che sforano il viewport (icone con larghezza fissa, immagini
 * non responsive, blocchi Gutenberg legacy). Con `overflow-x: clip` il
 * contenuto eccedente è ritagliato senza creare scrollbar che spinga il
 * layout di lato.
 */
html, body {
  overflow-x: clip;
}

/*
 * Dropdown menu del navigation principale.
 *
 * Bootstrap Italia rende i sotto-menu come `.dropdown-menu` con sfondo
 * bianco e link in colore body. Quando il tema configura un colore
 * scuro per l'header (es. blu primary), il rischio è che `color`
 * generico erediti su questi link interni rendendoli illeggibili.
 * Queste regole forzano il contrasto corretto sui dropdown del menu
 * principale, indipendentemente dalle CSS variables custom del tema.
 */
.it-header-navbar-wrapper .dropdown-menu,
.it-header-center-wrapper .dropdown-menu {
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.12);
  padding: 0.5rem 0;
  min-width: 240px;
}
.it-header-navbar-wrapper .dropdown-menu a,
.it-header-navbar-wrapper .dropdown-menu .list-item,
.it-header-navbar-wrapper .link-list a,
.it-header-center-wrapper .dropdown-menu a {
  color: var(--bs-body-color, #1c2024);
  display: block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.it-header-navbar-wrapper .dropdown-menu a:hover,
.it-header-navbar-wrapper .dropdown-menu a:focus-visible,
.it-header-navbar-wrapper .link-list a:hover,
.it-header-navbar-wrapper .link-list a:focus-visible,
.it-header-center-wrapper .dropdown-menu a:hover,
.it-header-center-wrapper .dropdown-menu a:focus-visible {
  background-color: rgba(0, 102, 204, 0.06);
  color: var(--bs-primary, #0066cc);
  text-decoration: underline;
}

/*
 * Header sticky (impostazione "Tema OrdiniPA → Layout → Header fisso").
 * Solo la navbar resta in alto.
 *
 * Strategia: applichiamo `position: sticky` SOLO al
 * `.it-header-navbar-wrapper`, NON all'intero `<header>`. Lo slim e
 * il center con logo grande scrollano via naturalmente quando
 * l'utente scende nella pagina; quando la navbar tocca top:0 resta
 * lì come barra di navigazione persistente.
 *
 * Vantaggi rispetto al pattern precedente (sticky sull'header intero
 * + JS che cambiava altezza al volo):
 *  - Nessun cambio di altezza dell'elemento sticky → nessun reflow
 *    durante lo scroll → nessuno sfarfallio possibile per costruzione.
 *  - Nessun JS, nessuna classe `.is-stuck` da sincronizzare.
 *  - Nessuna soglia / isteresi: il browser nativamente rende sticky
 *    la navbar quando il suo top:0 è raggiunto.
 *  - Massimo spazio di lettura durante lo scroll: lo slim+center
 *    sono fuori viewport, resta solo la barra menu in alto.
 */
/* Sentinel: 1px tra il center e la navbar. NON ha rendering visibile;
   serve solo all'IntersectionObserver in `header.php` per capire se
   la navbar è "incollata" in cima alla pagina. */
.oicf-header-sentinel {
  height: 1px;
  margin: 0;
  padding: 0;
  pointer-events: none;
  visibility: hidden;
}

/* Sticky: la navbar resta in cima allo scroll, ma SENZA box-shadow
   di default. Solo quando il sentinel sopra di essa è scrollato fuori
   dal viewport, JS aggiunge `.oicf-header-stuck` e abilitiamo
   l'ombra: così il bordo non si vede MAI quando si è in cima alla
   pagina (es. homepage con hero blu). */
.oicf-header-sticky .it-header-navbar-wrapper {
  position: sticky;
  top: 0;
  z-index: 1030;
  transition: box-shadow .2s ease;
}
.oicf-header-sticky.oicf-header-stuck .it-header-navbar-wrapper {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/*
 * Fix menu mobile (offcanvas burger).
 *
 * Bootstrap Italia di default applica:
 *   .it-header-wrapper            { position: relative; z-index: 5 }
 *   .navbar .navbar-collapsable    { position: fixed;    z-index: 100 }
 *
 * Lo z-index 5 sull'header crea uno **stacking context** che intrappola
 * il `.navbar-collapsable` figlio: anche alzando il suo z-index a 1090,
 * il menu offcanvas resta confinato dentro quello stacking context e
 * qualsiasi elemento della pagina con un proprio stacking context locale
 * (label, input search nativi, dropdown `.oicf-page-actions`, sticky
 * sidebars, ecc.) può trasparire sopra le voci del menu burger.
 *
 * Soluzione robusta: su mobile (< lg) solleviamo l'INTERO header a
 * z-index 1090, in modo che lo stacking context dell'header sia il
 * più alto della pagina. Il `.navbar-collapsable` interno mantiene
 * z-index 1090 nel proprio scope per coprire tutti i child layers
 * (close-div, menu-wrapper, dropdowns annidati). Su desktop l'header
 * è già gestito separatamente (sticky con z-index 1030).
 */
@media (max-width: 991.98px) {
  .it-header-wrapper {
    z-index: 1090 !important;
  }
  .navbar-collapsable {
    z-index: 1090 !important;
  }
}

/*
 * "Torna su" floating button (impostazione "Tema OrdiniPA → Layout").
 * Pattern DI back-to-top: bottone circolare in basso a destra, visibile
 * solo dopo lo scroll. Mostrato/nascosto via CSS scroll-offset trick.
 */
.oicf-back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 48px;
  height: 48px;
  padding: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1040;
}
.oicf-back-to-top .icon {
  width: 24px;
  height: 24px;
}
@media (min-width: 768px) {
  .oicf-back-to-top {
    right: 2rem;
    bottom: 2rem;
    width: 56px;
    height: 56px;
  }
}
/* Mostrato dal piccolo script inline o da JS quando si scrolla.
   Default: usiamo solo CSS pura via `:has()` per browser moderni;
   il JS comunque toglie/aggiunge la classe `is-visible`. */
.oicf-back-to-top.is-visible {
  display: inline-flex;
}

/* Footer intro testuale (impostazione "Tema OrdiniPA → Layout"). */
.oicf-footer-intro {
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 720px;
  opacity: 0.9;
}

/* Icone social nel footer (impostazione "Tema OrdiniPA → Social").
   Pattern DI: cerchio bianco-su-trasparente, hover con leggera elevazione. */
.oicf-footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  list-style: none;
}
.oicf-footer-social .list-inline-item {
  margin: 0;
}
.oicf-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.oicf-footer-social a:hover,
.oicf-footer-social a:focus-visible {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: #fff;
  transform: translateY(-1px);
}
.oicf-footer-social .icon {
  width: 20px;
  height: 20px;
}

/*
 * Logo del tema (impostazione "Tema OrdiniPA → Generale").
 *
 * Bootstrap Italia applica `.it-header-center-wrapper .it-brand-wrapper
 * .icon { width: 60px; height: 60px }` con specificità superiore alla
 * nostra → l'immagine diventa un quadrato 60×60 e si schiaccia se ha
 * proporzioni diverse. In più, `wp_get_attachment_image()` aggiunge
 * attributi HTML `width=""` e `height=""` con le dimensioni native
 * dell'immagine, che con `aspect-ratio: auto` impostato dal browser
 * impedirebbero il libero scaling.
 *
 * Soluzione blindata:
 *  - `width: auto` + `height: <px>` con `!important` per battere BI;
 *  - `object-fit: contain` per garantire che, anche se il box CSS è
 *    diverso dall'aspect ratio nativo dell'immagine, questa scali
 *    senza deformarsi (lascia eventualmente bordi vuoti);
 *  - `aspect-ratio: auto` esplicito per neutralizzare il rapporto
 *    derivato dagli attributi HTML width/height.
 */
.it-brand-wrapper .oicf-brand-logo {
  width: auto !important;
  height: 48px !important;
  max-width: 220px !important;
  max-height: 64px !important;
  object-fit: contain !important;
  aspect-ratio: auto !important;
  fill: currentColor;
  flex-shrink: 0;
}
@media (min-width: 992px) {
  .it-brand-wrapper .oicf-brand-logo {
    height: 56px !important;
    max-height: 80px !important;
  }
}
/* Variante footer: il logo ha già il file in versione bianca o
   semitrasparente; lo allineiamo al testo del brand e gli concediamo
   leggermente più altezza perché il footer è uno spazio narrativo. */
.it-footer .oicf-brand-logo--footer {
  height: 56px;
  max-height: 72px;
  margin-right: 1rem;
  vertical-align: middle;
}
.it-footer .it-brand-wrapper a {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

/* Slim header — pinning della right-zone.
   `.it-header-slim-wrapper-content` è un flex con `justify-content: space-between`,
   il che funziona solo se ci sono almeno 2 figli. Quando il link sovraordinato
   (`navbar-brand` di sinistra) è nascosto su mobile o non valorizzato dalle
   impostazioni, il `right-zone` (con il bottone "Area Riservata") rimane unico
   figlio e finisce a sinistra. Forziamo `margin-left: auto` quando è il primo
   figlio così "Area Riservata" resta sempre ancorata a destra, come da
   pattern AGID/Designers Italia. */
.it-header-slim-wrapper-content > .it-header-slim-right-zone:first-child {
  margin-left: auto;
}

/* Header mobile (sotto 992px): il toggler hamburger Bootstrap Italia
   viene posizionato in absolute dal CSS BI vicino al brand. Riserviamo
   uno spazio sufficiente all'inizio del brand-wrapper per evitare la
   sovrapposizione del toggler sul logo/testo, problema visibile su
   schermi <360px dove il toggler (~40px) si sovrapponeva al logo. */
/*
 * Header mobile (≤991.98px).
 *
 * Approccio: lasciamo che Bootstrap Italia gestisca il toggler
 * hamburger, l'apertura del menu offcanvas e l'overlay tramite il
 * binding standard `data-bs-toggle="navbarcollapsible"` (vedi
 * `template-parts/header/navbar.php`). Questo è lo stesso pattern
 * usato dal tema AGID di riferimento `design-comuni-wordpress-theme`.
 *
 * Qui aggiungiamo SOLO piccole regole correttive per il branding del
 * tema (logo personalizzato + titolo lungo) e per compattare lo slim
 * header che su mobile occupa troppo spazio per la sola voce
 * "Area Riservata".
 */
@media (max-width: 991.98px) {
  /* Spazio per l'hamburger toggler che BI posiziona in absolute
     all'angolo sinistro. ~3.5rem (toggler 40px + padding 16px) evita
     la sovrapposizione visiva sul logo / testo brand su schermi
     stretti. */
  .it-header-center-wrapper .it-brand-wrapper {
    padding-left: 3.5rem;
  }
  /* La struttura DOM ora è (vedi `template-parts/header/center.php`):
     <a> > <div.it-brand-text.d-flex.align-items-center> > <img.logo> + <div>(title+tagline)
     Quindi il flex layout di `.it-brand-text` allinea logo e box-titoli
     orizzontalmente. Su mobile il container può andare a capo se il
     titolo è lungo, ma logo + testo restano allineati a centro. */
  .it-header-center-wrapper .it-brand-wrapper .it-brand-text {
    gap: .65rem;
    flex-wrap: nowrap;
  }
  .it-header-center-wrapper .it-brand-wrapper .oicf-brand-logo {
    width: auto !important;
    height: 40px !important;
    max-height: 56px !important;
    object-fit: contain !important;
    aspect-ratio: auto !important;
    flex-shrink: 0;
  }
  .it-header-center-wrapper .it-brand-wrapper .it-brand-title {
    font-size: 1rem;
    line-height: 1.2;
  }

  /* Slim header (top bar "Area Riservata") compatto su mobile.
     Su mobile non c'è la dicitura "Ente Pubblico..." (nascosta da
     `d-none d-lg-block`), resta solo il bottone "Area Riservata"
     a destra: lo riduciamo a icon-button piccolo per non far occupare
     a una sola voce un'intera fascia verticale. */
  .it-header-slim-wrapper {
    padding: 0;
  }
  .it-header-slim-wrapper-content {
    min-height: 32px;
    padding: 0.25rem 0;
  }
  .it-header-slim-wrapper .it-access-top-wrapper .btn {
    padding: 0.125rem 0.6rem;
    font-size: 0.8125rem;
    line-height: 1.3;
  }

  /* Logo grande dentro l'offcanvas mobile NON serve: il branding è
     già visibile nell'header center sopra l'offcanvas, ripeterlo nel
     menu è ridondante e occupa spazio prezioso. Nascondiamo il blocco
     `.logo-hamburger` se per qualche motivo è ancora nel markup. */
  .menu-wrapper .logo-hamburger {
    display: none !important;
  }

  /* ---------------------------------------------------------------
   * Menu mobile offcanvas: forziamo testo blu su sfondo bianco.
   *
   * BI di default colora `.it-header-navbar-wrapper .nav-link` di
   * BIANCO (perché sul desktop la navbar ha sfondo primary blu),
   * ma su mobile l'offcanvas ha sfondo bianco → testo bianco su
   * bianco = link invisibili (bug visibile dello screenshot utente).
   *
   * Soluzione: nel viewport mobile sovrascriviamo il colore con la
   * primary color dell'amministrazione e diamo un padding/separator
   * chiaro tra le voci, riproducendo il pattern AGID dell'offcanvas.
   * --------------------------------------------------------------- */
  .it-header-navbar-wrapper .navbar-collapsable .menu-wrapper {
    background-color: #fff;
  }
  .it-header-navbar-wrapper .navbar-collapsable .menu-wrapper > nav {
    display: block;
    width: 100%;
    background-color: #fff;
  }
  .it-header-navbar-wrapper .navbar-collapsable .menu-wrapper .navbar-nav {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .it-header-navbar-wrapper .navbar-collapsable .menu-wrapper .navbar-nav .nav-item {
    width: 100%;
  }
  .it-header-navbar-wrapper .navbar-collapsable .menu-wrapper .navbar-nav .nav-link,
  .it-header-navbar-wrapper .navbar-collapsable .menu-wrapper .navbar-nav .nav-link:link,
  .it-header-navbar-wrapper .navbar-collapsable .menu-wrapper .navbar-nav .nav-link:visited {
    color: var(--bs-primary, #06c) !important;
    padding: .85rem 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    text-decoration: none;
    font-weight: 600;
    background-color: transparent;
    display: block;
  }
  .it-header-navbar-wrapper .navbar-collapsable .menu-wrapper .navbar-nav .nav-link:hover,
  .it-header-navbar-wrapper .navbar-collapsable .menu-wrapper .navbar-nav .nav-link:focus,
  .it-header-navbar-wrapper .navbar-collapsable .menu-wrapper .navbar-nav .nav-link.active,
  .it-header-navbar-wrapper .navbar-collapsable .menu-wrapper .navbar-nav .current-menu-item > .nav-link {
    background-color: rgba(0, 102, 204, .08) !important;
    color: var(--bs-primary, #06c) !important;
  }
  /* Submenu (dropdown) annidato: leggermente indentato e meno marcato. */
  .it-header-navbar-wrapper .navbar-collapsable .menu-wrapper .navbar-nav .dropdown-menu .dropdown-item,
  .it-header-navbar-wrapper .navbar-collapsable .menu-wrapper .navbar-nav .nav-item .nav-link.dropdown-item {
    color: #17324d !important;
    padding-left: 2rem;
    font-weight: 400;
  }
  /* Pulsante chiusura "X" leggibile su sfondo blu della close-div BI. */
  .it-header-navbar-wrapper .navbar-collapsable .close-div .close-menu .icon {
    fill: #fff;
  }
}

/* Spazio fra logo e box-titoli anche su desktop: BI di default usa
   margine 0, allineamento solo verticale → con loghi grandi e titoli
   lunghi il rendering è troppo "incollato". */
.it-header-center-wrapper .it-brand-wrapper .it-brand-text {
  gap: .75rem;
}

/* Logo nel menu offcanvas mobile (pattern AGID `.logo-hamburger`).
   Mostrato in cima al menu solo quando aperto in mobile, per ricordare
   all'utente il branding del sito. Nascosto SEMPRE su desktop: il
   branding è già nell'`.it-header-center-wrapper` sopra il navbar. */
.menu-wrapper .logo-hamburger {
  display: none;
}
@media (max-width: 991.98px) {
  .menu-wrapper .logo-hamburger {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 0.5rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }
  .menu-wrapper .logo-hamburger:hover,
  .menu-wrapper .logo-hamburger:focus-visible {
    background-color: rgba(0, 102, 204, 0.04);
    text-decoration: none;
  }
  .menu-wrapper .logo-hamburger .oicf-mobile-menu-logo,
  .menu-wrapper .logo-hamburger .icon {
    width: auto;
    height: 40px;
    max-width: 64px;
    flex-shrink: 0;
  }
  .menu-wrapper .logo-hamburger .it-brand-text {
    flex: 1 1 auto;
    min-width: 0;
  }
}
.menu-wrapper .logo-hamburger .it-brand-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--bs-primary, #0066cc);
  line-height: 1.25;
}

/* Footer small-prints (sub-bar in basso con CF, P.IVA, link legali).
   Bootstrap Italia di default applica il proprio sfondo blu scuro a questa
   sezione, ma NON definisce il colore del testo libero dei <li> (quello
   non racchiuso in <a>). Su sfondi scuri il testo "Codice Fiscale: ..."
   risultava nero, illeggibile.
   Forziamo qui il colore bianco di base con un livello di specificità
   sufficiente; se l'admin configura `color_footer_text` la regola di
   CustomColors sovrascrive questa con la stessa specificità ma più tardi
   nella cascata, prevalendo correttamente. */
.it-footer-small-prints,
.it-footer-small-prints li,
.it-footer-small-prints a {
  color: #fff;
}
.it-footer-small-prints a {
  text-decoration: underline;
}
.it-footer-small-prints a:hover,
.it-footer-small-prints a:focus {
  color: #fff;
  text-decoration: none;
}

/* Credits in fondo al footer ("Sito web a cura di …" + logo agenzia).
   Riga sottile con sfondo blu scuro che chiude visivamente il footer.
   Il colore di base #003366 è un blu scuro istituzionale BI che funziona
   come fallback se l'admin non ha configurato `color_footer_bg`. Quando
   `color_footer_bg` è valorizzato, `CustomColors.php` sovrascrive questa
   regola con `color-mix(var(--oicf-footer-bg) 75%, #000)` per mantenere
   coerenza cromatica con le altre fasce del footer. */
.oicf-footer-credits {
  background-color: #003366;
  color: #fff;
  font-size: 0.875rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.oicf-footer-credits .container {
  min-height: 48px;
}
.oicf-footer-credits a {
  color: #fff;
  text-decoration: underline;
}
.oicf-footer-credits a:hover,
.oicf-footer-credits a:focus {
  color: #fff;
  text-decoration: none;
}
.oicf-footer-credits__logo img {
  display: block;
  height: 32px;
  width: auto;
  max-width: 200px;
  opacity: 0.95;
}
.oicf-footer-credits__logo a:hover img,
.oicf-footer-credits__logo a:focus img {
  opacity: 1;
}
@media (max-width: 767.98px) {
  .oicf-footer-credits {
    text-align: center;
  }
  .oicf-footer-credits__logo img {
    margin: 0 auto;
  }
}

/* Page header hero (archive + pagine standard)
   Pattern Designers Italia: distanza generosa dal breadcrumb,
   spazio fra titolo e contenuto, lead a larghezza leggibile. */
.oicf-page-hero {
  padding-top: 1.5rem;
  padding-bottom: 2.5rem;
}
@media (min-width: 992px) {
  .oicf-page-hero {
    padding-top: 2rem;
    padding-bottom: 3rem;
  }
}
.oicf-page-hero__img img { border-radius: .5rem; }
.oicf-page-hero__body h1,
.oicf-page-hero__body .display-5 {
  line-height: 1.15;
  margin-bottom: 1rem;
}
.oicf-page-hero__body .lead {
  max-width: 65ch;
  font-size: 1.125rem;
  line-height: 1.5;
}

/* Tipografia delle pagine istituzionali (entry-content font-serif).
   Allineata al pattern DI cmp-page-content. */
.entry-content.font-serif > * + * { margin-top: 1.25rem; }
.entry-content.font-serif h2,
.entry-content.font-serif h3,
.entry-content.font-serif h4 {
  margin-top: 2.5rem;
  margin-bottom: .75rem;
}
.entry-content.font-serif p { line-height: 1.65; }

/* Immagini, figure e gallerie Gutenberg dentro l'editor:
 * - max-width 100% blocca l'overflow oltre la colonna anche quando WP
 *   inietta width inline o attributi HTML width="1500" sull'immagine
 * - height auto preserva il rapporto 1:1
 * - border-radius coerente con il design DI
 * - figure si adatta al contenitore (no width inline che porta overflow) */
.entry-content img,
.entry-content figure,
.entry-content .wp-block-image,
.entry-content .wp-block-image img,
.entry-content .wp-block-gallery,
.entry-content .wp-block-gallery .wp-block-image,
.entry-content .wp-block-gallery img {
  max-width: 100%;
  height: auto;
}
.entry-content figure,
.entry-content .wp-block-image {
  width: auto !important;       /* annulla width inline lasciato da WP */
  max-width: 100%;
  margin: 1.5rem 0;
  display: block;
}
.entry-content img {
  border-radius: .5rem;
  display: block;
}
.entry-content figure img,
.entry-content .wp-block-image img {
  margin: 0 auto;               /* centra le immagini singole nel flusso */
}
.entry-content figcaption,
.entry-content .wp-element-caption {
  font-size: .875rem;
  color: var(--bs-secondary, #5C6F82);
  text-align: center;
  margin-top: .5rem;
}

/* Galleria Gutenberg: griglia responsive, gap consistente.
 * Bootstrap Italia non sovrascrive completamente la galleria del core
 * di WordPress, quindi la stilizziamo qui per allinearla al tema. */
.entry-content .wp-block-gallery.has-nested-images,
.entry-content .wp-block-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--style--gallery-gap-default, 1rem);
  margin: 1.5rem 0;
}
.entry-content .wp-block-gallery .wp-block-image {
  margin: 0;
  flex: 1 1 calc(33.333% - 1rem);
  min-width: 200px;
}
@media (max-width: 768px) {
  .entry-content .wp-block-gallery .wp-block-image {
    flex: 1 1 calc(50% - .5rem);
  }
}
.entry-content .wp-block-gallery .wp-block-image img {
  width: 100%;
  height: 240px;
  object-fit: cover;            /* uniforma l'altezza delle thumbnail */
  border-radius: .5rem;
}
/* Variante "columns-N": rispetta la scelta dell'editor (1-8 colonne). */
.entry-content .wp-block-gallery.columns-1 .wp-block-image { flex: 1 1 100%; }
.entry-content .wp-block-gallery.columns-2 .wp-block-image { flex: 1 1 calc(50% - .5rem); }
.entry-content .wp-block-gallery.columns-3 .wp-block-image { flex: 1 1 calc(33.333% - .67rem); }
.entry-content .wp-block-gallery.columns-4 .wp-block-image { flex: 1 1 calc(25% - .75rem); }

/* Allineamenti Gutenberg standard rispettati. */
.entry-content .alignleft  { float: left;  margin: .5rem 1.5rem 1rem 0; max-width: 50%; }
.entry-content .alignright { float: right; margin: .5rem 0 1rem 1.5rem; max-width: 50%; }
.entry-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.entry-content .alignwide,
.entry-content .alignfull { max-width: 100%; }
@media (max-width: 768px) {
  .entry-content .alignleft,
  .entry-content .alignright {
    float: none;
    margin: 1rem 0;
    max-width: 100%;
  }
}

/* ================================================================
 * Tabelle nei contenuti dei CPT.
 *
 * Wrapper coperti (in tutti i template single del tema):
 *  - `.entry-content`    → news, organo, ufficio, documento, persona,
 *                          evento, trasparenza, page
 *  - `.richtext-wrapper` → servizi (campi meta editor + descrizione,
 *                          vedi single-oicf_servizio.php)
 *
 * Uniforma le tabelle inserite via Gutenberg (blocco core/table) o
 * editor classico al pattern AGID/Designers Italia: header su sfondo
 * primary, righe striped, separatori sottili, padding generoso, e
 * scroll orizzontale automatico su mobile per evitare overflow.
 *
 * Si applica a TUTTE le tabelle del flusso editoriale; per saltare
 * lo styling su una specifica tabella, aggiungere `class="no-style"`.
 *
 * NB: i selettori sono volutamente duplicati con virgola invece di
 *     usare `:is(.entry-content, .richtext-wrapper)` per massima
 *     compatibilità con browser più datati e tool di minificazione.
 * ================================================================ */

.entry-content .wp-block-table,
.entry-content figure.wp-block-table,
.richtext-wrapper .wp-block-table,
.richtext-wrapper figure.wp-block-table {
  margin: 1.5rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.entry-content .wp-block-table table,
.entry-content > table,
.richtext-wrapper .wp-block-table table,
.richtext-wrapper > table {
  width: 100%;
  margin: 0;
}

.entry-content table:not(.no-style),
.richtext-wrapper table:not(.no-style) {
  width: 100%;
  margin: 1rem 0 1.5rem;
  border-collapse: collapse;
  font-size: 0.95rem;
  color: #1d2327;
  background: #fff;
  border: 1px solid #dcdcde;
  border-radius: 4px;
  overflow: hidden;
  font-family: var(--bs-font-sans-serif, system-ui, -apple-system, sans-serif);
}

.entry-content table:not(.no-style) thead,
.richtext-wrapper table:not(.no-style) thead {
  background: var(--bs-primary, #06c);
  color: #fff;
}

.entry-content table:not(.no-style) thead th,
.richtext-wrapper table:not(.no-style) thead th {
  padding: 0.85rem 1rem;
  font-weight: 700;
  text-align: left;
  vertical-align: middle;
  color: #fff;
  background: var(--bs-primary, #06c);
  border-bottom: 2px solid rgba(255, 255, 255, 0.18);
  font-size: 0.95rem;
  line-height: 1.3;
}

.entry-content table:not(.no-style) thead th:first-child,
.richtext-wrapper table:not(.no-style) thead th:first-child {
  border-top-left-radius: 3px;
}
.entry-content table:not(.no-style) thead th:last-child,
.richtext-wrapper table:not(.no-style) thead th:last-child {
  border-top-right-radius: 3px;
}

.entry-content table:not(.no-style) tbody tr:nth-child(even),
.richtext-wrapper table:not(.no-style) tbody tr:nth-child(even) {
  background: #f5f7fa;
}

.entry-content table:not(.no-style) tbody tr:hover,
.richtext-wrapper table:not(.no-style) tbody tr:hover {
  background: rgba(0, 102, 204, 0.06);
}

.entry-content table:not(.no-style) tbody td,
.entry-content table:not(.no-style) tbody th,
.richtext-wrapper table:not(.no-style) tbody td,
.richtext-wrapper table:not(.no-style) tbody th {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: top;
  line-height: 1.55;
  text-align: left;
}

.entry-content table:not(.no-style) tbody tr:last-child td,
.entry-content table:not(.no-style) tbody tr:last-child th,
.richtext-wrapper table:not(.no-style) tbody tr:last-child td,
.richtext-wrapper table:not(.no-style) tbody tr:last-child th {
  border-bottom: none;
}

/* Header di riga (prima cella in <tbody>) — utile per tabelle dati
 * con etichette laterali (es. "Riduzione | Condizione" dell'esempio
 * mostrato dall'admin): cella più "forte" senza ripetere lo stile
 * azzurro del thead. */
.entry-content table:not(.no-style) tbody th,
.richtext-wrapper table:not(.no-style) tbody th {
  font-weight: 600;
  background: #fafbfc;
  color: #1d2327;
}

.entry-content table:not(.no-style) caption,
.richtext-wrapper table:not(.no-style) caption {
  caption-side: top;
  padding: 0.5rem 0 0.75rem;
  font-size: 0.9rem;
  font-style: italic;
  color: #555;
  text-align: left;
}

/* Tabelle senza thead esplicito (Gutenberg permette di non avere
 * intestazione): la PRIMA riga del tbody fa da pseudo-header per
 * mantenere coerenza visiva minima. */
.entry-content table:not(.no-style):not(:has(thead)) tbody tr:first-child,
.richtext-wrapper table:not(.no-style):not(:has(thead)) tbody tr:first-child {
  background: var(--bs-primary, #06c);
  color: #fff;
}
.entry-content table:not(.no-style):not(:has(thead)) tbody tr:first-child > *,
.richtext-wrapper table:not(.no-style):not(:has(thead)) tbody tr:first-child > * {
  font-weight: 700;
  border-bottom: 2px solid rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* Responsive: scroll orizzontale invece di overflow rotto su mobile.
 * Wrappare la tabella in `.wp-block-table` (Gutenberg) ottiene già
 * questo automaticamente; per tabelle "nude" aggiungiamo overflow
 * sul contenitore .entry-content non è possibile, quindi sopperiamo
 * facendo `display:block` con scroll. */
@media (max-width: 768px) {
  .entry-content table:not(.no-style),
  .richtext-wrapper table:not(.no-style) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .entry-content table:not(.no-style) tbody td,
  .entry-content table:not(.no-style) tbody th,
  .entry-content table:not(.no-style) thead th,
  .richtext-wrapper table:not(.no-style) tbody td,
  .richtext-wrapper table:not(.no-style) tbody th,
  .richtext-wrapper table:not(.no-style) thead th {
    white-space: normal;
  }
}

/* Breadcrumb DI */
.breadcrumb-container { padding: 1rem 0 1.5rem; }
.breadcrumb-container .breadcrumb {
  margin: 0;
  padding: 0;
  background: transparent;
  flex-wrap: wrap;
}
.breadcrumb-container .breadcrumb-item { font-size: .875rem; }
.breadcrumb-container .breadcrumb-item a {
  color: var(--bs-primary, #0066CC);
  text-decoration: none;
}
.breadcrumb-container .breadcrumb-item a:hover { text-decoration: underline; }
.breadcrumb-container .breadcrumb-item .separator {
  margin: 0 .5rem;
  color: var(--bs-secondary, #5C6F82);
}
.breadcrumb-container .breadcrumb-item.active { color: var(--bs-secondary, #5C6F82); }

/* Sezioni grigie con card al loro interno (DI cmp-section bg-grey-card):
   garantiamo sempre il contrasto card bianca → fondo grigio. */
.bg-grey-card {
  background-color: #f5f6f7;
}

/* ──────────────────────────────────────────────────────────────
   CARD GRID — fix spacing verticale su mobile.

   Bootstrap Italia v2.13 applica al modifier `.card-space` un
   `padding-bottom` generoso (48px) per separare le card nelle
   griglie desktop. Su mobile (stack singolo, col-12), questo
   padding si SOMMA al gutter verticale di Bootstrap (`g-4` →
   `--bs-gutter-y: 1.5rem`), producendo ~72px tra una card e
   l'altra → spazio eccessivo, percepito come "vuoto".

   Annulliamo il `padding-bottom` della card su mobile lasciando
   il solo gutter del row come fonte di spacing (≈24px). Su
   desktop il comportamento BI rimane invariato.

   Si applica a TUTTI i CPT del tema (news, servizi, eventi,
   organi, uffici, persone, documenti) che usano il pattern
   BI `card-wrapper.card-space`.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .card-wrapper.card-space {
    padding-bottom: 0;
  }
}
.bg-grey-card .card,
.bg-grey-card .card-bg,
.bg-grey-card .card-teaser,
.bg-grey-card .list-group-item {
  background-color: #ffffff;
}
.bg-grey-card .card,
.bg-grey-card .card-teaser {
  border: 1px solid rgba(0, 0, 0, .08);
}

/* ---------------------------------------------------------------
 * Accesso rapido ai servizi (`quick-access.php`).
 *
 * Card "card-teaser" pattern AGID/BI: layout ORIZZONTALE con icona
 * a sinistra e contenuto (titolo + descrizione) a destra. Compatto,
 * ottimizza lo spazio sia desktop sia mobile.
 *
 * Responsive:
 *  - mobile (xs):    1 colonna full-width, card compatte
 *  - tablet (md):    2 colonne (col-md-6)
 *  - desktop (lg+):  4 colonne (col-lg-3)
 *
 * Bordo bottom blu = cifra Designers Italia per le card-servizio.
 * --------------------------------------------------------------- */
.oicf-quick-access {
  background-color: #fff;
}
.oicf-quick-access__card.card.card-teaser {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem;
  height: 100%;
  padding: 1.25rem;
  margin: 0;
  border: 1px solid #E6E9F2;
  border-bottom: 4px solid var(--bs-primary, #0066CC);
  border-radius: .5rem;
  background-color: #fff;
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.oicf-quick-access__card.card.card-teaser:hover,
.oicf-quick-access__card.card.card-teaser:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 .75rem 1.75rem rgba(0, 0, 0, .12) !important;
  border-color: var(--bs-primary, #0066CC);
  text-decoration: none;
  color: inherit;
  outline: none;
}
.oicf-quick-access__card .oicf-quick-access__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin-top: .15rem;
  fill: var(--bs-primary, #0066CC);
}
.oicf-quick-access__card .card-body {
  padding: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.oicf-quick-access__title {
  color: var(--bs-primary, #0066CC);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.25;
  margin-bottom: .35rem;
}
.oicf-quick-access__description {
  color: #5C6F82;
  font-size: .9rem;
  line-height: 1.45;
  margin: 0;
}
@media (max-width: 575.98px) {
  /* Mobile: padding sezione ridotto, card ancora più compatte,
     icona leggermente più piccola. Layout resta orizzontale per
     evitare lo spazio vuoto dello stacking verticale. */
  .oicf-quick-access {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  .oicf-quick-access h2 {
    font-size: 1.375rem;
    margin-bottom: 1rem !important;
  }
  .oicf-quick-access__card.card.card-teaser {
    padding: 1rem;
    gap: .875rem;
  }
  .oicf-quick-access__card .oicf-quick-access__icon {
    width: 28px;
    height: 28px;
  }
  .oicf-quick-access__title {
    font-size: 1rem;
    margin-bottom: .25rem;
  }
  .oicf-quick-access__description {
    font-size: .875rem;
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* Desktop medio: 4 col strette → un po' meno padding interno
     per non far andare a capo titoli lunghi tipo "Albo iscritti". */
  .oicf-quick-access__card.card.card-teaser {
    padding: 1rem;
    gap: .75rem;
  }
}

/* ---------------------------------------------------------------
 * Notizia in evidenza in homepage (`home-featured-news.php`).
 *
 * Pattern AGID: split a due colonne con card e immagine grande
 * accanto. Su mobile la colonna immagine va sopra la card per
 * impatto visivo immediato (`order-1 order-lg-2`).
 * --------------------------------------------------------------- */
.oicf-home-featured-news {
  background-color: #fff;
}
.oicf-home-featured-news__card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0;
}
.oicf-home-featured-news__meta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  color: var(--bs-primary, #0066CC);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.oicf-home-featured-news__meta .icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
}
.oicf-home-featured-news__meta .oicf-home-featured-news__date {
  color: #5C6F82;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.oicf-home-featured-news__title {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.25;
  color: var(--bs-primary, #0066CC);
  margin: 0;
  font-weight: 700;
}
.oicf-home-featured-news__title a { color: inherit; }
.oicf-home-featured-news__title a:hover,
.oicf-home-featured-news__title a:focus-visible { text-decoration: underline; }
.oicf-home-featured-news__lead {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: #2C3E50;
  margin: 0;
}
.oicf-home-featured-news__media-link {
  display: block;
  border-radius: .75rem;
  overflow: hidden;
  background-color: rgba(0, 102, 204, .04);
  aspect-ratio: 16 / 10;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.oicf-home-featured-news__media-link:hover,
.oicf-home-featured-news__media-link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .12);
  outline: none;
}
.oicf-home-featured-news__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.oicf-home-featured-news__media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}
.oicf-home-featured-news__media--placeholder .icon {
  width: 64px;
  height: 64px;
  opacity: .35;
}

/* ---------------------------------------------------------------
 * Spaziatura inferiore di sicurezza fra contenuto principale e footer.
 *
 * Tutti i template del tema aprono `<main id="main-container">` e
 * chiudono prima di `get_footer()`. Alcuni includono anche il
 * componente `contacts-bottom` (sezione "Hai bisogno di aiuto?")
 * che fornisce naturalmente respiro. Ma se l'amministratore non ha
 * configurato i contatti istituzionali in `Tema OrdiniPA → Contatti`,
 * il componente fa `return` immediato → il contenuto resta attaccato
 * al footer.
 *
 * La regola garantisce sempre un padding-bottom minimo, applicata via
 * `:where()` con specificità 0 così qualunque utility BI come
 * `pb-0`, `mb-5` ecc. continua a vincere senza problemi.
 */
:where(main#main-container) {
  padding-bottom: 3rem;
}
@media (min-width: 992px) {
  :where(main#main-container) {
    padding-bottom: 4rem;
  }
}
/* Quando l'ULTIMO figlio diretto del main ha già un proprio
   background o padding verticale (es. `bg-grey-card py-5` per le
   sezioni "Tutti i servizi", "Hai bisogno di aiuto?" o simili),
   azzeriamo il padding del main per evitare doppio respiro fra la
   sezione e il footer. */
:where(main#main-container):has(> *:last-child.bg-grey-card),
:where(main#main-container):has(> *:last-child.bg-light),
:where(main#main-container):has(> *:last-child.shadow-contacts),
:where(main#main-container):has(> *:last-child.py-5),
:where(main#main-container):has(> *:last-child.py-4),
:where(main#main-container):has(> *:last-child.pb-5),
:where(main#main-container):has(> *:last-child.pb-4) {
  padding-bottom: 0;
}

/* ---------------------------------------------------------------
 * Header center — pulsante "Cerca" (`it-search-wrapper`).
 *
 * Pattern AGID: a destra del brand-wrapper, un `<button>` rotondo
 * con icona lente che apre il modale `#oicf-search-modal`.
 * --------------------------------------------------------------- */
.it-header-center-wrapper .it-right-zone {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.it-header-center-wrapper .it-search-wrapper {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: #fff;
}
.it-header-center-wrapper .it-search-wrapper > span {
  font-size: .9rem;
  font-weight: 600;
}
.it-header-center-wrapper .it-search-wrapper .search-link {
  background-color: rgba(255, 255, 255, 0.15);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.it-header-center-wrapper .it-search-wrapper .search-link:hover,
.it-header-center-wrapper .it-search-wrapper .search-link:focus-visible {
  background-color: rgba(255, 255, 255, 0.28);
  transform: scale(1.05);
  outline: none;
}
.it-header-center-wrapper .it-search-wrapper .search-link .icon {
  width: 20px;
  height: 20px;
  fill: #fff;
}

/* ---------------------------------------------------------------
 * Form di ricerca (search.php).
 *
 * Input-group Bootstrap Italia con icona lente prepended e bottone
 * primary "Cerca" appended. Stesso stile usato anche nel form della
 * pagina archivio documenti per coerenza visiva.
 * --------------------------------------------------------------- */
.oicf-search-input-group .input-group-text {
  background-color: #fff;
  border-right: 0;
}
.oicf-search-input-group .input-group-text .icon {
  width: 22px;
  height: 22px;
  fill: var(--bs-primary, #06c);
}
.oicf-search-input-group .form-control {
  border-left: 0;
  font-size: 1.05rem;
  padding: .75rem .5rem;
}
.oicf-search-input-group .form-control:focus {
  border-color: var(--bs-primary, #06c);
  box-shadow: 0 0 0 .2rem rgba(0, 102, 204, .15);
}

/* ---------------------------------------------------------------
 * Card risultati ricerca (search.php)
 *
 * Stack di card con: optional thumb a sinistra, etichetta tipo
 * (chip primary), titolo h5, data, excerpt, freccia a destra.
 * Tutta la card è cliccabile via `<a>` che wrappa il contenuto.
 * --------------------------------------------------------------- */
.oicf-search-card {
  background: #fff;
  border: 1px solid #E6E9F2;
  border-radius: .5rem;
  overflow: hidden;
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.oicf-search-card:hover,
.oicf-search-card:focus-within {
  border-color: var(--bs-primary, #0066CC);
  box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .06);
  transform: translateY(-1px);
}
.oicf-search-card__link {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  padding: 1rem 1.25rem;
  color: inherit;
  text-decoration: none;
}
.oicf-search-card__link:hover,
.oicf-search-card__link:focus-visible {
  color: inherit;
  text-decoration: none;
  outline: none;
}
.oicf-search-card__thumb {
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  border-radius: .375rem;
  overflow: hidden;
  background-color: rgba(0, 102, 204, .04);
  display: none;
}
@media (min-width: 576px) {
  .oicf-search-card__thumb { display: block; }
}
.oicf-search-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.oicf-search-card__body {
  flex: 1 1 0;
  min-width: 0;
}
.oicf-search-card__type {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--bs-primary, #0066CC);
  background: rgba(0, 102, 204, .08);
  padding: .15rem .5rem;
  border-radius: .25rem;
  margin-bottom: .35rem;
  line-height: 1.4;
}
.oicf-search-card__title {
  color: var(--bs-primary, #0066CC);
  margin-bottom: .25rem;
  line-height: 1.3;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.oicf-search-card:hover .oicf-search-card__title,
.oicf-search-card:focus-within .oicf-search-card__title {
  text-decoration: underline;
}
.oicf-search-card__meta {
  font-size: .8125rem;
  color: #5C6F82;
}
.oicf-search-card__meta time { text-transform: capitalize; }
.oicf-search-card__excerpt {
  font-size: .9rem;
  color: #4A5867;
  line-height: 1.5;
}
.oicf-search-card__arrow {
  flex: 0 0 auto;
  align-self: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 102, 204, .08);
  color: var(--bs-primary, #0066CC);
  transition: background-color .15s ease, transform .15s ease;
}
.oicf-search-card__arrow .icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.oicf-search-card:hover .oicf-search-card__arrow,
.oicf-search-card:focus-within .oicf-search-card__arrow {
  background-color: var(--bs-primary, #0066CC);
  color: #fff;
  transform: translateX(2px);
}

/* ---------------------------------------------------------------
 * Card documento (archive-oicf_documento.php)
 *
 * Pattern Designers Italia "card-documento" semplificato:
 *  - icona file in box arrotondato a sinistra (allineata in alto)
 *  - tag tipologia (badge piccolo, NON una riga di testo affollata)
 *  - titolo in evidenza
 *  - meta line compatta (data · prot. · formato · allegati extra)
 *  - lead opzionale (2 righe max)
 *  - actions a destra: "Scarica/Apri" + "Dettagli", inline su lg,
 *    full-width stacked su mobile
 *
 * Risolve il problema dello "spazio vuoto" delle vecchie card
 * `card p-3 p-md-4` con meta riga affollata "MODULISTICA · DATA · PROT.".
 * --------------------------------------------------------------- */
.oicf-doc-list { gap: .75rem !important; }

.oicf-doc-card {
  background: #fff;
  border: 1px solid #E6E9F2;
  border-radius: .5rem;
  padding: 1rem 1.25rem;
  transition: box-shadow .15s ease-in-out, border-color .15s ease-in-out, transform .15s ease-in-out;
}
.oicf-doc-card:hover,
.oicf-doc-card:focus-within {
  border-color: var(--bs-primary, #0066CC);
  box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .06);
  transform: translateY(-1px);
}

/* Body: icona | testo | actions, allineati in alto (no centro
   verticale, troppo "vuoto" quando il lead manca). */
.oicf-doc-card__body {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Icona file: chip primary chiaro */
.oicf-doc-card__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: .5rem;
  background-color: rgba(0, 102, 204, .08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.oicf-doc-card__icon .icon { width: 24px; height: 24px; fill: currentColor; }

/* Zona testo */
.oicf-doc-card__main {
  flex: 1 1 0;
  min-width: 0; /* abilita ellipsis interna */
}

/* Tag tipologia: badge primary chiaro, sopra il titolo */
.oicf-doc-card__tag {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--bs-primary, #0066CC);
  background: rgba(0, 102, 204, .08);
  padding: .15rem .5rem;
  border-radius: .25rem;
  margin-bottom: .35rem;
  line-height: 1.4;
}

.oicf-doc-card__title {
  margin-bottom: .25rem;
  line-height: 1.3;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.oicf-doc-card__title a { color: var(--bs-primary, #0066CC); }
.oicf-doc-card__title a:hover,
.oicf-doc-card__title a:focus-visible { text-decoration: underline; }

.oicf-doc-card__meta {
  font-size: .8125rem;
  color: #5C6F82;
  line-height: 1.45;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 .35rem;
}
.oicf-doc-card__meta-sep { opacity: .6; }
.oicf-doc-card__meta time { text-transform: capitalize; }

.oicf-doc-card__lead {
  font-size: .9rem;
  color: #4A5867;
  line-height: 1.5;
}

/* Actions: inline su lg+, stacked su mobile */
.oicf-doc-card__actions {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex-shrink: 0;
  align-self: center;
  width: 100%;
}
.oicf-doc-card__actions .btn {
  white-space: nowrap;
}
@media (min-width: 768px) {
  .oicf-doc-card__actions {
    width: auto;
    min-width: 9rem;
  }
}
@media (max-width: 575.98px) {
  .oicf-doc-card { padding: .85rem 1rem; }
  .oicf-doc-card__icon { width: 36px; height: 36px; }
  .oicf-doc-card__icon .icon { width: 20px; height: 20px; }
}

/* Page actions / share dropdown */
.oicf-page-actions {
  --oicf-dropdown-bg: #ffffff;
  --oicf-dropdown-border: rgba(0, 0, 0, .08);
  --oicf-dropdown-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18);
  position: relative;
  z-index: 10;
}
.oicf-page-actions .btn-dropdown {
  padding: .25rem .25rem;
  color: var(--bs-primary, #0066CC);
  background: transparent;
  border: 0;
  font-weight: 600;
}
.oicf-page-actions .btn-dropdown:hover,
.oicf-page-actions .btn-dropdown:focus {
  color: var(--bs-primary, #0066CC);
  text-decoration: underline;
}
.oicf-page-actions .btn-dropdown .icon {
  width: 1.125rem;
  height: 1.125rem;
  margin-right: .375rem;
  fill: currentColor;
}
.oicf-page-actions .dropdown-menu {
  background-color: var(--oicf-dropdown-bg);
  border: 1px solid var(--oicf-dropdown-border);
  border-radius: .25rem;
  box-shadow: var(--oicf-dropdown-shadow);
  padding: .5rem 0;
  min-width: 14rem;
  z-index: 1080;
}
.oicf-page-actions .dropdown-menu .link-list-wrapper { padding: 0; }
.oicf-page-actions .dropdown-menu .link-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Voci nel dropdown: icona lineare a sinistra + testo affiancato.
   Specificità aumentata + !important per battere il bundle Bootstrap Italia
   originale (`.link-list .list-item` di BI ha layout verticale di default
   per pattern menu mobile). */
.oicf-page-actions .dropdown-menu .link-list-wrapper .link-list .list-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: .625rem;
  padding: .625rem 1rem;
  color: var(--bs-primary, #0066CC);
  text-decoration: none;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  transition: background-color .15s ease-in-out;
}
.oicf-page-actions .dropdown-menu .link-list-wrapper .link-list .list-item:hover,
.oicf-page-actions .dropdown-menu .link-list-wrapper .link-list .list-item:focus {
  background-color: rgba(0, 102, 204, .08);
  text-decoration: underline;
}
/* Icone lineari uniformi (anche per i loghi social del sprite BI):
   forzo dimensione + colore primary tramite currentColor in modo che
   appaiano coerenti e non con i brand color originali. */
.oicf-page-actions .dropdown-menu .link-list-wrapper .link-list .list-item .icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  margin: 0 !important;
  flex-shrink: 0;
  fill: currentColor !important;
  color: var(--bs-primary, #0066CC);
}
.oicf-page-actions .dropdown-menu .link-list-wrapper .link-list .list-item > span {
  flex: 1 1 auto;
  display: inline-block;
  margin: 0;
}

/* Stato attivo del pulsante "Ascolta" mentre la sintesi vocale è in esecuzione */
.oicf-listen-btn.listen-active {
  color: var(--bs-primary, #0066CC);
  font-weight: 600;
}
.oicf-listen-btn.listen-active .icon {
  color: var(--bs-primary, #0066CC);
  animation: oicf-listen-pulse 1.2s ease-in-out infinite;
}
@keyframes oicf-listen-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(.92); }
}

/* Chip / tag DI: il bundle BI fornisce .chip / .chip-simple / .chip-primary,
 * ma su sfondo bianco e a piccole dimensioni il contrasto del bordo è troppo
 * tenue (i tag "Argomenti" si vedevano quasi trasparenti). Forziamo bordo e
 * tipografia leggibili senza alterare la geometria del componente DI. */
.oicf-tags-wrapper .chip {
  border: 1px solid var(--bs-primary, #06c);
  border-radius: 50rem;
  padding: 0.35rem 0.9rem;
  background-color: #fff;
  text-decoration: none;
  line-height: 1.2;
  transition: background-color .15s ease-in-out, color .15s ease-in-out;
}
.oicf-tags-wrapper .chip .chip-label {
  color: var(--bs-primary, #06c);
  font-weight: 600;
  font-size: .875rem;
  text-decoration: none;
}
.oicf-tags-wrapper .chip:hover,
.oicf-tags-wrapper .chip:focus-visible {
  background-color: var(--bs-primary, #06c);
}
.oicf-tags-wrapper .chip:hover .chip-label,
.oicf-tags-wrapper .chip:focus-visible .chip-label {
  color: #fff;
}
.oicf-tags-wrapper .chip:focus-visible {
  outline: 2px solid var(--bs-primary, #06c);
  outline-offset: 2px;
}

/*
 * Card "Documento" sul single-oicf_documento (sezione #documento).
 *
 * Pattern DI documento-dettaglio: icona | titolo file + meta (formato · size)
 * | bottone "Scarica". Tutta la card è cliccabile via `.stretched-link` sul
 * titolo. Responsivo: il bottone scompare su mobile (< sm) per privilegiare
 * il tap sull'intera card; il link resta accessibile da tastiera.
 *
 * Bootstrap Italia di default applica `flex: 0 0 49%` alle card-teaser
 * dentro un `.card-wrapper.card-teaser-wrapper` da md+: con un solo file la
 * card diventa stretta (~425px in col-lg-9) e i titoli lunghi vanno a capo
 * più volte. Il modifier `--single` riporta la card a tutta larghezza.
 */
.oicf-document-card {
  background-color: #fff;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.oicf-document-card:hover,
.oicf-document-card:focus-within {
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-1px);
}
/* Padding interno compatto: il default di `.card-teaser` di Bootstrap Italia
   è generoso (≈ 24px), che sommato alle utility utilizzate prima generava
   uno "spazio bianco" eccessivo intorno a icona/testo/bottone. Qui forziamo
   un padding bilanciato tipico delle card-download AGID. */
.oicf-document-card > .card-body {
  padding: 0.85rem 1.1rem;
}
@media (min-width: 768px) {
  .oicf-document-card > .card-body {
    padding: 1rem 1.25rem;
  }
}
.oicf-document-card .card-title {
  line-height: 1.35;
}
.oicf-document-card .card-title a {
  color: var(--bs-primary, #06c);
  /* Wrap "naturale" sulle parole: niente `overflow-wrap: anywhere`, che
     spezzava ogni parola anche se ce n'era abbastanza spazio sotto. */
  word-break: normal;
  overflow-wrap: break-word;
}
.oicf-document-card .card-title a:hover,
.oicf-document-card .card-title a:focus-visible {
  color: var(--bs-primary, #06c);
  text-decoration: underline;
}
.oicf-document-card__body {
  /* Necessario per non far esplodere l'orizzontale quando il filename è
     molto lungo: il flex-item può ridursi sotto il proprio contenuto. */
  min-width: 0;
}

/* Single allegato → card a tutta larghezza (override del 49% di BS Italia). */
.oicf-document-cards--single > .card-teaser,
.oicf-document-cards--single .oicf-document-card {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* Bottone "Scarica" interno alla card documento: pillola compatta, allineata
   verticalmente al centro, mai compressa dal flex (no testo a capo). */
.oicf-document-card .btn {
  white-space: nowrap;
  align-self: center;
}
@media (min-width: 768px) {
  .oicf-document-card .btn {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Card-teaser-info ("A cura di") */
.card-teaser-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}
.card-teaser-info .card-body { flex: 1; }
.card-teaser-info .avatar { flex-shrink: 0; }
.card-teaser-info .avatar.size-xl img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 50%;
}
.card-teaser-info .avatar.size-xxl img {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 50%;
}

/* Layout pagina con navscroll laterale (single) */
.row-column-menu-left > aside {
  position: sticky;
  top: 1.5rem;
  align-self: flex-start;
}
@media (max-width: 991.98px) {
  .row-column-menu-left > aside { position: static; }
}

.it-page-sections-container .it-page-section { scroll-margin-top: 2rem; }
.it-page-sections-container .it-page-section h2 { margin-top: 0; }
.it-page-sections-container .it-page-section.has-bg-grey {
  background: var(--bs-light, #f5f5f5);
  border-radius: .5rem;
}
.it-page-sections-container .anchor-offset { scroll-margin-top: 2rem; }

/* Navscroll */
.it-navscroll-wrapper .menu-link-list h3 {
  font-size: .75rem;
  text-transform: uppercase;
  color: var(--bs-secondary, #5C6F82);
  letter-spacing: .05em;
  margin-bottom: 1rem;
}
.it-navscroll-wrapper .link-list {
  list-style: none;
  padding: 0;
  border-left: 2px solid #e0e0e0;
}
.it-navscroll-wrapper .link-list .list-item {
  display: block;
  padding: .5rem 1rem;
  color: var(--bs-secondary, #5C6F82);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -2px;
}
.it-navscroll-wrapper .link-list .list-item:hover,
.it-navscroll-wrapper .link-list .list-item:focus,
.it-navscroll-wrapper .link-list .list-item.active {
  color: var(--bs-primary, #0066CC);
  border-left-color: var(--bs-primary, #0066CC);
  font-weight: 600;
}

/* Point list (date evento DI) */
.point-list-wrapper .point-list {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1rem;
}
.point-list-wrapper .point-list .point-list-aside {
  flex-shrink: 0;
  width: 4rem;
  text-align: center;
  padding: .5rem;
  border-radius: .25rem;
}
.point-list-wrapper .point-list .point-list-aside.point-list-primary {
  background: var(--bs-primary, #0066CC);
  color: #fff;
}
.point-list-wrapper .point-list .point-list-aside .point-date {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
}
.point-list-wrapper .point-list .point-list-aside .point-month {
  display: block;
  font-size: .75rem;
  text-transform: uppercase;
  margin-top: .25rem;
}
.point-list-wrapper .point-list .point-list-content { flex: 1; }

/* Sezioni di sfondo DI */
.bg-grey-card { background: #f5f6f7; }
.bg-grey-dsk { background: #fafafa; }
.shadow-contacts { box-shadow: inset 0 12px 16px -16px rgba(0, 0, 0, .12); }
.row-shadow {
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .04);
  border-radius: .5rem;
}
.has-bg-grey {
  background: #f5f6f7;
  border-radius: .5rem;
}

/* Big heading per cards costo */
.big-heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--bs-primary, #0066CC);
}

/* Tipografia helpers */
.lora,
.font-serif { font-family: 'Lora', Georgia, serif; }
.font-monospace { font-family: 'Roboto Mono', 'Courier New', monospace; }

/* Title sizes DI */
.title-xxlarge { font-size: 2rem; font-weight: 700; }
.title-xlarge  { font-size: 1.5rem; font-weight: 700; }
.title-xsmall-semi-bold { font-size: .875rem; font-weight: 600; }

.text-paragraph-card { font-size: 1rem; line-height: 1.5; }
.text-paragraph-small { font-size: .875rem; }

.u-grey-light { color: #5c6f82; }
.u-main-black { color: #1f1f1f; }

/* Card no-after border-start (sezioni cost evento DI) */
.card.no-after::after { display: none; }
.card.no-after.border-start {
  border-left: 4px solid var(--bs-primary, #0066CC) !important;
  border-radius: 0 .25rem .25rem 0;
}

/* Pagination DI (override WP nativo) */
.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
}
.pagination-wrapper .page-numbers {
  display: inline-block;
  padding: .5rem .85rem;
  margin: 0 .15rem;
  border-radius: .25rem;
  color: var(--bs-primary, #0066CC);
  text-decoration: none;
  border: 1px solid transparent;
}
.pagination-wrapper .page-numbers.current {
  background: var(--bs-primary, #0066CC);
  color: #fff;
}
.pagination-wrapper .page-numbers:hover:not(.current) {
  background: rgba(0, 102, 204, .1);
}

/* Card image-left con aspect-ratio fisso (lista news in evidenza / archivio) */
.oicf-card-img-hr__media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: .5rem;
  background: #f5f6f7;
}
.oicf-card-img-hr__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}
/* Fallback per browser senza aspect-ratio (Safari < 15) */
@supports not (aspect-ratio: 1) {
  .oicf-card-img-hr__media {
    position: relative;
    padding-top: 62.5%;
    height: 0;
  }
  .oicf-card-img-hr__media img {
    position: absolute;
    inset: 0;
  }
}

/* Img-full per figure dei single (pattern DI) */
.img-full { margin: 0; }
.img-full .figure-img {
  width: 100%;
  border-radius: .5rem;
  object-fit: cover;
  max-height: 480px;
}
.img-full .figure-caption {
  color: var(--bs-secondary, #5C6F82);
  font-size: .875rem;
}

/* Mobile-full button helper (DI) */
@media (max-width: 575.98px) {
  .btn.mobile-full { width: 100%; }
}

/* Spacing utility DI: padding-bottom 60px da breakpoint lg in su */
@media (min-width: 992px) {
  .pb-lg-60 { padding-bottom: 60px !important; }
  .pt-lg-60 { padding-top: 60px !important; }
  .py-lg-60 { padding-top: 60px !important; padding-bottom: 60px !important; }
}

/* Pagina hub Organizzazione (templates/page-organizzazione.php).
   Card grandi con icona DI + descrizione + count + CTA, hover sobrio. */
.oicf-org-card {
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.oicf-org-card:hover,
.oicf-org-card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1.25rem rgba(0, 102, 204, .12);
  border-color: var(--bs-primary, #06c) !important;
}
.oicf-org-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: .375rem;
  background-color: rgba(6, 102, 204, .08);
}
.oicf-org-card__icon .icon {
  width: 1.5rem;
  height: 1.5rem;
  fill: var(--bs-primary, #06c);
}

/* Accessibility helper WP standard (titoli pagination, ecc.) */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background: var(--bs-light, #f5f5f5);
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, .1);
  clip: auto !important;
  -webkit-clip-path: none;
          clip-path: none;
  color: #000;
  display: block;
  font-size: .875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/*
 * Banner avviso (blocco oicf/banner-avviso) — design self-contained.
 *
 * IMPORTANTE: queste regole sono completamente autosufficienti, NON
 * dipendono né da `.callout` di Bootstrap Italia né da altre classi
 * di terze parti. Le BEM `.oicf-banner-avviso__*` sono uniche al tema
 * e non collidono con nessun framework CSS comune.
 *
 * Layout: card flex orizzontale con icona a sinistra (in cerchio
 * colorato) e content a destra (titolo + testo + CTA). Bordo 1px sui
 * 4 lati + barra verticale 4px sul lato sinistro nella variante
 * semantica (info/success/warning/danger). Pattern visivamente vicino
 * ai callout DI ma più robusto e accessibile.
 */
/* Section wrapper (introdotta in v1.13.2): vincola il banner al wrap
   pagina via `<div class="container">` interno, in coerenza con gli
   altri blocchi server-rendered del tema (hero, quick-access,
   news-latest). Il margin verticale è ora sulla sezione, non sulla
   card, così la card stessa può essere riusata in altri contesti
   senza spaziatura inattesa. */
.oicf-banner-avviso-section {
  margin: 1.5rem 0;
}
.oicf-banner-avviso {
  --oicf-avviso-color: #06c;
  --oicf-avviso-bg-soft: #e6f0fa;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin: 0;
  padding: 1.25rem 1.5rem;
  background-color: #fff;
  border: 1px solid #e1e1e1;
  border-left: 4px solid var(--oicf-avviso-color);
  border-radius: 0.25rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  color: #1c2024;
}

.oicf-banner-avviso__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--oicf-avviso-bg-soft);
  color: var(--oicf-avviso-color);
  border-radius: 50%;
}
.oicf-banner-avviso__svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
  display: block;
}

.oicf-banner-avviso__body {
  flex: 1 1 auto;
  min-width: 0;
}
.oicf-banner-avviso__title {
  margin: 0 0 0.375rem 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--oicf-avviso-color);
}
.oicf-banner-avviso__text {
  margin: 0 0 0.5rem 0;
  line-height: 1.55;
  color: inherit;
}
.oicf-banner-avviso__text:last-child {
  margin-bottom: 0;
}
.oicf-banner-avviso__cta-wrapper {
  margin: 0.5rem 0 0 0;
}
.oicf-banner-avviso__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 600;
  color: var(--oicf-avviso-color);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.oicf-banner-avviso__cta:hover,
.oicf-banner-avviso__cta:focus-visible {
  color: var(--oicf-avviso-color);
  filter: brightness(0.85);
}

/* Variante info (default — blu) */
.oicf-banner-avviso--info {
  --oicf-avviso-color: #06c;
  --oicf-avviso-bg-soft: #e6f0fa;
}

/* Variante success (verde) */
.oicf-banner-avviso--success {
  --oicf-avviso-color: rgb(0, 127, 85);
  --oicf-avviso-bg-soft: #d9efe6;
}

/* Variante warning (arancio/oro) */
.oicf-banner-avviso--warning {
  --oicf-avviso-color: rgb(153, 92, 0);
  --oicf-avviso-bg-soft: #faecd1;
}

/* Variante danger (rosso) */
.oicf-banner-avviso--danger {
  --oicf-avviso-color: rgb(204, 51, 76);
  --oicf-avviso-bg-soft: #fadcdf;
}

/* Responsive: su mobile, l'icona scende sopra al body per non comprimere il testo */
@media (max-width: 575.98px) {
  .oicf-banner-avviso {
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.125rem;
  }
}

/* ================================================================
   AMMINISTRAZIONE TRASPARENTE
   Card delle sezioni, meta normativi e lista allegati scaricabili.
   Usato in: page-trasparenza.php, taxonomy-oicf_sezione_at.php,
   single-oicf_trasparenza.php
   ================================================================ */

/* ──────────────────────────────────────────────────────────────────
   Card "Sezione Amministrazione Trasparente" – pattern AGID/Designers
   Italia `card.card-teaser shadow rounded` di Bootstrap Italia v2.13:
   icona primary a sinistra + body con titolo (h5), card-text e
   card-signature di meta. La card è resa interamente cliccabile da
   `.stretched-link` sull'<a> nel titolo (markup BS Italia "puro",
   nessuna classe nuova oltre al modifier `oicf-at-section-card`).

   Override locali in questo blocco:
    - micro-animazione hover (BS Italia card-teaser è statica),
    - bordo primary visibile al focus per accessibilità,
    - h5 colorata primary come da template DI ANAC,
    - card-signature come "pill" leggera (analogo a `oicf-at-pill`),
    - line-clamp del card-text a 2 righe per altezze uniformi,
    - eliminazione di link decoration interna spuria su :hover.
   ────────────────────────────────────────────────────────────── */
.oicf-at-section-card {
  transition:
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
  border: 1px solid transparent; /* riservato per hover/focus */
}

.oicf-at-section-card:hover,
.oicf-at-section-card:focus-within {
  border-color: var(--bs-primary, #06c);
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-2px);
}

/* Titolo: stile DI con primary + sottolineatura a hover discreta. */
.oicf-at-section-card .card-title {
  line-height: 1.3;
}
.oicf-at-section-card .card-title a {
  color: var(--bs-primary, #06c);
}
.oicf-at-section-card:hover .card-title a {
  text-decoration: underline;
}

/* Card text: tronca a 2 righe per mantenere altezza coerente nelle
   griglie con descrizioni di lunghezza variabile. */
.oicf-at-section-card .card-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.75rem;
  color: #5c6f82;
}

/* Signature di meta: pill leggera (riprende il look di `.oicf-at-pill`,
   ma renderizzata sul pattern BS Italia `.card-signature`). */
.oicf-at-section-card .card-signature {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.7rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--bs-primary, #06c);
  background-color: rgba(0, 102, 204, 0.08);
  border: 1px solid rgba(0, 102, 204, 0.18);
  border-radius: 999px;
  white-space: nowrap;
  margin-top: auto; /* spinge la pill sul fondo se la card è alta */
  align-self: flex-start;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.oicf-at-section-card .card-signature .icon {
  width: 0.875rem;
  height: 0.875rem;
  fill: currentColor;
}
.oicf-at-section-card__signature--muted {
  color: #5c6f82 !important;
  background-color: #f5f6f7 !important;
  border-color: #e6e9f2 !important;
  font-style: italic;
}
.oicf-at-section-card:hover .card-signature:not(.oicf-at-section-card__signature--muted),
.oicf-at-section-card:focus-within .card-signature:not(.oicf-at-section-card__signature--muted) {
  background-color: rgba(0, 102, 204, 0.14);
  border-color: rgba(0, 102, 204, 0.32);
}

/* card-body in colonna così la signature a fondo card si allinea
   anche nelle card più corte (pattern "stretchato a una riga"). */
.oicf-at-section-card .card-body {
  display: flex;
  flex-direction: column;
}

/* Icona primary di card-teaser: BS Italia la rende già 48px;
   uniformiamo dimensione e allineamento verticale al body. */
.oicf-at-section-card > .icon.icon-primary {
  width: 3rem;
  height: 3rem;
  margin-top: 0.25rem;
}

/* Sezione "Contatti" in fondo alle pagine (template-parts/components/contacts-bottom.php).
   Riusa il pattern AGID/Designers Italia `card.card-teaser shadow rounded`
   (icona primary a sinistra + body con titolo+testo): qui sotto solo
   override leggeri per:
    - tipografia della label uppercase (non default su h5 DI)
    - colori dei link interni e dell'azione "Visualizza sulla mappa"
    - micro-animazione al hover (la card-teaser DI è statica). */
.oicf-contacts-bottom .oicf-contacts-bottom__card {
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.oicf-contacts-bottom .oicf-contacts-bottom__card:hover,
.oicf-contacts-bottom .oicf-contacts-bottom__card:focus-within {
  box-shadow: 0 0.5rem 1.25rem rgba(0, 102, 204, 0.1) !important;
  transform: translateY(-2px);
}
.oicf-contacts-bottom .oicf-contacts-bottom__label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #5c6f82;
  margin-bottom: 0.5rem;
}
.oicf-contacts-bottom .oicf-contacts-bottom__value {
  font-size: 0.95rem;
  line-height: 1.45;
  color: #1f1f1f;
  margin-bottom: 0;
  word-break: break-word;
}
.oicf-contacts-bottom .oicf-contacts-bottom__value a {
  color: var(--bs-primary, #0066CC);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.oicf-contacts-bottom .oicf-contacts-bottom__value a:hover,
.oicf-contacts-bottom .oicf-contacts-bottom__value a:focus-visible {
  border-bottom-color: currentColor;
}
.oicf-contacts-bottom .oicf-contacts-bottom__action {
  margin-top: 0.5rem;
  font-size: 0.875rem;
}
.oicf-contacts-bottom .oicf-contacts-bottom__action a {
  color: var(--bs-primary, #0066CC);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.oicf-contacts-bottom .oicf-contacts-bottom__action a:hover,
.oicf-contacts-bottom .oicf-contacts-bottom__action a:focus-visible {
  text-decoration: underline;
}

/* Pill di stato per i contatori AT (sotto-sezioni / documenti / allegati).
   Usato sia nelle card delle sezioni che nelle card della lista documenti. */
.oicf-at-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--bs-primary, #0066CC);
  background-color: rgba(0, 102, 204, 0.08);
  border: 1px solid rgba(0, 102, 204, 0.18);
  white-space: nowrap;
}
.oicf-at-pill .dashicons {
  font-size: 14px;
  width: 14px;
  height: 14px;
  line-height: 1;
  color: inherit;
}
.oicf-at-doc:hover .oicf-at-pill {
  background-color: rgba(0, 102, 204, 0.14);
  border-color: rgba(0, 102, 204, 0.32);
}
.oicf-at-sections .oicf-at-rif {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-style: italic;
}
.oicf-at-sections .oicf-at-rif .dashicons {
  font-size: 1rem;
  height: 1rem;
  width: 1rem;
}

.oicf-at-meta .badge {
  font-size: 0.85rem;
  font-weight: 400;
  padding: 0.4rem 0.65rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: normal;
  text-align: left;
}
.oicf-at-meta .badge strong {
  font-weight: 600;
}
.oicf-at-meta .badge .dashicons {
  font-size: 1rem;
  height: 1rem;
  width: 1rem;
}

.oicf-at-docs .oicf-at-doc {
  border-radius: 0.375rem;
  transition: box-shadow 0.18s ease;
}
.oicf-at-docs .oicf-at-doc:hover {
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.08) !important;
}
.oicf-at-doc-meta {
  align-items: center;
}
.oicf-at-doc-meta .dashicons {
  font-size: 1rem;
  height: 1rem;
  width: 1rem;
  vertical-align: -0.15rem;
}

.oicf-at-attachments {
  margin: 0;
  padding: 0;
}
.oicf-at-attachments li {
  margin-bottom: 0.5rem;
}
.oicf-at-attachments li:last-child {
  margin-bottom: 0;
}
.oicf-at-attachment {
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.oicf-at-attachment:hover,
.oicf-at-attachment:focus {
  background-color: #fff !important;
  border-color: var(--bs-primary, #06c) !important;
  text-decoration: none;
}
.oicf-at-attachment .oicf-at-attachment-name {
  word-break: break-word;
}
.oicf-at-attachment .dashicons {
  font-size: 1.25rem;
  height: 1.25rem;
  width: 1.25rem;
  flex-shrink: 0;
}

.oicf-at-single .entry-content :is(h2, h3) {
  color: var(--bs-secondary, #5a6772);
}

@media (max-width: 575.98px) {
  .oicf-at-meta {
    flex-direction: column;
    align-items: flex-start !important;
  }
  .oicf-at-meta .badge {
    width: auto;
  }
  .oicf-at-doc-meta {
    flex-direction: column;
    gap: 0.5rem !important;
    align-items: flex-start !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   Card "Preview Organo / Ufficio" sulla pagina hub Organizzazione
   (templates/page-organizzazione.php). Pattern AGID/Designers Italia
   `card.card-teaser shadow rounded` con icona primary + body ricco
   (tipo, responsabile, contatti). La card è interamente cliccabile
   via `.stretched-link` sul titolo.
   ────────────────────────────────────────────────────────────── */
.oicf-org-preview-card {
  transition:
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
  border: 1px solid transparent;
}

.oicf-org-preview-card:hover,
.oicf-org-preview-card:focus-within {
  border-color: var(--bs-primary, #06c);
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-2px);
}

.oicf-org-preview-card > .icon.icon-primary {
  width: 2.5rem;
  height: 2.5rem;
  margin-top: 0.25rem;
}

.oicf-org-preview-card .card-body {
  display: flex;
  flex-direction: column;
}

.oicf-org-preview-card .card-title a {
  color: var(--bs-primary, #06c);
}
.oicf-org-preview-card:hover .card-title a {
  text-decoration: underline;
}

.oicf-org-preview-card .card-signature {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.65rem;
  margin-top: auto;
  align-self: flex-start;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--bs-primary, #06c);
  background-color: rgba(0, 102, 204, 0.08);
  border: 1px solid rgba(0, 102, 204, 0.18);
  border-radius: 999px;
  white-space: nowrap;
}
.oicf-org-preview-card .card-signature .icon {
  width: 0.875rem;
  height: 0.875rem;
  fill: currentColor;
}

/* Lista contatti compatta in fondo alla card ufficio:
   icone allineate al testo, righe con padding minimo. */
.oicf-org-preview-card__contacts {
  margin-top: 0.75rem;
}
.oicf-org-preview-card__contacts li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.25rem 0;
  color: #1c2024;
  font-size: 0.95rem;
  line-height: 1.4;
}
.oicf-org-preview-card__contacts .icon {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  fill: var(--bs-primary, #06c) !important;
}

/* ──────────────────────────────────────────────────────────────────
   Card "Allegato" (template-parts/components/attachment-card.php).
   Pattern AGID/Designers Italia: scheletro `card.card-teaser` BS Italia
   con icona primary tipo-specifica + body con titolo, riga meta
   (formato + peso) sotto al titolo e CTA "Scarica" esplicita.
   La card è interamente cliccabile via `.stretched-link` sul titolo.
   ────────────────────────────────────────────────────────────── */
.oicf-attachment-card {
  position: relative;
  transition:
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
  border: 1px solid transparent;
}

.oicf-attachment-card:hover,
.oicf-attachment-card:focus-within {
  border-color: var(--bs-primary, #06c);
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-2px);
}

/* Icona primary del file: fissiamo dimensioni leggermente più grandi
   di .icon-lg per dare peso visivo al "type indicator". */
.oicf-attachment-card > .icon.icon-primary {
  width: 2.75rem;
  height: 2.75rem;
  margin-top: 0.1rem;
}

/* Card-body strutturata a "grid" per portare la CTA "Scarica" sul lato
   destro su desktop (≥ md), allineata verticalmente con titolo e meta.
   Su mobile (< md) torna a layout verticale: titolo, meta, CTA sotto. */
.oicf-attachment-card .card-body {
  display: flex;
  flex-direction: column;
}

.oicf-attachment-card .card-title a {
  color: var(--bs-primary, #06c);
}
.oicf-attachment-card:hover .card-title a {
  text-decoration: underline;
}

.oicf-attachment-card__meta {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* CTA "Scarica" come pulsante di azione: ben visibile, ma non un vero
   <a> perché lo stretched-link è già sul titolo (intera card cliccabile).
   Mobile: pill compatta sotto al titolo. Desktop: spostata a destra
   tramite grid del card-body, con padding più generoso. */
.oicf-attachment-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  color: var(--bs-primary, #06c);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--bs-primary, #06c);
  border-radius: 999px;
  background: transparent;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.oicf-attachment-card__cta .icon {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
  transition: transform 0.18s ease;
}
.oicf-attachment-card:hover .oicf-attachment-card__cta,
.oicf-attachment-card:focus-within .oicf-attachment-card__cta {
  background: var(--bs-primary, #06c);
  color: #fff;
}
.oicf-attachment-card:hover .oicf-attachment-card__cta .icon,
.oicf-attachment-card:focus-within .oicf-attachment-card__cta .icon {
  transform: translateY(2px);
}

@media (min-width: 768px) {
  .oicf-attachment-card .card-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title cta"
      "meta  cta";
    column-gap: 1.5rem;
    row-gap: 0.15rem;
    align-items: center;
  }
  .oicf-attachment-card .card-title { grid-area: title; margin-bottom: 0; }
  .oicf-attachment-card__meta       { grid-area: meta;  margin-bottom: 0; }
  .oicf-attachment-card__cta {
    grid-area: cta;
    align-self: center;
    justify-self: end;
  }
}

/* ──────────────────────────────────────────────────────────────────
   Blocco "Ultime news" (oicf/news-latest).
   Sezione con fondo grigio chiaro per dare ritmo visivo alla home:
   le card di news (bianche) staccano sul background. Coerente con
   il pattern `bg-grey-card` già usato negli archivi.
   Doppio selettore (`section.oicf-news-latest`, `.wp-block-oicf-news-latest`)
   per blindare la specificità contro eventuali reset Gutenberg
   sul wrapper di blocco.
   ────────────────────────────────────────────────────────────── */
.oicf-news-latest,
section.oicf-news-latest,
.wp-block-oicf-news-latest {
  background-color: #f5f6f7;
}

/* ──────────────────────────────────────────────────────────────────
   Card con immagine in cima → angoli superiori arrotondati.
   Bootstrap Italia applica `border-top-*-radius` solo su
   `.card.card-img.rounded .img-responsive-wrapper`, ma le nostre
   card-news/card-evento usano `card card-bg border` (non `card-img`),
   per cui l'immagine restava squadrata sopra mentre la card sotto era
   arrotondata. Targetto `.img-responsive-wrapper` come primo figlio
   diretto di `.card` per non rompere altri layout (immagini in mezzo
   o card senza thumbnail).
   ────────────────────────────────────────────────────────────── */
.card > .img-responsive-wrapper:first-child {
  border-top-left-radius: var(--bs-card-inner-border-radius, 4px);
  border-top-right-radius: var(--bs-card-inner-border-radius, 4px);
  overflow: hidden;
}

/* ──────────────────────────────────────────────────────────────────
   Blocco "Link utili" (oicf/link-utili).
   Pattern Designers Italia / AGID: griglia di link semplici con
   freccia destra, leggera (no card piene), pensata come ultimo
   blocco di pagina prima del footer. Bg bianco per contrasto
   con la sezione "Ultime news" subito sopra (bg grigio).
   ────────────────────────────────────────────────────────────── */
.oicf-link-utili {
  background-color: #ffffff;
}
.oicf-link-utili__list { margin-bottom: 0; }
.oicf-link-utili__item {
  color: var(--bs-primary, #06c);
  background-color: #ffffff;
  border-color: rgba(0, 0, 0, .08) !important;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.oicf-link-utili__item:hover,
.oicf-link-utili__item:focus-visible {
  background-color: rgba(0, 102, 204, 0.04);
  border-color: var(--bs-primary, #06c) !important;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.06);
}
.oicf-link-utili__title {
  color: var(--bs-primary, #06c);
  line-height: 1.35;
}
.oicf-link-utili__item:hover .oicf-link-utili__title,
.oicf-link-utili__item:focus-visible .oicf-link-utili__title {
  text-decoration: underline;
}
.oicf-link-utili__desc {
  color: #5C6F82;
  line-height: 1.45;
}
.oicf-link-utili__icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: var(--bs-primary, #06c);
  transition: transform 0.18s ease;
}
.oicf-link-utili__item:hover .oicf-link-utili__icon,
.oicf-link-utili__item:focus-visible .oicf-link-utili__icon {
  transform: translateX(3px);
}