/* nav phone line + starlight · baa.business
   plain, small, centered number in the top bar on every page that uses .site-nav.
   no pill, no border. a soft breathing glow behind it, a few twinkling star
   points, and a faint shimmer along the bar's bottom edge. all low opacity;
   static under prefers-reduced-motion. */

/* ---------- layering ---------- */
.site-nav .container { position: relative; }
.site-nav .container > * { position: relative; z-index: 1; }

/* ---------- the number ---------- */
.site-nav .container > .nav-phone {
  flex: none;
  isolation: isolate;
  color: #8e8ea6;               /* a touch dimmer than the nav links */
  font-family: "Roboto", system-ui, -apple-system, sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  text-shadow: 0 0 10px rgba(192, 132, 252, 0.3);
  padding: 10px 4px;            /* comfy tap target without any visible box */
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s, text-shadow 0.2s;
}
.site-nav .container > .nav-phone:hover,
.site-nav .container > .nav-phone:focus-visible {
  color: #e6e0f5;
  text-shadow: 0 0 12px rgba(192, 132, 252, 0.55);
  outline: none;
}

/* true center of the bar when there is room (wide desktop and phones with a hamburger) */
@media (min-width: 1180px), (max-width: 860px) {
  .site-nav .container > .nav-phone {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
/* in-between desktops: center it in the space between the wordmark and the links */
@media (min-width: 861px) and (max-width: 1179px) {
  .site-nav .container:has(> .nav-phone) > .wordmark { margin-right: 0; }
  .site-nav .container > .nav-phone { margin-inline: auto; }
}

/* desktop spacing: clear air on both sides of the centered number */
@media (min-width: 1180px) {
  .site-nav .container { width: min(1380px, calc(100% - 56px)); }
  .site-nav .nav-links { gap: 8px 22px; }
  .site-nav .nav-links a { letter-spacing: 0.04em; }
}
@media (min-width: 1180px) and (max-width: 1299px) {
  .site-nav .container { width: calc(100% - 40px); }
  .site-nav .nav-links { gap: 8px 14px; }
}

/* phones */
@media (max-width: 860px) {
  .site-nav .container > .nav-phone { font-size: 0.74rem; letter-spacing: 0.06em; }
  /* hamburger menu panel stays fixed under the bar */
  .site-nav .container > .nav-links { position: fixed; }
  /* pages without a hamburger wrap their links to a second row: keep the number on row one */
  .site-nav .container:not(:has(> .nav-toggle)) > .nav-links { position: relative; }
  .site-nav .container:not(:has(> .nav-toggle)) > .nav-phone {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin-inline: auto;
  }
  .site-nav .container:not(:has(> .nav-toggle)):has(> .nav-phone) > .wordmark { margin-right: 0; }
}
@media (max-width: 360px) {
  .site-nav .container { width: calc(100% - 28px); }
  .site-nav .wordmark { font-size: 0.86rem; }
  .site-nav .container > .nav-phone { font-size: 0.7rem; letter-spacing: 0.04em; padding: 10px 2px; }
}

/* ---------- starlight ---------- */
/* soft violet-white glow behind the number that slowly breathes */
.site-nav .container > .nav-phone::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 260px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(236, 226, 255, 0.16), rgba(192, 132, 252, 0.1) 45%, rgba(168, 85, 247, 0) 100%);
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  animation: nav-star-breathe 7s ease-in-out infinite;
}
@media (max-width: 860px) {
  .site-nav .container > .nav-phone::before { width: 170px; height: 52px; }
}

/* tiny star points that twinkle out of step */
.site-nav .container::before,
.site-nav .container::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.site-nav .container::before {
  background:
    radial-gradient(1.4px 1.4px at 8% 22%, rgba(255, 255, 255, 0.9), transparent 100%),
    radial-gradient(1.2px 1.2px at 27% 78%, rgba(226, 210, 255, 0.85), transparent 100%),
    radial-gradient(1.6px 1.6px at 41% 16%, rgba(255, 255, 255, 0.9), transparent 100%),
    radial-gradient(1.2px 1.2px at 62% 84%, rgba(226, 210, 255, 0.8), transparent 100%),
    radial-gradient(1.4px 1.4px at 86% 14%, rgba(255, 255, 255, 0.85), transparent 100%);
  animation: nav-star-twinkle 5.5s ease-in-out infinite alternate;
}
.site-nav .container::after {
  background:
    radial-gradient(1.2px 1.2px at 17% 72%, rgba(255, 255, 255, 0.85), transparent 100%),
    radial-gradient(1.5px 1.5px at 35% 26%, rgba(226, 210, 255, 0.9), transparent 100%),
    radial-gradient(1.2px 1.2px at 57% 78%, rgba(255, 255, 255, 0.8), transparent 100%),
    radial-gradient(1.5px 1.5px at 73% 22%, rgba(226, 210, 255, 0.85), transparent 100%),
    radial-gradient(1.2px 1.2px at 95% 74%, rgba(255, 255, 255, 0.8), transparent 100%);
  animation: nav-star-twinkle 7.5s ease-in-out -3s infinite alternate;
}

/* faint shimmer drifting along the bottom edge of the bar */
.site-nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(192, 132, 252, 0) 0%, rgba(192, 132, 252, 0) 35%, rgba(224, 206, 255, 0.6) 50%, rgba(192, 132, 252, 0) 65%, rgba(192, 132, 252, 0) 100%);
  background-size: 200% 100%;
  background-position: 50% 0;
  opacity: 0.75;
  animation: nav-star-shimmer 14s linear infinite;
}

@keyframes nav-star-breathe {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.92); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}
@keyframes nav-star-twinkle {
  0% { opacity: 0.25; }
  60% { opacity: 0.85; }
  100% { opacity: 0.45; }
}
@keyframes nav-star-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav .container > .nav-phone::before { animation: none; opacity: 0.85; }
  .site-nav .container::before,
  .site-nav .container::after { animation: none; opacity: 0.6; }
  .site-nav::after { animation: none; background-position: 50% 0; }
}