/* ==========================================================================
   blog-v3.css — unified article design for /blogs and /help
   Loaded LAST so it wins specificity over blog.css / blog-extra.css /
   article-v2.css. Targets the existing markup in blog-article.php and
   article.php plus every RankMath / Gutenberg default block a WP author
   might drop in — no template rewrites needed. See the design mockup for
   the full look; every visual choice below (colours, spacing, borders,
   FAQ accordion pattern, callout shapes) traces back to that file.
   ========================================================================== */

/* ── Design tokens ─────────────────────────────────────────────────────── */
:root {
  /* Site canonical dark bg — matches the rest of voltra.gg + email templates.
     Do NOT drift from #1A1B1E; every hero on the site uses this value. */
  --v3-bg:          #1A1B1E;
  --v3-panel:       #212226;
  --v3-panel-2:     #26272b;
  --v3-border:      #2c2d31;
  --v3-border-soft: #232428;
  --v3-yellow:      #FFD500;
  --v3-yellow-2:    #FFE033;
  --v3-yellow-dim:  rgba(255, 213, 0, 0.12);
  --v3-text:        #E8E8E8;
  --v3-text-strong: #FFFFFF;
  --v3-muted:       #7a7a80;
  --v3-muted-2:     #56565c;
  --v3-green:       #3ddc84;
  --v3-radius:      12px;
  --v3-radius-lg:   16px;
  --v3-font:        "Cairo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ── Body backdrop (blog + help article pages only) ────────────────────── */
html.page-blog-article body,
html.page-kb-article body,
html.page-kb body,
html.page-article body {
  background: var(--v3-bg);
  color: var(--v3-text);
  font-family: var(--v3-font);
}

/* ── Article hero ──────────────────────────────────────────────────────── */
.article-hero.article-hero-v2,
.kb-hero {
  background: var(--v3-bg) !important;
  border: 0 !important;
}
.article-hero.article-hero-v2 .container,
.kb-hero .container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Breadcrumb */
.blog-breadcrumb,
.kb-breadcrumb {
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--v3-muted) !important;
  text-transform: none;
  margin-bottom: 18px;
}
.blog-breadcrumb a,
.kb-breadcrumb a {
  color: var(--v3-muted) !important;
  text-decoration: none;
  transition: color 0.15s ease;
}
.blog-breadcrumb a:hover,
.kb-breadcrumb a:hover { color: var(--v3-yellow) !important; }
.blog-breadcrumb .current,
.kb-breadcrumb .current { color: var(--v3-yellow) !important; }

/* Category kicker (yellow pill) */
.blog-kicker,
.kb-eyebrow {
  display: inline-block;
  background: var(--v3-yellow) !important;
  color: #0a0a0b !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 12px !important;
  border-radius: 4px !important;
  margin-bottom: 22px !important;
  line-height: 1 !important;
}

/* H1 */
.article-hero.article-hero-v2 h1,
.kb-hero h1 {
  font-family: var(--v3-font);
  font-size: clamp(30px, 4vw, 44px) !important;
  font-weight: 800 !important;
  color: var(--v3-text-strong) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em;
  margin: 0 0 16px !important;
  max-width: 820px;
}

/* Subtitle */
.article-hero.article-hero-v2 h1 + p,
.kb-hero h1 + p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--v3-muted);
  max-width: 720px;
  margin: 0 0 24px;
  font-weight: 400;
}

/* KB (help) hero also had a search + tag row — hide them under v3 */
.kb-hero .kb-search,
.kb-hero .kb-tags { display: none !important; }

