/* ==========================================================================
   Tag / keyword accent — The Sri COM
   --------------------------------------------------------------------------
   The small uppercase keywords in the meta row (EXCLUSIVE, NEW, MOVIES, ANIME…)
   are `.tag` elements. Four different stylesheets set four different blues on
   them (screen.css cyan, magazine.css #76a5ff, newsletter.css, brand-accent.css
   #08519C). This pins them all to the masthead blue in both themes.

   Loaded last, and prefixed with `html[data-theme] body` so it wins over
   `html[data-theme="light"] .tag` in theme-toggle.css.
   ========================================================================== */

.tag,
html[data-theme] body .tag {
  color: #2475e8;
}

/* Tags are links — give them a hover that stays on-brand. */
html[data-theme] body a.tag:hover { color: #5b9cff; }

html[data-theme="light"] body a.tag:hover { color: #14509f; }

/* ==========================================================================
   Tag pills — post cards and the post page only
   --------------------------------------------------------------------------
   Solid brand-blue chip with white text, on:
     .post-tile .tag      the cards (home grid + "More in ..." grid)
     .article-header .tag the meta row inside a post

   Left as plain coloured text everywhere else — the big featured story on the
   home page, the sidebar and the footer — so the chips stay a card/article
   signal rather than becoming wallpaper.

   Prefixed with `html[data-theme] body` to outrank the colour rule above.
   ========================================================================== */

html[data-theme] body .post-tile .tag,
html[data-theme] body .article-header .tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 10px 5px 11px;
  border-radius: 5px;
  background: #2475e8;
  color: #fff;
  line-height: 1;
  transition: background-color .2s ease, transform .2s ease;
}

html[data-theme] body a.post-tile .tag:hover,
html[data-theme] body .post-tile a.tag:hover,
html[data-theme] body .article-header a.tag:hover {
  background: #1b62cb;
  color: #fff;
}

/* The meta row sets a baseline gap; the chip needs a touch more room. */
html[data-theme] body .post-tile .story-meta,
html[data-theme] body .article-header .story-meta {
  gap: 10px;
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] body .post-tile .tag,
  html[data-theme] body .article-header .tag { transition: none; }
}