/* ============================================================
 * accessibility.css — Geoportale RNDT
 * Stili dedicati a conformità WCAG 2.1 AA.
 * Tutte le regole sono additive: non sovrascrivono il layout esistente.
 *
 * NOTA: la grafica deve rimanere identica al sito di sviluppo
 * https://geo.esriitalia.it/geoportale_dev/
 * Quindi NON sono ridefinite regole esistenti (.collaudo, img.accessibility,
 * a.accedi, div.logo-header) — l'HTML mantiene gli stessi tag/classi.
 * ============================================================ */

/* -- Dropdown utente: rendere visibile/nascosto il menu --
 * In template.css non c'è una regola .custom-dropdown-menu (era inline).
 * Replico esattamente lo stile inline originale.
 */
.custom-dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    background: #fff;
    min-width: 150px;
    border: 1px solid #ccc;
    padding: 0;
    margin: 0;
    list-style: none;
    z-index: 9999;
}
.custom-dropdown-menu.is-open {
    display: block;
}
/* Voci dropdown utente — specificità più alta di template.css
 * `ul.user-dropdown > li > a` per garantire padding visibile. */
ul.custom-dropdown-menu > li > a,
ul.custom-dropdown-menu.user-dropdown > li > a {
    display: block;
    padding: 10px 16px;
    color: #333;
    text-decoration: underline;
    line-height: 1.4;
}
ul.custom-dropdown-menu > li > a:hover,
ul.custom-dropdown-menu > li > a:focus {
    background-color: #f5f5f5;
}
ul.custom-dropdown-menu > li > a:focus {
    outline: 2px solid #000;
    outline-offset: -2px;
}
/* Spaziatura tra le voci */
ul.custom-dropdown-menu > li + li > a {
    border-top: 1px solid #eee;
}

/* -- Form di login: input username e password della STESSA larghezza --
 * Bootstrap .input-group default è display:table. Comportamento:
 *   - .input-group con 1 solo input → la cella prende solo larghezza del
 *     contenuto / width attributo dell'input (NON full-width container)
 *   - .input-group con input + button → 2 celle che si dividono
 *
 * Conseguenza: username (solo input) RISULTAVA STRETTO mentre password
 * (input + toggle) era largo MA con cell-divide veniva ridotto.
 *
 * Fix: per TUTTI gli .input-group con classe .full-width (usata in login)
 * forzo display:block + position:relative + input width 100%. Il toggle
 * button password si sovrappone in absolute senza ridurre l'input.
 */
.input-group.full-width {
    display: block !important;
    position: relative !important;
    width: 100%;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}
.input-group.full-width > input {
    width: 100%;
    height: 38px;
    padding: 6px 12px;
    box-sizing: border-box;
    display: block;
}
.input-group.full-width:has(> .toggle-password) > input {
    padding-right: 44px;   /* spazio per icona occhio in overlay */
}
.user-login .top20 > .input-group.full-width + .input-group.full-width {
    margin-top: 8px;
    height: 35px;
}

/* Pagine reset password (richiesta email / conferma codice): la card NON è
 * text-center come il login, quindi l'etichetta (blocco a sinistra) restava
 * disallineata rispetto all'input, che .input-group.full-width centra a 360px.
 * Vincolo l'intero blocco campo .top20 alla stessa colonna 360px centrata:
 * etichetta e input condividono il bordo sinistro e risultano allineati,
 * coerentemente con lo step "complete" e con il login. */
.reset-form .top20 {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

/* WCAG 1.4.3 (AA) — Hero home: H1 chiaro su immagine di sfondo variabile.
 * Senza overlay solido il contrasto non è garantibile. Aggiungo un overlay
 * scuro semi-trasparente che porta il testo bianco/grigio chiaro a ~10:1
 * sulla porzione sotto al titolo. */
.home-map {
    position: relative;
}
.home-map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: none;
    z-index: 0;
}
.home-map-content {
    position: relative;
    z-index: 1;
}
.home-map .home-title {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.user-login .toggle-password {
    min-height: 38px;
    padding: 6px 12px;
}
.toggle-password {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    padding: 10px 12px;
    min-width: 44px;
    min-height: 44px;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    z-index: 2;
    /* Mobile fix: evita il 300ms tap delay e i gesture conflicts (es. double-tap
     * to zoom su iOS) che possono inghiottire il primo tap sull'icona occhio. */
    touch-action: manipulation;
    pointer-events: auto;
}
/* Le icone dentro il button non devono catturare l'evento touch
 * (altrimenti su mobile l'event target sara' lo span e non il button,
 * potenzialmente perdendosi nella delegation). */
.toggle-password > * {
    pointer-events: none;
}
.toggle-password:focus {
    outline: 2px solid orange;
    outline-offset: -2px;
}

/* -- Hamburger mobile (estratto da includes/header.php inline) --
 * Visibile solo a viewport <= 959px, identico all'originale.
 */
.navbar-toggle {
    display: none;
}
@media (max-width: 959px) {
    .navbar-toggle {
        display: block;
        background: #003366;
        border: 1px solid #fff;
        padding: 8px 10px;
        margin: 10px;
        cursor: pointer;
        float: right;
    }
    .navbar-toggle .icon-bar {
        display: block;
        width: 22px;
        height: 2px;
        background: #fff;
        margin: 4px 0;
    }
    #menu-main {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    #menu-main.rolled-down {
        max-height: 1000px;
        overflow: visible;
    }
}