/* Meta + share row */
.article-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  margin-top: 8px;
  border-top: 1px solid var(--v3-border-soft);
  border-bottom: 1px solid var(--v3-border-soft);
  flex-wrap: wrap;
}
.article-meta-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.article-author-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.article-author-chip img {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--v3-yellow);
  padding: 4px;
  object-fit: contain;
  display: block;
}
.article-author-chip .a-label {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v3-muted-2);
  line-height: 1.1;
}
.article-author-chip .a-name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--v3-text-strong);
  line-height: 1.2;
}
.article-meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--v3-muted-2);
}
.article-meta-item {
  font-size: 12.5px;
  color: var(--v3-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.article-meta-item i { color: var(--v3-muted-2); font-size: 11px; }

.article-meta-share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.article-meta-share .share-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v3-muted-2);
  margin-right: 6px;
}
.article-meta-share a,
.article-meta-share button {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--v3-border);
  border-radius: 8px;
  color: var(--v3-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  font-size: 13px;
}
.article-meta-share a:hover,
.article-meta-share button:hover {
  color: #0a0a0b;
  background: var(--v3-yellow);
  border-color: var(--v3-yellow);
}

/* ── Hero image ────────────────────────────────────────────────────────── */
/* Renders at the TOP of the page, ABOVE the breadcrumb/h1 block. Top
   margin (~120px) clears the announcement strip + fixed nav so the image
   isn't clipped behind them. Left/right padding keeps the rounded corners
   from butting against the viewport. Natural aspect ratio preserved. */
.article-hero-image {
  max-width: 1180px;
  margin: 130px auto 0;
  padding: 0 24px;
}
.article-hero-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--v3-radius-lg);
}
@media (max-width: 720px) {
  .article-hero-image { margin-top: 100px; padding: 0 16px; }
}

/* ── Main grid ─────────────────────────────────────────────────────────── */
.article-wrap,
main.kb-main {
  background: var(--v3-bg) !important;
  padding: 36px 0 80px;
}
.article-wrap .container.article-grid,
main.kb-main .container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}
.article-grid,
main.kb-main .kb-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  align-items: start;
}
@media (max-width: 960px) {
  .article-grid,
  main.kb-main .kb-layout { grid-template-columns: 1fr; }
}

/* ── Article body typography ───────────────────────────────────────────── */
.article-content,
.kb-content {
  color: var(--v3-text);
  font-family: var(--v3-font);
  font-size: 16.5px;
  line-height: 1.75;
  min-width: 0;
}
.article-content p,
.kb-content p { margin: 0 0 18px; color: var(--v3-text); }
.article-content strong,
.kb-content strong { color: var(--v3-text-strong); font-weight: 700; }
.article-content a,
.kb-content a { color: var(--v3-yellow); text-decoration: underline; text-decoration-color: var(--v3-yellow-dim); text-underline-offset: 3px; }
.article-content a:hover,
.kb-content a:hover { text-decoration-color: var(--v3-yellow); }

.article-content h2,
.kb-content h2 {
  font-family: var(--v3-font);
  font-size: 26px;
  font-weight: 800;
  color: var(--v3-text-strong);
  line-height: 1.25;
  margin: 44px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--v3-border-soft);
  letter-spacing: -0.01em;
}
.article-content h3,
.kb-content h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--v3-text-strong);
  margin: 32px 0 12px;
  line-height: 1.3;
}
.article-content h4,
.kb-content h4 {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--v3-text-strong);
  margin: 24px 0 10px;
}

/* Lists */
.article-content ul,
.article-content ol,
.kb-content ul,
.kb-content ol {
  margin: 0 0 20px;
  padding: 0;
  list-style: none !important;
}
.article-content ul li,
.kb-content ul li {
  position: relative;
  padding: 6px 0 6px 24px;
  line-height: 1.7;
  list-style: none !important;
}
.article-content ul li::marker,
.kb-content ul li::marker { content: "" !important; }

/* Solid yellow bullet — sized off the line-box so it stays vertically
   centred with the first line of text regardless of font/zoom, and
   rendered via inset box-shadow so the shape is crisp at any DPI
   (a tiny background circle used to alias into an oval on some
   displays). */
