.fi-fo-rich-editor-editor,
.article-content {
    color: #09090b !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    font-family: "Poppins", sans-serif !important;
}

/* Headings */
.fi-fo-rich-editor-editor h2,
.article-content h2 {
    font-size: 28px !important;
    line-height: 1.125;
    font-weight: 800;
    padding-bottom: 10px;
}

.fi-fo-rich-editor-editor h3,
.article-content h3 {
    font-size: 24px !important;
    line-height: 1.125;
    font-weight: 700;
    padding-bottom: 10px;
}

/* Paragraphs */
.fi-fo-rich-editor-editor p,
.article-content p {
    margin: 16px 0 !important;
}

/* Links */
.fi-fo-rich-editor-editor a,
.article-content a {
    color: var(--ads-primary-600);
    transition: color 0.2s ease-in-out;
}

.fi-fo-rich-editor-editor a:hover,
.article-content a:hover {
    color: var(--ads-primary-700);
}

/* Figures */
.fi-fo-rich-editor-editor figure,
.fi-fo-rich-editor-editor figcaption,
.article-content figure,
.article-content figcaption {
    display: block !important;
}

.fi-fo-rich-editor-editor figure,
.fi-fo-rich-editor-editor figure a,
.article-content figure,
.article-content figure a {
    display: flex !important;
    flex-direction: column;
    align-items: center;
}

.fi-fo-rich-editor-editor figure figcaption,
.article-content figure figcaption {
    font-size: 16px !important;
}

/* Images */
.fi-fo-rich-editor-editor img,
.article-content img {
    max-width: 100% !important;
    height: auto;
    margin: 10px 0 !important;
}

/* Explicitly-resized images: honour the JS-applied inline width/height while
   still keeping them inside the container via max-width. */
.fi-fo-rich-editor-editor img[data-trix-rh-sized],
.article-content img[data-trix-rh-sized] {
    max-width: 100% !important;
}

/* Lists (base) */
.fi-fo-rich-editor-editor ul,
.fi-fo-rich-editor-editor ol,
.article-content ul,
.article-content ol {
    padding-left: 1.75rem;
    margin: 0.75rem 0;
}

/* Unordered lists */
.fi-fo-rich-editor-editor ul li,
.article-content ul li {
    list-style-type: square !important;
}

.fi-fo-rich-editor-editor ul li::marker,
.article-content ul li::marker {
    color: black;
    font-weight: 600;
}

/* Ordered lists */
.fi-fo-rich-editor-editor ol li,
.article-content ol li {
    list-style-type: decimal !important;
}

.fi-fo-rich-editor-editor ol li::marker,
.article-content ol li::marker {
    color: black;
}

/* Image alignment — keyed on Trix's own data-trix-attachment JSON so no JS
   needs to touch the editor DOM (which would trigger Trix's own observer and
   cause an infinite re-render loop). Compact JSON has no spaces so the
   substring selectors are safe. Works in both the editor and article view. */
.fi-fo-rich-editor-editor figure[data-trix-attachment*='"alignment":"left"'],
.article-content           figure[data-trix-attachment*='"alignment":"left"'] {
    float: left !important;
    display: block !important;
    margin: 4px 16px 8px 0 !important;
    align-items: flex-start !important;
}

.fi-fo-rich-editor-editor figure[data-trix-attachment*='"alignment":"right"'],
.article-content           figure[data-trix-attachment*='"alignment":"right"'] {
    float: right !important;
    display: block !important;
    margin: 4px 0 8px 16px !important;
    align-items: flex-start !important;
}

/* Trix wraps every attachment in its own block <div>. A cursor <br> inside
   gives that block a non-zero line-box height, which pushes the next block
   below the float instead of letting two consecutive float-left/right figures
   stack side by side on the same row.
   Zeroing line-height collapses that implicit height; line-height is then
   restored on the figure element itself so figcaption text renders normally. */
.fi-fo-rich-editor-editor div:has(> figure[data-trix-attachment*='"alignment":"left"']),
.fi-fo-rich-editor-editor div:has(> figure[data-trix-attachment*='"alignment":"right"']),
.article-content div:has(> figure[data-trix-attachment*='"alignment":"left"']),
.article-content div:has(> figure[data-trix-attachment*='"alignment":"right"']) {
    line-height: 0;
}

.fi-fo-rich-editor-editor figure[data-trix-attachment],
.article-content figure[data-trix-attachment] {
    line-height: 1.5;
}

/* Clearfix so floated images don't bleed out of the editor or article view */
.fi-fo-rich-editor-editor::after,
.article-content::after {
    content: '';
    display: table;
    clear: both;
}

/* ── Editor-specific (not shared with view page) ───────────────────────── */

.fi-fo-rich-editor {
    overflow: visible !important;
}

.fi-fo-rich-editor-editor {
    max-height: none !important;
    overflow: visible !important;
}

.fi-fo-rich-editor-toolbar {
    position: sticky !important;
    top: 64px;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.dark .fi-fo-rich-editor-toolbar {
    background-color: rgba(var(--gray-900), var(--tw-bg-opacity));
}