/* -- Riduzione movimento (WCAG 2.3.3) --
 * Rispetta la preferenza di sistema "Riduci animazioni".
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* -- Preferenza contrasto elevato (WCAG advisory 2.2 AA) --
 * Per utenti che hanno impostato Windows "High contrast" o macOS
 * "Increase contrast" alziamo i contrasti CSS oltre AA. */
@media (prefers-contrast: more) {
    body {
        color: #000;
    }
    a, a:link, a:visited {
        text-decoration: underline;
    }
    .text-muted,
    small.text-muted,
    .d-block.text-muted {
        color: #303030 !important;
    }
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-success,
    .btn-danger,
    .btn-warning,
    .btn-info {
        border: 2px solid currentColor !important;
    }
    /* Bordo extra sui focus indicator quando l'utente vuole più contrasto */
    :focus-visible {
        outline: 3px solid currentColor !important;
        outline-offset: 2px !important;
    }
}

/* WCAG 1.4.3 + 1.4.11 — Footer scuro: link e icone social avevano
 * contrasto 2.27:1 (#0066cc su #003366). Forzo bianco su footer scuro per
 * superare 4.5:1 (testo) e 3:1 (UI components / icone). */
.section_grey_darker .footer-contacts a,
.section_grey_darker .footer-contacts a:link,
.section_grey_darker .footer-contacts a:visited,
footer.footer_container a[href^="skype:"],
footer.footer_container a[href^="mailto:"],
footer.footer_container a[href^="tel:"],
footer.footer_container .footer_social a,
footer.footer_container .footer_links a {
    color: #ffffff !important;
    text-decoration: underline;
}
/* Icone social: NON applicare bianco — le icone stanno dentro un cerchio
 * di sfondo bianco (.footer_social .link_social > span). Bianco su bianco
 * = invisibili. Le riporto al colore scuro originale (#30373d → contrasto
 * ~10:1 su #fff, ok WCAG AA per UI components). */
footer.footer_container .footer_social .link_social .fa {
    color: #30373d !important;
    text-decoration: none !important;
}
/* Spaziatura tra "Seguici su" e le icone social: lo <span> testo è il
 * primo figlio diretto del .footer_social. Gli do margine destro per
 * staccarlo dai cerchi bianchi. */
.footer_social > span:first-child {
    margin-right: 12px;
    display: inline-block;
    vertical-align: middle;
}
.footer_social > a.link_social {
    vertical-align: middle;
}
.section_grey_darker .footer-contacts a:hover,
footer.footer_container a[href^="skype:"]:hover,
footer.footer_container a[href^="mailto:"]:hover,
footer.footer_container .footer_social a:hover,
footer.footer_container .footer_links a:hover {
    color: #e0e0e0 !important;
}

/* WCAG 1.4.3 — Placeholder dei campi input: contrasto 2.85:1 (#999 su #fff)
 * insufficiente. Porto a #595959 che dà 7:1 (esempio: "Cerca..." nel header). */
