/**
 * Mathematical Notation Styles
 * Global styling for mathematical expressions across the entire site
 */

/* Superscript and subscript styling */
sup, sub {
    font-size: 0.7em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    font-weight: inherit;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* Specific styling for different content areas */
.content sup, .content sub,
.question-text sup, .question-text sub,
.answer sup, .answer sub,
.card-content sup, .card-content sub {
    font-size: 0.75em;
}

/* Fullscreen mode adjustments */
.fullscreen-mode sup, .fullscreen-mode sub {
    font-size: 0.7em;
}

/* Modal and popup adjustments */
.modal sup, .modal sub,
.popup sup, .popup sub {
    font-size: 0.8em;
}

/* Table cell adjustments */
td sup, td sub,
th sup, th sub {
    font-size: 0.75em;
}

/* List item adjustments */
li sup, li sub {
    font-size: 0.75em;
}

/* Ensure proper spacing around mathematical expressions */
.math-expression {
    white-space: nowrap;
}

.math-expression sup,
.math-expression sub {
    margin: 0 0.1em;
}

/* Square root styling */
.math-sqrt {
    position: relative;
    display: inline-block;
}

.math-sqrt::before {
    content: "√";
    position: absolute;
    left: -0.3em;
    top: 0;
    font-size: 1.2em;
}

.math-sqrt span {
    border-top: 1px solid currentColor;
    padding-top: 0.1em;
    margin-left: 0.2em;
}

/* Mathematical symbols */
.math-symbol {
    font-style: italic;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    sup, sub {
        font-size: 0.65em;
    }
    
    .content sup, .content sub,
    .question-text sup, .question-text sub,
    .answer sup, .answer sub {
        font-size: 0.7em;
    }
}

@media (max-width: 480px) {
    sup, sub {
        font-size: 0.6em;
    }
    
    .content sup, .content sub,
    .question-text sup, .question-text sub,
    .answer sup, .answer sub {
        font-size: 0.65em;
    }
}

/* Print styles */
@media print {
    sup, sub {
        font-size: 0.7em;
        color: black !important;
    }
    
    .content sup, .content sub,
    .question-text sup, .question-text sub,
    .answer sup, .answer sub {
        font-size: 0.75em;
        color: black !important;
    }
}