/* Shared primary nav (Atlas · Stories · Ways to own · Cart)
   Import or link this from any page chrome so link color/type stay identical. */

:root {
  --site-nav-color: rgba(242, 239, 232, 0.9);
  --site-nav-hover: #f2efe8;
  --site-nav-size: 0.82rem;
  --site-nav-tracking: 0.06em;
  --site-nav-cart-border: rgba(242, 239, 232, 0.28);
  --site-nav-accent: #2e9cca;
}

.site-chrome__nav,
.topbar__nav,
.ed-topbar__nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem 1.25rem;
  font-size: var(--site-nav-size);
  letter-spacing: var(--site-nav-tracking);
  text-transform: uppercase;
}

.site-chrome__nav a,
.topbar__nav a,
.ed-topbar__nav a {
  color: var(--site-nav-color);
  text-decoration: none;
  transition: color 0.15s ease;
}

.site-chrome__nav a:hover,
.site-chrome__nav a[aria-current="page"],
.topbar__nav a:hover,
.topbar__nav a[aria-current="page"],
.ed-topbar__nav a:hover,
.ed-topbar__nav a[aria-current="page"] {
  color: var(--site-nav-hover);
}

.site-chrome__nav .site-chrome__cart,
.topbar__nav .topbar__cart,
.ed-topbar__nav .ed-topbar__cart {
  border: 1px solid var(--site-nav-cart-border);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  color: var(--site-nav-color);
}

.site-chrome__nav .site-chrome__cart:hover,
.topbar__nav .topbar__cart:hover,
.ed-topbar__nav .ed-topbar__cart:hover {
  border-color: var(--site-nav-accent);
  color: var(--site-nav-accent);
}