.article-content ul > li::before,
.kb-content ul > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.85em;
  width: 7px;
  height: 7px;
  background: var(--v3-yellow);
  border-radius: 50%;
  box-shadow: 0 0 0 0 var(--v3-yellow);
  transform: translateY(0);
}
.article-content ol,
.kb-content ol {
  counter-reset: v3ol;
  padding: 0 !important;
  margin: 0 0 20px;
  list-style: none !important;
}
/* Flex layout on the li means the badge and text sit in the same row
   with a real gap — no absolute-positioning math to keep in sync with
   whatever padding Gutenberg / RankMath reset underneath us. */
.article-content ol > li,
.kb-content ol > li {
  counter-increment: v3ol;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 6px 0;
  line-height: 1.7;
  list-style: none !important;
}
.article-content ol > li::marker,
.kb-content ol > li::marker { content: "" !important; }
.article-content ol > li::before,
.kb-content ol > li::before {
  content: counter(v3ol);
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--v3-yellow);
  color: #0a0a0b;
  font-weight: 900;
  font-size: 12.5px;
  border-radius: 6px;
  line-height: 1;
  margin-top: 3px; /* nudge badge onto text baseline */
}

/* Blockquote (turns into the yellow "info" callout from the mockup) */
.article-content blockquote,
.kb-content blockquote {
  position: relative;
  margin: 24px 0;
  padding: 18px 20px 18px 56px;
  background: var(--v3-yellow-dim);
  border: 1px solid rgba(255, 213, 0, 0.35);
  border-left: 3px solid var(--v3-yellow);
  border-radius: var(--v3-radius);
  color: var(--v3-text);
  font-style: normal;
}
.article-content blockquote::before,
.kb-content blockquote::before {
  content: "\f0eb";
  font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "FontAwesome";
  font-weight: 900;
  position: absolute;
  left: 18px;
  top: 18px;
  color: var(--v3-yellow);
  font-size: 20px;
}
.article-content blockquote p,
.kb-content blockquote p { margin: 0; }
.article-content blockquote p + p,
.kb-content blockquote p + p { margin-top: 8px; }

/* Figures / images */
.article-content figure,
.kb-content figure { margin: 28px 0; }
.article-content figure img,
.kb-content figure img,
.article-content img,
.kb-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--v3-radius);
  display: block;
}
.article-content figcaption,
.kb-content figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--v3-muted);
  text-align: center;
  font-style: normal;
}

