/* ================================================================= */
/* index.php TEMPLATE STYLES (archive.css)                           */
/* index.php is the fallback listing WordPress uses for category     */
/* archives, search results and anything else without a more        */
/* specific template. It stacks full-width cards from                 */
/* template-parts/content/card-list.php. Those cards share the base  */
/* card rules in cards.css; this file adds what's different about    */
/* them (an <h2> title instead of <h3>, and a .rsn-article-excerpt   */
/* <div> instead of a <p>), plus the page-number links underneath.   */
/* ================================================================= */

/* Constrains and centers the main content column, matching the same */
/* max-width/padding pattern used by .rsn-latest-articles on the homepage. */
.rsn-main-content {
    max-width: 1100px; /* Match the width of the header/footer/homepage sections for alignment */
    margin: 40px auto; /* Center the column horizontally, add vertical spacing above/below */
    padding: 0 20px; /* Left/right breathing room on smaller screens */
    display: flex; /* Stack each post's article card vertically... */
    flex-direction: column; /* ...top to bottom, one per post */
    gap: 20px; /* Space between stacked article cards, since there's no CSS grid "gap" here */
}

/* Post title heading in this template. Unlike the front-page card grid's <h3>, */
/* this is rendered as an <h2> — and semantically it IS the article headline */
/* (especially on a single post page), so it uses the H1 typography role. */
.rsn-article-content h2 {
    font-family: var(--rsn-font-rajdhani); /* H1 role: Rajdhani, since "article headlines" is explicitly H1's use case */
    font-weight: var(--rsn-type-h1-weight); /* 700 weight, per the H1 row of the type spec */
    font-size: 28px; /* Smaller than the full 36–48px H1 range, since this can also appear in a stacked archive list */
    margin-bottom: 8px; /* Space below the title before the date/excerpt */
}

/* The post title link itself */
.rsn-article-content h2 a {
    color: var(--rsn-signal); /* Signal — article titles are links, an explicit Signal use case */
    text-decoration: none; /* Remove the browser's default underline */
    transition: color 0.2s ease; /* Smoothly animate the color change on hover below */
}

/* Hover/focus state on the post title link */
.rsn-article-content h2 a:hover,
.rsn-article-content h2 a:focus {
    color: var(--rsn-drive); /* Drive — Signal's designated hover/pressed state */
    text-decoration: underline; /* Underline on hover to reinforce it's clickable */
}

/* The auto-generated excerpt shown below the title/date in this template */
.rsn-article-excerpt {
    font-family: var(--rsn-font-dm-sans); /* Body role: DM Sans, since "descriptions" is explicitly listed under Body */
    font-weight: var(--rsn-type-body-weight); /* 400 weight, per the Body row of the type spec */
    font-size: 14px; /* Bottom of the Body role's 14–16px range, matching the front-page card excerpt size */
    color: rgba(255, 255, 255, 0.75); /* Muted Ice — softened opacity keeps excerpt text secondary to the title */
    margin-top: 10px; /* Space above the excerpt, separating it from the date above it */
}

/* Wrapper for the "Previous/Next" pagination links at the bottom of an archive listing */
.rsn-pagination {
    max-width: 1100px; /* Match the width of the rest of the main content column */
    margin: 20px auto 40px; /* Space above (from the last card) and below (before the footer) */
    padding: 0 20px; /* Left/right breathing room on smaller screens, matching .rsn-main-content */
    display: flex; /* Lay the page number links out horizontally */
    gap: 10px; /* Space between each page number link */
    flex-wrap: wrap; /* Allow page links to wrap onto a new line if there are many pages */
}

/* Individual page number links/current-page marker output by the_posts_pagination() */
.rsn-pagination .page-numbers {
    display: inline-block; /* Allows padding to apply correctly for a button-like appearance */
    padding: 6px 12px; /* Comfortable click target sized like a small button */
    border-radius: 4px; /* Slightly rounded corners, consistent with the theme's button styling */
    background-color: var(--rsn-depth); /* Depth — secondary surface, same role as article cards */
    color: var(--rsn-ice); /* Ice — legible page number text against the dark Depth background */
    font-family: var(--rsn-font-dm-mono); /* Label role: DM Mono, since page numbers are UI metadata, not body copy */
    font-weight: var(--rsn-type-label-weight); /* 400 weight, per the Label row of the type spec */
    font-size: 13px; /* Small, compact size appropriate for a pagination control */
    text-decoration: none; /* Remove the default underline from these links */
    transition: background-color 0.2s ease; /* Smoothly animate the hover/current-page background change */
}

/* Highlights whichever page number represents the page currently being viewed */
.rsn-pagination .page-numbers.current {
    background-color: var(--rsn-signal); /* Signal — brand accent marks the "active state" of the current page */
}

/* Hover/focus state on clickable (non-current) page number links */
.rsn-pagination .page-numbers:hover,
.rsn-pagination .page-numbers:focus {
    background-color: var(--rsn-drive); /* Drive — Signal's designated hover/pressed state */
}