/* Shared layout for the four nav icons. They use stroke="currentColor"
   so colors come from the link they sit inside; this file only handles
   sizing and alignment. The link itself uses inline-flex with
   align-items: center, so the icon's geometric center already aligns
   with the line-box center — no transform nudge needed for Inter. */

.nav-icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Inline parent link — accent color, no underline, icon + text in one
   row. Used under page titles to point one level up (post → /feed,
   lesson → course, course → /learn). The :hover state deepens the
   accent so the link reads as interactive without flashing an
   underline. */
.nav-parent-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--accent);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
}
.nav-parent-link:hover { color: var(--accent-deep); }

/* Footer nav row — three rounded cards inside a self-contained
   band with TOP + BOTTOM faint rules. Renders twice per long-form
   page: once after the article body (before comments) and once at
   the very bottom (after comments). Layout: PREV (1fr) | COURSE
   (auto, narrower) | NEXT (1fr). When prev or next is missing,
   the caller leaves an empty grid slot (.nav-footer-slot-empty)
   so the middle course icon stays centered. */
.nav-footer-row {
  display: grid;
  /* minmax(0, 1fr) lets prev/next columns shrink BELOW their content
     min-width — without it, a long title forces the column wider than
     the viewport and the row overflows on mobile. With minmax, the
     button shrinks and its title ellipses at the configured max-width. */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.75rem;
  margin: 2.5rem 0;
  padding: 1.375rem 0;
  border-top:    1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}

.nav-footer-slot-empty { /* placeholder so the grid column stays */ }

/* Common card chrome shared by prev / course / next. Resting border
   is the LIGHTEST line on the page (--rule-soft) so the boxes are
   barely-there at rest. Hover firms up: border picks up the accent,
   background tints faintly, the icon turns accent. Title color is
   intentionally not reactive on hover — the bg + border do the
   work, the title stays ink so it doesn't read as a separate
   color-shifted link. */
.nav-footer-button {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.625rem 1.125rem;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-sans);
  transition: background var(--duration-fast) var(--ease-out);
}
/* Hover treatment matches the rest of the site (.feed-row, .hnitem,
   .courses-show-row, .learn-ref-item): just a quiet bg-soft fill,
   nothing else. No border-color shift, no icon accent — those were
   reading as decoration rather than affordance. */
.nav-footer-button:hover { background: var(--bg-soft); }

/* PREV — chevron pinned to the LEFT, label/title stack to the right,
   stack itself left-aligned. */
.nav-footer-button-prev {
  justify-content: flex-start;
}
.nav-footer-button-prev .nav-icon { color: var(--ink-dim); flex-shrink: 0; }

/* NEXT — mirror of PREV: stack first (right-aligned), chevron pinned
   to the RIGHT. */
.nav-footer-button-next {
  justify-content: flex-end;
  text-align: right;
}
.nav-footer-button-next .nav-icon { color: var(--ink-dim); flex-shrink: 0; }

/* COURSE / FEED — smaller centered card, ICON ONLY (no text label).
   The icon carries the meaning; the surrounding context (this is a
   lesson, this is a feed post) tells the user what "up" means. */
.nav-footer-button-parent {
  justify-content: center;
  gap: 0;
  padding: 0.625rem 1.125rem;
  min-width: 4.5rem;
  color: var(--ink-dim);
}
.nav-footer-button-parent .nav-icon { color: var(--ink-dim); }

.nav-footer-button-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Tiny uppercase row above the title — "PREV" / "NEXT". Uses
   ink-dim (not ink-faint) so the label reads at the same weight
   as other small dim labels around the site. */
.nav-footer-button-label {
  display: block;
  font-size: 0.625rem;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
  color: var(--ink-dim);
  margin-bottom: 0.25rem;
}

/* Text stack (label + title) — flex column so the title can ellipsis
   within the available grid column width. min-width: 0 is the magic
   that lets a flex/grid item shrink below its content's intrinsic
   min-width; without it, a long title would force the parent button
   wider than the column and the whole row would overflow. */
.nav-footer-button-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* The lesson title under the label. Regular weight (per user — bold
   reads too loud in this row), one notch SMALLER than body text so
   the row reads as quiet chrome rather than competing with the
   article above. Color is ink-soft (one step lighter than full ink)
   so it doesn't read with the same visual weight as the page's body
   copy / headings; the row registers as nav chrome, not content.
   Single line, ellipsis on overflow. */
.nav-footer-button-title {
  display: block;
  font-size: 0.875rem;
  font-weight: var(--font-regular);
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  .nav-footer-row { gap: 0.5rem; }
  .nav-footer-button { padding: 0.5rem 0.75rem; gap: 0.5rem; }
  .nav-footer-button-parent { padding: 0.5rem 0.75rem; min-width: 0; }
  .nav-footer-button-title  { font-size: 0.8125rem; }
  .nav-footer-button-label  { font-size: 0.5625rem; }
}