/**
 * Blog cards: front page (hero + search results) and similar posts on the
 * blog detail page.
 *
 * Per the FE build, the whole card is the link (<a class="card">) and the
 * "Read more" affordance inside it is a <span class="link">. The theme's
 * stylesheet still styles cards as plain <div>s, so two things need fixing
 * here until the theme build catches up:
 *
 * 1. The theme colours every `[href]` inside `.container-v3` (and on the
 *    blog body) link-blue. On an <a class="card"> that turns the title and
 *    description blue. Reset the card link to inherit like the <div> did;
 *    the heading and text then keep their black, as in the FE preview
 *    (blog-front-page-hero.html, blog-similar-posts.html). Specificity is kept above
 *    `body.body-blog [href]:not(.btn):not(.btn-atl)`.
 *
 * 2. Mirror the FE `.card:hover .link` rule (underline + the regular link
 *    hover colour, --helmes-blue-03 in this theme) plus a keyboard-focus
 *    equivalent. The "Read more" span keeps its own `.link` colour at rest.
 *
 * Attached by the hero and search blocks themselves (so it applies wherever
 * they are placed, independent of the configured blog landing URL) and by the
 * blog post build for the similar-posts section.
 */
.popular-blogs a.card[href]:not(.btn):not(.btn-atl),
.popular-blogs a.card[href]:not(.btn):not(.btn-atl):hover,
.search-results a.card[href]:not(.btn):not(.btn-atl),
.search-results a.card[href]:not(.btn):not(.btn-atl):hover,
.similar-blogs a.card[href]:not(.btn):not(.btn-atl),
.similar-blogs a.card[href]:not(.btn):not(.btn-atl):hover {
  color: inherit;
  text-decoration: none;
}

.popular-blogs .card:hover .link,
.popular-blogs .card:focus-visible .link,
.search-results .card:hover .link,
.search-results .card:focus-visible .link,
.similar-blogs .card:hover .link,
.similar-blogs .card:focus-visible .link {
  text-decoration-line: underline;
  color: var(--helmes-blue-03);
}

.popular-blogs a.card:focus-visible,
.search-results a.card:focus-visible,
.similar-blogs a.card:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 1rem;
}