/* Styles for rendered forum post content (Syncfusion RTE output wrapped by ForumPostImageLightbox). */

/* Quote styling for rendered forum posts (Monday 12949187996): one affordance only, the
   left rule. The old decorative 3rem quote glyph was absolutely positioned over the padding
   box and collided with the first character (doubly so when the quote itself began with a
   typed quotation mark), and the italic + secondary colour made quotes dimmer than body copy. */
.forum-post-with-lightbox blockquote {
    border-left: 4px solid var(--mud-palette-primary);
    padding: 12px 18px;
    margin: 1em 0 1.5em 0;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.05);
    border-radius: 0 8px 8px 0;
    color: var(--mud-palette-text-primary);
    font-size: 0.95em;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
}

.forum-post-with-lightbox blockquote strong {
    color: var(--mud-palette-primary);
    font-style: normal;
    font-weight: 600;
}

.forum-post-with-lightbox blockquote p {
    margin: 0.5em 0;
}

.forum-post-with-lightbox blockquote p:first-child {
    margin-top: 0;
}

.forum-post-with-lightbox blockquote p:last-child {
    margin-bottom: 0;
}

/* Pasted inline presentation (Google Docs / Word) must not override the theme
   (Monday 12949126822). New pastes are cleaned in the editor and on save; this covers posts stored
   before that. Only elements that actually carry a colour, font or background declaration are
   touched, so the editor's own width styles on images and table cells, text-align and underline
   stay. Headings keep their own size, links keep link colour, bold/italic weights are untouched. */
.forum-post-with-lightbox :is(p, div, span, li, td, th, b, strong, i, em, u, s, blockquote, pre, code):is([style*="color"], [style*="font-family"], [style*="font-size"], [style*="background"]) {
    color: inherit !important;
    background-color: transparent !important;
    font-family: inherit !important;
    font-size: inherit !important;
}

.forum-post-with-lightbox :is(h1, h2, h3, h4, h5, h6):is([style*="color"], [style*="font-family"], [style*="background"]) {
    color: inherit !important;
    background-color: transparent !important;
    font-family: inherit !important;
}

.forum-post-with-lightbox a:is([style*="color"], [style*="font-family"], [style*="font-size"], [style*="background"]) {
    color: var(--mud-palette-info) !important;
    background-color: transparent !important;
    font-family: inherit !important;
    font-size: inherit !important;
}

/* An over-wide element (a pasted table, an oversized inline width) scrolls inside the post instead
   of pushing the page wide. */
.forum-post-with-lightbox {
    overflow-x: auto;
}

/* Images the editor inserted before the inline display class was persisted carry only
   "e-rte-image", which Syncfusion's global stylesheet renders as display:block + margin:auto
   (centered) even though the editor showed them inline. Render them the way the editor's own
   "e-imginline" does; new posts get the class itself on save (HtmlSanitizerService). Also covers the
   quoted parent excerpt above a reply, which renders outside the lightbox wrapper. */
:is(.forum-post-with-lightbox, .forum-reply-parent-excerpt) img.e-rte-image:not(.e-imginline):not(.e-imgbreak):not(.e-imgleft):not(.e-imgright):not(.e-imgcenter) {
    display: inline-block;
    float: none;
    margin: 0 5px;
    padding: 1px;
    max-width: 100%;
    vertical-align: bottom;
}

/* Table styling for rendered forum posts.
   max-width + table-layout:fixed are the containment half (Monday 12865221241): an auto-layout table grows to
   fit its content regardless of width:100%, so a table holding a nested table (or one long unbroken cell) ran
   past the post and the wrapper's overflow-x:auto only let the member scroll after it. Fixed layout makes the
   declared width the real one and shares it across the columns. */
.forum-post-with-lightbox table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    margin: 1em 0;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    display: table;
}

/* A nested table fills its host cell instead of dictating the outer table's width. Syncfusion writes
   width:100%; min-width:0px onto the inner table and a percentage width onto the cell holding it, both as
   inline styles, so these need !important to win (Monday 12865221241). */
.forum-post-with-lightbox table table {
    width: 100% !important;
    min-width: 0 !important;
    margin: .5em 0;
}

/* Header cells */
.forum-post-with-lightbox th {
    background: linear-gradient(
        180deg,
        var(--mud-palette-background-grey) 0%,
        rgba(var(--mud-palette-primary-rgb), 0.08) 100%
    );
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 0.025em;
    color: var(--mud-palette-text-primary);
    padding: 12px 12px;
    text-align: left;
    border-bottom: 2px solid rgba(var(--mud-palette-primary-rgb), 0.2);
    /* A long unbroken word (a pasted URL, a part number) must not set a floor on the column width under the
       fixed layout above, or the table pushes past the post again. Monday 12865221241. */
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Data cells */
.forum-post-with-lightbox td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--mud-palette-divider);
    /* See the header cell rule above (Monday 12865221241). */
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Remove bottom border from last row */
.forum-post-with-lightbox tr:last-child td {
    border-bottom: none;
}

/* Alternating row colors */
.forum-post-with-lightbox tr:nth-child(even) {
    background-color: rgba(var(--mud-palette-background-grey-rgb), 0.3);
}

/* Hover state */
.forum-post-with-lightbox tbody tr:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.04);
}

/* Link styling — use Info palette so links read as blue, not theme primary */
.forum-post-with-lightbox a {
    color: var(--mud-palette-info);
    text-decoration: underline;
}

.forum-post-with-lightbox a:hover {
    color: var(--mud-palette-info);
    text-decoration: underline;
    opacity: 0.85;
}

.forum-post-with-lightbox a:visited {
    color: var(--mud-palette-info);
}

/* Dark theme adjustments for blockquotes */
html.elevate-theme-dark .forum-post-with-lightbox blockquote {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.1);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Dark theme adjustments for tables */
html.elevate-theme-dark .forum-post-with-lightbox table {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

html.elevate-theme-dark .forum-post-with-lightbox th {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(255, 255, 255, 0.02) 100%
    );
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

html.elevate-theme-dark .forum-post-with-lightbox tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02);
}

html.elevate-theme-dark .forum-post-with-lightbox tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Embedded YouTube player under any paragraph that holds a video link (Monday 12953495843; widened
   2026-09-17). The markup is produced at render time by ForumVideoEmbeds.Apply, never stored, so the
   rich-text sanitizer keeps stripping iframes on save; the member's own link stays in the paragraph. */
.forum-video-embed {
    margin: 0.75em 0;
    max-width: 640px;
}

/* Fixed 16:9 box so the player never reflows the post while it loads. */
.forum-video-embed__player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}

.forum-video-embed__frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}