/* WYSIWYG editor styling — matches AK site dark theme (orange accent on
 * dark navy). Companion to assets/js/wysiwyg.js + includes/wysiwyg.php. */

.ak-wysiwyg {
    border: 1px solid #2a3340;
    border-radius: 4px;
    background: #0a0d12;
    overflow: hidden;
}

.ak-wysiwyg-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    align-items: center;
    padding: 6px 8px;
    background: #1b2230;
    border-bottom: 1px solid #2a3340;
}

.ak-wysiwyg-btn {
    background: transparent;
    color: #cfd8dc;
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 4px 8px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    min-width: 28px;
    line-height: 1.2;
}
.ak-wysiwyg-btn:hover  { background: #2a3340; border-color: #3a4350; }
.ak-wysiwyg-btn:active { background: #3a4350; }

.ak-wysiwyg-b { font-weight: bold; }
.ak-wysiwyg-i { font-style: italic; }
.ak-wysiwyg-u { text-decoration: underline; }

.ak-wysiwyg-sep {
    display: inline-block;
    width: 1px;
    height: 20px;
    background: #2a3340;
    margin: 0 4px;
}

.ak-wysiwyg-size {
    background: #0a0d12;
    color: #cfd8dc;
    border: 1px solid #2a3340;
    border-radius: 3px;
    padding: 3px 6px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
}
.ak-wysiwyg-color {
    width: 30px;
    height: 26px;
    padding: 0;
    border: 1px solid #2a3340;
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
}

.ak-wysiwyg-editor {
    min-height: 6em;
    padding: 10px 12px;
    color: #e0e0e0;
    font-size: 14px;
    line-height: 1.5;
    outline: none;
    background: #0a0d12;
    overflow-y: auto;
    max-height: 60vh;
}
.ak-wysiwyg-editor:focus { background: #0d1218; }
.ak-wysiwyg-editor a     { color: var(--accent, #f5b040); }
.ak-wysiwyg-editor ul,
.ak-wysiwyg-editor ol    { margin: 6px 0 6px 24px; padding: 0; }
.ak-wysiwyg-editor p     { margin: 0 0 8px; }
.ak-wysiwyg-editor p:last-child { margin-bottom: 0; }

/* Placeholder-ish empty state — since contenteditable doesn't support
 * placeholder natively, use :empty::before. Only shows when editor is
 * truly empty (no <br>, no whitespace). */
.ak-wysiwyg-editor:empty::before {
    content: attr(data-placeholder);
    color: #6a7580;
    pointer-events: none;
}