/**
 * FAQ Styles
 *
 * Stili per componenti FAQ
 *
 * @package Lilitech_FAQ_Manager
 * @since 1.0.0
 */

/* ========================================
   SEARCH BAR
   ======================================== */

/**
 * BLOCK: lilitech-faq-search-wrapper
 * Contenitore principale per il componente di ricerca FAQ.
 * Fornisce il contesto di posizionamento relativo per elementi figli assoluti.
 */
.lilitech-faq-search-wrapper {
    position: relative;
    width: 100%;
}

/**
 * BLOCK: lilitech-faq-search-bar
 * Contenitore della barra di ricerca.
 * Gestisce il layout della ricerca FAQ.
 */
.lilitech-faq-search-bar {
    position: relative;
    width: 100%;
}

/**
 * ELEMENT: lilitech-faq-search__input
 * Campo di input testuale per la ricerca FAQ.
 *
 * Proprietà:
 * - Ampiezza totale del contenitore
 * - Padding per ospitare icone a destra (50px)
 * - Transizione fluida su tutti i cambiamenti di stile
 *
 * Stati:
 * - :focus - Evidenzia con bordo e shadow blu quando attivo
 */
.lilitech-faq-search-input {
    width: 100%;
    padding: 15px 50px 15px 20px;
    font-size: 16px;
    line-height: 1.5;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    transition: all 0.3s ease;
    outline: none;
}

/**
 * MODIFIER: lilitech-faq-search-input:focus
 * Stato di focus dell'input di ricerca.
 * Evidenzia visivamente il campo attivo con colore brand.
 */
.lilitech-faq-search-input:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
}

/**
 * MODIFIER: lilitech-faq-search-input::placeholder
 * Stile del testo placeholder dell'input.
 * Fornisce indicazione visiva del tipo di contenuto atteso.
 */
.lilitech-faq-search-input::placeholder {
    color: #999;
}

/**
 * ELEMENT: lilitech-faq-search__icon
 * Icona di ricerca posizionata dentro l'input.
 *
 * ELEMENT: lilitech-faq-search__loader
 * Indicatore di caricamento durante la ricerca.
 *
 * Proprietà comuni:
 * - Posizionamento assoluto a destra del campo
 * - Centramento verticale con transform
 * - pointer-events: none per non interferire con l'input
 */
.lilitech-faq-search-icon,
.lilitech-faq-search-loader {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    pointer-events: none;
}

/**
 * MODIFIER: lilitech-faq-search-loader
 * Variante del loader con colore brand.
 */
.lilitech-faq-search-loader {
    color: #2271b1;
}

/* ========================================
   SEARCH RESULTS
   ======================================== */

/**
 * BLOCK: lilitech-faq-results
 * Contenitore del dropdown dei risultati di ricerca.
 * Posizionato assolutamente sotto il campo di ricerca.
 *
 * Proprietà:
 * - z-index alto per stare sopra altri elementi
 * - Overflow y per scrollare se troppi risultati
 * - Animazione fadeIn per ingresso fluido
 */
.lilitech-faq-results {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 500px;
    overflow-y: auto;
}

/**
 * ELEMENT: lilitech-faq-results__header
 * Intestazione del pannello dei risultati.
 * Mostra il conteggio o il titolo della sezione risultati.
 */
.lilitech-faq-results-header {
    padding: 12px 20px;
    border-bottom: 1px solid #eee;
    background: #f9f9f9;
    font-size: 14px;
    color: #666;
}

/**
 * ELEMENT: lilitech-faq-results__list
 * Lista wrapper per gli elementi di ricerca.
 * Resetta padding di default delle liste.
 */
.lilitech-faq-results-list {
    padding: 0;
}

/**
 * ELEMENT: lilitech-faq-results__item
 * Item singolo nel dropdown dei risultati.
 *
 * Proprietà:
 * - Transizione fluida sul cambio di background
 * - Separatore bottom tra item
 * - Cursor pointer per indicare cliccabilità
 *
 * Stati:
 * - :hover - Background leggero per feedback visivo
 * - :last-child - Rimuove il bordo bottom finale
 * - .expanded - Mostra il campo excerpt
 */
