/**
 * PH Accessibility - Visual Heading Styles
 *
 * Fallback styles that preserve the visual appearance of headings
 * after their semantic level has been corrected.
 * These are browser-default approximations used before the JS
 * applies the actual theme-computed styles.
 *
 * Example: An H4 that was semantically incorrect and changed to H2
 * will have class "ph-visual-h4" to maintain its original visual size.
 */

/* Fallback styles - overridden by heading-visual.js with actual theme values */
.ph-visual-h1 {
    font-size: 2em;
    font-weight: bold;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
}

.ph-visual-h2 {
    font-size: 1.5em;
    font-weight: bold;
    margin-top: 0.83em;
    margin-bottom: 0.83em;
}

.ph-visual-h3 {
    font-size: 1.17em;
    font-weight: bold;
    margin-top: 1em;
    margin-bottom: 1em;
}

.ph-visual-h4 {
    font-size: 1em;
    font-weight: bold;
    margin-top: 1.33em;
    margin-bottom: 1.33em;
}

.ph-visual-h5 {
    font-size: 0.83em;
    font-weight: bold;
    margin-top: 1.67em;
    margin-bottom: 1.67em;
}

.ph-visual-h6 {
    font-size: 0.67em;
    font-weight: bold;
    margin-top: 2.33em;
    margin-bottom: 2.33em;
}