/* Stili per la pagina Glossario v4.0 (Definitivo) */

.glossary-main { padding: var(--space-xl) 0; }
.glossary-header { text-align: center; margin-bottom: var(--space-xl); }
.glossary-description { max-width: 700px; margin: 1rem auto 0; color: var(--color-gray-500); font-size: var(--font-size-lg); }

.glossary-block { background-color: var(--color-white); padding: var(--space-md); border-radius: var(--radius-md); box-shadow: 0 2px 4px rgba(0,0,0,0.05); margin-bottom: var(--space-lg); }

/* Stili del componente search-form DENTRO il glossario */
.search-block .search-form { box-shadow: none; border: 1px solid var(--color-gray-200); }

/* Indice Alfabetico */
.alphabetical-index {
    padding: var(--space-sm); 
    background: var(--color-white); 
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.index-letters { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem; }
.index-letter { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; text-decoration: none; border-radius: 50%; color: var(--color-gray-400); font-weight: 600; transition: all var(--transition-normal); }
.index-letter.has-results { color: var(--color-accent); }
.index-letter.has-results:hover { background-color: var(--color-accent); color: white; }
.index-letter[aria-disabled="true"] { opacity: 0.35; pointer-events: none; }

/* Filtri Categoria */
.category-filters { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }
.filter-btn { padding: 8px 16px; border: 1px solid var(--color-gray-200); background-color: var(--color-white); color: var(--color-gray-600); border-radius: 2rem; cursor: pointer; font-weight: 600; transition: all var(--transition-normal); }
.filter-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.filter-btn.active { background-color: var(--color-accent); border-color: var(--color-accent); color: white; }

/* Lista Termini */
.glossary-section { margin-bottom: var(--space-xl); }
.section-heading { font-size: 2.5rem; color: var(--color-primary); padding-bottom: var(--space-sm); border-bottom: 2px solid var(--color-gray-200); }
.terms-grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: var(--space-md); }
.glossary-term { border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); padding: var(--space-md); }
.term-title { font-size: var(--font-size-lg); font-weight: 700; color: var(--color-primary-dark); margin-bottom: var(--space-xs); }
.term-definition { color: var(--color-text); margin-bottom: var(--space-sm); }

/* Messaggi */
.no-terms-message, .no-results { text-align: center; padding: var(--space-xl); }
.search-results-count { text-align: right; margin-top: -1.5rem; margin-bottom: 1.5rem; font-size: var(--font-size-sm); color: var(--color-gray-500); min-height: 1.2rem; }

/* CTA Finale */
.glossary-cta { text-align: center; }
.glossary-cta h2 { color: var(--color-primary); }
.glossary-cta .cta-buttons { display: flex; justify-content: center; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }
/* Stili per i bottoni CTA ereditati da base.css ma con colori specifici se necessario */
.glossary-cta .cta-button { background-color: var(--color-primary); color: white; }
.glossary-cta .cta-button:hover { background-color: var(--color-primary-dark); color: white; }
.glossary-cta .secondary-cta { border-color: var(--color-primary); color: var(--color-primary); background: transparent; }
.glossary-cta .secondary-cta:hover { background-color: var(--color-primary); color: white; }

/* Stili per il tooltip dello shortcode */
.inline-glossary-term { position: relative; display: inline; }
.glossary-link { color: var(--color-accent); text-decoration: underline; text-decoration-style: dotted; }
.glossary-link:hover { text-decoration-style: solid; }
.inline-glossary-term:hover::after { content: attr(title); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.9); color: white; padding: 8px 12px; border-radius: var(--radius-sm); font-size: 14px; white-space: normal; z-index: 1000; max-width: 300px; word-wrap: break-word; line-height: 1.4; pointer-events: none; }

/* Media Queries & Dark Mode */
@media (max-width: 768px) {
    .terms-grid { grid-template-columns: 1fr; }
    .alphabetical-index { top: 60px; }
}
@media (prefers-color-scheme: dark) {
    .glossary-block { background-color: var(--color-gray-700); border-color: var(--color-gray-600); }
    .search-block .search-form { background: transparent; border: none; }
    .alphabetical-index { background: rgba(30,30,30,0.85); }
    .filter-btn { background-color: var(--color-gray-600); border-color: var(--color-gray-500); color: var(--color-gray-200); }
    .filter-btn.active, .filter-btn:hover { background-color: var(--color-accent-light); border-color: var(--color-accent-light); color: var(--color-gray-100); }
    .glossary-term { border-color: var(--color-gray-600); }
}