/* Shared navigation typography (site top bar, section nav, breadcrumbs, banner categories). */

:root {
  --site-nav-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --site-nav-size: 0.95rem;
  --site-nav-weight: 500;
  --site-nav-color: #333;
  --site-nav-color-hover: #000;
  --site-nav-bar-gap: 1.5rem;
  --site-nav-link-gap: 0.4rem;
}

.site-top-nav,
.site-nav,
.breadcrumbs,
.site-hero-categories {
  font-family: var(--site-nav-font);
  font-size: var(--site-nav-size);
  line-height: 1.4;
}

.site-top-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem var(--site-nav-bar-gap);
  align-items: center;
  justify-content: flex-start;
  padding: 0.65rem 1.25rem;
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem var(--site-nav-bar-gap);
  align-items: center;
}

.site-top-nav a,
.site-nav a,
.breadcrumbs a {
  display: inline-flex;
  align-items: center;
  gap: var(--site-nav-link-gap);
  font-weight: var(--site-nav-weight);
  color: var(--site-nav-color);
  text-decoration: none;
}

.site-top-nav a i {
  font-size: 0.9em;
  opacity: 0.85;
}

.site-top-nav a:hover,
.site-nav a:hover,
.breadcrumbs a:hover,
.site-top-nav a.active,
.site-nav a.active {
  color: var(--site-nav-color-hover);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.breadcrumbs {
  color: var(--site-nav-color);
}

.breadcrumbs .sep {
  color: #999;
  user-select: none;
}

/* Category links on the banner image (light text on dark gradient). */
.site-hero-categories a {
  display: inline;
  font-weight: var(--site-nav-weight);
  color: #fff;
  text-decoration: none;
}

.site-hero-categories a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.site-hero-categories .category-sep {
  color: rgba(255, 255, 255, 0.75);
  user-select: none;
}