::placeholder {
    color: #595959 !important;
    opacity: 1; /* Firefox abbassa l'opacità di default */
}
::-webkit-input-placeholder { color: #595959 !important; }
::-moz-placeholder         { color: #595959 !important; opacity: 1; }
:-ms-input-placeholder     { color: #595959 !important; }
:-moz-placeholder          { color: #595959 !important; }

/* -- WCAG 2.4.4 — Link a file PDF: aggiungo indicazione tipo file
 *    tramite pseudo-elemento, leggibile da screen reader (NON aria-hidden). */
a[href$=".pdf"]::after,
a[href$=".PDF"]::after,
a[href*=".pdf?"]::after {
    content: " (PDF)";
    font-size: 0.85em;
    color: inherit;
}
a[href$=".pdf"]:hover::after,
a[href$=".PDF"]:hover::after {
    text-decoration: none;
}

/* -- sr-only / visually-hidden fallback (Bootstrap 3 ha .sr-only,
 *    Bootstrap 5 / Joomla 4 usano .visually-hidden).
 *    Senza questa regola joomla-alert mostra "danger"/"error" letterale
 *    come heading visibile invece di tradurlo per i soli screen reader. */
.sr-only,
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
}

/* NOTA: il focus visibile globale NON è ridefinito qui perché
 * template.css riga ~1370 ha già `:focus { outline: 2px solid orange !important; }`
 * che con !important non potrebbe essere sovrascritto. Il focus è quindi
 * visibile per default (in arancione) — soddisfa WCAG 2.4.7.
 */

/* ============================================================
 * Fix contrasto colore — WCAG 1.4.3 (livello AA, rapporto 4.5:1)
 * ============================================================ */

/* #6 — Tab mappa Ricerca Dettagliata: testo era #eeeeee su bianco (1.2:1)
 * Riporto a #303030 quando il menuDove è disabled (stato iniziale).
 * Quando JS rimuove .disabled, prende il colore Bootstrap default.
 */
#menuDove .nav-link,
#menuDove.disabled .nav-link {
    color: #303030;
    opacity: 1;
}
#menuDove .nav-link.active {
    color: #003366;
}

/* #7 — .btn-danger.text-white con <small>: il rosso Bootstrap #dc3545 sul
 * testo bianco in dimensione ridotta non passa AA. Forzo un rosso più scuro
 * (#b02a37) che con bianco ha ~6.8:1.
 */
.btn-danger.text-white,
small.btn-danger.text-white,
.btn-danger.text-white small {
    background-color: #b02a37 !important;
    color: #ffffff !important;
}

/* .text-muted con sfondi vari: Bootstrap default #6c757d può scendere sotto
 * 4.5:1 se applicato su sfondi non-bianco-puro. Force #595959 (4.6:1 OK).
 */
.text-muted,
small.text-muted,
.d-block.text-muted {
    color: #595959 !important;
}

/* #22 — H1 homepage su immagine: il colore #f5f5f0 può non avere contrasto
 * sufficiente in tutte le porzioni dell'immagine. Aggiungo text-shadow
 * scuro per garantire la leggibilità su qualsiasi sfondo (tecnica
 * raccomandata WCAG: enhanced contrast via shadow).
 */
.home-map .home-title,
.home-title.grey,
.over-article h1 {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 6px rgba(0, 0, 0, 0.5);
}

/* WCAG 2.1.1 + 4.1.2 — Pulsanti icona-only nella tabella catalogo.
 * Le SVG con onclick (non focusable, non keyboard) sono state wrappate in
 * <button class="btn-icon-action">. Questa regola le rende visivamente
 * identiche alle SVG originali (no border/bg, cursor pointer).
 */
.btn-icon-action {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0 2px;
    cursor: pointer;
    color: inherit;
    line-height: 0;
    display: inline-block;
    vertical-align: middle;
}
.btn-icon-action:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}
.btn-icon-action:focus-visible {
    outline: 2px solid orange;
    outline-offset: 2px;
}

/* WCAG 2.4.7 Focus Visibile — override per le ~19 regole Bootstrap che
 * azzerano outline su form-control, dropdown-toggle, navbar-toggle, ecc.
 * Pattern :focus-visible (focus solo da tastiera) per non mostrare
 * outline sui click mouse mantenendo l'indicatore obbligatorio per AT.
 */
