/***
 * F5 - Content Management System
 * 
 * Copyright © 2025
 * Reload - Laboratorio Multimediale
 * (http://www.reloadlab.it - info@reloadlab.it)
 * 
 * authors: Domenico Gigante (domenico.gigante@reloadlab.it) and Alessio Attanasio (alessio.attanasio@reloadlab.it)
 ***/

@charset "utf-8";
/* CSS Document */

/**
 * ==============================================================================
 * NESTA ACCESSIBILITY STYLES
 * ==============================================================================
 * 
 * Stili CSS per migliorare l'accessibilità del questionario NESTA.
 * Supporta: screen reader, navigazione da tastiera, preferenze utente.
 * 
 * STANDARD SEGUITI:
 * - WCAG 2.1 Level AA
 * - ARIA 1.2
 */

/**
 * ==============================================================================
 * RESPONSIVE - ZOOM E INGRANDIMENTO TESTO
 * ==============================================================================
 * 
 * Assicura che il layout rimanga usabile anche con zoom fino al 200%.
 * WCAG Criterion 1.4.4
 */

/**
 * Container per annunci screen reader.
 * Visualmente nascosto ma accessibile.
 */
#ariaLiveRegions,
/**
 * Nasconde elementi visivamente ma li mantiene accessibili agli screen reader.
 * Usa questa classe per contenuti che devono essere letti ma non visti.
 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border-width: 0;
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
    white-space: nowrap;
}
/**
 * Permette agli elementi sr-only di diventare visibili quando ricevono focus.
 * Utile per skip navigation links.
 */
.sr-only-focusable:active,
.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
    overflow: visible;
    white-space: normal;
}
/**
 * Link per saltare direttamente al contenuto principale.
 * Appare solo quando riceve focus da tastiera.
 */
.skip-navigation {
    position: absolute;
    z-index: 99999;
    top: -100px;
    left: 0;
    padding: 0.5rem 1rem;
    border-radius: 0 0 4px 0;
    background-color: rgb(var(--color-primary-app));
    font-weight: var(--font-weight-bold);
    color: rgb(var(--color-white));
    text-decoration: none;
    transition: top 0.3s ease;
}
.skip-navigation:focus {
    top: 0;
    outline: 3px solid rgb(var(--color-focus));
    outline-offset: 2px;
}
/**
 * Assicura che tutti gli elementi interattivi abbiano un focus chiaramente visibile.
 * IMPORTANTE per navigazione da tastiera.
 */
/* Focus outline generale */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
    outline: 3px solid rgb(var(--color-focus));
    outline-offset: 2px;
}
/* Focus per radio e checkbox */
input[type="radio"]:focus + label,
input[type="checkbox"]:focus + label {
    outline: 3px solid rgb(var(--color-focus));
    outline-offset: 2px;
}
/* Focus per le option-item */
.options-grid .option-item:focus-within label {
    outline: 3px solid rgb(var(--color-focus));
    outline-offset: 2px;
}
/* Focus per select ricercabili */
.options-dropdown .select-option-item[aria-selected="true"] {
    background-color: rgb(var(--color-focus));
    color: rgb(var(--color-text-inverse));
}
/* Focus per navigation buttons */
.nav-step:focus {
    outline: 3px solid rgb(var(--color-focus));
    outline-offset: 2px;
}
/**
 * Migliora il contrasto quando l'utente preferisce alto contrasto.
 */
body.high-contrast {
    /* Aumenta il contrasto dei testi */
    color: rgb(var(--color-black));
    background-color: rgb(var(--color-white));
}
body.high-contrast .options-grid .option-item .option-label {
    border: 2px solid rgb(var(--color-black));
}
body.high-contrast .options-grid .option-item input:checked + option-label {
    border-color: rgb(var(--color-black));
    background-color: rgb(var(--color-black));
    color: rgb(var(--color-white));
}
/* Alternativa: usa classe body per controllo programmatico */
body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}

/* ACCESSIBILITÀ TASTIERA - LIKERT SCALE */
/* Evidenzia il box quando il cursore è in focus */
.likert-cursor-container .likert-cursor:focus ~ .likert-steps-container .likert-step-box.active {
    box-shadow: 0 0 0 4px rgba(var(--color-focus), 0.5);
}
/* Mostra quale box sarebbe selezionato con tastiera */
.likert-steps-container .likert-step-box:hover,
.likert-steps-container .likert-step-box.keyboard-focus {
    z-index: 10;
    transform: scale(1.02);
}

