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

/* ── Retagged headings: neutralise ASAP's global h2/h3 rules ──
   ASAP sets h1–h6 { font-family: Poppins !important; line-height: 1.3 }, h2,h3 { margin: 10px 0 }
   and .the-content h2/h3 { margin-top/bottom … !important }. The original elements were <div>s. */
/* (0,2,0) beats the theme's ".the-content h2" (0,1,1) — both are !important. */
.the-content .csx-h, .csx-h.csx-h { line-height: inherit; margin-top: 0 !important; }
.the-content .csx-h::before, .csx-h.csx-h::before { content: none !important; display: none !important; }
h2.section-title.csx-h { font-family: 'Syne', sans-serif !important; margin-bottom: 6px !important; }
h3.csx-h:not(.section-title) { font-family: inherit !important; }
h3.step-title.csx-h { margin-bottom: 6px !important; }
h3.use-case-title.csx-h,
h3.eeat-feat-title.csx-h { margin-bottom: 4px !important; }
h3.faq-q.csx-h { margin-bottom: 0 !important; }

/* ── Breadcrumb + reverse link under the trust bar ── */
.csx-toplinks {
	max-width: 1100px; margin: 0 auto; padding: 14px 24px 0;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px;
	font-size: 13px;
}
.csx-crumbs { color: var(--muted, #6b7280); }
.csx-crumbs a { color: inherit; text-decoration: none; }
.csx-crumbs a:hover { color: var(--red, #E74129); }
.csx-crumbs .csx-sep { margin: 0 6px; opacity: .6; }
.csx-crumbs [aria-current] { color: var(--text, #111); font-weight: 600; }
.csx-reverse {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 6px 12px; border-radius: 999px;
	border: 1px solid var(--border, #e5e7eb); color: var(--text, #111); text-decoration: none;
}
.csx-reverse:hover { border-color: var(--red, #E74129); color: var(--red, #E74129); }
.csx-reverse i { font-size: 11px; color: var(--red, #E74129); }

/* ── Related grid / hubs ── */
.csx-more { margin: 14px 0 0; font-size: 14px; }
.csx-more a { color: var(--red, #E74129); font-weight: 600; text-decoration: none; }
.csx-hub-grid { margin: 16px 0 32px; }
.csx-hub-title { display: flex; align-items: center; gap: 10px; }
.csx-hub-title a { color: inherit; text-decoration: none; }
.csx-other-hubs { font-size: 14px; }
/* Hub pages are plain WP pages: give the reused cards a minimal layout if the tool CSS is absent. */
.csx-hub-grid.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.csx-hub-grid .related-card { display: block; padding: 16px; border: 1px solid var(--border, #e5e7eb); border-radius: 10px; text-decoration: none; color: inherit; }
.csx-hub-grid .related-card:hover { border-color: var(--red, #E74129); }

/* ── Footer: brand + 6 category columns ── */
.csx-footer .footer-body-inner { grid-template-columns: 1.4fr repeat(3, 1fr); gap: 36px 40px; }
.csx-footer .footer-brand { grid-column: auto; grid-row: span 2; }
.csx-footer .footer-col-title a { color: inherit; text-decoration: none; }
.csx-footer .footer-col-title a:hover { color: #fff; }
.csx-footer .footer-links { gap: 6px; }
.csx-footer .csx-all-btn { text-decoration: none; }
@media (max-width: 960px) {
	.csx-footer .footer-body-inner { grid-template-columns: 1fr 1fr; }
	.csx-footer .footer-brand { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 560px) {
	.csx-footer .footer-body-inner { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
	.csx-footer .footer-links a { font-size: 12.5px; }
	.csx-toplinks { padding: 12px 16px 0; }
}