/* nav.css — header navigation + footer strip. Markup injected by js/nav.js.
   Inner pages: name-morph logo (Tulsi_morph_horizontal/stacked_loop.gif,
   swapped by breakpoint) centered in the left half, links centered in the
   right half. Home (.nav--bare): links only, centered. */
/* Sits above .home-name's negative margin (home.css) — the name-morph gifs are
   an opaque white canvas, so the header must win the stacking order or its own
   overlapped area would blank out the nav icons. */
.site-header { background: var(--paper); position: relative; z-index: 1; }
.nav {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  padding-block: 20px 16px;
}
/* Home nav sits lower and roomier — the horizontal name-morph gif (desktop)
   bakes in ~31% blank canvas above its lettering, and the stacked one
   (mobile) ~9% (see home.css), so pushing the nav down here just moves it
   into that blank band instead of adding real empty space. */
.nav--bare { display: flex; justify-content: center; padding-top: clamp(32px, 7vh, 76px); }
.nav-logo { justify-self: center; }
.nav-logo img { height: clamp(68px, 8.5vw, 110px); width: auto; display: block; }
.nav-links { display: flex; align-items: center; justify-content: center; gap: clamp(22px, 4vw, 46px); }
.nav--bare .nav-links { gap: clamp(36px, 6vw, 72px); }
.nav-links img { height: 24px; width: auto; display: block; }
.nav--bare .nav-links img { height: clamp(24px, 3.4vw, 36px); }
.nav a { display: inline-block; transition: transform .16s ease; }
.nav a:hover, .nav a:focus-visible { transform: scale(1.04); }

.footer-strip { margin-top: 10vh; }
.footer-strip img { display: block; width: 100%; }

/* Theme toggle — a small hand-drawn sun / moon that lives in the artwork, not a
   UI chip (injected by js/nav.js). No chrome: just the sketch. Fixed top-right on
   inner pages; on home it nestles up in the sky, above the name's right side. The
   moon shows in light mode (tap → dark), the sun in dark; base.css inverts the
   visible icon to white on the dark ground. z-index sits below the detail overlay
   (1000) so the lightbox still covers it. */
.theme-toggle {
  position: fixed; z-index: 900;
  top: clamp(12px, 2vh, 20px); right: clamp(14px, 3vw, 34px);
  padding: 6px; line-height: 0;
}
.theme-toggle .theme-icon { display: block; width: clamp(30px, 4vw, 40px); height: auto; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle[data-mode="dark"] .icon-sun  { display: block; }
.theme-toggle[data-mode="dark"] .icon-moon { display: none; }
.theme-toggle:hover, .theme-toggle:focus-visible { transform: rotate(-6deg) scale(1.08); }
@media (prefers-reduced-motion: no-preference) { .theme-toggle { transition: transform .18s ease; } }

/* Home: sit in the upper-right sky, in the band between the nav and the name. */
body[data-page="home"] .theme-toggle {
  top: clamp(64px, 12vh, 128px); right: clamp(20px, 6vw, 96px);
}

@media (max-width: 640px) {
  .theme-toggle { top: 10px; right: 12px; padding: 5px; }
  body[data-page="home"] .theme-toggle { top: clamp(50px, 9vh, 90px); right: 10px; }
}

@media (max-width: 640px) {
  .nav { grid-template-columns: 1fr; justify-items: center; row-gap: 6px; padding-block: 16px 12px; }
  .nav--bare { padding-top: 24px; }
  .nav-logo img { height: 76px; }
  .nav-links { gap: 26px; }
  .nav--bare .nav-links { gap: 32px; }
  .nav-links img { height: 22px; }
  .nav--bare .nav-links img { height: 25px; }
}