/* Kuptz blog — supplementary styles.
   Covers only what blog.css does not already style. Body typography comes from
   the existing .editor-input rules. */

/* Tables. Neither blog.css nor kuptz-shared.css contains any table rules. */
.editor-input .blog-table-wrap { overflow-x: auto; margin: 24px 0; -webkit-overflow-scrolling: touch; }
.editor-input .blog-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.editor-input .blog-table th,
.editor-input .blog-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid #e3e5ec; }
.editor-input .blog-table thead th {
  background: var(--snow, #FFF9F5); color: var(--primary, #09124D);
  font-weight: 600; white-space: nowrap;
}
.editor-input .blog-table tbody tr:last-child td { border-bottom: 0; }

/* On-page contents */
.blog-toc {
  margin: 0 0 28px; padding: 18px 22px; background: var(--snow, #FFF9F5);
  border-radius: 16px; border: 1px solid #e3e5ec;
}
.blog-toc-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: .1em;
  margin: 0 0 10px !important; color: #656e79;
}
.blog-toc ul { list-style: none; margin: 0 !important; padding: 0 !important; }
.blog-toc li { margin: 6px 0; }
.blog-toc a { color: #4a5565; text-decoration: none; }
.blog-toc a:hover { color: var(--primary, #09124D); text-decoration: underline; }

/* Published date under the post title */
.blog-post-date { display: block; font-size: .85rem; color: #656e79; margin-bottom: 8px; }

/* End-of-post call to action */
.blog-post-cta {
  margin: 40px 0 0; padding: 32px 28px; text-align: center;
  background: var(--primary, #09124D); color: var(--white, #fff); border-radius: 24px;
}
.blog-post-cta h2 {
  margin: 0 0 10px !important; color: var(--white, #fff) !important;
  font-family: 'Barlow Condensed', 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: .02em; text-transform: uppercase;
}
.blog-post-cta p { margin: 0 auto 22px !important; max-width: 34rem; opacity: .92; }
.blog-post-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Previous / next */
.blog-adjacent-wrap {
  display: grid; gap: 16px; margin-top: 32px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.blog-adjacent {
  display: block; padding: 18px 20px; text-decoration: none;
  background: var(--white, #fff); border-radius: 16px;
  box-shadow: 0 12px 30px rgba(17, 22, 53, .08); transition: transform .2s ease;
}
.blog-adjacent:hover { transform: translateY(-3px); }
.blog-adjacent span {
  display: block; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: #656e79; margin-bottom: 6px;
}
.blog-adjacent strong { color: var(--primary, #09124D); font-size: 1rem; line-height: 1.35; }

.blog-hero-eyebrow {
  display: inline-block; font-family: 'Barlow Condensed', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold, #FFC43A);
}

.blog-card[hidden] { display: none !important; }

/* ---------------------------------------------------------------------
   REPAIR: blog.css references two custom properties that kuptz-shared.css
   never defines, so they silently resolve to nothing on every blog page:
     --off-white  used by  body { background: ... }   -> renders transparent
     --accent     used by  .blog-post-category background, .nav-categories
                           a:hover, .footer-bottom a:hover, .skip-link
   Mapping them onto the real brand tokens restores the intended design
   without editing blog.css itself.
   --------------------------------------------------------------------- */
:root {
  --off-white: var(--snow, #FFF9F5);
  --accent: var(--gold, #FFC43A);
}

@media (max-width: 640px) {
  .blog-post-cta { padding: 24px 18px; }
  .blog-post-cta-actions .btn { width: 100%; }
}