/* =====================================================================
   rich-content.css
   Styling for HTML that comes out of the admin rich-text editor
   (TinyMCE) and is rendered with @Html.RichText / @Html.Raw.

   Loaded for BOTH languages. Direction-specific rules live in
   rtl-fixes.css.

   The editor writes fixed pixel dimensions (width="1406") and the theme
   ships no global image rule, so without this file long-form content
   overflows its column and forces the whole page to scroll sideways.
   ===================================================================== */

/* ------------------------------------------------------------------
   Base block
   ------------------------------------------------------------------ */
.rich-content {
    /* Nothing may escape the column this block sits in. */
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* The page stylesheet sets a body-wide text-align (left in theme.css,
   right in rtl-theme.css) which would otherwise leak in and left-align an
   Arabic block sitting on the English site, or vice-versa. Alignment must
   follow the block's OWN direction. `start` does that on its own; the two
   explicit rules are the fallback for engines that ignore it. */
.rich-content {
    text-align: start;
}

.rich-content[dir="rtl"] {
    text-align: right;
}

.rich-content[dir="ltr"] {
    text-align: left;
}

.rich-content:after {
    content: "";
    display: table;
    clear: both;
}

/* Kill the stray margin the editor leaves on trailing empty paragraphs. */
.rich-content > p:empty {
    display: none;
}

/* ------------------------------------------------------------------
   Images
   ------------------------------------------------------------------ */

/* `height: auto` neutralises the height="..." attribute, `max-width`
   neutralises width="...". Both are needed: dropping either one
   distorts the aspect ratio of editor-inserted images. */
.rich-content img {
    max-width: 100% !important;
    height: auto !important;
    /* The editor also writes inline `style="width: 1200px"` sometimes. */
    width: auto;
}


.rich-content figure {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.rich-content figure.image {
    display: table;
}

.rich-content figure figcaption {
    display: table-caption;
    caption-side: bottom;
    font-size: 0.85em;
    color: #777;
    padding-top: 6px;
}

/* Editor float classes ("align left/right" buttons). */
.rich-content img.align-left,
.rich-content figure.align-left {
    float: left;
    margin: 0 1rem 1rem 0;
}

.rich-content img.align-right,
.rich-content figure.align-right {
    float: right;
    margin: 0 0 1rem 1rem;
}

/* ------------------------------------------------------------------
   Embedded media (YouTube, Vimeo, <video>)
   ------------------------------------------------------------------ */

/* Wrapper injected by RichTextHelper around every bare <iframe>/<video>,
   so the embed keeps its aspect ratio at any column width instead of
   staying stuck at the width="925" height="521" the editor wrote. */
.rich-content .embed-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.rich-content .embed-container > iframe,
.rich-content .embed-container > video,
.rich-content .embed-container > embed,
.rich-content .embed-container > object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

/* Safety net for any embed the helper did not wrap. */
.rich-content iframe,
.rich-content video,
.rich-content embed,
.rich-content object {
    max-width: 100%;
}

/* ------------------------------------------------------------------
   Tables
   ------------------------------------------------------------------ */

/* Wide tables scroll inside their own box rather than widening the page. */
.rich-content .table-container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.5rem;
}

.rich-content table {
    max-width: 100%;
    border-collapse: collapse;
}

.rich-content table td,
.rich-content table th {
    padding: 6px 10px;
    vertical-align: top;
}

/* ------------------------------------------------------------------
   Long words / URLs
   ------------------------------------------------------------------ */
.rich-content pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.rich-content a {
    word-break: break-word;
}

/* ------------------------------------------------------------------
   Lists — the theme resets list styling globally; restore it here so
   bullets and numbers written in the editor actually show.
   ------------------------------------------------------------------ */
.rich-content ul {
    list-style: disc outside;
    padding-inline-start: 1.5rem;
}

.rich-content ol {
    list-style: decimal outside;
    padding-inline-start: 1.5rem;
}

.rich-content li {
    list-style: inherit;
}