/* TOOLTIP ACCESSIBILI */
[data-tooltip] {
    position: relative;
}
[data-tooltip]:focus::after,
[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5rem 0.75rem;
    background-color: rgb(var(--color-black));
    color: rgb(var(--color-option-selected-text));
    font-size: var(--text-base-xs);
    white-space: nowrap;
    border-radius: 0.25rem;
    z-index: 1000;
}
/**
 * Disabilita animazioni per utenti che preferiscono movimento ridotto.
 * IMPORTANTE per utenti con disturbi vestibolari o epilessia fotosensibile.
 */
@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;
}
.question-wrapper,
.question-wrapper[data-conditional="true"][data-visible="true"],
.question-wrapper[data-conditional="true"][data-visible="false"] {
	animation: none !important;
	transition: opacity 0.1s ease !important;
}
.likert-cursor-container .likert-cursor,
.likert-steps-container .likert-step-box {
	transition: none !important;
}

.likert-bars-bar-wrapper .likert-bars-bar {
	transition: none;
}
.likert-bars-bar-wrapper .likert-bars-bar:hover,
.likert-bars-bar-wrapper .likert-bars-bar.active {
	transform: none;
}

.likert-bars-bar-wrapper .likert-bars-bar.active {
	animation: none;
}

.step-footer .navigation-alert {
	animation: none;
}

.step-footer .navigation-alert.fade-out {
	animation: none;
	opacity: 0;
}
}

/* MODAL ACCESSIBILI */
/* Overlay del modal con aria-hidden appropriato */
.modal-overlay {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(var(--color-black), 0.7);
}
/* Modal con focus trap */
.modal-container {
    position: fixed;
    z-index: 9999;
    top: 50%;
    left: 50%;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(var(--color-shadow-black), 0.3);
    background-color: rgb(var(--color-white));
    transform: translate(-50%, -50%);
}
/* Pulsante chiudi modal accessibile */
.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    background-color: transparent;
    font-size: var(--text-base-xl);
    color: rgb(var(--color-gray2-darker));
    line-height: 1;
    cursor: pointer;
}
.modal-close:hover,
.modal-close:focus {
    color: rgb(var(--color-black));
}
.modal-close::before {
    content: "×";
}

/* FOCUS TRAP PER MODAL */
/* Quando un modal è aperto, impedisci focus su elementi sottostanti */
body.modal-open {
    overflow: hidden;
}
body.modal-open > *:not(.modal-familiari-overlay):not(.modal-familiari) {
    /* Rende gli elementi non focusabili quando il modal è aperto */
    pointer-events: none;
}

/* FOCUS PER SWEET ALERT */
body.swal2-shown > .swal2-container {
    pointer-events: auto!important;
	z-index: 99999;
}
body.swal2-shown > .modal-familiari-overlay {
    /* Rende modal familiari quando il alert è aperto */
    visibility: hidden;
}

/* ERRORI DI VALIDAZIONE ACCESSIBILI */
/* Messaggio di errore visivamente distinto */
.validation-error {
    display: flex;
    align-items: center;
    margin: 0.5rem 0;
    padding: 0.75rem 1rem;
    border: 2px solid rgb(var(--color-error));
    border-radius: 8px;
    background-color: rgb(var(--color-error-light));
    font-weight: var(--font-weight-medium);
    color: rgb(var(--color-error-text));
}
.validation-error::before {
    content: "⚠";
    margin-right: 0.5rem;
    font-size: var(--text-base-lg);
    color: rgb(var(--color-error));
}
/* Campo con errore */
.has-error input,
.has-error select,
.has-error textarea {
    border-color: rgb(var(--color-error));
    background-color: rgb(var(--color-error-light));
}
.has-error label {
    color: rgb(var(--color-error));
}
.age-counter-grid.has-error .age-counter-controls {
    border-color: rgb(var(--color-error));
}
.age-counter-grid .age-counter-controls .age-counter-btn:focus {
    outline: 3px solid rgb(var(--color-focus));
    outline-offset: 2px;
}

