/* ===========================================================================
 * CLAYPUB — public content pages (/page/*, /blog, /api, platform pages).
 *
 * These render from Nova's templates with pubpages.css, which loads AFTER
 * clay.css and uses its own .pubx-* vocabulary — so neither the homepage nor
 * the app-shell work reached them. This layer loads last and applies the same
 * three tiers, plus proper reading typography (these pages carry the long-form
 * SEO articles, so measure and rhythm matter more than decoration).
 *
 *   TIER 1  primary CTA button
 *   TIER 2  the article card, related-page cards
 *   TIER 3  breadcrumb, eyebrow, section headings — type only, no boxes
 *
 * Accent comes from --nv-accent (admin picker). Nothing here changes copy.
 * ======================================================================== */

.pubx {
  --pb-line:   rgba(43,52,69,.12);
  --pb-line-2: rgba(43,52,69,.07);
  --pb-ink:    #2B3445;
  --pb-soft:   0 1px 3px rgba(43,52,69,.05), 0 6px 18px rgba(43,52,69,.05);
  --pb-lift:   0 6px 14px rgba(43,52,69,.09), 0 16px 38px rgba(43,52,69,.07);
  --pb-ease:   cubic-bezier(.22,1,.36,1);
  max-width: 860px;
  margin: 0 auto;
  padding: 26px 20px 64px;
}

/* ===================== TIER 3 — type, no boxes =========================== */

.pubx .pubx-crumb {
  font-size: 12.5px;
  color: var(--nv-muted);
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 18px;
}
.pubx .pubx-crumb a { color: var(--nv-muted); text-decoration: none; }
.pubx .pubx-crumb a:hover { color: var(--nv-accent); }
.pubx .pubx-crumb i { font-size: 9px; opacity: .5; }

.pubx .pubx-eyebrow {
  display: inline-block;
  background: none; border: 0; padding: 0;
  color: var(--nv-accent);
  font-size: 11.5px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 10px;
}
.pubx .pubx-title {
  font-family: 'Fredoka','Nunito',system-ui,sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 4.2vw, 40px);
  line-height: 1.1;
  letter-spacing: -.028em;
  margin: 0 0 12px;
  color: var(--nv-text);
}
.pubx .pubx-lead {
  font-size: 17px; line-height: 1.62;
  color: var(--nv-text-soft);
  margin: 0 0 26px;
  max-width: 62ch;
}
.pubx .pubx-h2 {
  font-family: 'Fredoka','Nunito',system-ui,sans-serif;
  font-weight: 600;
  font-size: 22px; letter-spacing: -.018em;
  margin: 0 0 16px;
}
.pubx .pubx-sec { margin-top: 46px; }

/* ==================== TIER 2 — the article surface ======================= */

.pubx .pubx-card {
  background: var(--nv-surface, #fff);
  border: 1px solid var(--pb-line);
  border-radius: 18px;
  box-shadow: var(--pb-soft);
  padding: 30px 32px !important;
}

/* --------------------------- READING TYPOGRAPHY --------------------------
   These pages hold ~900-word articles. Measure is capped near 68 characters,
   the scale is widened so headings actually separate sections, and vertical
   rhythm keys off the body size. */
.pubx .pubx-prose {
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--nv-text-soft);
  max-width: 68ch;
}
.pubx .pubx-prose > * + * { margin-top: 1.05em; }
.pubx .pubx-prose h2 {
  font-family: 'Fredoka','Nunito',system-ui,sans-serif;
  font-weight: 600;
  font-size: 25px;
  line-height: 1.22;
  letter-spacing: -.02em;
  color: var(--nv-text);
  margin: 2em 0 .55em;
  padding-top: .6em;
  border-top: 1px solid var(--pb-line-2);
}
.pubx .pubx-prose h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.pubx .pubx-prose h3 {
  font-family: 'Fredoka','Nunito',system-ui,sans-serif;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  color: var(--nv-text);
  margin: 1.7em 0 .45em;
}
.pubx .pubx-prose h4 { font-size: 16.5px; font-weight: 800; margin: 1.4em 0 .4em; color: var(--nv-text); }
.pubx .pubx-prose p { margin: 0 0 1.05em; }
.pubx .pubx-prose strong { color: var(--nv-text); font-weight: 800; }

/* links: underline that thickens on hover — readable inside a paragraph */
.pubx .pubx-prose a {
  color: var(--nv-accent);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness .15s, background .15s;
  border-radius: 3px;
}
.pubx .pubx-prose a:hover {
  text-decoration-thickness: 2px;
  background: color-mix(in srgb, var(--nv-accent) 9%, transparent);
}

