/* ------------------------------------------------------------------ *
 *  Site-wide section nav: Digest, Advice, Roast-o-scope, Tarot, I Ching,
 *  Rec Room as icons.                                                  *
 *  Shared by every section's header (main page, /advice, /recroom,    *
 *  /news). Icons live in /assets/nav-icons.svg. The label shows on    *
 *  hover or keyboard focus and is the link's accessible name.         *
 *                                                                     *
 *  Sections retint it by overriding the --nav-* properties on .sitenav *
 * ------------------------------------------------------------------ */
.sitenav {
  --nav-ink: #17130f;
  --nav-paper: #fffaf0;
  --nav-accent: #f45bab;
  --nav-accent-2: #f58b3a;
  --nav-tape: #f2e7cf;
  --nav-hover: #f58b3a;
  --nav-current: #f45bab;
  --nav-size: 50px;
  --nav-border: 2px solid var(--nav-ink);
  --nav-shadow: 3px 3px 0 var(--nav-ink);
  --nav-radius: 0;

  display: flex;
  gap: 9px;
  align-items: center;
}

.sitenav-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--nav-size);
  height: var(--nav-size);
  border: var(--nav-border);
  border-radius: var(--nav-radius);
  background: var(--nav-paper);
  box-shadow: var(--nav-shadow);
  color: var(--nav-ink);
  text-decoration: none;
}

.sitenav-icon svg {
  display: block;
  width: calc(var(--nav-size) * 0.6);
  height: calc(var(--nav-size) * 0.6);
  overflow: visible;
}

.sitenav-icon:hover,
.sitenav-icon:focus-visible { background: var(--nav-hover); }

.sitenav-icon[aria-current] { background: var(--nav-current); }

/* the icon keeps its own paper fill even when the button behind it is tinted,
   and whichever accent matches the tint steps aside so nothing melts into it */
.sitenav-icon:hover svg,
.sitenav-icon:focus-visible svg,
.sitenav-icon[aria-current] svg { --nav-paper: #fffaf0; }
.sitenav-icon:hover svg,
.sitenav-icon:focus-visible svg { --nav-accent-2: var(--nav-ink); }
.sitenav-icon[aria-current] svg { --nav-accent: #fffaf0; }

.sitenav-icon:focus-visible { outline: 3px solid var(--nav-ink); outline-offset: 2px; }

/* the hovertext: the section's real name */
.sitenav-icon::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 9px);
  left: 50%;
  z-index: 60;
  padding: 6px 9px 5px;
  background: var(--nav-ink);
  color: #fffaf0;
  font: 900 0.66rem/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -4px);
  transition: opacity 0.12s, transform 0.12s;
}

/* the last icon sits at the page edge, so its label hangs left instead */
.sitenav-icon:last-child::after { left: auto; right: 0; transform: translate(0, -4px); }

.sitenav-icon:hover::after,
.sitenav-icon:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

.sitenav-icon:last-child:hover::after,
.sitenav-icon:last-child:focus-visible::after { transform: translate(0, 0); }

/* touch screens have no hover — don't leave a label stuck on after a tap */
@media (hover: none) {
  .sitenav-icon::after { display: none; }
}

@media (max-width: 480px) {
  .sitenav { --nav-size: 40px; gap: 7px; }
}

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