/* ==========================================================================
   forum-content.css
   Styles for content generated by the forum post editor (Summernote).
   These classes are saved inside post HTML in the database, so this file
   must be loaded on every page that renders forum post content.
   ========================================================================== */

/* ------------------------------------------------------------------
   Expandable Sections
   ------------------------------------------------------------------ */

.expandable-wrapper {
    margin: 10px 0;
    border: 2px solid #4a90e2;
    border-radius: 6px;
    overflow: hidden;
    background: #2a2a2a;
}

details.forum-expandable {
    position: relative;
}

details.forum-expandable > summary {
    cursor: pointer;
    font-weight: bold;
    padding: 10px 12px;
    background: #3a3a3a;
    color: #4a90e2;
    user-select: none;
    outline: none;
    border-bottom: 2px solid #4a90e2;
    /* Override browser list-item default for <summary> */
    display: flex !important;
    list-style: none !important;
    align-items: center;
    gap: 6px;
}

/* Title span stretches to fill available space */
details.forum-expandable > summary > span:not(.exp-drag-handle) {
    flex: 1;
    text-align: left;
}

/* Remove the browser's disclosure triangle */
details.forum-expandable > summary::marker,
details.forum-expandable > summary::-webkit-details-marker {
    display: none;
    content: none;
}

/* Custom open/close arrow prepended to the title span only (not the drag handle) */
details.forum-expandable > summary > span:not(.exp-drag-handle)::before {
    content: '\25B6\00A0'; /* ▶  */
    font-size: 0.7em;
    color: #4a90e2;
    transition: transform 0.15s;
    display: inline-block;
}

details.forum-expandable[open] > summary > span:not(.exp-drag-handle)::before {
    content: '\25BC\00A0'; /* ▼  */
}

.expandable-content {
    padding: 14px;
    min-height: 40px;
    background: #2a2a2a;
    color: #e0e0e0;
}

.exp-delete-btn,
.exp-edit-btn,
.exp-drag-handle {
    display: none;
}

.note-editable .exp-delete-btn,
.note-editable .exp-edit-btn,
.note-editable .exp-drag-handle {
    display: inline;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 4px;
    flex-shrink: 0;
}

.note-editable .exp-delete-btn {
    color: #e05555;
    font-size: 20px;
}

.note-editable .exp-edit-btn {
    color: #aaaaaa;
}

.note-editable .exp-edit-btn:hover {
    color: #4a90e2;
}

.note-editable .exp-drag-handle {
    color: #888888;
    cursor: grab;
    font-size: 18px;
    letter-spacing: -2px;
}

.note-editable .exp-drag-handle:hover {
    color: #cccccc;
}

/* Dragging state */
.note-editable .expandable-wrapper.exp-dragging {
    opacity: 0.4;
}

/* Drop indicator line */
.exp-drop-indicator {
    display: none;
}

.note-editable .exp-drop-indicator {
    display: block;
    height: 3px;
    background: #4a90e2;
    border-radius: 2px;
    margin: 2px 0;
    pointer-events: none;
}

/* Placeholder text for empty expandable sections */
.expandable-content[data-placeholder] > p:only-child > br:only-child::before,
.note-editable .expandable-content[data-placeholder] > p:only-child > br:only-child::before {
    content: attr(data-placeholder);
    color: #777;
    pointer-events: none;
    display: inline;
}

/* ------------------------------------------------------------------
   Callout Blocks
   ------------------------------------------------------------------ */

.forum-callout {
    padding: 15px;
    margin: 15px 0;
    border-left: 5px solid;
    border-radius: 4px;
}

.forum-callout strong {
    text-transform: capitalize;
}

.forum-callout strong i {
    margin-right: 8px;
}

.forum-callout p {
    margin: 5px 0 0 0;
}

.forum-callout-info {
    background-color: #d1ecf1;
    border-left-color: #bee5eb;
    color: #0c5460;
}

.forum-callout-success {
    background-color: #d4edda;
    border-left-color: #c3e6cb;
    color: #155724;
}

.forum-callout-warning {
    background-color: #fff3cd;
    border-left-color: #ffeeba;
    color: #856404;
}

.forum-callout-danger {
    background-color: #f8d7da;
    border-left-color: #f5c6cb;
    color: #721c24;
}

/* ------------------------------------------------------------------
   Editor UI – Format Block dropdown items (Summernote toolbar)
   ------------------------------------------------------------------ */

.dropdown-style h1,
.dropdown-style h2,
.dropdown-style h3,
.dropdown-style h4,
.dropdown-style h5,
.dropdown-style h6,
.dropdown-style p,
.dropdown-style pre,
.dropdown-style blockquote {
    margin: 0;
    padding: 5px 10px;
    white-space: nowrap;
}

/* ------------------------------------------------------------------
   Editor UI – Callout dropdown items (Summernote toolbar)
   ------------------------------------------------------------------ */

.callout-option {
    padding: 8px 15px;
    cursor: pointer;
    margin: 2px;
}

.callout-option:hover {
    background-color: rgba(255, 255, 255, 0.08);
}