/* Tables */
.article-content table,
.kb-content table {
  width: 100%;
  margin: 24px 0;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--v3-border);
  border-radius: var(--v3-radius);
  overflow: hidden;
  font-size: 14.5px;
}
.article-content th,
.article-content td,
.kb-content th,
.kb-content td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--v3-border-soft);
  text-align: left;
}
.article-content th,
.kb-content th {
  background: var(--v3-panel);
  font-weight: 700;
  color: var(--v3-text-strong);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.article-content tr:last-child td,
.kb-content tr:last-child td { border-bottom: 0; }

/* Code */
.article-content code,
.kb-content code {
  background: var(--v3-panel-2);
  border: 1px solid var(--v3-border-soft);
  color: var(--v3-yellow);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: "JetBrains Mono", "Consolas", monospace;
}
.article-content pre,
.kb-content pre {
  background: var(--v3-panel);
  border: 1px solid var(--v3-border);
  border-radius: var(--v3-radius);
  padding: 16px 18px;
  overflow-x: auto;
  margin: 24px 0;
  font-size: 13.5px;
  line-height: 1.6;
}
.article-content pre code,
.kb-content pre code {
  background: transparent;
  border: 0;
  color: var(--v3-text);
  padding: 0;
}

/* ── RankMath FAQ block — accordion pattern from the mockup ────────────── */
.rank-math-faq-block,
.rank-math-faq {
  margin: 28px 0;
  display: block;
}
.rank-math-faq-item,
.wp-block-rank-math-faq-block .rank-math-list-item {
  margin: 0 0 10px !important;
  border: 1px solid var(--v3-border) !important;
  border-radius: var(--v3-radius) !important;
  background: var(--v3-panel) !important;
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.rank-math-faq-item:hover,
.wp-block-rank-math-faq-block .rank-math-list-item:hover {
  border-color: #2f2f34 !important;
}
.rank-math-question,
.rank-math-faq-item .rank-math-list-item-title,
.wp-block-rank-math-faq-block .rank-math-list-item-title {
  position: relative;
  display: block !important;
  padding: 16px 52px 16px 20px !important;
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--v3-text-strong) !important;
  cursor: pointer;
  border: 0 !important;
  background: transparent !important;
  list-style: none;
}
.rank-math-question::after,
.rank-math-faq-item .rank-math-list-item-title::after,
.wp-block-rank-math-faq-block .rank-math-list-item-title::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 400;
  color: var(--v3-muted);
  transition: transform 0.2s ease, color 0.15s ease;
  line-height: 1;
}
.rank-math-faq-item.is-open .rank-math-question::after,
.rank-math-faq-item[data-open="true"] .rank-math-question::after,
.rank-math-faq-item.is-open .rank-math-list-item-title::after,
.rank-math-faq-item[data-open="true"] .rank-math-list-item-title::after {
  transform: translateY(-50%) rotate(45deg);
  color: var(--v3-yellow);
}
.rank-math-answer,
.rank-math-faq-item .rank-math-list-item-content,
.wp-block-rank-math-faq-block .rank-math-list-item-content {
  display: none;
  padding: 0 20px 18px !important;
  color: var(--v3-muted) !important;
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0 !important;
}
.rank-math-answer p,
.rank-math-faq-item .rank-math-list-item-content p,
.wp-block-rank-math-faq-block .rank-math-list-item-content p {
  margin: 0 0 8px !important;
  color: var(--v3-muted) !important;
}
.rank-math-faq-item.is-open .rank-math-answer,
.rank-math-faq-item[data-open="true"] .rank-math-answer,
.rank-math-faq-item.is-open .rank-math-list-item-content,
.rank-math-faq-item[data-open="true"] .rank-math-list-item-content {
  display: block;
}

/* Generic <details> — same accordion look, so authors can use vanilla
   collapsible blocks (e.g. Common Mistakes) without RankMath. */
.article-content details,
.kb-content details {
  margin: 0 0 10px;
  border: 1px solid var(--v3-border);
  border-radius: var(--v3-radius);
  background: var(--v3-panel);
  overflow: hidden;
}
.article-content details > summary,
.kb-content details > summary {
  position: relative;
  padding: 16px 52px 16px 20px;
  font-size: 15px;
  font-weight: 700;
  color: var(--v3-text-strong);
  cursor: pointer;
  list-style: none;
  outline: none;
}
.article-content details > summary::-webkit-details-marker,
.kb-content details > summary::-webkit-details-marker { display: none; }
.article-content details > summary::after,
.kb-content details > summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--v3-muted);
  line-height: 1;
  transition: transform 0.2s ease, color 0.15s ease;
}
.article-content details[open] > summary::after,
.kb-content details[open] > summary::after {
  transform: translateY(-50%) rotate(45deg);
  color: var(--v3-yellow);
}
.article-content details > *:not(summary),
.kb-content details > *:not(summary) {
  padding: 0 20px 18px;
  color: var(--v3-muted);
  font-size: 14.5px;
  line-height: 1.65;
}

/* ── Sidebar: TOC card ─────────────────────────────────────────────────── */
.article-side,
main.kb-main .kb-side {
  position: sticky;
  top: 90px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (max-width: 960px) {
  .article-side,
  main.kb-main .kb-side { position: static; top: auto; }
}

.toc-v2 {
  background: var(--v3-panel);
  border: 1px solid var(--v3-border);
  border-radius: var(--v3-radius);
  padding: 18px;
}
.toc-v2-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  margin: -18px -18px 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--v3-border-soft);
}
.toc-v2-head-label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v3-text-strong);
}
.toc-v2-head-chev { color: var(--v3-muted); transition: transform 0.2s ease; font-size: 12px; }
.toc-v2.is-collapsed .toc-v2-head-chev { transform: rotate(180deg); }
.toc-v2.is-collapsed .toc-v2-list,
.toc-v2.is-collapsed .toc-v2-more { display: none; }
.toc-v2.is-collapsed .toc-v2-head { margin-bottom: -18px; border-bottom: 0; }

