/* ==========================================================================
   Vara SaaS — Single Blog (Stitch)
   Scoped to is_singular(post). No menu/footer changes.
   Maps Tailwind stitch to theme vars + Inter / JetBrains Mono.
   TOC: left sidebar when has-sidebar (320px col left), else below featured image.
   ========================================================================== */

/* Canvas: matches reference max-w 1280, gutter 32, py 80, bg subtle */
.vara-single {
  padding: 80px 0;
  background: var(--vara-bg, #f8fafc);
}

.vara-single__container {
  width: min(var(--vara-container-max, 1280px), calc(100% - var(--vara-gutter, 32px) * 2));
  margin: 0 auto;
}

/* ── Header (centered 3xl) ── */
.vara-single__header {
  max-width: 768px;
  margin: 0 auto 64px;
  text-align: center;
}

.vara-single__pills {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.vara-single__pills .vara-chip {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12px;
}

.vara-single__title {
  font-family: var(--vara-font-family, Inter, sans-serif);
  font-size: 42px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--vara-text-heading, #0f172a);
  margin: 0 0 24px 0;
}

@media (min-width: 768px) {
  .vara-single__title { font-size: 64px; letter-spacing: -0.04em; }
}

.vara-single__excerpt {
  font-family: var(--vara-font-family, Inter, sans-serif);
  font-size: 18px;
  line-height: 1.6;
  color: var(--vara-text-secondary, #475569);
  max-width: 672px;
  margin: 0 auto 32px;
}

/* Author + meta row */
.vara-single__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--vara-text-secondary, #64748b);
  font-size: 16px;
  flex-wrap: wrap;
}

.vara-single__author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vara-single__avatar {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  overflow: hidden;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  background: var(--vara-surface-container, #f1f5f9);
  flex-shrink: 0;
}

.vara-single__avatar img { width: 100%; height: 100%; object-fit: cover; }

.vara-single__author-name {
  font-weight: 600;
  color: var(--vara-text, #0f172a);
  line-height: 1.2;
  text-align: left;
}

.vara-single__author-role {
  font-size: 14px;
  color: var(--vara-text-secondary, #475569);
  text-align: left;
}

.vara-single__sep {
  width: 1px;
  height: 32px;
  background: var(--vara-border, #e2e8f0);
}

.vara-single__date {
  display: flex;
  flex-direction: column;
  text-align: left;
  font-size: 14px;
  line-height: 1.4;
  color: var(--vara-text-secondary);
}

/* ── Featured image ── */
.vara-single__featured {
  width: 100%;
  height: 256px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--vara-border, #e2e8f0);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  position: relative;
  margin-bottom: 64px;
  background: var(--vara-surface-container, #f1f5f9);
}

@media (min-width: 768px) {
  .vara-single__featured { height: 384px; }
}

.vara-single__featured img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s;
}

.vara-single__featured--has-hover:hover img { transform: scale(1.03); }

.vara-single__featured::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15,23,42,0.12), transparent);
  pointer-events: none;
}

/* ── TOC below featured (when no sidebar) ── */
.vara-single__toc--inline {
  max-width: 768px;
  margin: 0 auto 48px;
  background: var(--vara-surface-container-lowest, #fff);
  border: 1px solid var(--vara-border, #e2e8f0);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.vara-single__toc--inline .vara-toc__title {
  border-bottom: 1px solid var(--vara-border-light, #f1f5f9);
  padding-bottom: 8px;
  margin-bottom: 16px;
}

/* ── Grid: sidebar under article on responsive ── */
.vara-single__grid {
  display: grid;
  grid-template-columns: 1fr !important;
  gap: 48px;
  position: relative;
}

.vara-single__grid.has-sidebar {
  gap: 32px;
}

/* Mobile-first: content first, sidebar second */
.vara-single__grid .vara-single__content { order: 1; }
.vara-single__grid .vara-single__sidebar { order: 2; }

@media (min-width: 1024px) {
  /* Sidebar-left: TOC/sidebar on left (320px | content) — keep content readable, not squeezed */
  .vara-single__grid.has-sidebar.vara-single__grid--left {
    grid-template-columns: 320px minmax(0, 1fr) !important;
  }
  .vara-single__grid.has-sidebar.vara-single__grid--left.vara-saas-layout {
    grid-template-columns: 320px minmax(0, 1fr) !important;
  }
  .vara-single__grid.has-sidebar.vara-single__grid--left .vara-single__sidebar { order: 1; }
  .vara-single__grid.has-sidebar.vara-single__grid--left .vara-single__content { order: 2; max-width: none !important; width: 100% !important; }

  /* Sidebar-right: content on left, sidebar on right (1fr | 320px) */
  .vara-single__grid.has-sidebar.vara-single__grid--right {
    grid-template-columns: minmax(0, 1fr) 320px !important;
  }
  .vara-single__grid.has-sidebar.vara-single__grid--right.vara-saas-layout {
    grid-template-columns: minmax(0, 1fr) 320px !important;
  }
  .vara-single__grid.has-sidebar.vara-single__grid--right .vara-single__sidebar { order: 2; }
  .vara-single__grid.has-sidebar.vara-single__grid--right .vara-single__content { order: 1; max-width: none !important; width: 100% !important; }

  /* Fallback for has-sidebar without explicit left/right (default right) */
  .vara-single__grid.has-sidebar:not(.vara-single__grid--left):not(.vara-single__grid--right) {
    grid-template-columns: minmax(0, 1fr) 320px !important;
  }
  .vara-single__grid.has-sidebar:not(.vara-single__grid--left):not(.vara-single__grid--right) .vara-single__content { max-width: none !important; width: 100% !important; }
}

/* Neutralize theme's global .vara-saas-layout.has-sidebar two-col on mobile that squeezes */
@media (max-width: 1023px) {
  .vara-single__grid.has-sidebar,
  .vara-single__grid.has-sidebar.vara-saas-layout,
  .vara-single__grid.has-sidebar.vara-single__grid--left,
  .vara-single__grid.has-sidebar.vara-single__grid--right {
    grid-template-columns: 1fr !important;
  }
}

.vara-single__sidebar {
  display: none;
  min-width: 0;
}

.vara-single__grid.has-sidebar .vara-single__sidebar {
  display: block;
  position: relative;
  min-width: 0;
}

@media (max-width: 1023px) {
  .vara-single__grid.has-sidebar .vara-single__sidebar {
    position: static;
  }
  .vara-toc { position: static; top: auto; }
}

/* Ensure content never squeezes */
.vara-single__content { min-width: 0; }

/* ── Sidebar widgets — stylized (single post) ── */
.vara-single__sidebar .widget {
  background: var(--vara-surface-container-lowest, #fff);
  border: 1px solid var(--vara-card-border, rgba(0,0,0,0.06));
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
  margin-bottom: 24px;
}

.vara-single__sidebar .widget:last-child { margin-bottom: 0; }

body.va-dark .vara-single__sidebar .widget {
  background: var(--vara-surface-container, #171f33);
  border-color: rgba(255,255,255,0.08);
}

.vara-single__sidebar .widget-title,
.vara-single__sidebar .widget h2,
.vara-single__sidebar .widget h3 {
  font-family: var(--vara-font-family, Inter, sans-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--vara-text-heading, #0f172a);
  margin: 0 0 14px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--vara-border, #e2e8f0);
}

body.va-dark .vara-single__sidebar .widget-title { color: #dae2fd; border-bottom-color: rgba(255,255,255,0.1); }

.vara-single__sidebar .widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vara-single__sidebar .widget li {
  padding: 8px 0;
  border-bottom: 1px solid var(--vara-border-light, #f1f5f9);
  font-size: 14px;
  line-height: 1.5;
}

.vara-single__sidebar .widget li:last-child { border-bottom: none; }

.vara-single__sidebar .widget li a {
  color: var(--vara-text-secondary);
  text-decoration: none;
  transition: color 0.15s;
}

.vara-single__sidebar .widget li a:hover { color: var(--vara-primary); text-decoration: underline; text-decoration-color: rgba(124,58,237,0.3); }

.vara-single__sidebar .widget select,
.vara-single__sidebar .widget input[type="text"],
.vara-single__sidebar .widget input[type="search"] {
  width: 100%;
  border: 1px solid var(--vara-border, #e2e8f0);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  background: var(--vara-surface-container-lowest, #fff);
  color: var(--vara-text);
}

/* Sticky TOC — offset for admin bar (desktop 32px, mobile 46px, or WP var) */
.vara-toc {
  position: sticky;
  top: 128px;
  background: var(--vara-surface-container-lowest, #fff);
  border: 1px solid var(--vara-border, #e2e8f0);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

body.admin-bar .vara-toc { top: calc(128px + 32px); }
@media screen and (max-width: 782px) {
  body.admin-bar .vara-toc { top: calc(128px + 46px); }
}
@supports (top: var(--wp-admin--admin-bar--height)) {
  body.admin-bar .vara-toc { top: calc(128px + var(--wp-admin--admin-bar--height, 32px)); }
}

.vara-toc__title {
  font-family: var(--vara-font-family, Inter, sans-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--vara-text-heading, #0f172a);
  margin: 0 0 16px 0;
}

.vara-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vara-toc__list li { margin: 0; }

.vara-toc__link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--vara-text-secondary, #475569);
  text-decoration: none;
  transition: color 0.15s;
}

.vara-toc__link:hover { color: var(--vara-primary, #7c3aed); }

.vara-toc__link.is-active {
  color: var(--vara-primary, #7c3aed);
  font-weight: 600;
}

.vara-toc__dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--vara-border, #cbd5e1);
  flex-shrink: 0;
}

.vara-toc__link.is-active .vara-toc__dot {
  width: 8px;
  height: 8px;
  background: var(--vara-primary, #7c3aed);
}

.vara-toc__level-3 { padding-left: 16px; font-size: 13px; }

/* Related reading inside sidebar */
.vara-related {
  margin-top: 32px;
  background: var(--vara-surface-container-low, #f8fafc);
  border: 1px solid var(--vara-border, #e2e8f0);
  border-radius: 12px;
  padding: 24px;
}

.vara-related__label {
  font-family: var(--vara-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vara-text-muted, #64748b);
  margin: 0 0 24px 0;
}

.vara-related__item {
  display: block;
  text-decoration: none;
  color: inherit;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--vara-border-light, #f1f5f9);
}

.vara-related__item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.vara-related__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--vara-text-heading, #0f172a);
  margin: 0 0 8px 0;
  transition: color 0.15s;
}

.vara-related__item:hover .vara-related__title { color: var(--vara-primary, #7c3aed); }

.vara-related__meta {
  font-family: var(--vara-font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  color: var(--vara-text-muted, #64748b);
  display: flex;
  align-items: center;
  gap: 8px;
}

.vara-related__dot {
  width: 4px;
  height: 4px;
  border-radius: 9999px;
  background: var(--vara-border, #cbd5e1);
}

/* ── Article content (prose) ── */
.vara-single__content {
  max-width: 768px;
  min-width: 0;
}

.vara-single__grid.has-sidebar .vara-single__content {
  max-width: none;
}

.vara-single__article { min-width: 0; }

.vara-single__article h2 {
  font-family: var(--vara-font-family, Inter, sans-serif);
  font-size: 32px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--vara-text-heading, #0f172a);
  margin: 48px 0 24px 0;
  scroll-margin-top: 120px;
}

body.admin-bar .vara-single__article h2 { scroll-margin-top: calc(120px + 32px); }
@media screen and (max-width: 782px) {
  body.admin-bar .vara-single__article h2 { scroll-margin-top: calc(120px + 46px); }
}
@supports (top: var(--wp-admin--admin-bar--height)) {
  body.admin-bar .vara-single__article h2 { scroll-margin-top: calc(120px + var(--wp-admin--admin-bar--height, 32px)); }
}

.vara-single__article h2:first-child { margin-top: 0; }

.vara-single__article h3 {
  font-size: 24px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--vara-text-heading);
  margin: 32px 0 16px 0;
  scroll-margin-top: 120px;
}

body.admin-bar .vara-single__article h3 { scroll-margin-top: calc(120px + 32px); }
@media screen and (max-width: 782px) {
  body.admin-bar .vara-single__article h3 { scroll-margin-top: calc(120px + 46px); }
}
@supports (top: var(--wp-admin--admin-bar--height)) {
  body.admin-bar .vara-single__article h3 { scroll-margin-top: calc(120px + var(--wp-admin--admin-bar--height, 32px)); }
}

.vara-single__article p {
  font-size: 18px;
  line-height: 1.8;
  color: var(--vara-text-secondary, #334155);
  margin: 0 0 24px 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.vara-single__article p a,
.vara-single__article li a {
  overflow-wrap: anywhere;
  word-break: break-all;
}

.vara-single__article blockquote {
  border-left: 4px solid var(--vara-primary, #7c3aed);
  padding: 12px 24px;
  margin: 40px 0;
  background: var(--vara-surface-container-low, #f8fafc);
  border-radius: 0 8px 8px 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.vara-single__article blockquote p {
  font-size: 24px;
  line-height: 1.4;
  font-weight: 600;
  font-style: italic;
  color: var(--vara-text-heading, #0f172a);
  margin: 0;
}

/* Code block — dark card that works in both themes + responsive */
.vara-single__article pre,
.vara-single__article .wp-block-code,
.vara-single__article .wp-block-preformatted {
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 12px;
  padding: 24px;
  margin: 40px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #1e293b;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  font-family: var(--vara-font-mono, 'JetBrains Mono', monospace);
  font-size: 14px;
  line-height: 1.6;
  white-space: pre;
  word-wrap: normal;
  max-width: 100%;
}

.vara-single__article pre code,
.vara-single__article .wp-block-code code {
  background: transparent;
  padding: 0;
  border: none;
  color: inherit;
  font-size: inherit;
  white-space: inherit;
}

body.va-dark .vara-single__article pre,
body.va-dark .vara-single__article .wp-block-code {
  background: #111b2f;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.vara-single__article code:not(pre code),
.vara-single__article kbd,
.vara-single__article tt {
  background: rgba(124, 58, 237, 0.08);
  color: var(--vara-primary, #7c3aed);
  border: 1px solid rgba(124, 58, 237, 0.14);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--vara-font-mono, 'JetBrains Mono', monospace);
  font-size: 0.9em;
  font-weight: 500;
  overflow-wrap: anywhere;
  word-break: break-word;
}

body.va-dark .vara-single__article code:not(pre code),
body.va-dark .vara-single__article kbd {
  background: rgba(210, 187, 255, 0.14);
  color: #d2bbff;
  border-color: rgba(210, 187, 255, 0.22);
}

.vara-single__article kbd {
  background: var(--vara-surface-container, #f1f5f9);
  color: var(--vara-text, #0f172a);
  border-color: var(--vara-border, #e2e8f0);
  border-bottom-width: 2px;
  padding: 2px 6px;
}

@media (max-width: 640px) {
  .vara-single__article pre {
    padding: 16px;
    font-size: 13px;
    border-radius: 10px;
  }
}

/* Callout (lightbulb) */
.vara-callout {
  display: flex;
  gap: 16px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  padding: 24px;
  margin: 32px 0;
}

body.va-dark .vara-callout {
  background: rgba(59,130,246,0.08);
  border-color: rgba(59,130,246,0.25);
}

.vara-callout__icon { color: #2563eb; flex-shrink: 0; margin-top: 4px; }

.vara-callout__title {
  font-size: 18px;
  font-weight: 600;
  color: #1e3a8a;
  margin: 0 0 8px 0;
}

body.va-dark .vara-callout__title { color: #93c5fd; }

.vara-callout__text {
  font-size: 16px;
  line-height: 1.6;
  color: #1e40af;
  margin: 0;
}

body.va-dark .vara-callout__text { color: #bfdbfe; }

/* ── Footer meta + tags ── */
.vara-single__footer {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--vara-border, #e2e8f0);
}

/* ── Dark mode ── */
body.va-dark .vara-single {
  background: var(--vara-bg, #0b1326);
}

body.va-dark .vara-toc,
body.va-dark .vara-single__toc--inline {
  background: var(--vara-surface-container-low, #131b2e);
  border-color: var(--vara-border, #4a4455);
}

body.va-dark .vara-related {
  background: var(--vara-surface-container, #171f33);
  border-color: var(--vara-border, #4a4455);
}

body.va-dark .vara-single__featured {
  border-color: var(--vara-border, #4a4455);
}

body.va-dark .vara-single__article p { color: var(--vara-text-secondary, #ccc3d8); }

/* Video embeds — responsive, no overflow (youtube, wp-embed, classic iframe) */
.vara-single__article iframe,
.entry-content iframe,
.vara-saas-page-content iframe,
.wp-block-embed iframe {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  display: block;
  border: 0;
  border-radius: var(--vara-radius-lg, 12px);
}

.vara-single__article .wp-block-embed,
.entry-content .wp-block-embed,
.vara-saas-page-content .wp-block-embed {
  max-width: 100%;
  margin: 32px 0;
}

.vara-single__article .wp-block-embed__wrapper,
.entry-content .wp-block-embed__wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.vara-single__article .wp-embed-aspect-16-9 .wp-block-embed__wrapper,
.vara-single__article .wp-embed-aspect-4-3 .wp-block-embed__wrapper,
.vara-single__article .wp-embed-aspect-21-9 .wp-block-embed__wrapper,
.vara-single__article .wp-has-aspect-ratio .wp-block-embed__wrapper {
  aspect-ratio: 16 / 9;
  padding-top: 0 !important;
  height: auto;
}

.vara-single__article .wp-embed-aspect-16-9 .wp-block-embed__wrapper iframe,
.vara-single__article .wp-has-aspect-ratio .wp-block-embed__wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

/* ── Tags as pills (theme colors) ── */
.vara-saas-tags-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.vara-saas-tags-links .fa-tags { color: var(--vara-text-muted, #64748b); font-size: 14px; }

.vara-tag-overflow-item {
  display: inline-flex;
}

.vara-tag-overflow-item a,
.vara-saas-tags-links a,
a.vara-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 9999px;
  font-family: var(--vara-font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  background: rgba(124, 58, 237, 0.08);
  color: var(--vara-primary, #7c3aed) !important;
  border: 1px solid rgba(124, 58, 237, 0.18);
  text-decoration: none !important;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

.vara-tag-overflow-item a:hover,
.vara-saas-tags-links a:hover,
a.vara-tag:hover {
  background: rgba(124, 58, 237, 0.14);
  border-color: rgba(124, 58, 237, 0.28);
  transform: translateY(-1px);
  text-decoration: none !important;
}

body.va-dark .vara-tag-overflow-item a,
body.va-dark .vara-saas-tags-links a {
  background: rgba(210, 187, 255, 0.12);
  color: #d2bbff !important;
  border-color: rgba(210, 187, 255, 0.22);
}

.vara-tag-overflow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 28px;
  padding: 0 10px;
  border-radius: 9999px;
  font-family: var(--vara-font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  font-weight: 600;
  background: var(--vara-surface-container, #f1f5f9);
  border: 1px solid var(--vara-border, #e2e8f0);
  color: var(--vara-text-secondary, #475569);
  cursor: pointer;
  transition: background 0.15s;
}

.vara-tag-overflow-btn:hover { background: var(--vara-surface-container-high, #e2e8f0); }
.vara-tag-overflow-btn[aria-expanded="true"] { background: var(--vara-primary, #7c3aed); color: #fff; border-color: var(--vara-primary); }

/* Category + tag overflow — hidden items (JS toggles) */
.vara-overflow-wrap { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vara-category-pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.vara-tag-overflow-item.is-hidden,
.vara-category-overflow-item.is-hidden { display: none !important; }
.vara-overflow-btn { display: inline-flex; }
.vara-category-overflow-btn { min-width: 32px; height: 28px; }

/* ── Article links — nice underline theme color ── */
.vara-single__article a:not(.wp-block-button__link):not(.vara-btn):not(.vara-chip):not(.vara-tag) {
  color: var(--vara-link, #7c3aed);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(124, 58, 237, 0.28);
  text-decoration-skip-ink: auto;
  transition: text-decoration-color 0.15s, color 0.15s;
}

.vara-single__article a:not(.wp-block-button__link):not(.vara-btn):not(.vara-chip):not(.vara-tag):hover {
  color: var(--vara-primary, #7c3aed);
  text-decoration-color: var(--vara-primary, #7c3aed);
}

.vara-single__article a:not(.wp-block-button__link):focus-visible {
  outline: 2px solid var(--vara-primary, #7c3aed);
  outline-offset: 2px;
  border-radius: 2px;
  text-decoration: none;
}

body.va-dark .vara-single__article a:not(.wp-block-button__link) {
  color: #d2bbff;
  text-decoration-color: rgba(210, 187, 255, 0.35);
}

/* Page content links — same theme underline (fixes pages where single styles didn't apply) */
.vara-saas-page-content a:not(.wp-block-button__link):not(.vara-btn):not(.vara-chip):not(.vara-tag),
.entry-content a:not(.wp-block-button__link):not(.vara-btn):not(.vara-chip):not(.vara-tag),
.vara-saas-entry-content a:not(.wp-block-button__link):not(.vara-btn):not(.vara-chip):not(.vara-tag) {
  color: var(--vara-link, #7c3aed);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(124, 58, 237, 0.28);
  text-decoration-skip-ink: auto;
  transition: text-decoration-color 0.15s, color 0.15s;
}

.vara-saas-page-content a:not(.wp-block-button__link):not(.vara-btn):not(.vara-chip):not(.vara-tag):hover,
.entry-content a:not(.wp-block-button__link):not(.vara-btn):not(.vara-chip):not(.vara-tag):hover,
.vara-saas-entry-content a:not(.wp-block-button__link):not(.vara-btn):not(.vara-chip):not(.vara-tag):hover {
  color: var(--vara-primary, #7c3aed);
  text-decoration-color: var(--vara-primary, #7c3aed);
}

body.va-dark .vara-saas-page-content a:not(.wp-block-button__link),
body.va-dark .entry-content a:not(.wp-block-button__link) {
  color: #d2bbff;
  text-decoration-color: rgba(210, 187, 255, 0.35);
}

body.va-dark .vara-single__article a:not(.wp-block-button__link):hover {
  color: #eaddff;
  text-decoration-color: #eaddff;
}

/* ── Captions & media meta ── */
.vara-single__article figcaption,
.vara-single__article .wp-caption-text,
.vara-single__article .wp-block-image figcaption,
.vara-single__article .wp-block-embed figcaption,
.vara-single__article .gallery-caption {
  margin-top: 10px;
  font-family: var(--vara-font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--vara-text-muted, #64748b);
  text-align: center;
  font-style: normal;
}

.vara-single__article figure,
.vara-single__article .wp-caption {
  margin: 32px 0;
  max-width: 100%;
}

.vara-single__article figure img,
.vara-single__article .wp-caption img {
  border-radius: var(--vara-radius-md, 12px);
}

body.va-dark .vara-single__article figcaption { color: var(--vara-text-muted, #94a3b8); }

/* ── Nested comments — perfectly visible threaded ── */
.vara-saas-comments-area {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--vara-border, #e2e8f0);
}

.vara-saas-comments-title,
.vara-saas-comment-reply-title {
  font-family: var(--vara-font-family, Inter, sans-serif);
  font-size: 24px;
  font-weight: 700;
  color: var(--vara-text-heading, #0f172a);
  margin: 0 0 24px 0;
}

.vara-saas-comment-list,
.vara-saas-comment-list .children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vara-saas-comment-list > li {
  margin-bottom: 24px;
}

.vara-saas-comment-list .comment-body {
  background: var(--vara-surface-container-lowest, #fff);
  border: 1px solid var(--vara-card-border, rgba(0,0,0,0.06));
  border-radius: 16px;
  padding: 20px 20px 16px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
}

body.va-dark .vara-saas-comment-list .comment-body {
  background: var(--vara-surface-container, #171f33);
  border-color: rgba(255,255,255,0.08);
}

.vara-saas-comment-list .children {
  margin-top: 20px;
  margin-left: 16px;
  padding-left: 16px;
  border-left: 2px solid var(--vara-border-light, #f1f5f9);
}

@media (min-width: 640px) {
  .vara-saas-comment-list .children {
    margin-left: 28px;
    padding-left: 24px;
  }
}

.vara-saas-comment-list .children li + li { margin-top: 20px; }

/* Unlimited depth: prevent excessive indentation squeeze after depth 5.
   Keep reply button visible, flatten further nesting. */
.vara-saas-comment-list .depth-6 .children,
.vara-saas-comment-list .depth-7 .children,
.vara-saas-comment-list .depth-8 .children,
.vara-saas-comment-list .depth-9 .children,
.vara-saas-comment-list .depth-10 .children,
.vara-saas-comment-list .children .children .children .children .children .children {
  margin-left: 12px !important;
  padding-left: 12px !important;
}

@media (max-width: 640px) {
  .vara-saas-comment-list .depth-5 .children,
  .vara-saas-comment-list .depth-6 .children,
  .vara-saas-comment-list .depth-7 .children {
    margin-left: 8px !important;
    padding-left: 8px !important;
  }
}

/* Ensure reply button never hidden by depth */
.vara-saas-comment-list .comment-body .reply,
.vara-saas-comment-list .comment-body .comment-reply-link {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.comment-author { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.comment-author .avatar {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.comment-author .fn { font-weight: 600; color: var(--vara-text-heading); font-size: 14px; }
.comment-author .fn a { color: inherit; text-decoration: none; }
.comment-author .fn a:hover { color: var(--vara-primary); }
.comment-metadata { font-family: var(--vara-font-mono, 'JetBrains Mono', monospace); font-size: 12px; color: var(--vara-text-muted); margin-bottom: 12px; }
.comment-metadata a { color: inherit; text-decoration: none; }
.comment-metadata a:hover { color: var(--vara-primary); text-decoration: underline; }
.comment-content { font-size: 15px; line-height: 1.7; color: var(--vara-text-secondary); overflow-wrap: break-word; }
.comment-content p { font-size: 15px; margin: 0 0 12px 0; }
.comment-content a { color: var(--vara-link); text-decoration: underline; text-decoration-color: rgba(124,58,237,0.28); }
.reply { margin-top: 12px; }
.comment-reply-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--vara-font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: 9999px;
  background: var(--vara-primary, #7c3aed);
  color: #fff !important;
  text-decoration: none !important;
  border: 1px solid var(--vara-primary);
}
.comment-reply-link:hover { filter: brightness(1.08); }

.comment-awaiting-moderation {
  display: inline-block;
  margin: 8px 0;
  padding: 4px 10px;
  border-radius: 9999px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  color: #92400e;
  font-size: 12px;
  font-family: var(--vara-font-mono, 'JetBrains Mono', monospace);
}

.bypostauthor > .comment-body {
  border-color: rgba(124,58,237,0.25);
  box-shadow: 0 0 0 1px rgba(124,58,237,0.08), 0 4px 14px rgba(124,58,237,0.06);
}

/* ── Comment form — validation visible ── */
.comment-respond {
  margin-top: 40px;
  background: var(--vara-surface-container-low, #f8fafc);
  border: 1px solid var(--vara-border, #e2e8f0);
  border-radius: 16px;
  padding: 28px;
}

body.va-dark .comment-respond {
  background: var(--vara-surface-container-low, #131b2e);
  border-color: var(--vara-border, #4a4455);
}

.comment-form { display: flex; flex-direction: column; gap: 16px; }
.comment-form p { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.comment-form label {
  font-family: var(--vara-font-mono, 'JetBrains Mono', monospace);
  font-size: 13px;
  font-weight: 500;
  color: var(--vara-text-secondary);
}
.comment-form label .required { color: #c81e1e; }

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  font-family: var(--vara-font-family, Inter, sans-serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--vara-text);
  background: var(--vara-surface-container-lowest, #fff);
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.comment-form input:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--vara-primary, #7c3aed);
  box-shadow: 0 0 0 3px var(--vara-focus-ring, rgba(124,58,237,0.2));
}

.comment-form input[aria-invalid="true"],
.comment-form textarea[aria-invalid="true"],
.comment-form input:invalid:not(:placeholder-shown),
.comment-form textarea:invalid:not(:placeholder-shown) {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.12);
}

.comment-form .vara-form-error,
.comment-form .error,
.wpcf7-not-valid-tip {
  font-size: 12px;
  font-weight: 500;
  color: #c81e1e;
  line-height: 1.4;
}

.comment-form .comment-notes,
.comment-form .logged-in-as,
.comment-form .form-allowed-tags {
  font-size: 13px;
  color: var(--vara-text-muted);
}

.comment-form input[type="submit"] {
  align-self: flex-start;
  background: var(--vara-primary-container, #7c3aed);
  color: #fff;
  border: 1px solid var(--vara-primary-container);
  border-radius: 10px;
  padding: 12px 20px;
  font-family: var(--vara-font-mono, 'JetBrains Mono', monospace);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(124,58,237,0.22);
  transition: filter 0.15s, transform 0.15s;
}

.comment-form input[type="submit"]:hover { filter: brightness(1.08); transform: translateY(-1px); }
.comment-form input[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.form-submit { margin-top: 8px; }

/* Cancel reply link */
#cancel-comment-reply-link {
  font-family: var(--vara-font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  font-weight: 600;
  color: var(--vara-primary);
  text-decoration: none;
  margin-left: 12px;
}
#cancel-comment-reply-link:hover { text-decoration: underline; }

/* ==========================================================================
   Unit Test — Theme Unit Test Data fixes (clearing, alignment, galleries, etc.)
   Ensures any elements after floated content clear properly, and all
   Theme Review required markup displays correctly.
   ========================================================================== */

/* Clearfix for article/content — required for Clearing Floats page (last item floated right) */
.vara-single__article::after,
.vara-single__article .vara-saas-entry-content::after,
.entry-content::after,
.vara-saas-entry-content::after,
.vara-saas-page-content::after {
  content: "";
  display: table;
  clear: both;
}

/* Page links after floated content must clear (Clearing Floats uses <!--nextpage-->) */
.vara-saas-page-links,
.page-links {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 32px 0;
  padding-top: 24px;
  border-top: 1px solid var(--vara-border, #e2e8f0);
}

.vara-saas-page-links a,
.page-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--vara-border, #e2e8f0);
  background: var(--vara-surface-container-lowest, #fff);
  color: var(--vara-text-secondary);
  font-family: var(--vara-font-mono, 'JetBrains Mono', monospace);
  font-size: 13px;
  text-decoration: none !important;
}

.vara-saas-page-links a:hover,
.page-links a:hover { border-color: var(--vara-primary); color: var(--vara-primary); }

.vara-saas-page-links > span:not(.vara-saas-page-links-title),
.page-links > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--vara-primary, #7c3aed);
  color: #fff;
  font-family: var(--vara-font-mono, 'JetBrains Mono', monospace);
  font-size: 13px;
}

/* Image alignment — never overflow content area, proper breathing room (posts + pages) */
.entry-content .alignleft,
.vara-saas-page-content .alignleft,
.vara-saas-entry-content .alignleft,
.vara-single__article .alignleft {
  float: left;
  margin: 8px 24px 16px 0;
  max-width: 50%;
}

.entry-content .alignright,
.vara-saas-page-content .alignright,
.vara-saas-entry-content .alignright,
.vara-single__article .alignright {
  float: right;
  margin: 8px 0 16px 24px;
  max-width: 50%;
}

.entry-content .aligncenter,
.vara-saas-page-content .aligncenter,
.vara-saas-entry-content .aligncenter,
.vara-single__article .aligncenter {
  display: block;
  margin: 24px auto;
  float: none;
  clear: both;
}

.entry-content .alignnone,
.vara-saas-page-content .alignnone,
.vara-saas-entry-content .alignnone,
.vara-single__article .alignnone {
  margin: 24px 0;
  max-width: 100%;
  clear: both;
  display: block;
}

/* Massive 1200px images must be contained */
.entry-content img,
.vara-saas-page-content img,
.vara-saas-entry-content img,
.vara-single__article img,
.entry-content .wp-caption img,
.vara-saas-page-content .wp-caption img,
.vara-single__article .wp-caption img,
.entry-content figure img,
.vara-saas-page-content figure img,
.vara-single__article figure img {
  max-width: 100%;
  height: auto;
}

.entry-content figure,
.vara-saas-page-content figure,
.vara-saas-entry-content figure,
.vara-single__article figure,
.entry-content .wp-caption,
.vara-saas-page-content .wp-caption,
.vara-single__article .wp-caption,
.entry-content .wp-block-image,
.vara-saas-page-content .wp-block-image,
.vara-single__article .wp-block-image {
  max-width: 100%;
}

@media (max-width: 640px) {
  .entry-content .alignleft,
  .vara-saas-page-content .alignleft,
  .vara-saas-entry-content .alignleft,
  .vara-single__article .alignleft,
  .entry-content .alignright,
  .vara-saas-page-content .alignright,
  .vara-saas-entry-content .alignright,
  .vara-single__article .alignright {
    float: none;
    display: block;
    margin: 16px auto;
    max-width: 100%;
  }
}

/* Caption width fix — override WP inline width (e.g., 150px) that + padding/border causes overflow overlap */
.entry-content .wp-caption,
.vara-saas-page-content .wp-caption,
.vara-saas-entry-content .wp-caption,
.vara-single__article .wp-caption {
  width: auto !important;
  display: table;
  caption-side: bottom;
}

.entry-content .wp-caption.alignleft,
.vara-saas-page-content .wp-caption.alignleft,
.vara-single__article .wp-caption.alignleft,
.entry-content .wp-caption.alignright,
.vara-saas-page-content .wp-caption.alignright,
.vara-single__article .wp-caption.alignright {
  display: table;
  width: auto !important;
}

.entry-content .wp-caption.aligncenter,
.vara-saas-page-content .wp-caption.aligncenter,
.vara-single__article .wp-caption.aligncenter {
  display: table;
  margin-left: auto;
  margin-right: auto;
  width: auto !important;
}

.entry-content .wp-caption.alignnone,
.vara-saas-page-content .wp-caption.alignnone,
.vara-single__article .wp-caption.alignnone {
  display: table;
  width: auto !important;
  clear: both;
}

/* WP caption / gallery caption — centered, theme colors, link support (posts + pages) */
.entry-content .wp-caption,
.vara-saas-page-content .wp-caption,
.vara-saas-entry-content .wp-caption,
.vara-single__article .wp-caption,
.entry-content figure.wp-caption,
.vara-saas-page-content figure.wp-caption,
.vara-single__article figure.wp-caption {
  background: var(--vara-surface-container-low, #f8fafc);
  border: 1px solid var(--vara-border, #e2e8f0);
  border-radius: 12px;
  padding: 8px;
  text-align: center;
}

body.va-dark .entry-content .wp-caption,
body.va-dark .vara-saas-page-content .wp-caption,
body.va-dark .vara-single__article .wp-caption {
  background: var(--vara-surface-container, #171f33);
  border-color: rgba(255,255,255,0.08);
}

.entry-content .wp-caption img,
.vara-saas-page-content .wp-caption img,
.vara-single__article .wp-caption img { border-radius: 8px; }

.entry-content .wp-caption .wp-caption-text,
.vara-saas-page-content .wp-caption .wp-caption-text,
.vara-single__article .wp-caption .wp-caption-text,
.entry-content .wp-caption figcaption,
.vara-saas-page-content .wp-caption figcaption,
.vara-single__article .wp-caption figcaption {
  margin: 8px 0 4px;
}

.entry-content .wp-caption .wp-caption-text a,
.vara-saas-page-content .wp-caption .wp-caption-text a,
.vara-single__article .wp-caption .wp-caption-text a,
.entry-content figcaption a,
.vara-saas-page-content figcaption a,
.vara-single__article figcaption a {
  color: var(--vara-primary);
  text-decoration: underline;
  text-decoration-color: rgba(124,58,237,0.3);
}

.entry-content .wp-caption .wp-caption-text a:hover,
.vara-saas-page-content .wp-caption .wp-caption-text a:hover,
.vara-single__article .wp-caption .wp-caption-text a:hover,
.entry-content figcaption a:hover,
.vara-saas-page-content figcaption a:hover,
.vara-single__article figcaption a:hover { text-decoration-color: var(--vara-primary); }

/* Galleries — 1-9 columns, responsive, no overflow (posts + pages) */
.entry-content .gallery,
.vara-saas-page-content .gallery,
.vara-saas-entry-content .gallery,
.vara-single__article .gallery {
  display: grid;
  gap: 16px;
  margin: 32px 0;
}

.entry-content .gallery-columns-1,
.vara-saas-page-content .gallery-columns-1,
.vara-single__article .gallery-columns-1 { grid-template-columns: 1fr; }
.entry-content .gallery-columns-2,
.vara-saas-page-content .gallery-columns-2,
.vara-single__article .gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.entry-content .gallery-columns-3,
.vara-saas-page-content .gallery-columns-3,
.vara-single__article .gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.entry-content .gallery-columns-4,
.vara-saas-page-content .gallery-columns-4,
.vara-single__article .gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.entry-content .gallery-columns-5,
.vara-saas-page-content .gallery-columns-5,
.vara-single__article .gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
.entry-content .gallery-columns-6,
.vara-saas-page-content .gallery-columns-6,
.vara-single__article .gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }
.entry-content .gallery-columns-7,
.vara-saas-page-content .gallery-columns-7,
.vara-single__article .gallery-columns-7 { grid-template-columns: repeat(7, 1fr); }
.entry-content .gallery-columns-8,
.vara-saas-page-content .gallery-columns-8,
.vara-single__article .gallery-columns-8 { grid-template-columns: repeat(8, 1fr); }
.entry-content .gallery-columns-9,
.vara-saas-page-content .gallery-columns-9,
.vara-single__article .gallery-columns-9 { grid-template-columns: repeat(9, 1fr); }

@media (max-width: 900px) {
  .entry-content .gallery-columns-4,
  .vara-saas-page-content .gallery-columns-4,
  .vara-single__article .gallery-columns-4,
  .entry-content .gallery-columns-5,
  .vara-saas-page-content .gallery-columns-5,
  .vara-single__article .gallery-columns-5,
  .entry-content .gallery-columns-6,
  .vara-saas-page-content .gallery-columns-6,
  .vara-single__article .gallery-columns-6 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .entry-content .gallery-columns-3,
  .vara-saas-page-content .gallery-columns-3,
  .vara-single__article .gallery-columns-3,
  .entry-content .gallery-columns-4,
  .vara-saas-page-content .gallery-columns-4,
  .vara-single__article .gallery-columns-4,
  .entry-content .gallery-columns-5,
  .vara-saas-page-content .gallery-columns-5,
  .vara-single__article .gallery-columns-5,
  .entry-content .gallery-columns-6,
  .vara-saas-page-content .gallery-columns-6,
  .vara-single__article .gallery-columns-6,
  .entry-content .gallery-columns-7,
  .vara-saas-page-content .gallery-columns-7,
  .vara-single__article .gallery-columns-7,
  .entry-content .gallery-columns-8,
  .vara-saas-page-content .gallery-columns-8,
  .vara-single__article .gallery-columns-8,
  .entry-content .gallery-columns-9,
  .vara-saas-page-content .gallery-columns-9,
  .vara-single__article .gallery-columns-9 { grid-template-columns: repeat(2, 1fr); }
}

.entry-content .gallery-item,
.vara-saas-page-content .gallery-item,
.vara-single__article .gallery-item { margin: 0; text-align: center; }
.entry-content .gallery-item img,
.vara-saas-page-content .gallery-item img,
.vara-single__article .gallery-item img { width: 100%; height: auto; border-radius: 8px; }
.entry-content .gallery-caption,
.vara-saas-page-content .gallery-caption,
.vara-single__article .gallery-caption {
  font-family: var(--vara-font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  color: var(--vara-text-muted);
  margin-top: 8px;
}

/* Classic .gallery from shortcode */
.vara-single__article .wp-block-gallery.has-nested-images,
.vara-single__article .blocks-gallery-grid { gap: 16px; }

/* Long title / non-breaking text must not overflow (posts + pages + comments) */
.vara-single__title,
.vara-saas-page-title,
.vara-saas-entry-title,
.vara-single__article h1,
.entry-content h1,
.vara-saas-page-content h1,
.vara-single__article h2,
.entry-content h2,
.vara-saas-page-content h2,
.vara-single__article h3,
.entry-content h3,
.vara-saas-page-content h3,
.vara-single__article p,
.entry-content p,
.vara-saas-page-content p,
.vara-single__article li,
.entry-content li,
.vara-saas-page-content li,
.comment-content,
.vara-saas-comment-list .comment-body {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.vara-single__article code:not(pre code) {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* Sticky post distinct */
.sticky {
  position: relative;
}

.sticky .vara-single__article {
  outline: 2px solid rgba(124,58,237,0.14);
  outline-offset: 0;
  border-radius: 12px;
}

/* Password protected form — WP guideline: only title + form when locked */
.post-password-form,
.vara-password-form {
  background: var(--vara-surface-container-lowest, #fff);
  border: 1px solid var(--vara-border, #e2e8f0);
  border-radius: 12px;
  padding: 24px;
  margin: 32px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.post-password-form p:first-child,
.vara-password-form p:first-child {
  width: 100%;
  margin: 0 0 8px 0;
  color: var(--vara-text-secondary);
  font-size: 14px;
}

.post-password-form input[type="password"],
.vara-password-form input[type="password"] {
  flex: 1 1 200px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
}

.post-password-form input[type="submit"],
.vara-password-form button[type="submit"] {
  background: var(--vara-primary, #7c3aed);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-family: var(--vara-font-mono, 'JetBrains Mono', monospace);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(124,58,237,0.22);
}

/* No title post still accessible via date */
.vara-single__header .vara-single__title:empty + .vara-single__excerpt::before {
  content: "Untitled";
  color: var(--vara-text-muted);
}

/* Comment pagination + trackbacks/pingbacks visibility */
.comment-navigation,
.comment-navigation + .vara-saas-comment-list,
.vara-saas-comment-list .pingback,
.vara-saas-comment-list .trackback {
  display: block;
}

.vara-saas-comment-list .pingback .comment-body,
.vara-saas-comment-list .trackback .comment-body {
  background: var(--vara-surface-container, #f1f5f9);
  font-family: var(--vara-font-mono, 'JetBrains Mono', monospace);
  font-size: 13px;
}

body.va-dark .vara-saas-comment-list .pingback .comment-body,
body.va-dark .vara-saas-comment-list .trackback .comment-body {
  background: rgba(210,187,255,0.08);
}

/* Ensure footer after floated content clears */
.vara-single__footer,
#comments {
  clear: both;
}

/* ── Post Format: Aside — best practices ── */
.format-aside .vara-single__title {
  font-size: 28px;
  font-style: italic;
  opacity: 0.95;
}

.format-aside .vara-single__article {
  background: var(--vara-surface-container-low, #f8fafc);
  border: 1px solid var(--vara-border, #e2e8f0);
  border-left: 4px solid var(--vara-primary, #7c3aed);
  border-radius: 12px;
  padding: 24px;
}

body.va-dark .format-aside .vara-single__article {
  background: var(--vara-surface-container, #171f33);
  border-color: rgba(255,255,255,0.08);
  border-left-color: var(--vara-primary, #7c3aed);
}

.format-aside .vara-single__pills,
.format-aside .vara-single__featured,
.format-aside .vara-toc,
.format-aside .vara-single__toc--inline {
  display: none;
}

.format-aside .vara-single__excerpt {
  font-style: italic;
  color: var(--vara-text-secondary);
}

.format-aside .vara-single__meta {
  opacity: 0.9;
}

/* Blog index: aside cards look distinct */
.format-aside.vara-blog-card--stitch {
  background: var(--vara-surface-container-low, #f8fafc);
  border-left: 4px solid var(--vara-primary, #7c3aed);
}

.format-aside.vara-blog-card--stitch .vara-blog-card--stitch__title {
  font-style: italic;
  font-size: 18px;
}

.format-aside.vara-blog-card--stitch .vara-blog-card--stitch__meta {
  display: none;
}