/* =========================================================================
   forums.css
   Styling for the BSIA forums view (comments, comment-replies, answers,
   answer-replies, questions, topics, topic-replies).

   Loaded via header_bsia_off.cfm.

   Markup contract (see views/common/form/forums.cfm):

       <div class="forum-row [forum-row-nested] {context}Divs">     (row)
           <div class="forum-card-body w-100">                       (card)
               <div class="likes-row"> ... action buttons ... </div> (pill)
               <div class="d-flex align-items-start gap-3"> ... body ... </div>
           </div>
       </div>

   {context} is one of: comments, replied, question, ans, answerReply,
   topic, etc. The semantic *Divs class is kept purely as a JS hook —
   styling is owned by .forum-row / .forum-card-body / .likes-row.

   Goal: consistent look across all forum surfaces. No !important.
   No background-color / padding utilities on these elements in markup.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Forum row container
   ------------------------------------------------------------------------- */
.forum-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* Nested reply rows (comment-reply, answer-reply) — indent and tighter
   bottom margin so the threaded relationship reads visually. */
.forum-row-nested {
    padding-left: 1.25rem;
    margin-bottom: 0.5rem;
}

/* -------------------------------------------------------------------------
   Forum card body
   ------------------------------------------------------------------------- */
.forum-card-body {
    position: relative;
    padding: 1.25rem 1.25rem 1rem;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Nested reply cards sit on a faintly off-white tint so the parent /
   child relationship is unambiguous even outside a colour theme. */
.forum-row-nested .forum-card-body {
    background-color: #fafbfc;
}

/* -------------------------------------------------------------------------
   Action-button pill (top-right of every card)
   ------------------------------------------------------------------------- */
.likes-row {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    gap: 0.35rem;

    padding: 0.3rem 0.75rem;
    background-color: #f3f4f6;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.likes-row form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.likes-row button,
.likes-row a.forum-block-bell {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.likes-row p {
    margin: 0;
    line-height: 1;
}

/* Like-count badge: the only <p> children inside .likes-row buttons are
   the like counts (e.g. "1" beside the thumbs-up). Render them as a
   small dark-blue circular badge with white text, centered with the
   neighbouring icons.
   `!important` on color is required to beat Bootstrap's `.text-primary`
   which is still on the <p> in the markup. */
.likes-row button p {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    padding: 5px 0 0 0;
    margin: 0 0.2rem 0 0;
    background-color: #001A35;
    color: #ffffff !important;
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    vertical-align: middle;
}

.likes-row i {
    font-size: 0.95rem;
    vertical-align: middle;
}

/* -------------------------------------------------------------------------
   Rich-text comment / body rendering
   -------------------------------------------------------------------------
   Forum bodies (comments, replies, questions, answers, topics, etc.) are
   stored as WYSIWYG HTML and rendered into a <div class="forum-content-display">.
   A hidden sibling <textarea> exists for the inline-edit flow; visibility
   is swapped by the MutationObserver in forums.cfm watching the textarea's
   `disabled` attribute.

   Long bodies get `.forum-content-collapsible` (capped height) and
   `toggleReadMore()` adds `.forum-content-expanded` to release the cap.
   ------------------------------------------------------------------------- */
.forum-content-display {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.forum-content-display.forum-content-collapsible {
    max-height: 7em;
    overflow: hidden;
}

.forum-content-display.forum-content-collapsible.forum-content-expanded {
    max-height: none;
}

.forum-content-display p:last-child,
.forum-content-display ul:last-child,
.forum-content-display ol:last-child {
    margin-bottom: 0;
}

/* Inline edit textarea for forum bodies (comments, replies, etc.).
   The original markup used `border-0 bg-transparent` which made the
   edit box invisible. This restores a clear form-control appearance
   while keeping autosize behaviour from resizeTextArea(). */
.forum-edit-textarea {
    resize: none;
    overflow: hidden;
    min-height: 6em;
    background-color: #fff;
}