.lilitech-faq-result-item {
    padding: 20px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background 0.2s ease;
}

/**
 * MODIFIER: lilitech-faq-result-item:last-child
 * Rimuove il bordo inferiore dall'ultimo elemento della lista.
 */
.lilitech-faq-result-item:last-child {
    border-bottom: none;
}

/**
 * MODIFIER: lilitech-faq-result-item:hover
 * Stato hover dell'elemento risultato.
 * Fornisce feedback visivo al passaggio del mouse.
 */
.lilitech-faq-result-item:hover {
    background: #f9f9f9;
}

/**
 * ELEMENT: result__category
 * Badge della categoria all'interno di ogni risultato.
 *
 * Proprietà:
 * - Stile pill con uppercase text
 * - Colore brand con background azzurro
 * - Inline-block per allineamento inline
 */
.result-category {
    display: inline-block;
    padding: 4px 10px;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #2271b1;
    background: #e5f2ff;
    border-radius: 4px;
}

/**
 * ELEMENT: result__question
 * Titolo della domanda nel risultato.
 * Testo evidenziato con font weight bold.
 *
 * Proprietà:
 * - Line height ottimizzato per leggibilità
 * - Margin bottom per separazione dal contenuto
 *
 * ELEMENT: result__question mark
 * Elemento <mark> dentro la domanda evidenziato in giallo
 */
.result-question {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
}

/**
 * MODIFIER: result__question mark
 * Highlight giallo per termini di ricerca match nella domanda.
 */
.result-question mark {
    background: #fff59d;
    padding: 2px 4px;
    border-radius: 3px;
}

/**
 * ELEMENT: result__excerpt
 * Estratto del contenuto della domanda.
 *
 * Proprietà:
 * - Display none di default
 * - Visibile solo quando item ha class 'expanded'
 * - Testo grigio per contrasto minore rispetto domanda
 */
.result-excerpt {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    display: none;
}

/**
 * MODIFIER: lilitech-faq-result-item.expanded result__excerpt
 * Rende visibile l'excerpt quando l'item è expandito.
 */
.lilitech-faq-result-item.expanded .result-excerpt {
    display: block;
}

/**
 * MODIFIER: result__excerpt mark
 * Highlight giallo per termini di ricerca match nell'excerpt.
 */
.result-excerpt mark {
    background: #fff59d;
    padding: 2px 4px;
    border-radius: 3px;
}

/**
 * ELEMENT: result__link
 * Link cliccabile per accedere al risultato completo.
 *
 * Proprietà:
 * - Colore brand per consistenza visiva
 * - Font weight 600 per visibilità
 * - Transizione fluida su hover
 *
 * Stati:
 * - :hover - Colore più scuro e underline
 */
