/* ─────────────────────────────────────────────────────────────────────────
   The footer bar.

   One bar, pinned to the bottom of the viewport, flush to both edges and to
   the bottom of the screen: a single hairline along its top is the only rule
   it draws. No page overrides its shape.
   ───────────────────────────────────────────────────────────────────────── */
.nav-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  margin: 0;
  padding: 6px max(var(--page-pad-x), env(safe-area-inset-left, 0px))
           calc(6px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  background: var(--bg);
  border: none;
  border-top: 1px solid var(--rule);
}

.nav-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 0.35rem 0.65rem;
  background-color: transparent;
  border: 1px solid transparent;
  color: var(--ink-dim);
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font);
  font-size: clamp(0.72rem, 0.54rem + 0.6vw, 0.8rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color var(--ease), border-color var(--ease),
              background-color var(--ease);
}

.nav-btn:is(:hover, .is-hover) {
  color: var(--fg);
  border-color: var(--rule-strong);
  background-color: var(--wash);
}

/* The current page is named, not boxed. */
.nav-btn.active {
  color: var(--fg);
  border-color: var(--fg);
  background-color: rgba(var(--fg-rgb), 0.12);
}

.nav-btn,
.theme-bulb {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.nav-btn:focus:not(:focus-visible),
.theme-bulb:focus:not(:focus-visible) {
  outline: none;
}

/* Hide navigation buttons for internal routes */
.nav-btn[href="/grammar"] {
  display: none !important;
}

/* ───── Theme bulb ───── */
/* Centred above the cards on the landing page, and parked top-left elsewhere. */
.theme-bulb {
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  line-height: 0;
}

.theme-bulb--hero {
  position: fixed;
  left: 50%;
  top: 26px;
  transform: translateX(-50%);
  z-index: 2000;
  width: 34px;
  height: 48px;
}

.theme-bulb--nav {
  width: 18px;
  height: 26px;
  margin-left: 2px;
}

/* Exactly one of them is ever on screen. */
body:not(.landing) .theme-bulb--hero,
body.landing .theme-bulb--nav {
  display: none;
}

.theme-bulb .bulb {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* All parts are strokes, matching the thin line-art of the landing icons.
   Anything left unstyled falls back to a solid black fill, which is what the
   neck, wires and tip were doing. */
.bulb-glass,
.bulb-neck,
.bulb-base,
.bulb-wires,
.bulb-filament,
.bulb-tip {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: stroke 0.3s ease, fill 0.3s ease;
}

.bulb-glass {
  stroke: rgba(var(--fg-rgb), 0.55);
  stroke-width: 1.5;
}

.bulb-neck {
  stroke: rgba(var(--fg-rgb), 0.4);
  stroke-width: 1.3;
}

.bulb-base {
  stroke: rgba(var(--fg-rgb), 0.45);
  stroke-width: 1.3;
}

.bulb-tip {
  stroke: rgba(var(--fg-rgb), 0.45);
  stroke-width: 1.3;
}

.bulb-wires {
  stroke: rgba(var(--fg-rgb), 0.3);
  stroke-width: 1.1;
}

.bulb-filament {
  stroke: rgba(var(--fg-rgb), 0.42);
  stroke-width: 1.4;
}

.bulb-glow circle {
  fill: var(--fg);
  opacity: 0;
  filter: blur(7px);
  transition: opacity 0.3s ease;
}

/* Lit. The glow is amber rather than the theme colour: tying it to --fg made
   the bulb "light up" in dark ink on paper, which reads as off. A warm
   filament reads as on in either palette. */
/* Lit: warm but desaturated — a filament glow, not a yellow highlighter. The
   envelope takes only a faint wash so the line work still reads. */
.theme-bulb.is-on .bulb-glass {
  fill: rgba(214, 182, 132, 0.12);
  stroke: rgba(190, 160, 116, 0.85);
}

.theme-bulb.is-on .bulb-neck,
.theme-bulb.is-on .bulb-base,
.theme-bulb.is-on .bulb-tip {
  stroke: rgba(178, 150, 110, 0.8);
}

.theme-bulb.is-on .bulb-wires {
  stroke: rgba(198, 168, 120, 0.7);
}

.theme-bulb.is-on .bulb-filament {
  stroke: rgba(226, 188, 122, 0.95);
  stroke-width: 1.7;
}

.theme-bulb.is-on .bulb-glow circle {
  fill: rgba(226, 190, 130, 1);
  opacity: 0.26;
}

.theme-bulb:is(:hover, .is-hover) .bulb-glass,
.theme-bulb:is(:hover, .is-hover) .bulb-filament {
  stroke: var(--fg);
}

.theme-bulb:is(:hover, .is-hover) .bulb-glow circle {
  opacity: 0.22;
}

.theme-bulb.is-on:is(:hover, .is-hover) .bulb-glow circle {
  opacity: 0.75;
}

/* ───── Phone ───── */
/* The whole bar fits a phone at this size — six short labels and the bulb come
   to about 280px — so it stays one centred row rather than a strip that has
   to be scrolled sideways to reach the last two destinations. */
@media (max-width: 620px) {
  .nav-container {
    gap: 0.15rem;
    padding: 5px max(0.5rem, env(safe-area-inset-left, 0px))
             calc(5px + env(safe-area-inset-bottom, 0px));
  }

  .nav-btn {
    padding: 0.3rem 0.4rem;
    letter-spacing: 0.06em;
  }

  .theme-bulb--nav {
    width: 14px;
    height: 20px;
    margin-left: 0.2rem;
  }
}

/* Narrower than any current phone, but the bar must still not overflow. */
@media (max-width: 360px) {
  .nav-btn {
    padding: 0.3rem 0.25rem;
    font-size: 0.64rem;
  }
}

/* Hover effects are meaningless on touch, and worse than meaningless when a
   tap leaves one stuck. Everything hover-driven is gated on a device that
   actually has a pointer. */
@media (hover: none) {
  .nav-btn:is(:hover, .is-hover) {
    background-color: transparent;
    border-color: transparent;
    color: var(--ink-dim);
  }

  .nav-btn.active:is(:hover, .is-hover) {
    color: var(--fg);
    border-color: var(--fg);
    background-color: rgba(var(--fg-rgb), 0.12);
  }
}