/* ====== UNIVERSAL QUILL CONTENT STYLING ====== */

.ql-editor {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

.ql-editor p {
    margin: 0 0 0.8em 0 !important;
    text-indent: 0 !important;
    line-height: 1,3 !important;
}

/* Target ALL Quill content containers */
.blog-content .ql-editor,
.ql-editor,
.quill-content .ql-editor,
.quill-content {
    font-family: inherit;
    line-height: 1.6;
    text-align: left;
}

/* ====== FONT FAMILY STYLING ====== */
.blog-content .ql-font-serif,
.ql-editor .ql-font-serif,
.quill-content .ql-font-serif,
.ql-font-serif {
    font-family: Georgia, 'Times New Roman', serif !important;
}

.blog-content .ql-font-monospace,
.ql-editor .ql-font-monospace,
.quill-content .ql-font-monospace,
.ql-font-monospace {
    font-family: 'Courier New', Courier, monospace !important;
}

.blog-content .ql-font-arial,
.ql-editor .ql-font-arial,
.quill-content .ql-font-arial,
.ql-font-arial {
    font-family: Arial, sans-serif !important;
}

.blog-content .ql-font-times,
.ql-editor .ql-font-times,
.quill-content .ql-font-times,
.ql-font-times {
    font-family: 'Times New Roman', Times, serif !important;
}

/* ====== FONT SIZE STYLING ====== */
.blog-content .ql-size-small,
.ql-editor .ql-size-small,
.quill-content .ql-size-small,
.ql-size-small {
    font-size: 0.75em !important;  /* ~12px */
}

.blog-content .ql-size-large,
.ql-editor .ql-size-large,
.quill-content .ql-size-large,
.ql-size-large {
    font-size: 1.5em !important;   /* ~24px */
}

.blog-content .ql-size-huge,
.ql-editor .ql-size-huge,
.quill-content .ql-size-huge,
.ql-size-huge {
    font-size: 2.5em !important;   /* ~40px */
}

.blog-content .ql-size-normal,
.ql-editor .ql-size-normal,
.quill-content .ql-size-normal,
.ql-size-normal {
    font-size: 1em !important;     /* ~16px */
}

/* ====== TEXT FORMATTING ====== */
/* Bold */
.blog-content strong,
.blog-content b,
.ql-editor strong,
.ql-editor b {
    font-weight: bold !important;
}

/* Italic */
.blog-content em,
.blog-content i,
.ql-editor em,
.ql-editor i {
    font-style: italic !important;
}

/* Underline */
.blog-content u,
.ql-editor u {
    text-decoration: underline !important;
}

/* Strikethrough */
.blog-content s,
.blog-content strike,
.blog-content del,
.ql-editor s,
.ql-editor strike,
.ql-editor del {
    text-decoration: line-through !important;
}

/* ====== TEXT COLORS ====== */
.ql-color-red { color: #e60000 !important; }
.ql-color-orange { color: #f90 !important; }
.ql-color-yellow { color: #ff0 !important; }
.ql-color-green { color: #008a00 !important; }
.ql-color-blue { color: #06c !important; }
.ql-color-purple { color: #93f !important; }
.ql-color-pink { color: #f6f !important; }
.ql-color-brown { color: #a52a2a !important; }
.ql-color-gray { color: #666 !important; }
.ql-color-black { color: #000 !important; }
.ql-color-white { color: #fff !important; }

/* ====== BACKGROUND COLORS ====== */
.ql-background-red { background-color: #e60000 !important; }
.ql-background-orange { background-color: #f90 !important; }
.ql-background-yellow { background-color: #ff0 !important; }
.ql-background-green { background-color: #008a00 !important; }
.ql-background-blue { background-color: #06c !important; }
.ql-background-purple { background-color: #93f !important; }
.ql-background-pink { background-color: #f6f !important; }
.ql-background-brown { background-color: #a52a2a !important; }
.ql-background-gray { background-color: #666 !important; }
.ql-background-black { background-color: #000 !important; }
.ql-background-white { background-color: #fff !important; }

/* Support untuk inline styles */
.blog-content span[style*="color"] {
    color: inherit !important;
}

.blog-content span[style*="background-color"] {
    background-color: inherit !important;
    padding: 0 2px;
    border-radius: 2px;
    display: inline;
}

/* ====== SCRIPT (SUPERSCRIPT/SUBSCRIPT) ====== */
.blog-content .ql-script[value="sub"],
.ql-editor .ql-script[value="sub"],
.blog-content sub,
.ql-editor sub {
    vertical-align: sub !important;
    font-size: smaller !important;
}

.blog-content .ql-script[value="super"],
.ql-editor .ql-script[value="super"],
.blog-content sup,
.ql-editor sup {
    vertical-align: super !important;
    font-size: smaller !important;
}

/* ====== TEXT ALIGNMENT ====== */
.blog-content .ql-align-center,
.ql-editor .ql-align-center,
.quill-content .ql-align-center,
.ql-align-center,
.blog-content p.ql-align-center,
.ql-editor p.ql-align-center,
.quill-content p.ql-align-center,
p.ql-align-center {
    text-align: center !important;
}

.blog-content .ql-align-right,
.ql-editor .ql-align-right,
.quill-content .ql-align-right,
.ql-align-right,
.blog-content p.ql-align-right,
.ql-editor p.ql-align-right,
.quill-content p.ql-align-right,
p.ql-align-right {
    text-align: right !important;
}

.blog-content .ql-align-justify,
.ql-editor .ql-align-justify,
.quill-content .ql-align-justify,
.ql-align-justify,
.blog-content p.ql-align-justify,
.ql-editor p.ql-align-justify,
.quill-content p.ql-align-justify,
p.ql-align-justify {
    text-align: justify !important;
}

/* ====== LISTS ====== */
.blog-content .ql-editor ul,
.blog-content .ql-editor ol,
.ql-editor ul,
.ql-editor ol {
    margin: 0.5em 0 !important;
    padding-left: 1.5em !important;
}

.blog-content .ql-editor li,
.ql-editor li {
    margin: 0.2em 0 !important;
}

/* Ordered list */
.blog-content .ql-editor ol,
.ql-editor ol {
    list-style-type: decimal !important;
}

/* Unordered list */
.blog-content .ql-editor ul,
.ql-editor ul {
    list-style-type: disc !important;
}

.blog-content .ql-editor ul ul,
.ql-editor ul ul {
    list-style-type: circle !important;
}

.blog-content .ql-editor ul ul ul,
.ql-editor ul ul ul {
    list-style-type: square !important;
}

/* ====== INDENTATION ====== */
.blog-content .ql-indent-1,
.ql-editor .ql-indent-1,
.quill-content .ql-indent-1,
.ql-indent-1 {
    padding-left: 3em !important;
    margin-left: 0 !important;
}

.blog-content .ql-indent-2,
.ql-editor .ql-indent-2,
.quill-content .ql-indent-2,
.ql-indent-2 {
    padding-left: 6em !important;
    margin-left: 0 !important;
}

.blog-content .ql-indent-3,
.ql-editor .ql-indent-3,
.quill-content .ql-indent-3,
.ql-indent-3 {
    padding-left: 9em !important;
    margin-left: 0 !important;
}

.blog-content .ql-indent-4,
.ql-editor .ql-indent-4,
.quill-content .ql-indent-4,
.ql-indent-4 {
    padding-left: 12em !important;
    margin-left: 0 !important;
}

.blog-content .ql-indent-5,
.ql-editor .ql-indent-5,
.quill-content .ql-indent-5,
.ql-indent-5 {
    padding-left: 15em !important;
    margin-left: 0 !important;
}

.blog-content .ql-indent-6,
.ql-editor .ql-indent-6,
.quill-content .ql-indent-6,
.ql-indent-6 {
    padding-left: 18em !important;
    margin-left: 0 !important;
}

.blog-content .ql-indent-7,
.ql-editor .ql-indent-7,
.quill-content .ql-indent-7,
.ql-indent-7 {
    padding-left: 21em !important;
    margin-left: 0 !important;
}

.blog-content .ql-indent-8,
.ql-editor .ql-indent-8,
.quill-content .ql-indent-8,
.ql-indent-8 {
    padding-left: 24em !important;
    margin-left: 0 !important;
}

/* ====== BLOCKQUOTE ====== */
.blog-content .ql-editor blockquote,
.ql-editor blockquote,
.blog-content blockquote,
blockquote {
    border-left: 4px solid #ccc !important;
    margin: 1em 0 !important;
    padding-left: 1em !important;
    font-style: italic !important;
    color: #555 !important;
}

/* ====== CODE BLOCK ====== */
.blog-content .ql-editor pre.ql-syntax,
.ql-editor pre.ql-syntax,
.blog-content pre.ql-syntax,
pre.ql-syntax {
    background-color: #f8f8f8 !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    padding: 1em !important;
    overflow-x: auto !important;
    font-family: 'Courier New', Courier, monospace !important;
    font-size: 0.9em !important;
    line-height: 1.4 !important;
}

.blog-content .ql-editor code,
.ql-editor code,
.blog-content code,
code {
    background-color: #f8f8f8 !important;
    border: 1px solid #ddd !important;
    border-radius: 3px !important;
    padding: 0.2em 0.4em !important;
    font-family: 'Courier New', Courier, monospace !important;
    font-size: 0.9em !important;
}

/* ====== LINKS ====== */
.blog-content .ql-editor a,
.ql-editor a,
.blog-content a {
    color: #0066cc !important;
    text-decoration: underline !important;
}

.blog-content .ql-editor a:hover,
.ql-editor a:hover,
.blog-content a:hover {
    color: #004499 !important;
    text-decoration: none !important;
}

/* ====== IMAGES ====== */
.blog-content .ql-editor img,
.ql-editor img,
.quill-content .ql-editor img,
.quill-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: block;
}

/* Image alignment */
.blog-content .ql-align-center img,
.ql-editor .ql-align-center img,
.quill-content .ql-align-center img,
.ql-align-center img {
    display: block !important;
    margin: 0 auto !important;
}

.blog-content .ql-align-right img,
.ql-editor .ql-align-right img,
.quill-content .ql-align-right img,
.ql-align-right img {
    display: block !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* Override inline width/height */
.blog-content .ql-editor img[style*="width"],
.ql-editor img[style*="width"],
.quill-content .ql-editor img[style*="width"],
.quill-content img[style*="width"],
.blog-content img[style*="width"] {
    width: auto !important;
    max-width: 100% !important;
}

.blog-content .ql-editor img[style*="height"],
.ql-editor img[style*="height"],
.quill-content .ql-editor img[style*="height"],
.quill-content img[style*="height"],
.blog-content img[style*="height"] {
    height: auto !important;
}

/* ====== TABLES ====== */
.blog-content .ql-editor table,
.ql-editor table,
.blog-content table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 1em 0 !important;
}

.blog-content .ql-editor th,
.ql-editor th,
.blog-content th {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    padding: 0.75em !important;
    text-align: left !important;
    font-weight: bold !important;
}

.blog-content .ql-editor td,
.ql-editor td,
.blog-content td {
    border: 1px solid #dee2e6 !important;
    padding: 0.75em !important;
}

/* ====== HEADERS ====== */
.blog-content .ql-editor h1,
.ql-editor h1,
.blog-content h1 {
    font-size: 2em !important;
    font-weight: bold !important;
    margin: 0.67em 0 !important;
}

.blog-content .ql-editor h2,
.ql-editor h2,
.blog-content h2 {
    font-size: 1.5em !important;
    font-weight: bold !important;
    margin: 0.83em 0 !important;
}

.blog-content .ql-editor h3,
.ql-editor h3,
.blog-content h3 {
    font-size: 1.17em !important;
    font-weight: bold !important;
    margin: 1em 0 !important;
}

.blog-content .ql-editor h4,
.ql-editor h4,
.blog-content h4 {
    font-size: 1em !important;
    font-weight: bold !important;
    margin: 1.33em 0 !important;
}

.blog-content .ql-editor h5,
.ql-editor h5,
.blog-content h5 {
    font-size: 0.83em !important;
    font-weight: bold !important;
    margin: 1.67em 0 !important;
}

.blog-content .ql-editor h6,
.ql-editor h6,
.blog-content h6 {
    font-size: 0.67em !important;
    font-weight: bold !important;
    margin: 2.33em 0 !important;
}

/* ====== RESPONSIVE DESIGN ====== */
@media (max-width: 768px) {
    .blog-content .ql-editor img,
    .ql-editor img,
    .quill-content .ql-editor img,
    .quill-content img {
        border-radius: 6px;
    }

    .blog-content .ql-align-right,
    .ql-editor .ql-align-right,
    .quill-content .ql-align-right,
    .ql-align-right,
    .blog-content .ql-align-center,
    .ql-editor .ql-align-center,
    .quill-content .ql-align-center,
    .ql-align-center {
        text-align: center !important;
    }

    .blog-content .ql-align-right img,
    .ql-editor .ql-align-right img,
    .quill-content .ql-align-right img,
    .ql-align-right img,
    .blog-content .ql-align-center img,
    .ql-editor .ql-align-center img,
    .quill-content .ql-align-center img,
    .ql-align-center img {
        margin: 0 auto !important;
    }

    .blog-content .ql-indent-1,
    .blog-content .ql-indent-2,
    .ql-editor .ql-indent-1,
    .ql-editor .ql-indent-2 {
        padding-left: 1.5em !important;
    }

    .blog-content .ql-indent-3,
    .blog-content .ql-indent-4,
    .ql-editor .ql-indent-3,
    .ql-editor .ql-indent-4 {
        padding-left: 3em !important;
    }

    .blog-content .ql-size-large,
    .ql-editor .ql-size-large,
    .quill-content .ql-size-large,
    .ql-size-large {
        font-size: 1.25em !important;
    }

    .blog-content .ql-size-huge,
    .ql-editor .ql-size-huge,
    .quill-content .ql-size-huge,
    .ql-size-huge {
        font-size: 1.75em !important;
    }
}

/* Pastikan konten utama memiliki styling yang tepat */
.blog-content {
    line-height: 1.6;
    text-align: left;
    color: #333;
}

/* Nuclear option untuk memastikan semua bekerja */
.blog-content * {
    all: revert;
}

.blog-content .ql-editor * {
    all: revert;
}