.result-link {
    display: inline-block;
    font-size: 14px;
    color: #2271b1;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

/**
 * MODIFIER: result__link:hover
 * Stato hover del link nel risultato.
 */
.result-link:hover {
    color: #135e96;
    text-decoration: underline;
}

/**
 * BLOCK: lilitech-faq-no-results
 * Messaggio di state empty quando nessun risultato trovato.
 */

/**
 * BLOCK: lilitech-faq-error
 * Messaggio di errore quando la ricerca fallisce.
 *
 * Proprietà comuni:
 * - Centrato con padding generoso
 * - Testo grigio di default
 */
.lilitech-faq-no-results,
.lilitech-faq-error {
    padding: 40px 20px;
    text-align: center;
}

/**
 * ELEMENT: lilitech-faq-no-results__text
 * ELEMENT: lilitech-faq-error__text
 * Testo del messaggio di stato.
 *
 * Proprietà:
 * - Margin reset per controllo verticale
 * - Colore grigio per no-results
 */
.lilitech-faq-no-results p,
.lilitech-faq-error p {
    margin: 0;
    color: #666;
    font-size: 16px;
}

/**
 * MODIFIER: lilitech-faq-error__text
 * Variante colore rosso per messaggio di errore.
 */
.lilitech-faq-error p {
    color: #d63638;
}

/* ========================================
   FAQ LIST / ACCORDION
   ======================================== */

/**
 * BLOCK: lilitech-faq-list
 * Contenitore principale per la lista FAQ in formato accordion.
 * Wrapper che contiene tutti gli item FAQ.
 */
.lilitech-faq-list {
    width: 100%;
}

/**
 * BLOCK: lilitech-faq-item
 * Singolo item dell'accordion FAQ.
 * Contiene domanda e risposta (nascosta fino a click).
 *
 * Proprietà:
 * - Border radius per angoli arrotondati
 * - Overflow hidden per contenere il contenuto
 * - Transizione fluida su tutti i cambi
 *
 * Stati:
 * - :hover - Aggiunge ombra per feedback visivo
 */
.lilitech-faq-item {
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

/**
 * MODIFIER: lilitech-faq-item:hover
 * Stato hover dell'item FAQ.
 * Aggiunge ombra per profondità visiva.
 */
.lilitech-faq-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/**
 * ELEMENT: lilitech-faq-item__question
 * Sezione cliccabile della domanda FAQ.
 * Mostra sempre, espandibile/collassabile.
 *
 * Proprietà:
 * - Flex layout per allineamento elementi
 * - Gap tra elementi interni
 * - User-select none per non selezionare testo
 *
 * Stati:
 * - :hover - Background più scuro
 * - .active - Background brand color con testo bianco
 */
.lilitech-faq-question {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    background: #f5f5f5;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
}

/**
 * MODIFIER: lilitech-faq-question:hover
 * Stato hover della domanda.
 * Background leggero per feedback visivo.
 */
.lilitech-faq-question:hover {
    background: #ebebeb;
}

/**
 * MODIFIER: lilitech-faq-question--active
 * Variante attiva della domanda quando accordion è expandito.
 * Background brand color, testo bianco.
 */
.lilitech-faq-question.active {
    background: #2271b1;
    color: #fff;
}

/**
 * ELEMENT: lilitech-faq-question__category
 * Badge della categoria dentro la domanda.
 * Stessa struttura del category nei risultati ricerca.
 *
 * Proprietà:
 * - flex-shrink 0 per mantenere dimensione
 * - Pill style con uppercase
 *
 * Stati (con modificatore question--active):
 * - Quando parent è active, background diventa semi-trasparente bianco
 */
.lilitech-faq-category {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #2271b1;
    background: #e5f2ff;
    border-radius: 4px;
    flex-shrink: 0;
}

/**
 * MODIFIER: lilitech-faq-question--active lilitech-faq-question__category
 * Variante categoria quando domanda è attiva.
 * Background semi-trasparente e testo bianco.
 */
.lilitech-faq-question.active .lilitech-faq-category {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/**
 * ELEMENT: lilitech-faq-question__text
 * Testo della domanda.
 * Occupa lo spazio disponibile con flex 1.
 *
 * Proprietà:
 * - flex: 1 per crescere e occupare spazio
 * - Font weight 600 per evidenza
 * - Line height ottimizzato per leggibilità
 */
.lilitech-faq-question-text {
    flex: 1;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}

/**
 * ELEMENT: lilitech-faq-question__icon
 * Icona di expand/collapse (chevron/freccia).
 * Rotazione su attivazione.
 *
 * Proprietà:
 * - flex-shrink 0 per mantenere dimensione
 * - Transizione su transform per rotazione fluida
 * - margin-left auto per allineamento a destra
 *
 * Stati:
 * - Quando parent active: ruota di 180deg
 */
.lilitech-faq-icon {
    flex-shrink: 0;
    margin-left: auto;
    transition: transform 0.3s ease;
}

/**
 * MODIFIER: lilitech-faq-question--active lilitech-faq-question__icon
 * Stato icona quando accordion è expandito.
 * Rotazione di 180 gradi per indicare chiusura.
 */
.lilitech-faq-question.active .lilitech-faq-icon {
    transform: rotate(180deg);
}

/**
 * ELEMENT: lilitech-faq-item__answer
 * Sezione risposta dell'accordion.
 * Contenuto nascosto fino a click su domanda.
 *
 * Proprietà:
 * - Background bianco per contrasto
 * - Border top per separazione da domanda
 * - Padding generoso per leggibilità
 *
 * Nota: Visibilità controllata via JavaScript
 */
.lilitech-faq-answer {
    padding: 20px;
    background: #fff;
    border-top: 1px solid #eee;
}

/**
 * ELEMENT: lilitech-faq-answer__text (p)
 * Paragrafo di testo dentro la risposta.
 *
 * Proprietà:
 * - Line height alto per leggibilità
 * - Margin bottom per separazione tra paragrafi
 *
 * Modifier: :last-child
 * - Ultimo paragrafo senza margin bottom
 */
.lilitech-faq-answer p {
    margin: 0 0 15px;
    line-height: 1.7;
    color: #666;
}

/**
 * MODIFIER: lilitech-faq-answer__text:last-child
 * Rimuove margin inferiore dall'ultimo paragrafo.
 */
.lilitech-faq-answer p:last-child {
    margin-bottom: 0;
}

/**
 * ELEMENT: lilitech-faq-answer__list (ul, ol)
 * Liste non ordinate e ordinate dentro risposte.
 *
 * Proprietà:
 * - Padding left per indentazione bullet/numero
 * - Margin bottom per separazione dal contenuto seguente
 * - Colore coerente al testo
 */
.lilitech-faq-answer ul,
.lilitech-faq-answer ol {
    margin: 0 0 15px;
    padding-left: 25px;
    color: #666;
}

/**
 * ELEMENT: lilitech-faq-answer__list-item (li)
 * Item singolo dentro liste.
 *
 * Proprietà:
 * - Margin bottom per spaziatura tra item
 * - Line height coerente al resto del testo
 */
.lilitech-faq-answer li {
    margin-bottom: 8px;
    line-height: 1.7;
}

/**
 * ELEMENT: lilitech-faq-answer__link (a)
 * Link dentro il contenuto della risposta.
 *
 * Proprietà:
 * - Colore brand
 * - Underline di default
 * - Transizione su hover
 *
 * Stati:
 * - :hover - Colore più scuro
 */
.lilitech-faq-answer a {
    color: #2271b1;
    text-decoration: underline;
}

/**
 * MODIFIER: lilitech-faq-answer__link:hover
 * Stato hover del link nella risposta.
 */
.lilitech-faq-answer a:hover {
    color: #135e96;
}

/* ========================================
   RESPONSIVE
   ======================================== */

/**
 * MEDIA QUERY: Tablet e dispositivi mobili (max-width: 768px)
 * Adattamenti layout e dimensioni per schermi piccoli
 */
@media (max-width: 768px) {
    /**
     * MODIFIER: lilitech-faq-search-input--mobile
     * Riduzione padding e font size su mobile
     */
    .lilitech-faq-search-input {
        padding: 12px 45px 12px 15px;
        font-size: 14px;
    }

    /**
     * MODIFIER: lilitech-faq-search__icon--mobile
     * MODIFIER: lilitech-faq-search__loader--mobile
     * Posizionamento icone aggiustato per mobile
     */
    .lilitech-faq-search-icon,
    .lilitech-faq-search-loader {
        right: 15px;
    }

    /**
     * MODIFIER: lilitech-faq-results--mobile
     * Riduzione altezza massima per spazio limitato
     */
    .lilitech-faq-results {
        max-height: 400px;
    }

    /**
     * MODIFIER: lilitech-faq-results__item--mobile
     * Riduzione padding per compattezza
     */
    .lilitech-faq-result-item {
        padding: 15px;
    }

    /**
     * MODIFIER: result__question--mobile
     * Font size ridotto per questioni di spazio
     */
    .result-question {
        font-size: 16px;
    }

    /**
     * MODIFIER: lilitech-faq-item__question--mobile
     * flex-wrap per posizionare elementi verticalmente
     * Padding ridotto per compattezza
     */
    .lilitech-faq-question {
        padding: 12px 15px;
        flex-wrap: wrap;
    }

    /**
     * MODIFIER: lilitech-faq-question__text--mobile
     * Font size ridotto su mobile
     */
    .lilitech-faq-question-text {
        font-size: 16px;
    }

    /**
     * MODIFIER: lilitech-faq-question__category--mobile
     * Posizionamento primo con order -1
     * Ampiezza 100% per andare a capo
     */
    .lilitech-faq-category {
        order: -1;
        width: 100%;
        margin-bottom: 8px;
    }

    /**
     * MODIFIER: lilitech-faq-item__answer--mobile
     * Padding ridotto per mobile
     */
    .lilitech-faq-answer {
        padding: 15px;
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/**
 * MODIFIER: lilitech-faq-question:focus
 * MODIFIER: lilitech-faq-question:focus-visible
 * Outline visibile per navigazione da tastiera.
 * Essenziale per accessibilità.
 */
.lilitech-faq-question:focus,
.lilitech-faq-question:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

/**
 * UTILITY: sr-only (screen reader only)
 * Nasconde visivamente ma mantiene leggibile da screen reader.
 * Importante per accessibilità semantica.
 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ========================================
   ANIMATIONS
   ======================================== */

/**
 * ANIMATION: fadeIn
 * Animazione di entrata con opacity e transform Y.
 * Crea effetto fluido di apparizione verso il basso.
 * Durata: 0.3s, easing: ease
 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/**
 * MODIFIER: lilitech-faq-results--animated
 * Applica l'animazione fadeIn al dropdown risultati.
 * Crea ingresso visivamente piacevole.
 */
.lilitech-faq-results {
    animation: fadeIn 0.3s ease;
}

/* ========================================
   PRINT STYLES
   ======================================== */

/**
 * MEDIA QUERY: Print
 * Stili per stampa della pagina FAQ
 * Mostra tutte le risposte, nasconde elementi interattivi
 */
@media print {
    /**
     * BLOCK: lilitech-faq-search-wrapper--print
     * Nasconde la barra di ricerca in stampa
     */
    .lilitech-faq-search-wrapper {
        display: none;
    }

    /**
     * ELEMENT: lilitech-faq-item__answer--print
     * Forza la visualizzazione di tutte le risposte
     * Important per sovrascrivere stati JS
     */
    .lilitech-faq-answer {
        display: block !important;
    }

    /**
     * ELEMENT: lilitech-faq-item__question--print
     * Background bianco senza styling interattivo
     * Cursor default per indicare non-cliccabilità
     */
    .lilitech-faq-question {
        background: #fff;
        cursor: default;
    }

    /**
     * ELEMENT: lilitech-faq-question__icon--print
     * Nasconde l'icona di expand/collapse
     * Non necessaria in stampa
     */
    .lilitech-faq-icon {
        display: none;
    }
}

/* ========================================
   CATEGORY FILTER
   ======================================== */

/**
 * MEDIA QUERY: Desktop (min-width: 769px)
 * Nascondi il filtro categorie mobile su desktop
 */
@media (min-width: 769px) {
    /**
     * BLOCK: faq-tax-filter-select--desktop
     * Select mobile di filtro categorie nascosto
     */
    .faq-tax-filter-select {
        display: none;
    }
}

/**
 * MEDIA QUERY: Mobile (max-width: 768px)
 * Mostra il filtro categorie mobile e nascondi versione desktop
 */
@media (max-width: 768px) {
    /**
     * ELEMENT: faq-tax-filter__element--mobile
     * Nascondi il filtro categorie desktop su mobile
     */
    .faq-tax-filter .e-filter {
        display: none !important;
    }

    /**
     * BLOCK: faq-tax-filter-select
     * Select dropdown per filtro categorie su mobile
     *
     * Proprietà:
     * - Ampiezza 100% per riempire contenitore
     * - Padding e border per stile consistente
     * - Font size 16px per accessibilità (evita zoom auto su iOS)
     * - Colore background bianco per readabilità
     */
    .faq-tax-filter-select {
        display: block;
        width: 100%;
        padding: 10px;
        font-size: 16px;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 6px;
    }
}