.form-control:focus-visible,
.dropdown-toggle:focus-visible,
.navbar-toggle:focus-visible,
.carousel-control:focus-visible,
.btn:focus-visible,
.btn.active:focus-visible,
.btn:active:focus-visible,
a:focus-visible {
    outline: 2px solid orange !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

/* WCAG 2.5.8 (AA): target di tocco minimo 24×24 px.
 * I 4 pulsanti accessibility toolbar erano 20×20 — sotto la soglia.
 * Aumentati a 28×28 (in linea con la fascia preheader 48px, +14px lato).
 */
.accessibility-buttons img.accessibility,
img.accessibility {
    min-width: 28px;
    min-height: 28px;
    padding: 4px;
}

/* WCAG 2.5.8 (AA): pulsanti expander menu erano 20×30 — sotto soglia 24×24.
 * Forzato min 24 (rect non-target-size adjusted). Mantiene visual freccia. */
.open-submenu {
    min-width: 24px;
    min-height: 24px;
    padding: 4px 6px;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.open-submenu:focus-visible {
    outline: 2px solid orange;
    outline-offset: 2px;
}

/* WCAG 1.3.1: footer "Contatti" / "SITE_NAME" erano <span> stilati.
 * Convertiti in <h2 class="footer-section-title"> per semantica corretta.
 * Questa regola preserva il visual originale (font-size, weight, no margin h2 default).
 */
.footer-section-title {
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    padding: 0;
    line-height: inherit;
    color: inherit;
}

/* #11 — Link paginazione Bootstrap #007bff su #fff (3.97:1, fail AA 4.5:1).
 * Forzato a #0056b3 (7.0:1 OK) sui link che hanno il colore primary di Bootstrap.
 */
.pagination a,
.pagination .page-link,
ul.pagination > li > a,
a.btn-link,
.page-item .page-link {
    color: #0056b3 !important;
}
.pagination a:hover,
.pagination .page-link:hover {
    color: #003d80 !important;
}

/* N5 — Badge "Scaduto/Non Pubblicato" #ffffff su #f0ad4e (arancione Bootstrap)
 * = contrasto 1.94:1, ben sotto 4.5:1 richiesto. Sostituisco con #856404 su
 * #fff3cd (warning Bootstrap 5 alert): contrasto 8.2:1. Pattern visibile e
 * accessibile, conforme al senso semantico di avvertimento.
 */
.label-warning,
.label.label-warning,
.list-published.label-warning {
    background-color: #fff3cd !important;
    color: #664d03 !important;
    border: 1px solid #ffecb5 !important;
}

/* ============================================================
 * N11 — Touch target ≥ 24×24px (WCAG 2.5.8 AA in WCAG 2.2)
 * Espansione dell'area cliccabile via padding senza alterare le icone visibili.
 * ============================================================ */

/* Icone social header e footer (erano 24×20px → 24×24 min) */
.header_social,
.footer_social .link_social,
.footer_social .header_social {
    display: inline-block;
    min-width: 24px;
    min-height: 24px;
    padding: 2px;
    vertical-align: middle;
}

/* Bottone lingua "ITA" nel dropdown header (era 49×25 → 49×28 min)
 * Padding interno per espandere area cliccabile senza spostare il testo. */
.blang.btn-primary.dropdown-toggle {
    min-height: 28px;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* Bottone search nell'header allineato all'input adiacente.
 * Causa del mismatch: .search-query in template.css ha `margin: 10px 0`
 * che in flexbox aumenta la dimensione del cross-axis del container
 * — gli altri flex items in stretch prendono quell'altezza maggiore
 * e sporgono dall'input.
 * Fix: azzero il margin verticale dentro #search-form così tutti gli
 * item hanno la stessa altezza naturale + stretch corretto. */
#search-form {
    align-items: stretch;
    margin-top: 20px;   /* separa la barra ricerca dalla riga social/lingua sopra */
}
#search-form .search-query {
    margin-top: 0;
    margin-bottom: 0;
}
.header_search_button {
    align-self: stretch;
    height: auto;
    padding: 0 10px;
    box-sizing: border-box;
    border: 0;
    background-color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Link "Agenzia per l'Italia Digitale" e generici .preheader a (era 23px alto).
 * IMPORTANTE: escludo .accedi che ha già `line-height: 48px` per centrare
 * verticalmente il testo nella fascia preheader 48px. Senza :not(.accedi)
 * il line-height: 20px qui sotto sovrascrive il 48px originale e il
 * testo "ACCEDI AI SERVIZI" appare attaccato in alto. */
section.preheader a:not(.accedi) {
    display: inline-block;
    min-height: 24px;
    padding: 2px 0;
    line-height: 20px;
}

/* Tap target generico per pulsanti icona (close × ecc.) */
button.close {
    min-width: 24px;
    min-height: 24px;
}

/* WCAG 1.4.1 (A) — Uso del colore: i link inline nei contenuti articolo non
 * possono affidarsi al solo blu per distinguersi (contrasto vs grigio testo
 * = 1.04:1, sotto i 3:1 minimi). Sottolineatura sempre presente nei contesti
 * "prosa" (main e modal-body). Escludo elementi UI (nav, btn, card, ecc.)
 * dove la sottolineatura sarebbe rumore visivo: link di navigazione, bottoni
 * mascherati da link, link in liste menu, ecc. */
main p a,
main li a,
main td a,
main dd a,
main blockquote a,
main address a,
.modal-body p a,
.modal-body li a {
    text-decoration: underline;
}
/* Eccezioni: link che non sono prosa anche se dentro <main> */
main .btn,
main .btn:hover,
main .btn:focus,
main .pagination-list a,
main .pagination a,
main .page-link,
main .nav a,
main .breadcrumb a,
main .card-title a,
main .news-title a,
main .news a,
main .item.category_item a,
main .footer_links a,
main .skip-main,
main .accedi {
    text-decoration: none;
}
main .btn:hover,
main .btn:focus-visible {
    text-decoration: none;
}

/* WCAG 2.4.7 (AA) — Focus visibile su elementi Bootstrap con outline:0.
 * Le regole Bootstrap 3 originali azzerano outline su .form-control:focus,
 * .dropdown-toggle:focus, .navbar-toggle:focus, .carousel-control:focus,
 * .dropdown-menu > .active > a:focus. Riapplico un indicatore visibile.
 * Uso :focus (non :focus-visible) per garantirne la presenza anche su
 * implementazioni AT che simulano click; ma per il mouse aggiungo
 * un override :focus:not(:focus-visible) che nasconde. */
.form-control:focus,
.dropdown-toggle:focus,
.navbar-toggle:focus,
.carousel-control:focus,
.dropdown-menu > .active > a:focus,
.dropdown-menu > li > a:focus {
    outline: 3px solid #005fcc !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6), 0 0 0 5px #005fcc !important;
}
.form-control:focus:not(:focus-visible),
.dropdown-toggle:focus:not(:focus-visible),
.navbar-toggle:focus:not(:focus-visible),
.carousel-control:focus:not(:focus-visible),
.dropdown-menu > .active > a:focus:not(:focus-visible),
.dropdown-menu > li > a:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* WCAG 1.4.3 (AA) — Tab inattivi del widget jQuery UI (.ui-tabs-nav a[role=tab])
 * usavano #5A6772 → contrasto 4.01:1 su bianco (sotto la soglia 4.5:1 per
 * testo normale 17px). Scurito a #4a5568 → 7.55:1. */
.ui-tabs-nav a[role="tab"] {
    color: #4a5568 !important;
}
.ui-tabs-nav a[role="tab"]:hover,
.ui-tabs-nav a[role="tab"].ui-state-active,
.ui-tabs-nav a[role="tab"].ui-tabs-active {
    color: #1c2024 !important;
}

/* WCAG 2.4.1 (A) — Skip link: garantisco la regola :focus che riporta il
 * link a schermo, in caso template.css/base.css non la includa. */
a.skip-main,
a.skip-link {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 100000;
}
a.skip-main:focus,
a.skip-link:focus,
a.skip-main:active,
a.skip-link:active {
    left: 8px;
    top: 8px;
    width: auto;
    height: auto;
    padding: 10px 14px;
    background: #303030;
    color: #ffffff !important;
    text-decoration: underline;
    outline: 3px solid #ffcc00;
    outline-offset: 2px;
    z-index: 100000;
}

/* WCAG 1.4.3 (AA) — Fix contrasto rilevati da pa11y/axe-core sulla home.
 * Tutti gli elementi qui sotto sono o aria-hidden (decorativi) o testo
 * su sfondo immagine variabile: usiamo background semi-trasparente scuro
 * per garantire 4.5:1 in ogni condizione, senza alterare la grafica. */

/* Banner ambiente (es. "COLLAUDO") — marker dev/staging. Posizionato in alto
 * centrato sopra l'header. Reso block per occupare l'intera riga e
 * centrato col text-align. */
.collaudo {
    color: #856404;
    background-color: #fff3cd;
    padding: 4px 8px;
    font-size: 16px;
    font-weight: bold;
    display: block;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #ffeeba;
    position: relative;
    z-index: 1000;
    pointer-events: none;
}

/* H1 home title + link "Advanced search" su immagine: nessun bg, contrasto
 * affidato a .home-map-overlay rgba(0,0,0,0.5) + text-shadow scuro definito
 * più sopra. axe-core può segnalare 2 incomplete "bgImage" (needs review,
 * NON violations) — accettiamo il warning per preservare la grafica. */

/* Cluster INSPIRE: <p aria-hidden> con color:#FFF su parent bianco.
 * Aggiungo background scuro semi-trasparente per garantire contrasto
 * visivo anche per utenti vedenti. */
#categoryInspire .category_item p,
.item.category_item p.text-center {
    background-color: rgba(0, 0, 0, 0.55);
    padding: 2px 4px;
    border-radius: 2px;
}

/* Frecce carosello ◀ ▶: span aria-hidden con color computato.
 * Forza colore scuro su sfondo bianco del .owl-prev/next. */
.owl-carousel .owl-nav .owl-prev > span,
.owl-carousel .owl-nav .owl-next > span,
.owl-carousel .owl-nav .owl-prev span[aria-hidden],
.owl-carousel .owl-nav .owl-next span[aria-hidden] {
    color: #1c2024 !important;
}