/* ========================================
   CKEditor 5 Content Styles for Frontend
   Auto-loaded by AssetService
   Location: public/assets/css/ckeditor-content.css
   ======================================== */

/*.article-content {font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif !important;font-size:16px !important;line-height:1.8 !important;color:#333 !important}*/

.article-content h1 {font-size:2.5em !important;font-weight:700 !important;margin:1.5em 0 .75em !important;}
.article-content h2 {font-size:2em !important;font-weight:600 !important;margin:1.4em 0 .7em !important;}
.article-content h3 {font-size:1.5em !important;font-weight:600 !important;margin:1.3em 0 .65em !important;}
.article-content h4 {font-size:1.25em !important;font-weight:600 !important;margin:1.2em 0 .6em !important}
.article-content h5 {font-size:1.1em !important;font-weight:600 !important;margin:1.1em 0 .55em !important}
.article-content h6 {font-size:1em !important;font-weight:600 !important;margin:1em 0 .5em !important}

.article-content p {margin:0 0 1.5em !important}

.article-content a {color:#0d6efd !important;text-decoration:underline !important;transition:color .2s !important}
.article-content a:hover {color:#0a58ca !important}

.article-content strong {font-weight:700 !important}
.article-content em {font-style:italic !important}

.article-content code {background-color:#f5f5f5 !important;color:#eb5757 !important;padding:.2em .4em !important;border-radius:4px !important;font-family:'Courier New',Courier,monospace !important;font-size:.9em !important}

.article-content pre {background:#1e1e1e !important;color:#d4d4d4 !important;padding:1.5em !important;border-radius:8px !important;overflow-x:auto !important;margin:1.5em 0 !important;border:1px solid #333 !important}
.article-content pre code {background:transparent !important;color:inherit !important;padding:0 !important;border-radius:0 !important;font-size:14px !important;line-height:1.6 !important}

.article-content blockquote {border-left:4px solid #0d6efd !important;padding-left:1.5em !important;margin:1.5em 0 !important;font-style:italic !important;color:#666 !important;background:#f8f9fa !important;padding:1em 1.5em !important;border-radius:4px !important}

.article-content ol, .post-content ul {margin:1em 0 !important;padding-left:2em !important}
.article-content ul li {list-style-type:disc !important;margin:.5em 0 !important}
.article-content ol li {list-style-type:decimal !important;margin:.5em 0 !important}
.article-content ol ul, .post-content ul ul {margin:.25em 0 !important}

.article-content .todo-list {list-style:none !important;padding-left:0 !important}
.article-content .todo-list li {position:relative !important;padding-left:2em !important}
.article-content .todo-list input[type=checkbox] {position:absolute !important;left:0 !important;top:.4em !important}

.article-content img {max-width:100% !important;height:auto !important;display:block !important;margin:2em auto !important;border-radius:8px !important}

.article-content figure {margin:2em 0 !important;text-align:center !important}
.article-content figure.image {display:table !important;margin:2em auto !important}
.article-content figure.image img {display:block !important;margin:0 auto !important;max-width:100% !important;height:auto !important}

.article-content figcaption {display:table-caption !important;caption-side:bottom !important;margin-top:.75em !important;font-size:.9em !important;color:#666 !important;font-style:italic !important}

.article-content .image-style-side {float:right !important;margin-left:1.5em !important;max-width:50% !important}
.article-content .image-style-align-left {float:left !important;margin-right:1.5em !important}
.article-content .image-style-align-center {margin-left:auto !important;margin-right:auto !important}
.article-content .image-style-align-right {float:right !important;margin-left:1.5em !important}

.article-content table {border-collapse:collapse !important;width:100% !important;margin:2em 0 !important;border:1px solid #ddd !important}
.article-content table td, 
.article-content table th {border:1px solid #ddd !important;padding:.75em !important;text-align:left !important}

.article-content table th {background-color:#f8f9fa !important;font-weight:600 !important}
.article-content table tr:nth-child(even) {background-color:#f9f9f9 !important}

.article-content hr {border:none !important;border-top:2px solid #ddd !important;margin:2em 0 !important}

.article-content .media {position:relative !important;padding-bottom:56.25% !important;height:0 !important;overflow:hidden !important;margin:2em 0 !important;border-radius:8px !important}
.article-content .media iframe {position:absolute !important;top:0 !important;left:0 !important;width:100% !important;height:100% !important}

.article-content sub {vertical-align:sub !important;font-size:.75em !important}
.article-content sup {vertical-align:super !important;font-size:.75em !important}

.article-content s {text-decoration:line-through !important}
.article-content u {text-decoration:underline !important}

.article-content mark {background-color:#ffeb3b !important;padding:.1em .3em !important;border-radius:2px !important}

/* Dark Mode */
@media (prefers-color-scheme:dark){
    .article-content {color:#e9ecef !important}
    .article-content code {background-color:#2d2d2d !important;color:#eb5757 !important}
    .article-content pre {background:#1e1e1e !important;border-color:#444 !important}
    .article-content blockquote {background:#2d2d2d !important;color:#b4b4b4 !important;border-left-color:#0d6efd !important}
    .article-content table th {background-color:#2d2d2d !important}
    .article-content table, 
    .article-content table td, 
    .article-content table th {border-color:#444 !important}
    .article-content table tr:nth-child(even) {background-color:#1e1e1e !important}
    .article-content hr {border-top-color:#444 !important}
}

/* Mobile */
@media (max-width:768px){
    .article-content {font-size:15px !important}
    .article-content h1 {font-size:2em !important}
    .article-content h2 {font-size:1.75em !important}
    .article-content h3 {font-size:1.5em !important}
    .article-content .image-style-side {float:none !important;margin:1.5em auto !important;max-width:100% !important}
    .article-content table {font-size:14px !important}
}