/* ================================================================= */
/* single.php TEMPLATE STYLES                                        */
/* Dedicated layout for individual post pages — narrower than the    */
/* homepage/archive width for comfortable long-form reading, with a  */
/* full H1 headline, a large featured image, and styling for the raw */
/* HTML that the_content() outputs from the WordPress editor.        */
/* ================================================================= */

/* Constrains and centers the single post column. Narrower (760px) than */
/* the 1100px used elsewhere, since long paragraphs of body text are */
/* easier to read at a shorter line length than a full-width homepage grid. */
.rsn-single-post {
    max-width: 760px; /* Narrower reading column — long line lengths are harder to read comfortably */
    margin: 40px auto; /* Center the column horizontally, add vertical spacing above/below */
    padding: 0 20px; /* Left/right breathing room on smaller screens */
}

/* Wrapper around the featured image at the top of the post */
.rsn-single-featured-image {
    margin-bottom: 24px; /* Space below the image before the title/meta begin */
}

/* The featured image itself */
.rsn-single-featured-image img {
    width: 100%; /* Image fills the full width of the reading column */
    height: auto; /* Preserve the image's natural aspect ratio instead of forcing a fixed height */
    border-radius: 6px; /* Rounded corners, consistent with the theme's card styling elsewhere */
    display: block; /* Removes the small default inline-image gap beneath the image */
}

/* Groups the title and byline/date meta together, with spacing below before the body content */
.rsn-single-header {
    margin-bottom: 24px; /* Space below the header block before the article body begins */
}

/* The post's main H1 headline — the true top-level heading of the page */
.rsn-single-title {
    font-family: var(--rsn-font-rajdhani); /* H1 role: Rajdhani, per the type spec's "article headlines" use case */
    font-weight: var(--rsn-type-h1-weight); /* 700 weight, per the H1 row of the type spec */
    font-size: var(--rsn-type-h1-size); /* Full 40px H1 size — this genuinely IS the page's primary headline */
    color: var(--rsn-ice); /* Ice — primary text color, legible against the dark Deep page background */
    margin-bottom: 12px; /* Space below the title before the meta row */
}

/* Row holding the publish date and author byline beneath the title */
.rsn-single-meta {
    display: flex; /* Lay the date and author out side by side */
    align-items: center; /* Vertically align them on the same line */
    gap: 16px; /* Space between the date and the author byline */
}

/* The "By [Author Name]" byline text */
.rsn-single-author {
    font-family: var(--rsn-font-dm-mono); /* Label role: DM Mono, matching the date it sits next to */
    font-weight: var(--rsn-type-label-weight); /* 400 weight, per the Label row of the type spec */
    font-size: var(--rsn-type-label-size); /* 10px, matching the publish date's size for visual consistency */
    color: rgba(255, 255, 255, 0.55); /* Muted Ice, matching the publish date's de-emphasized treatment */
}



/* Wrapper for the "Pages: 1 2 3" links that appear only on posts using the <!--nextpage--> tag */
.rsn-single-page-links {
    margin-top: 24px; /* Space above, separating it from the last paragraph of content */
    font-family: var(--rsn-font-dm-mono); /* Label role: DM Mono, since this is a UI/navigation element, not body copy */
    font-size: var(--rsn-type-label-size); /* 10px, matching other Label-role UI text like the date/pagination */
    color: rgba(255, 255, 255, 0.75); /* Muted Ice, similar treatment to other secondary UI text */
}

/* Row holding the "Previous Post" / "Next Post" links at the very bottom of the page */
.rsn-single-post-nav {
    max-width: 760px; /* Match the reading column's width so the nav row aligns with the content above it */
    margin: 20px auto 60px; /* Space above (from the article) and generous space below (before the footer) */
    padding: 20px; /* Inner padding on all sides so the links aren't flush against the row's own edges */
    display: flex; /* Lay the previous/next links out side by side */
    justify-content: space-between; /* Push "previous" to the left and "next" to the right */
    gap: 20px; /* Minimum space between the two links if their text is long */
    border-top: 1px solid var(--rsn-depth); /* Subtle divider line separating this nav from the article above it */
}

/* Both the previous and next post links share this base styling */
.rsn-single-post-nav a {
    color: var(--rsn-signal); /* Signal — brand accent color, an explicit "links" use case */
    text-decoration: none; /* Remove the default underline */
    font-family: var(--rsn-font-dm-sans); /* Body role: DM Sans, since these are short navigational phrases, not headlines */
    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, matching standard body text size */
    transition: color 0.2s ease; /* Smoothly animate the color change on hover below */
}

/* Hover/focus state on the previous/next post links */
.rsn-single-post-nav a:hover,
.rsn-single-post-nav a:focus {
    color: var(--rsn-drive); /* Drive — Signal's designated hover/pressed state */
}

/* Right-align the "next" link's text so it visually points toward the right edge, matching its arrow */
.rsn-single-post-nav-next {
    text-align: right; /* Aligns the "Title →" text against the right edge of its half of the row */
}