.toc-v2-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.toc-v2-list li[data-toc-overflow="1"] { display: none; }
.toc-v2.is-expanded .toc-v2-list li[data-toc-overflow="1"] { display: block; }

.toc-v2-list a {
  display: block;
  padding: 8px 12px 8px 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--v3-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  transition: all 0.15s ease;
}
.toc-v2-list a:hover {
  color: var(--v3-text);
  background: var(--v3-panel-2);
}
.toc-v2-list a.is-active {
  color: var(--v3-yellow);
  border-left-color: var(--v3-yellow);
  background: var(--v3-yellow-dim);
  font-weight: 700;
}

.toc-v2-more {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  background: transparent;
  border: 1px dashed var(--v3-border);
  border-radius: 8px;
  color: var(--v3-muted);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.15s ease;
}
.toc-v2-more:hover {
  color: var(--v3-yellow);
  border-color: var(--v3-yellow);
  background: var(--v3-yellow-dim);
}
.toc-v2-more .chev { transition: transform 0.2s ease; }
.toc-v2.is-expanded .toc-v2-more .chev { transform: rotate(180deg); }

/* ── Sidebar: deploy CTA card ──────────────────────────────────────────── */
.cta-deploy-card,
aside .cta-deploy-card {
  background: var(--v3-panel);
  border: 1px solid var(--v3-border);
  border-top: 3px solid var(--v3-yellow);
  border-radius: var(--v3-radius);
  padding: 20px;
}
.cta-deploy-card h3,
.cta-deploy-card > strong:first-child {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--v3-text-strong) !important;
  margin: 0 0 6px !important;
  line-height: 1.3;
}
.cta-deploy-card p {
  font-size: 13px;
  color: var(--v3-muted);
  line-height: 1.5;
  margin: 0 0 14px;
}
.cta-deploy-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}
.cta-deploy-card ul li {
  padding: 5px 0 5px 22px;
  position: relative;
  font-size: 13.5px;
  color: var(--v3-text);
  line-height: 1.5;
}
.cta-deploy-card ul li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "FontAwesome";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 6px;
  color: var(--v3-yellow);
  font-size: 12px;
}
.cta-deploy-card .button,
.cta-deploy-card a.button {
  display: block;
  text-align: center;
  background: var(--v3-yellow) !important;
  color: #0a0a0b !important;
  font-weight: 900;
  font-size: 13.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 12px 16px;
  border-radius: 8px;
  text-decoration: none !important;
  transition: background 0.15s ease;
}
.cta-deploy-card .button:hover { background: var(--v3-yellow-2) !important; }

/* ── Author box ────────────────────────────────────────────────────────── */
.author-box {
  margin: 48px 0 32px;
  padding: 22px;
  background: var(--v3-panel);
  border: 1px solid var(--v3-border);
  border-radius: var(--v3-radius);
  display: flex;
  gap: 18px;
  align-items: center;
}
.author-box .author-logo {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  background: var(--v3-yellow);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.author-box .author-logo img { width: 32px; height: auto; }
.author-box h3 {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--v3-text-strong) !important;
  margin: 0 0 4px !important;
  border: 0 !important;
  padding: 0 !important;
}
.author-box .text-yellow { color: var(--v3-yellow) !important; font-size: 11px; margin-left: 6px; letter-spacing: 0.06em; }
.author-box p { margin: 0; font-size: 13.5px; color: var(--v3-muted); line-height: 1.55; }