/* LOADING STATES ACCESSIBILI */
/* Loading spinner con annuncio screen reader */
.loading-spinner {
    position: relative;
}
.loading-spinner::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 4px solid rgb(var(--color-gray-extra-light));
    border-top-color: rgb(var(--color-primary-app));
    transform: translate(-50%, -50%);
    animation: spin 1s linear infinite;
}
.loading-spinner[aria-label]::before {
    content: attr(aria-label);
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border-width: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* SUPPORTO DARK MODE (OPZIONALE) */
@media (prefers-color-scheme: dark) {

body {
	background-color: rgb(var(--color-black));
	color: rgb(var(--color-gray-extra-lighter));
}    
.main-card {
	background-color: rgb(var(--color-gray-extra-darker));
}    
.option-label {
	background-color: rgb(var(--color-gray-extra-dark));
	color: rgb(var(--color-gray-extra-lighter));
}    
.options-grid .option-item input:checked + label {
	background-color: rgb(var(--color-primary-app));
	color: rgb(var(--color-white));
}

/* Mantieni sempre buon contrasto */
a:focus,
button:focus,
input:focus {
	outline-color: rgb(var(--color-secondary-app-lighter));
}
	
.privacy-consent-page {
	background: linear-gradient(135deg, rgb(var(--color-a11y-bg-dark) 0%, rgb(var(--color-a11y-bg-dark-dark)) 100%);
}
.privacy-consent-page .card {
	background-color: rgb(var(--color-a11y-bg-dark-light));
	color: rgb(var(--color-bg-lighter));
}
.privacy-consent-page .text-muted {
	color: rgb(var(--color-a11y-txt)) !important;
}
.privacy-consent-page .privacy-info-box {
	background-color: rgba(var(--color-white), 0.05) !important;
	border-color: rgba(var(--color-white), 0.1);
}

.error-page {
	background: linear-gradient(135deg, rgb(var(--color-a11y-bg-dark)) 0%, rgb(var(--color-a11y-bg-dark-dark)) 100%);
}
.error-page .card .card-body {
	background-color: rgb(var(--color-a11y-bg-dark-light));
	color: rgb(var(--color-bg-lighter));
}
.error-page .error-title {
	color: rgb(var(--color-secondary-app));
}
.error-page .error-message {
	color: rgb(var(--color-a11y-txt));
}
.error-description {
	color: rgb(var(--color-txt-lighter));
}
.error-page .suggestions-box {
	background-color: rgba(var(--color-white), 0.05) !important;
	border-color: rgba(var(--color-white), 0.1);
	border-left-color: rgb(var(--color-secondary));
}
.error-page .suggestions-box .suggestions-title,
.error-page .suggestions-box .suggestions-list li {
	color: rgb(var(--color-bg-lighter));
}
.error-page .support-section {
	background-color: rgba(var(--color-white), 0.03);
}
.error-page .support-title {
	color: rgb(var(--color-secondary));
}
.error-page .support-item {
	color: rgb(var(--color-a11y-txt));
}
.error-page .support-link {
	color: rgb(var(--color-secondary));
}
.error-page .support-link:hover {
	color: #e8c55a;
}
}

/* HIGH CONTRAST MODE */
@media (prefers-contrast: high) {

.likert-bars-bar-wrapper .likert-bars-bar {
	border-width: 4px;
}
.likert-bars-bar-wrapper .likert-bars-bar.active {
	border-width: 5px;
}
.likert-bars-bar-wrapper .likert-bars-radio:focus + .likert-bars-bar {
	outline-width: 4px;
}

.step-footer .navigation-alert {
	border-width: 3px;
}

.step-footer .alert-text {
	color: rgb(var(--color-black));
}
}

/* STEP FOOTER ALERT */
/* Focus visibile per screen reader */
.step-footer .navigation-alert:focus-within {
    outline: 3px solid rgb(var(--color-focus));
    outline-offset: 2px;
}

/* Accessibility - Focus Visible */
.privacy-consent-page *:focus-visible {
	outline: 3px solid rgb(var(--color-focus));
	outline-offset: 2px;
}

/* ERROR PAGE */
.error-page *:focus-visible {
    outline: 3px solid rgb(var(--color-primary));
    outline-offset: 2px;
}
/* Sessione scaduta - tono più caldo */
.error-page.session-expired .error-icon {
    color: rgb(var(--color-warning-dark));
}
.error-page.session-expired .suggestions-box {
    border-left-color: rgb(var(--color-warning-dark));
}
/* 404 - tono più neutro */
.error-page.not-found .error-icon {
    color: rgb(var(--color-info-lighter));
}
.error-page.not-found .suggestions-box {
    border-left-color: rgb(var(--color-info-lighter));
}
/* 403 - tono di attenzione */
.error-page.forbidden .error-icon {
    color: rgb(var(--color-danger-light));
}
.error-page.forbidden .suggestions-box {
    border-left-color: rgb(var(--color-danger-light));
}
/* 500 - tono di errore grave */
.error-page.server-error .error-icon {
    color: rgb(var(--color-warning-darker));
}
.error-page.server-error .suggestions-box {
    border-left-color: rgb(var(--color-warning-darker));
}