/*
 * ARC — Blog index + blog archives (NXDS-109, NXDS-110)
 *
 * Brings the posts page (/blog/, body.blog) and the post archives (category,
 * tag, date, author — they render through the same parent index template)
 * onto the ARC design system (ARC-DESIGN-SYSTEM.md): DM Serif Display
 * headings, Plus Jakarta Sans body, ARC blue/neutral palette. Single posts
 * live in arc-blog-single.css; search results in arc-dynamic-templates.css.
 *
 * Rendered by the parent theme (assets/ultra/partials/index.php + blog/loop.php
 * + blog/cards/card-*.php). Header and footer are Elementor templates outside
 * .rh-page-container, so nothing here targets them.
 *
 * Enqueued from functions.php at PHP_INT_MAX with the canonical Google Fonts URL.
 * !important only where the parent theme / Customizer inline CSS still wins
 * (font-family, heading size/weight/line-height, wrapper colors).
 */

:is(body.blog, body.category, body.tag, body.date, body.author) {
    --brand-blue: #263D8A;
    --brand-blue-dark: #1B2A66;
    --brand-blue-ink: #0F1A44;
    --brand-yellow: #F2DB0D;
    --text: #0B1220;
    --text-muted: #52607A;
    --on-blue: #FFFFFF;
    --surface: #FFFFFF;
    --surface-tint: #F6F8FC;
    --divider: #E4E8F1;
    --divider-strong: #C9D0DE;
    --font-display: 'DM Serif Display', Georgia, serif;
    --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --radius-sm: 6px;
    --radius-md: 12px;
    --shadow-card: 0 1px 2px rgba(15, 26, 68, 0.04), 0 8px 24px rgba(15, 26, 68, 0.06);
    --shadow-card-hover: 0 4px 8px rgba(15, 26, 68, 0.06), 0 16px 40px rgba(15, 26, 68, 0.10);
    --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
    --dur: 220ms;

    /* Parent-theme color variables, re-pointed for the content area only. */
}

:is(body.blog, body.category, body.tag, body.date, body.author) .rh-page-container {
    --rh-global-color-primary: var(--brand-blue);
    --rh-global-color-primary-dark: var(--brand-blue-dark);
    --rh-global-color-text: var(--text);
    --rh-global-color-headings: var(--text);
    --rh-global-color-link: var(--text);
    --rh-global-color-link-hover: var(--brand-blue);
    --rh-global-color-headings-hover: var(--brand-blue);

    background: var(--surface) !important;
    color: var(--text) !important;
    font-family: var(--font-body) !important;
}

/* ---------- Body text ---------- */
:is(body.blog, body.category, body.tag, body.date, body.author) .rh-page-container :is(p, li, span, a, div, small, label, button):not(.fa):not([class*="fa-"]):not(:is(h1, h2, h3, h4, h5, h6) *) {
    font-family: var(--font-body) !important;
}

:is(body.blog, body.category, body.tag, body.date, body.author) .rh-page-container p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-muted);
}

