/*
 * Bold, editorial header — deliberately a step up from Material's default
 * pale/flat header+tabs, leaning on the red-and-black color blocking common
 * to Japanese portals and print mastheads (NHK, Yahoo! JAPAN, festival
 * banners) rather than a muted SaaS-style nav bar. Two tiers, top to
 * bottom: the white logo bar, and a solid ink tab bar. Both use the fixed
 * --pod-navbar-bg, --pod-navbar-fg and --pod-accent-fixed tokens
 * (tokens.css) so this look stays constant across light/dark mode.
 */

/* Tier 1 — logo bar. Kept light (unlike the tabs tier below) so the
   masthead itself still reads as calm editorial paper; only the wordmark
   and icon get the bolder treatment. */
.md-header__topic {
  font-family: var(--pod-font-serif);
  font-weight: 700;
  font-size: 1.05em;
  letter-spacing: 0.04em;
}

.md-logo.md-logo {
  color: var(--pod-accent-fixed);
}

/* Tier 2 — nav tabs: solid ink bar instead of the stock pale one, with a
   vermillion underline that sweeps in on hover/focus. */
.md-tabs {
  background-color: var(--pod-navbar-bg);
  color: var(--pod-navbar-fg);
}

.md-tabs__link {
  position: relative;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.md-tabs__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -0.2rem;
  height: 2px;
  background: var(--pod-accent-fixed);
  transition: right 0.25s ease;
}

.md-tabs__link:hover::after,
.md-tabs__link:focus::after {
  right: 0;
}

@media (prefers-reduced-motion: reduce) {
  .md-tabs__link::after {
    transition: none;
  }
}