/* ── Related articles ──────────────────────────────────────────────────── */
.article-content > h2:has(+ .related-row),
.article-content .related-row + * { /* placeholder for structural targeting */ }
.related-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 20px 0 32px;
}
@media (max-width: 720px) { .related-row { grid-template-columns: 1fr; } }
.related-card {
  background: var(--v3-panel);
  border: 1px solid var(--v3-border);
  border-radius: var(--v3-radius);
  overflow: hidden;
  transition: transform 0.15s ease, border-color 0.15s ease;
  display: block;
}
.related-card:hover {
  transform: translateY(-2px);
  border-color: #2f2f34;
}
.related-card .related-img {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--v3-panel-2);
  background-size: cover !important;
  background-position: center !important;
}
.related-card > div:last-child { padding: 14px 16px 16px; }
.related-card h3 {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: var(--v3-text-strong) !important;
  margin: 0 0 6px !important;
  line-height: 1.35 !important;
  border: 0 !important;
  padding: 0 !important;
}
.related-card .blog-date {
  font-size: 11.5px;
  color: var(--v3-muted);
  letter-spacing: 0.02em;
}

/* ── Newsletter strip ──────────────────────────────────────────────────── */
.blog-newsletter {
  margin: 32px 0 0;
  padding: 24px;
  background: var(--v3-panel);
  border: 1px solid var(--v3-border);
  border-top: 3px solid var(--v3-yellow);
  border-radius: var(--v3-radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.blog-newsletter-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 260px;
}
.blog-newsletter-icon {
  width: 44px;
  height: 44px;
  background: var(--v3-yellow-dim);
  color: var(--v3-yellow);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.blog-newsletter-text h2 {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--v3-text-strong) !important;
  margin: 0 0 4px !important;
  border: 0 !important;
  padding: 0 !important;
}
.blog-newsletter-text p { margin: 0; font-size: 13px; color: var(--v3-muted); }
.blog-newsletter-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.blog-newsletter-right form { display: flex; gap: 6px; }
.blog-newsletter-right input {
  background: var(--v3-bg);
  border: 1px solid var(--v3-border);
  color: var(--v3-text);
  padding: 10px 12px;
  border-radius: 8px;
  min-width: 220px;
  font-size: 13.5px;
  font-family: var(--v3-font);
}
.blog-newsletter-right input:focus { outline: none; border-color: var(--v3-yellow); }
.blog-newsletter-right button {
  background: var(--v3-yellow);
  color: #0a0a0b;
  border: 0;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
  font-family: var(--v3-font);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.blog-newsletter-right button:hover { background: var(--v3-yellow-2); }
.blog-newsletter-note { font-size: 11px !important; color: var(--v3-muted-2) !important; margin: 0 !important; }

/* ── Bottom banner: "Looking for game server hosting?" ─────────────────── */
.v3-hosting-strip {
  background: var(--v3-yellow);
  color: #0a0a0b;
  padding: 14px 0;
  margin-top: 40px;
}
.v3-hosting-strip .container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.v3-hosting-strip .v3-hs-text {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.v3-hosting-strip .v3-hs-btn {
  background: #0a0a0b;
  color: var(--v3-yellow) !important;
  padding: 8px 18px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: background 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.v3-hosting-strip .v3-hs-btn:hover { background: #1c1c1f; }

/* ── Hide RankMath's inline TOC — we hoist it into the sidebar ─────────── */
.article-content #rank-math-toc,
.article-content .wp-block-rank-math-toc-block,
.article-content [class*="rank-math-toc"],
.kb-content #rank-math-toc,
.kb-content .wp-block-rank-math-toc-block,
.kb-content [class*="rank-math-toc"] { display: none !important; }

/* ── Small-screen polish ───────────────────────────────────────────────── */
@media (max-width: 720px) {
  .article-meta-row { align-items: flex-start; flex-direction: column; gap: 12px; }
  .article-meta-share { align-self: flex-start; }
  .blog-newsletter { flex-direction: column; align-items: stretch; }
  .blog-newsletter-right { align-items: stretch; }
  .blog-newsletter-right form { flex-direction: column; }
  .blog-newsletter-right input { min-width: 0; }
}