/* ---------- Headings: DM Serif Display ---------- */
:is(body.blog, body.category, body.tag, body.date, body.author) .rh-page-container :is(h1, h2, h3, h4, h5, h6),
:is(body.blog, body.category, body.tag, body.date, body.author) .rh-page-container :is(h1, h2, h3, h4, h5, h6) a {
    font-family: var(--font-display) !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

:is(body.blog, body.category, body.tag, body.date, body.author) .rh-page-container h1.rh-page-title {
    font-size: clamp(32px, 4.2vw, 52px) !important;
    line-height: 1.08 !important;
    color: var(--text) !important;
}

:is(body.blog, body.category, body.tag, body.date, body.author) .rh-page-container p.rh-page-description {
    font-size: clamp(17px, 1.4vw, 19px);
    line-height: 1.6;
    color: var(--text-muted);
}

/* ---------- Cards ---------- */
:is(body.blog, body.category, body.tag, body.date, body.author) .rh-page-container :is(.blog-grid-card-one, .blog-grid-card-two, .blog-grid-card-three) {
    background: var(--surface) !important;
    border: 1px solid var(--divider);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

:is(body.blog, body.category, body.tag, body.date, body.author) .rh-page-container :is(.blog-grid-card-one, .blog-grid-card-two, .blog-grid-card-three):hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}

:is(body.blog, body.category, body.tag, body.date, body.author) .rh-page-container .blog-grid-card-three .entry-thumbnail-wrapper {
    border-radius: 0;
}

/* NXDS-125: posts without a featured image show no image (no placeholder).
   The child post-format partials print nothing, so the image area is empty:
   hide it, and let the text of the side-by-side card use the full width. */
:is(body.blog, body.category, body.tag, body.date, body.author) .rh-page-container .entry-thumbnail-wrapper:not(:has(img, iframe, video)) {
    display: none !important;
}

:is(body.blog, body.category, body.tag, body.date, body.author) .rh-page-container .blog-grid-card-three:not(:has(.entry-thumbnail-wrapper :is(img, iframe, video))) .entry-summary {
    width: 100% !important;
}

/* ---------- Post titles ---------- */
:is(body.blog, body.category, body.tag, body.date, body.author) .rh-page-container h2.entry-title {
    font-size: clamp(22px, 2vw, 26px) !important;
    line-height: 1.2 !important;
    color: var(--text) !important;
    word-spacing: 0;
}

:is(body.blog, body.category, body.tag, body.date, body.author) .rh-page-container .blog-grid-card-three .entry-title {
    white-space: normal;
    overflow: visible;
}

:is(body.blog, body.category, body.tag, body.date, body.author) .rh-page-container h2.entry-title a {
    color: var(--text) !important;
    text-decoration: none;
    transition: color var(--dur) var(--ease);
}

:is(body.blog, body.category, body.tag, body.date, body.author) .rh-page-container h2.entry-title a:hover {
    color: var(--brand-blue) !important;
}

/* ---------- Category tag (eyebrow style) ---------- */
:is(body.blog, body.category, body.tag, body.date, body.author) .rh-page-container .entry-categories,
:is(body.blog, body.category, body.tag, body.date, body.author) .rh-page-container .entry-categories a {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand-blue) !important;
    text-decoration: none;
    transition: color var(--dur) var(--ease);
}

:is(body.blog, body.category, body.tag, body.date, body.author) .rh-page-container .entry-categories a:hover {
    color: var(--brand-blue-dark) !important;
    text-decoration: underline;
}

/* ---------- Excerpt / meta ---------- */
:is(body.blog, body.category, body.tag, body.date, body.author) .rh-page-container .entry-summary > p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-muted);
}

:is(body.blog, body.category, body.tag, body.date, body.author) .rh-page-container .entry-meta {
    color: var(--text-muted);
}

/* ---------- Pagination ---------- */
:is(body.blog, body.category, body.tag, body.date, body.author) .rh-page-container .rh_pagination__btn {
    font-family: var(--font-body) !important;
    font-size: 14px;
    font-weight: 600;
    color: var(--text) !important;
    background: var(--surface) !important;
    border: 1px solid var(--divider-strong);
    border-radius: var(--radius-sm);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

:is(body.blog, body.category, body.tag, body.date, body.author) .rh-page-container .rh_pagination__btn:hover,
:is(body.blog, body.category, body.tag, body.date, body.author) .rh-page-container .rh_pagination__btn.current {
    background: var(--brand-blue) !important;
    border-color: var(--brand-blue);
    color: var(--on-blue) !important;
}

/* ---------- Focus (design system: yellow outline, keyboard only) ---------- */
:is(body.blog, body.category, body.tag, body.date, body.author) .rh-page-container :is(a, button):focus-visible {
    outline: 2px solid var(--brand-yellow);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    :is(body.blog, body.category, body.tag, body.date, body.author) .rh-page-container * {
        transition: none !important;
        transform: none !important;
    }
}