/* lists: custom markers in the accent so they read as structure */
.pubx .pubx-prose ul, .pubx .pubx-prose ol { margin: 0 0 1.1em; padding-left: 1.35em; }
.pubx .pubx-prose li { margin: .5em 0; padding-left: .2em; }
.pubx .pubx-prose ul > li::marker { color: var(--nv-accent); }
.pubx .pubx-prose ol > li::marker { color: var(--nv-accent); font-weight: 800; }

.pubx .pubx-prose blockquote {
  margin: 1.4em 0;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--nv-accent);
  color: var(--nv-text);
  font-size: 17px;
}
.pubx .pubx-prose code {
  background: color-mix(in srgb, var(--nv-accent) 8%, transparent);
  border: 1px solid var(--pb-line-2);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: .9em;
}
.pubx .pubx-prose table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: 15px; }
.pubx .pubx-prose th, .pubx .pubx-prose td { border-bottom: 1px solid var(--pb-line-2); padding: 9px 10px; text-align: left; }
.pubx .pubx-prose th { font-weight: 800; color: var(--nv-text); }
.pubx .pubx-prose img { max-width: 100%; height: auto; border-radius: 12px; }

/* --------------------------- related pages ------------------------------- */
.pubx .pubx-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 12px; }
.pubx .pubx-related a, .pubx .pubx-rel a {
  display: block;
  background: var(--nv-surface, #fff);
  border: 1px solid var(--pb-line);
  border-radius: 14px;
  box-shadow: var(--pb-soft);
  padding: 15px 16px;
  color: var(--nv-text);
  text-decoration: none;
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.4;
  transition: transform .2s var(--pb-ease), box-shadow .2s var(--pb-ease), border-color .2s;
}
.pubx .pubx-related a:hover, .pubx .pubx-rel a:hover {
  transform: translateY(-3px);
  box-shadow: var(--pb-lift);
  border-color: color-mix(in srgb, var(--nv-accent) 30%, var(--pb-line));
}

/* ==================== TIER 1 — the one primary action ==================== */

.pubx .pubx-cta { margin: 30px 0 0; gap: 12px; }
.pubx .pubx-btn {
  border: 2px solid var(--pb-ink);
  border-radius: 13px;
  box-shadow: 3px 3px 0 var(--pb-ink);
  height: 48px;
  transition: transform .15s var(--pb-ease), box-shadow .15s var(--pb-ease), filter .15s;
}
.pubx .pubx-btn:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--pb-ink); filter: saturate(1.06); }
.pubx .pubx-btn:active { transform: translate(3px,3px); box-shadow: 0 0 0 var(--pb-ink); }
.pubx .pubx-btn.ghost {
  background: var(--nv-surface, #fff);
  border: 1px solid var(--pb-line);
  box-shadow: none;
  color: var(--nv-text);
}
.pubx .pubx-btn.ghost:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--nv-accent) 34%, var(--pb-line));
  box-shadow: 0 6px 16px rgba(43,52,69,.10);
}

/* ============================== DARK ==================================== */
html.nv-dark .pubx {
  --pb-line:   rgba(255,255,255,.13);
  --pb-line-2: rgba(255,255,255,.08);
  --pb-ink:    #0B0F1A;
  --pb-soft:   0 1px 3px rgba(0,0,0,.34), 0 6px 18px rgba(0,0,0,.26);
  --pb-lift:   0 6px 14px rgba(0,0,0,.44), 0 16px 38px rgba(0,0,0,.32);
}
html.nv-dark .pubx .pubx-card,
html.nv-dark .pubx .pubx-related a,
html.nv-dark .pubx .pubx-rel a,
html.nv-dark .pubx .pubx-btn.ghost { background: #222739; }
html.nv-dark .pubx .pubx-btn { border-color: #6B7A99; }

/* ============================ RESPONSIVE ================================= */
@media (max-width: 720px) {
  .pubx { padding: 18px 16px 44px; }
  .pubx .pubx-card { padding: 22px 18px !important; border-radius: 16px; }
  .pubx .pubx-prose { font-size: 16px; line-height: 1.72; }
  .pubx .pubx-prose h2 { font-size: 21px; margin-top: 1.7em; }
  .pubx .pubx-prose h3 { font-size: 17.5px; }
  .pubx .pubx-lead { font-size: 15.5px; }
  .pubx .pubx-sec { margin-top: 34px; }
  .pubx .pubx-btn { box-shadow: 2px 2px 0 var(--pb-ink); }
}

@media (prefers-reduced-motion: reduce) {
  .pubx .pubx-btn, .pubx .pubx-related a, .pubx .pubx-rel a { transition: none !important; }
  .pubx .pubx-btn:hover, .pubx .pubx-related a:hover, .pubx .pubx-rel a:hover { transform: none !important; }
}