/* ═══════════════════════════════════════════════════════════════
   related-reading.css — "Related reading" block + landing "Start here"
   PATH: public/css/related-reading.css
   ROLE: Styles the two internal-link blocks added in the SEO round of
         2026-09-21 (WP-C): the .related-reading aside rendered on guide
         and post pages by partials/related_reading.php, and the compact
         .landing-start-here list under the guide cards on the home page.
   NOTE: kept out of public.css on purpose — WP-B owns that file this
         round. Loaded from the partial's 'styles' section and from
         landing.php's 'styles' section. Colour tokens come from the
         :root block in public.css.
   ═══════════════════════════════════════════════════════════════ */

/* ── Related reading (guides + posts) ──────────────────────────── */

.related-reading {
    margin: 2.5rem 0 0;
    padding: 1.5rem 1.75rem;
    background: var(--light-bg, #f4f6f9);
    border-left: 4px solid var(--teal, #1F4D72);
    border-radius: 4px;
}

.related-reading h2 {
    margin: 0 0 0.85rem;
    font-size: 1.15rem;
    line-height: 1.3;
    color: var(--teal-dark, #143654);
}

.related-reading ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.related-reading li {
    padding: 0.4rem 0;
    border-top: 1px solid var(--border, #e2e8f0);
}

.related-reading li:first-child {
    border-top: 0;
}

.related-reading a {
    color: var(--teal, #1F4D72);
    text-decoration: none;
    font-weight: 500;
    /* 44px minimum touch target on phones without forcing it on desktop rows. */
    display: block;
    min-height: 1.5rem;
}

.related-reading a:hover,
.related-reading a:focus {
    color: var(--accent, #B85A2A);
    text-decoration: underline;
}

/* ── "Start here" links under the landing guide cards ──────────── */

.landing-start-here {
    margin: 1.75rem auto 0;
    max-width: 44rem;
    text-align: center;
}

.landing-start-here-label {
    margin: 0 0 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-light, #8898aa);
}

.landing-start-here-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 1.25rem;
}

.landing-start-here-list a {
    display: inline-block;
    padding: 0.35rem 0;
    color: var(--teal, #1F4D72);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.landing-start-here-list a:hover,
.landing-start-here-list a:focus {
    color: var(--accent, #B85A2A);
}

@media (max-width: 575.98px) {
    .related-reading {
        padding: 1.25rem 1rem;
    }

    /* One link per row on a phone so each stays an easy tap target. */
    .landing-start-here-list {
        flex-direction: column;
        gap: 0;
    }

    .landing-start-here-list a {
        padding: 0.55rem 0;
    }
}