/*
 * .rts-block intentionally has NO font-size, font-weight, line-height, or
 * letter-spacing rules. Those are applied only as inline styles by view.js
 * when the user has set a value. When nothing is set the element tag's own
 * browser/theme defaults show through — h1 gets the theme h1 size, p gets
 * the theme paragraph size, and so on. This gives true WYSIWYG.
 */
.rts-block {
    display: block;
    transition: color 0.3s ease, background-color 0.3s ease, transform 0.3s ease, opacity 0.55s ease;
}

/*
 * Hover effects are applied entirely via JS (view.js mouseenter/mouseleave)
 * using setProperty(..., 'important') so they beat any inline color/bg styles
 * the save() function may have output. No CSS :hover rule is used here.
 */

/*
 * Inline "Highlight" (WP core/text-color format) — renders as
 * <mark class="has-inline-color" style="background-color:…"> inside the text.
 * Keep the text color inherited so only the background changes, and add a
 * little breathing room around the highlighted run.
 */
.rts-block mark,
.rts-block mark.has-inline-color {
    color: inherit;
    padding: 0 0.15em;
    border-radius: 2px;
}

/* Responsive text alignment — utility classes applied by view.js */
.rts-desktop-left    { text-align: left; }
.rts-desktop-center  { text-align: center; }
.rts-desktop-right   { text-align: right; }
.rts-desktop-justify { text-align: justify; }

@media (max-width: 1023px) {
    .rts-tablet-left    { text-align: left; }
    .rts-tablet-center  { text-align: center; }
    .rts-tablet-right   { text-align: right; }
    .rts-tablet-justify { text-align: justify; }
}

@media (max-width: 767px) {
    .rts-mobile-left    { text-align: left; }
    .rts-mobile-center  { text-align: center; }
    .rts-mobile-right   { text-align: right; }
    .rts-mobile-justify { text-align: justify; }
}

/*
 * Scroll-triggered fade-in.
 * view.js adds .rts-animated before observing (hides block),
 * then adds .rts-visible on viewport entry (reveals it).
 * Editor blocks never receive .rts-animated, so they stay fully visible.
 * Opacity-only — no translateY, so it cannot conflict with hover scale.
 */
.rts-block.rts-animated {
    opacity: 0;
}

.rts-block.rts-visible {
    opacity: 1;
}

@media print {
    .rts-block {
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        color: black !important;
        text-shadow: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}