/**
 * Chemical Formulas Converter - Frontend Styles
 * 
 * Styles pour l'affichage des formules chimiques et mathématiques
 * 
 * @package Chemical_Formulas_Converter
 * @version 2.0.0
 */

/* ==========================================================================
   Variables CSS (Custom Properties)
   ========================================================================== */

:root {
    --cfc-font-family: "Segoe UI Symbol", "DejaVu Sans", "Noto Sans", system-ui, sans-serif;
    --cfc-formula-color: inherit;
    --cfc-formula-bg: transparent;
    --cfc-block-bg: #f8f9fa;
    --cfc-block-border: #e9ecef;
    --cfc-block-radius: 8px;
    --cfc-block-padding: 1rem 1.5rem;
    --cfc-equation-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --cfc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --cfc-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    :root {
        --cfc-block-bg: #1e1e2e;
        --cfc-block-border: #313244;
    }
}

/* ==========================================================================
   Formules de base
   ========================================================================== */

.cfc-formula {
    font-family: var(--cfc-font-family);
    color: var(--cfc-formula-color);
    white-space: nowrap;
    line-height: 1.6;
    letter-spacing: 0.01em;
}

/* Éviter les coupures de ligne au milieu des formules */
.cfc-formula-block {
    display: block;
    text-align: center;
    padding: 0.5em 0;
    margin: 0.5em 0;
}

/* ==========================================================================
   Tailles de formules
   ========================================================================== */

.cfc-formula-small {
    font-size: 0.85em;
}

.cfc-formula-normal {
    font-size: 1em;
}

.cfc-formula-large {
    font-size: 1.25em;
}

.cfc-formula-xlarge {
    font-size: 1.5em;
}

/* ==========================================================================
   Indices et exposants
   ========================================================================== */

/* Fallback pour les caractères non disponibles en Unicode */
.cfc-formula sub,
.cfc-formula sup,
sub,
sup {
    font-size: 0.75em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* Amélioration du rendu des sous/super scripts */
.cfc-formula sub,
.cfc-formula sup {
    font-weight: inherit;
}

/* ==========================================================================
   Bloc de formules (container)
   ========================================================================== */

.cfc-formula-block-container {
    background: var(--cfc-block-bg);
    border: 1px solid var(--cfc-block-border);
    border-radius: var(--cfc-block-radius);
    padding: var(--cfc-block-padding);
    margin: 1.5rem 0;
    box-shadow: var(--cfc-shadow-sm);
    overflow-x: auto;
}

.cfc-formula-block-title {
    font-weight: 600;
    font-size: 0.9em;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--cfc-block-border);
}

.cfc-formula-block-content {
    font-size: 1.15em;
    line-height: 1.8;
}

/* ==========================================================================
   Équations numérotées
   ========================================================================== */

.cfc-equation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 1rem 0;
    margin: 1.5rem 0;
    position: relative;
}

.cfc-equation-content {
    font-size: 1.2em;
    font-family: var(--cfc-font-family);
    flex: 1;
    text-align: center;
}

.cfc-equation-number {
    font-size: 0.9em;
    color: #6c757d;
    font-weight: 500;
    min-width: 3em;
    text-align: right;
}

/* ==========================================================================
   Styles pour les formules mathématiques
   ========================================================================== */

.cfc-math {
    font-style: italic;
}

.cfc-math sub,
.cfc-math sup {
    font-style: normal;
}

/* ==========================================================================
   Couleurs pour les éléments chimiques (optionnel)
   ========================================================================== */

.cfc-element-metal {
    color: #3498db;
}

.cfc-element-nonmetal {
    color: #27ae60;
}

.cfc-element-halogen {
    color: #9b59b6;
}

.cfc-element-noble {
    color: #1abc9c;
}

/* ==========================================================================
   Animations et transitions
   ========================================================================== */

.cfc-formula {
    transition: color 0.2s ease;
}

.cfc-formula:hover {
    /* Légère mise en évidence au survol si souhaité */
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
    .cfc-formula-block-container {
        padding: 0.75rem 1rem;
        margin: 1rem 0;
    }
    
    .cfc-equation {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .cfc-equation-number {
        text-align: center;
    }
    
    .cfc-formula-xlarge {
        font-size: 1.25em;
    }
}

/* ==========================================================================
   Impression
   ========================================================================== */

@media print {
    .cfc-formula {
        color: #000 !important;
    }
    
    .cfc-formula-block-container {
        border: 1px solid #ccc;
        background: #fff;
        box-shadow: none;
    }
}

/* ==========================================================================
   Compatibilité avec les thèmes populaires
   ========================================================================== */

/* LearnDash */
.learndash-wrapper .cfc-formula,
.wpProQuiz_content .cfc-formula {
    font-family: var(--cfc-font-family);
}

/* Elementor */
.elementor-widget-container .cfc-formula {
    font-family: var(--cfc-font-family);
}

/* Divi */
.et_pb_module .cfc-formula {
    font-family: var(--cfc-font-family);
}

/* WPBakery */
.vc_row .cfc-formula {
    font-family: var(--cfc-font-family);
}

/* ==========================================================================
   Utilitaires
   ========================================================================== */

/* Force no-wrap pour les formules longues */
.cfc-nowrap {
    white-space: nowrap;
}

/* Permet le wrap si nécessaire */
.cfc-wrap {
    white-space: normal;
}

/* Centrage */
.cfc-center {
    display: block;
    text-align: center;
}

/* Bordure décorative */
.cfc-boxed {
    display: inline-block;
    padding: 0.25em 0.5em;
    border: 1px solid var(--cfc-block-border);
    border-radius: 4px;
    background: var(--cfc-block-bg);
}