/* JSONSwitcher SEO Patch — keeps the original look after div → h2/h3 conversion
   and styles the new interlinking, outline, hub and footer elements. */

/* ── Retagged headings: neutralise ASAP's global heading rules ──
   ASAP: h1–h6 { font-family: Poppins !important; line-height: 1.3 }, h2 { font-size: 28px },
   .the-content h2/h3 margins !important and an anchor-offset ::before. The originals were <div>s. */
.the-content .jsw-h, .jsw-h.jsw-h { line-height: inherit; margin-top: 0 !important; }
.the-content .jsw-h::before, .jsw-h.jsw-h::before,
.the-content .jsw-faq-h::before, .jsw-faq-h.jsw-faq-h::before { content: none !important; display: none !important; }
h2.section-title.jsw-h { font-family: 'Syne', sans-serif !important; font-size: 20px; font-weight: 800; line-height: 1.25; color: var(--text, #1C1C1E); letter-spacing: -.02em; margin-bottom: 6px !important; }
h2.faq-header.jsw-h { font-family: 'Syne', sans-serif !important; font-size: 22px; font-weight: 800; line-height: 1.25; color: var(--text, #1C1C1E); letter-spacing: -.02em; margin-bottom: 4px !important; }
h3.jsw-h:not(.section-title) { font-family: inherit !important; line-height: 1.4; }
h3.step-title.jsw-h { font-size: 14px; font-weight: 700; margin-bottom: 6px !important; }
h3.use-case-title.jsw-h { font-size: 13px; font-weight: 700; margin-bottom: 4px !important; }
h3.eeat-feat-title.jsw-h { font-size: 13px; font-weight: 600; margin-bottom: 4px !important; }
/* FAQ question text: the <h3> sits inside the clickable .faq-q row and must look like plain text */
.faq-q .jsw-faq-h { font: inherit !important; color: inherit !important; letter-spacing: inherit; margin: 0 !important; padding: 0 !important; border: 0; background: none; display: inline; }

/* ── Reverse-tool link under the trust bar ── */
.jsw-toplinks { max-width: var(--max-w, 1100px); margin: 0 auto; padding: 14px 24px 0; display: flex; justify-content: flex-end; font-size: 13px; }
.jsw-reverse { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border, #E2DDD6); color: var(--text, #1C1C1E) !important; text-decoration: none !important; background: #fff; }
.jsw-reverse:hover { border-color: var(--teal, #0EA882); color: var(--teal, #0EA882) !important; }
.jsw-reverse i { font-size: 11px; color: var(--teal, #0EA882); }

/* ── Related grid / hubs ── */
.jsw-more { margin: -32px 0 48px; font-size: 14px; }
.jsw-more a { color: var(--teal, #0EA882); font-weight: 600; text-decoration: none; }
.jsw-hub-grid { margin: 16px 0 32px; }
.jsw-hub-title { display: flex; align-items: center; gap: 10px; }
.jsw-hub-title a { color: inherit; text-decoration: none; }
.jsw-hub-title i { color: var(--teal, #0EA882); font-size: .8em; }
.jsw-other-hubs { font-size: 14px; }
/* Hub pages are plain WP pages without the tool stylesheet: give the reused cards a layout. */
.jsw-hub-grid.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.jsw-hub-grid .related-card { display: block; padding: 16px; border: 1px solid #E2DDD6; border-radius: 6px; text-decoration: none; color: inherit; background: #fff; }
.jsw-hub-grid .related-card:hover { border-color: #0EA882; }
.jsw-hub-grid .related-card-icon { color: #0EA882; margin-bottom: 8px; }
.jsw-hub-grid .related-card-title { font-weight: 600; margin-bottom: 4px; }
.jsw-hub-grid .related-card-desc { font-size: 13px; color: #74706A; line-height: 1.5; }

/* ── Outline additions and prose on plugin pages ── */
.jsw-outline { margin-bottom: 40px; }
.jsw-outline p, .main > p:not([class]) { font-size: 14px; color: var(--muted, #74706A); line-height: 1.85; margin-bottom: 16px; }
.jsw-outline p strong, .main > p:not([class]) strong { color: var(--text, #1C1C1E); }
.jsw-outline a, .main > p:not([class]) a { color: var(--teal, #0EA882); }
.jsw-ic { font-family: 'DM Mono', monospace; font-size: 12px; background: var(--off, #F6F5F3); padding: 2px 6px; border-radius: 3px; color: var(--text, #1C1C1E); }
.jsw-code { font-family: 'DM Mono', monospace; font-size: 12.5px; line-height: 1.6; background: #1C1C1E; color: #EDFAF5; padding: 16px 18px; border-radius: 6px; overflow-x: auto; margin: 0 0 24px; white-space: pre; }
.jsw-code code { background: none; color: inherit; padding: 0; font: inherit; }

/* ── Footer: brand + 6 category columns ── */
.jsw-footer .footer-body-inner { grid-template-columns: 1.5fr repeat(3, 1fr); gap: 36px 40px; }
.jsw-footer .footer-brand { grid-row: span 2; }
.jsw-footer .footer-col-title a { color: inherit; text-decoration: none; }
.jsw-footer .footer-col-title a:hover { color: #fff; }
.jsw-footer .footer-links { gap: 6px; }
/* The theme forces footer links to white: keep the CTA readable on its white pill. */
.jsw-footer .footer-cta-btn, .jsw-footer .footer-cta-btn:visited { color: #0C9472 !important; text-decoration: none; }
.jsw-footer .footer-cta-btn:hover { color: #0C9472 !important; opacity: .9; }
@media (max-width: 960px) {
	.jsw-footer .footer-body-inner { grid-template-columns: 1fr 1fr; }
	.jsw-footer .footer-brand { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 560px) {
	.jsw-footer .footer-body-inner { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
	.jsw-footer .footer-links a { font-size: 12.5px; }
	.jsw-toplinks { padding: 12px 16px 0; justify-content: flex-start; }
}