/* ================================================================= */
/* EDITOR CONTENT (content.css)                                      */
/* Styles for the body text the WordPress editor saves, as printed   */
/* by the_content() on single posts and static Pages.                */
/* ================================================================= */

/* ---------------------------------------------------------------- */
/* The rules below style the RAW HTML that the_content() outputs —   */
/* plain <p>, <a>, <h2>-<h4>, <ul>/<ol>, <blockquote>, and <img> tags */
/* with no classes of their own, exactly as the WordPress editor     */
/* (or page builder) saves them. These rules are shared by BOTH      */
/* .rsn-single-content (single.php, blog posts) and .rsn-page-content */
/* (page.php, static Pages like "About Us") since both templates     */
/* output the same kind of raw block-editor HTML via the_content() — */
/* scoping to these two classes keeps the generic tag selectors from */
/* affecting the rest of the theme (nav, cards, footer, etc.).       */
/* ---------------------------------------------------------------- */

/* Base body copy styling for the post's main content */
.rsn-single-content,
.rsn-page-content {
    font-family: var(--rsn-font-dm-sans); /* Body role: DM Sans, the spec's default for "article body" text */
    font-weight: var(--rsn-type-body-weight); /* 400 weight, per the Body row of the type spec */
    font-size: var(--rsn-type-body-size); /* 15px, the middle of the Body role's 14–16px range */
    color: var(--rsn-ice); /* Ice — primary text color, legible against the dark Deep page background */
    line-height: 1.7; /* Extra line spacing (looser than the site-wide 1.5) improves long-form readability */
}

/* Space between consecutive paragraphs within the post body */
.rsn-single-content p,
.rsn-page-content p {
    margin-bottom: 20px; /* Comfortable vertical rhythm between paragraphs */
}

/* Links inside the post body copy */
.rsn-single-content a,
.rsn-page-content a {
    color: var(--rsn-signal); /* Signal — brand accent color, an explicit "links" use case */
    text-decoration: underline; /* Keep the underline here (unlike nav links) since inline text links need it for clarity */
}

/* Hover/focus state on in-content links */
.rsn-single-content a:hover,
.rsn-page-content a:hover,
.rsn-single-content a:focus,
.rsn-page-content a:focus {
    color: var(--rsn-drive); /* Drive — Signal's designated hover/pressed state */
}

/* Sub-headings an author might add within the post body (H2 level) */
.rsn-single-content h2,
.rsn-page-content h2 {
    font-family: var(--rsn-font-rajdhani); /* H2 role: Rajdhani, per the type spec's "section headers" use case */
    font-weight: var(--rsn-type-h2-weight); /* 600 weight, per the H2 row of the type spec */
    font-size: var(--rsn-type-h2-size); /* 32px, the middle of the H2 role's 28–36px range */
    margin: 32px 0 16px; /* Extra space above (separating from prior content) and below (before the next paragraph) */
}

/* Sub-headings an author might add within the post body (H3 level) */
.rsn-single-content h3,
.rsn-page-content h3 {
    font-family: var(--rsn-font-dm-sans); /* H3 role: DM Sans, per the type spec's "subheadings" use case */
    font-weight: var(--rsn-type-h3-weight); /* 600 weight, per the H3 row of the type spec */
    font-size: var(--rsn-type-h3-size); /* 22px, the middle of the H3 role's 20–24px range */
    margin: 28px 0 14px; /* Extra space above and below, slightly less than H2 since it's a lower-level heading */
}

/* Any deeper heading levels (H4+) an author might use, kept simple and consistent with H3 styling */
.rsn-single-content h4,
.rsn-page-content h4,
.rsn-single-content h5,
.rsn-page-content h5,
.rsn-single-content h6,
.rsn-page-content h6 {
    font-family: var(--rsn-font-dm-sans); /* DM Sans, staying consistent with the H3 sub-heading treatment */
    font-weight: var(--rsn-type-h3-weight); /* 600 weight, matching H3 since these are all "sub-heading" territory */
    margin: 24px 0 12px; /* Slightly less spacing than H3, since these represent even lower-level headings */
}

/* Bulleted and numbered lists within the post body */
.rsn-single-content ul,
.rsn-page-content ul,
.rsn-single-content ol,
.rsn-page-content ol {
    margin: 0 0 20px 24px; /* Indent the list from the left edge and add space below before the next paragraph */
}

/* Individual list items */
.rsn-single-content li,
.rsn-page-content li {
    margin-bottom: 8px; /* Small space between list items for readability */
}

/* Blockquotes an author might insert to highlight a quote or key statement */
.rsn-single-content blockquote,
.rsn-page-content blockquote {
    border-left: 3px solid var(--rsn-signal); /* Signal — brand-colored accent bar marks this as a highlighted quote */
    padding-left: 20px; /* Space between the accent bar and the quoted text */
    margin: 24px 0; /* Vertical space above/below to visually separate the quote from surrounding paragraphs */
    color: rgba(255, 255, 255, 0.85); /* Slightly muted Ice, subtly distinguishing quoted text from regular body copy */
    font-style: italic; /* Italics are a common visual convention for quoted material */
}

/* Images an author might insert directly within the post body (not the featured image) */
.rsn-single-content img,
.rsn-page-content img {
    max-width: 100%; /* Never let an inline image overflow the reading column's width */
    height: auto; /* Preserve the image's natural aspect ratio */
    border-radius: 6px; /* Rounded corners, consistent with the theme's card/image styling elsewhere */
    margin: 20px 0; /* Vertical space above/below so the image doesn't crowd surrounding paragraphs */
}