/* Classes behind the CKEditor "Styles" dropdown (dashboard/static/ckeditor/styles.js).
   Font/FontSize/TextColor/BGColor were removed from the toolbar because they
   always write inline style="", which CSP style-src blocks (nonce only
   covers <style> tags, not the style="" attribute) -- these apply the same
   formatting via a class instead. Shared between the admin editing view and
   the public front-end since saved article HTML carries these classes. */

.ck-text-brand { color: #e4002b; }
.ck-text-red { color: #e53e3e; }
.ck-text-orange { color: #f97316; }
.ck-text-green { color: #16a34a; }
.ck-text-blue { color: #2563eb; }
.ck-text-gray { color: #6c7170; }

.ck-bg-yellow { background-color: #fef08a; }
.ck-bg-green { background-color: #e8f5f1; }
.ck-bg-blue { background-color: #dbeafe; }
.ck-bg-gray { background-color: #ededed; }

.ck-font-arial { font-family: Arial, Helvetica, sans-serif; }
.ck-font-times { font-family: 'Times New Roman', Times, serif; }
.ck-font-georgia { font-family: Georgia, serif; }
.ck-font-mono { font-family: 'Courier New', Courier, monospace; }

/* CKEditor 5's FontSize plugin (dashboard/templates/metro/base.html): named
   options render as these classes instead of an inline font-size style. */
.text-tiny { font-size: .7em; }
.text-small { font-size: .85em; }
.text-big { font-size: 1.4em; }
.text-huge { font-size: 1.8em; }

/* CKEditor's Justify toolbar (config.justifyClasses) and image alignment
   (styles.js) write these instead of inline text-align/float. */
.ck-align-left { text-align: left; }
.ck-align-center { text-align: center; }
.ck-align-right { text-align: right; }
.ck-align-justify { text-align: justify; }

.ck-img-left { float: left; margin: 0 16px 8px 0; }
.ck-img-right { float: right; margin: 0 0 8px 16px; }