/* Site menu (js/app.js): links at the top on desktop, a bottom tab bar on phones.
   Uses the palette variables index.org defines. */
.site-nav { box-sizing: border-box; max-width: 70rem; margin: 0 auto; padding: 1.5rem 2rem 0; }
.site-tabs { display: flex; justify-content: flex-end; gap: .25rem; }
.site-tabs a { display: flex; align-items: center; padding: .45rem .9rem; border-radius: 999px; color: var(--dust); font-size: .95rem; font-weight: 600; text-decoration: none; }
@media (hover: hover) { .site-tabs a:hover { color: var(--sand); background: var(--mesa); } }
.site-tabs a[aria-current] { color: var(--turq); background: var(--mesa); box-shadow: inset 0 0 0 1px var(--ridge); }
.site-tabs svg { display: none; }

/* Phones: the tabs become a bar fixed to the bottom of the screen */
@media (max-width: 56rem) {
  body { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
  .site-nav { padding: 0; }
  .site-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; justify-content: space-around; gap: 0; padding: .4rem 0 calc(.4rem + env(safe-area-inset-bottom)); background: rgba(22, 26, 51, .95); border-top: 1px solid var(--ridge); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .site-tabs a { flex: 1; flex-direction: column; gap: .2rem; padding: .3rem 0; border-radius: 0; font-size: .75rem; font-weight: 500; font-stretch: 85%; white-space: nowrap; }
  .site-tabs a:hover { background: none; }
  .site-tabs a[aria-current] { color: var(--turq); background: none; box-shadow: none; }
  .site-tabs svg { display: block; }
}