/* ============================================================
   Article navigation chrome — generated posts (public/<slug>.html)
   Breadcrumb back to the notes hub, visible date, prev/next within
   the topic and the per-topic next action. Markup is produced by
   scripts/build-posts.js ({{POST_CRUMB}} / {{POST_DATE}} / {{POST_FOOTER}}).
   ============================================================ */

/* topic colors (same mapping as notes-hub.css; yellow darkened for contrast) */
[data-tcolor="teal"]   { --pn-c: var(--brand-turquoise); }
[data-tcolor="orange"] { --pn-c: var(--brand-orange); }
[data-tcolor="pink"]   { --pn-c: var(--brand-pink); }
[data-tcolor="yellow"] { --pn-c: #b4870c; }
[data-tcolor="ink"]    { --pn-c: #55504a; }

/* ── breadcrumb above the title ──────────────────────────── */
.post-crumb {
  font-family: var(--hand-font);
  font-size: 1.25rem;
  color: #55504a;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem;
  margin-bottom: 0.35rem;
}
.post-crumb a {
  color: inherit;
  text-decoration: none;
}
.post-crumb-hub:hover,
.post-crumb-hub:focus-visible {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-thickness: 1px;
}
.post-crumb-sep { opacity: 0.5; }
.post-crumb-topic {
  font-family: var(--notebook-font);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--pn-c);
  border: 1.5px solid var(--pn-c);
  background: #fff;
  padding: 0.05rem 0.6rem 0.1rem;
  border-radius: 12px 7px 14px 8px / 8px 13px 7px 12px;
  transform: rotate(-0.6deg);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.post-crumb-topic:hover,
.post-crumb-topic:focus-visible {
  transform: rotate(0deg) translateY(-1px);
  box-shadow: 1.5px 2px 0 rgba(0, 0, 0, 0.1);
}

/* ── date under the title ────────────────────────────────── */
.post-date {
  font-family: var(--notebook-font);
  font-size: 0.85rem;
  color: #8a8378;
  margin-top: 0.15rem;
}

/* ── outro: prev/next + topic link + next action ─────────── */
.post-outro {
  margin-top: 2.2rem;
  padding-top: 1.4rem;
  border-top: 2px dashed rgba(0, 0, 0, 0.16);
}

.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}
.post-nav-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.7rem 0.9rem 0.8rem;
  border: 2px solid rgba(0, 0, 0, 0.28);
  border-radius: 16px 9px 18px 10px / 10px 17px 9px 15px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transform: rotate(-0.35deg);
  box-shadow: 1.5px 2px 0 rgba(0, 0, 0, 0.08);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.post-nav-card:hover,
.post-nav-card:focus-visible {
  transform: rotate(0deg) translateY(-2px);
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.13);
}
.post-nav-next { transform: rotate(0.35deg); text-align: right; }
.post-nav-next.post-nav-only { grid-column: 2; }
.post-nav-kicker {
  font-family: var(--hand-font);
  font-size: 1.1rem;
  color: #55504a;
}
.post-nav-title {
  font-family: var(--notebook-font);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.35;
}

.post-nav-all {
  font-family: var(--notebook-font);
  font-size: 0.9rem;
  margin-top: 0.8rem;
}
.post-nav-all a {
  color: inherit;
  opacity: 0.75;
  text-decoration: none;
}
.post-nav-all a:hover,
.post-nav-all a:focus-visible {
  opacity: 1;
  text-decoration: underline;
}

/* the one soft next action, notebook-margin style */
.post-cta {
  margin-top: 1.6rem;
  padding: 0.9rem 1.2rem 1rem;
  border: 2px dashed var(--pn-c);
  border-radius: 18px 10px 20px 11px / 11px 19px 10px 17px;
  background: #fff;
  transform: rotate(-0.3deg);
}
.post-cta-title {
  font-family: var(--hand-font);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--pn-c);
  margin-bottom: 0.2rem;
}
.post-cta-body {
  font-family: var(--notebook-font);
  font-size: 0.95rem;
  line-height: 1.5;
}
.post-cta-action {
  margin-top: 0.5rem;
  font-family: var(--notebook-font);
  font-weight: 700;
  font-size: 0.95rem;
}
.post-cta-action a {
  color: var(--pn-c);
  text-decoration: none;
}
.post-cta-action a:hover,
.post-cta-action a:focus-visible {
  text-decoration: underline;
}
/* Secondary route out of the CTA: same block, quieter than the primary action,
   so the card still has one obvious next step. */
.post-cta-also {
  margin-top: 0.35rem;
  font-family: var(--notebook-font);
  font-size: 0.88rem;
  line-height: 1.5;
  opacity: 0.85;
}
.post-cta-also a {
  color: var(--pn-c);
  text-decoration: underline;
}

@media (max-width: 600px) {
  .post-nav { grid-template-columns: 1fr; }
  .post-nav-next,
  .post-nav-next.post-nav-only { grid-column: auto; text-align: left; transform: rotate(-0.35deg); }
}

@media (prefers-reduced-motion: reduce) {
  .post-crumb-topic,
  .post-nav-card,
  .post-cta {
    transform: none;
    transition: none;
  }
}