/* ==========================================================================
   RICH TEXT CONTAINER — global typography system for CKEditor output
   ----------------------------------------------------------------------
   Scope: ONLY tags nested inside .rich-text-container / .rich-content
   get styled here. Nothing here leaks out to the rest of the site.

   Include this file in base.html (after home.css) so it applies
   everywhere CKEditor content is rendered with |safe — blog_detail.html,
   service_detail.html PageBlocks, about.html, etc. One file, one place
   to fix typography sitewide.

   .rich-content is the class already used throughout service_detail.html.
   .rich-text-container is provided as an alias for new templates —
   both selectors carry identical rules, so either name works.
   ========================================================================== */

.rich-text-container,
.rich-content {
    /* ---- Self-contained width control ---- */
    /* Readable prose width, centered — works whether this sits inside
       a full-width .container (1320px) or with no wrapper at all. */
    width: 100%;
    max-width: 800px;
    margin-inline: auto;
    padding-inline: var(--space-md, 24px);
    box-sizing: border-box;

    /* ---- Base type ---- */
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--graphite-600, #45566B);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* When rich content sits INSIDE a two-column layout (text beside an
   image, text beside cards, text beside a table), it's already
   narrower than 800px from the grid track — reset the wrapper's own
   width/centering so it just fills its column naturally instead of
   fighting the grid. */
.text-image-text .rich-content,
.text-image-text .rich-text-container,
.cards-side-text .rich-content,
.cards-side-text .rich-text-container,
.sticky-table-text-col .rich-content,
.sticky-table-text-col .rich-text-container {
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
}

@media (max-width: 600px) {
    .rich-text-container,
    .rich-content {
        padding-inline: var(--space-sm, 16px);
        font-size: 0.96rem;
    }
}

/* ==========================================================================
   HEADINGS
   ========================================================================== */
.rich-text-container h1, .rich-content h1,
.rich-text-container h2, .rich-content h2,
.rich-text-container h3, .rich-content h3,
.rich-text-container h4, .rich-content h4 {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    color: var(--graphite-800, #1B2A3D);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 1.4em 0 0.5em;
}
.rich-text-container > h1:first-child, .rich-content > h1:first-child,
.rich-text-container > h2:first-child, .rich-content > h2:first-child,
.rich-text-container > h3:first-child, .rich-content > h3:first-child,
.rich-text-container > h4:first-child, .rich-content > h4:first-child {
    margin-top: 0;
}

.rich-text-container h1, .rich-content h1 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.rich-text-container h2, .rich-content h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); }
.rich-text-container h3, .rich-content h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
.rich-text-container h4, .rich-content h4 { font-size: 1.05rem; }

/* ==========================================================================
   BODY TEXT
   ========================================================================== */
.rich-text-container p, .rich-content p {
    margin: 0 0 1.1em;
}
.rich-text-container p:last-child, .rich-content p:last-child {
    margin-bottom: 0;
}

