/*
 * TinyMCE 7 admin UI overrides.
 *
 * In TinyMCE 5 (v11), each style-format preview was an inline <span>
 * inside .mce-menu-item — so a 96px font-size only stretched the line
 * box, not the row. In TinyMCE 7, the preview is now a block <div>
 * inside .tox-collection__item-label, which expands the row vertically
 * and bleeds large fonts into neighbouring rows.
 *
 * Restore the v11 behaviour: force the previewed text back to inline,
 * with a tight line-height, so large preview sizes stay inside a
 * proportionally-tall row instead of overlapping siblings.
 */

.tox .tox-collection__item {
    height: auto !important;
    min-height: 28px;
    align-items: center !important;
}

.tox .tox-collection__item-label {
    line-height: 1.1 !important;
    overflow: visible;
}

.tox .tox-collection__item-label > div {
    display: inline-block !important;
    line-height: 1 !important;
    vertical-align: middle;
}

/*
 * Restore the v11/TinyMCE 5 static "Formats" label on the styles dropdown.
 *
 * In TinyMCE 7 the styles button label is dynamic — it shows the currently
 * applied format (e.g. "Paragraph", "Heading 1") rather than the static
 * "Formats" label used in v5. The button's title attribute always begins
 * with "Format " (e.g. title="Format Paragraph"), which gives us a reliable
 * selector — the sibling blocks button uses a different title.
 */
/* Force a sensible min-width — TinyMCE measures button width from the rendered
   label, and our replacement label below collapses that measurement to ~32px. */
.tox .tox-tbtn[title^="Format "] {
    min-width: 110px !important;
    width: auto !important;
}

.tox .tox-tbtn[title^="Format "] .tox-tbtn__select-label {
    /* Hide the dynamic label but preserve its layout footprint */
    visibility: hidden;
    position: relative;
}

.tox .tox-tbtn[title^="Format "] .tox-tbtn__select-label::after {
    content: "Formats";
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    text-align: left;
}