﻿

/* =========================================
   TipTap editor preview styles (Umbraco backoffice)
========================================= */

.tiptap .rte-intro,
.ProseMirror .rte-intro {
    font-size: 1.3em !important;
    line-height: 1.45 !important;
}

.tiptap .rte-text-lg,
.ProseMirror .rte-text-lg {
    font-size: 1.25em !important;
    line-height: 1.4 !important;
}

.tiptap .rte-text-xl,
.ProseMirror .rte-text-xl {
    font-size: 1.5em !important;
    line-height: 1.35 !important;
}

.tiptap .rte-emphasis,
.ProseMirror .rte-emphasis {
    font-weight: 600 !important;
}

/* Display styles */
.tiptap .rte-display-1,
.ProseMirror .rte-display-1 {
    font-size: 2rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
}

.tiptap .rte-display-2,
.ProseMirror .rte-display-2 {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}

.tiptap .rte-lead,
.ProseMirror .rte-lead {
    font-size: 1.15em !important;
    line-height: 1.5 !important;
}

.tiptap .rte-small,
.ProseMirror .rte-small {
    font-size: 0.95em !important;
    line-height: 1.45 !important;
}

/* Optional editor-only helpers (make it obvious) */
.tiptap .rte-display-1,
.tiptap .rte-display-2,
.tiptap .rte-intro,
.ProseMirror .rte-display-1,
.ProseMirror .rte-display-2,
.ProseMirror .rte-intro {
    background: rgba(0, 0, 0, 0.04) !important;
    padding-left: 0.5rem !important;
    border-left: 3px solid rgba(0, 0, 0, 0.2) !important;
}
/* Editor-only: make emphasis obvious */
.tiptap .rte-emphasis,
.ProseMirror .rte-emphasis {
    font-weight: 600 !important;
    text-decoration: underline dotted rgba(0,0,0,0.25);
    text-underline-offset: 0.18em;
}

/* Editor-only: neutralise text styles inside headings */
.tiptap h1 .rte-intro,
.tiptap h2 .rte-intro,
.tiptap h3 .rte-intro,
.tiptap h4 .rte-intro,
.ProseMirror h1 .rte-intro,
.ProseMirror h2 .rte-intro,
.ProseMirror h3 .rte-intro,
.ProseMirror h4 .rte-intro {
    font-size: inherit !important;
    line-height: inherit !important;
}


/* TipTap: preview links styled as buttons */
.tiptap a.btn,
.ProseMirror a.btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    text-decoration: none !important;
}

    /* Primary button */
    .tiptap a.btn.btn-primary,
    .ProseMirror a.btn.btn-primary {
        background-color: #FE7002 !important;
        border-color: #FE7002 !important;
        color: #000 !important;
    }

    /* Secondary button */
    .tiptap a.btn.btn-secondary,
    .ProseMirror a.btn.btn-secondary {
        background-color: #ccdf92 !important;
        border-color: #ccdf92 !important;
        color: #2c3830 !important;
    }

        /* Hover preview */
        .tiptap a.btn.btn-primary:hover,
        .ProseMirror a.btn.btn-primary:hover,
        .tiptap a.btn.btn-secondary:hover,
        .ProseMirror a.btn.btn-secondary:hover {
            background-color: #375241 !important;
            border-color: #375241 !important;
            color: #ffffff !important;
        }