.rich-text-container strong, .rich-content strong,
.rich-text-container b, .rich-content b {
    color: var(--graphite-800, #1B2A3D);
    font-weight: 600;
}
.rich-text-container em, .rich-content em,
.rich-text-container i, .rich-content i {
    font-style: italic;
}

.rich-text-container a, .rich-content a {
    color: var(--signal-blue, #2F6FED);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}
.rich-text-container a:hover, .rich-content a:hover {
    color: var(--signal-blue-dark, #1D54C4);
}

.rich-text-container blockquote, .rich-content blockquote {
    margin: 1.4em 0;
    padding: 0.6em 0 0.6em 1.2em;
    border-left: 3px solid var(--signal-blue, #2F6FED);
    color: var(--graphite-600, #45566B);
    font-style: italic;
    background: var(--paper-50, #F6F8FA);
    border-radius: 0 8px 8px 0;
}

.rich-text-container hr, .rich-content hr {
    border: none;
    border-top: 1px solid var(--border-hairline, #DCE3EC);
    margin: 2em 0;
}

/* ==========================================================================
   LISTS
   ========================================================================== */
.rich-text-container ul, .rich-content ul,
.rich-text-container ol, .rich-content ol {
    margin: 0 0 1.1em;
    padding-left: 1.4em;
}
.rich-text-container li, .rich-content li {
    margin-bottom: 0.5em;
    line-height: 1.65;
}
.rich-text-container li:last-child, .rich-content li:last-child {
    margin-bottom: 0;
}
/* Nested lists shouldn't inherit the outer bottom margin */
.rich-text-container li ul, .rich-content li ul,
.rich-text-container li ol, .rich-content li ol {
    margin-top: 0.5em;
    margin-bottom: 0;
}

/* ==========================================================================
   IMAGES — CKEditor4 commonly emits inline width/height/float styles;
   these overrides neutralize layout-breaking values while still
   respecting intentional left/right alignment.
   ========================================================================== */
.rich-text-container img, .rich-content img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: var(--radius-md, 12px);
    margin: 0.8em 0;
    display: block;
}
/* CKEditor's built-in align classes — keep the float behavior intact,
   just cap size and add breathing room instead of stripping it out. */
.rich-text-container img.image-style-align-left, .rich-content img.image-style-align-left,
.rich-text-container img[style*="float:left"], .rich-content img[style*="float:left"],
.rich-text-container img[style*="float: left"], .rich-content img[style*="float: left"] {
    float: left;
    margin: 0.3em 1.2em 0.8em 0;
    max-width: 45% !important;
}
.rich-text-container img.image-style-align-right, .rich-content img.image-style-align-right,
.rich-text-container img[style*="float:right"], .rich-content img[style*="float:right"],
.rich-text-container img[style*="float: right"], .rich-content img[style*="float: right"] {
    float: right;
    margin: 0.3em 0 0.8em 1.2em;
    max-width: 45% !important;
}
.rich-text-container figure, .rich-content figure {
    margin: 1em 0;
}
.rich-text-container figcaption, .rich-content figcaption {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 0.82rem;
    color: var(--graphite-400, #7C8CA1);
    text-align: center;
    margin-top: 0.4em;
}
/* Clearfix so floated images don't collapse the container's height */
.rich-text-container::after, .rich-content::after {
    content: '';
    display: table;
    clear: both;
}

/* ==========================================================================
   TABLES — CKEditor / pasted-from-Word tables
   ========================================================================== */
.rich-text-container table, .rich-content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 1.6em 0;
    font-size: 0.95rem;
    border: 1px solid var(--border-hairline, #DCE3EC);
    border-radius: 12px;
    overflow: hidden;
}
.rich-text-container th, .rich-content th,
.rich-text-container td, .rich-content td {
    padding: 16px 22px;
    text-align: left;
    border-bottom: 1px solid var(--border-hairline, #DCE3EC);
    border-right: 1px solid var(--border-hairline, #DCE3EC);
}
.rich-text-container th:last-child, .rich-content th:last-child,
.rich-text-container td:last-child, .rich-content td:last-child {
    border-right: none;
}
.rich-text-container tr:last-child th, .rich-content tr:last-child th,
.rich-text-container tr:last-child td, .rich-content tr:last-child td {
    border-bottom: none;
}
.rich-text-container th, .rich-content th {
    background: var(--paper-50, #F6F8FA);
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-weight: 600;
    color: var(--graphite-800, #1B2A3D);
    font-size: 0.9rem;
}
.rich-text-container td, .rich-content td {
    color: var(--graphite-600, #45566B);
    line-height: 1.6;
}
/* First column often holds row labels (like "Focus", "Objective") —
   give it a touch more visual weight without a hard color change,
   matching the reference: centered, slightly muted, distinct from
   the descriptive columns beside it. */
.rich-text-container tr td:first-child, .rich-content tr td:first-child {
    font-weight: 500;
    color: var(--graphite-800, #1B2A3D);
    vertical-align: middle;
    text-align: center;
}
/* ==========================================================================
   INLINE-STYLE FALLBACK OVERRIDES
   ----------------------------------------------------------------------
   CKEditor sometimes writes font-family / font-size / color directly as
   inline styles (e.g. pasted from Word or a font-size plugin). These
   forcibly reset those specific properties back to the design system
   on the tags where stray inline styling causes the most damage, while
   deliberately NOT touching `text-align` or `font-weight` — those two
   usually reflect a real editorial choice (centered pull-quote, bold
   emphasis) and should be respected rather than overridden.
   ========================================================================== */
.rich-text-container p[style], .rich-content p[style],
.rich-text-container li[style], .rich-content li[style],
.rich-text-container span[style], .rich-content span[style] {
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    line-height: 1.75 !important;
}
.rich-text-container [style*="font-size"], .rich-content [style*="font-size"] {
    font-size: 1rem !important;
}
/* Neutralizes stray inline `color:` values CKEditor sometimes leaves on
   paragraphs/spans (e.g. from a misclicked font-color button or a paste
   from another source) — these read as rendering bugs, not intentional
   brand emphasis, so body text is forced back to the design system's
   neutral ink color regardless of what's saved in the HTML. */
.rich-text-container p[style], .rich-content p[style],
.rich-text-container li[style], .rich-content li[style],
.rich-text-container span[style], .rich-content span[style] {
    color: var(--graphite-600, #45566B) !important;
}
.rich-text-container h1[style], .rich-content h1[style],
.rich-text-container h2[style], .rich-content h2[style],
.rich-text-container h3[style], .rich-content h3[style],
.rich-text-container h4[style], .rich-content h4[style] {
    color: var(--graphite-800, #1B2A3D) !important;
}

/* CKEditor's "Increase Indent" toolbar button writes inline
   margin-left (40px, 80px, 120px...) directly onto the saved HTML.
   This is the actual cause of paragraphs/headings appearing pushed
   far to the right with no corresponding CSS rule — neutralize it
   so indentation can never leak from admin content into layout. */
.rich-text-container [style*="margin-left"], .rich-content [style*="margin-left"] {
    margin-left: 0 !important;
}