/* Softalink additions on top of the Martex template CSS.
   All classes are sx- prefixed to avoid touching template styles. */
:root { --sx-ink: #353f4f; --sx-grey: #6c757d; --sx-line: #e8ebf3; }

.sx-section { padding: 150px 0 70px; }
.sx-section--flush { padding-top: 60px; }
.sx-narrow { max-width: 46rem; margin: 0 auto; text-align: center; }
.sx-left { max-width: 46rem; }

.sx-kicker {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: #999; margin-bottom: 14px;
}
.sx-title { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); font-weight: 700; line-height: 1.2; margin-bottom: 20px; }
.sx-lede { font-size: 1.15rem; line-height: 1.65; color: var(--sx-grey); }
.sx-meta { color: #999; font-size: 0.95rem; margin-top: 14px; }
.sx-meta strong { color: var(--sx-ink); }

.sx-grid { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 50px; }
.sx-card {
  background: #f4f6fb; border-radius: 14px; padding: 30px 28px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: block; color: inherit;
}
a.sx-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px -18px rgba(37, 48, 90, 0.35); }
.sx-card h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 10px; }
.sx-card p { color: var(--sx-grey); font-size: 0.98rem; line-height: 1.6; margin: 0 0 8px; }
.sx-card .sx-strong { color: var(--sx-ink); font-weight: 700; }
.sx-chip {
  display: inline-block; font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid #d3d9e8; border-radius: 999px; padding: 3px 12px;
  color: var(--sx-grey); margin: 0 4px 4px 0;
}
.sx-lang { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }

.sx-cover { border-radius: 16px; width: 100%; height: auto; display: block; object-fit: cover; }
.sx-cover--wide { border-radius: 22px; margin: 40px 0 60px; max-height: 480px; }

.sx-btn-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }
.sx-btn-row--left { justify-content: flex-start; }

/* Blog cards */
.sx-post-grid { display: grid; gap: 40px 26px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 60px; }
.sx-post-card { display: block; color: inherit; }
.sx-post-card img { border-radius: 14px; margin-bottom: 18px; aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.sx-post-cat { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.sx-post-card h3 { font-size: 1.35rem; font-weight: 700; line-height: 1.35; margin: 8px 0 10px; }
.sx-post-card:hover h3 { color: #2a8cc7; }
.sx-post-card p { color: var(--sx-grey); font-size: 0.98rem; line-height: 1.6; }
.sx-featured { display: grid; gap: 40px; align-items: center; margin-top: 60px; }
@media (min-width: 992px) { .sx-featured { grid-template-columns: 1.05fr 0.95fr; } }
.sx-featured img { border-radius: 16px; aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.sx-featured h2 { font-size: 1.9rem; font-weight: 700; line-height: 1.3; margin: 10px 0 14px; }
.sx-featured:hover h2 { color: #2a8cc7; }

/* Article prose */
.sx-prose { max-width: 46rem; margin: 0 auto; color: var(--sx-grey); font-size: 1.05rem; line-height: 1.75; }
.sx-prose h2 { font-size: 1.7rem; font-weight: 700; margin: 44px 0 14px; color: var(--sx-ink); }
.sx-prose h3 { font-size: 1.3rem; font-weight: 700; margin: 34px 0 10px; color: var(--sx-ink); }
.sx-prose p { margin: 0 0 18px; }
.sx-prose ul, .sx-prose ol { margin: 0 0 18px; padding-left: 22px; }
.sx-prose li { margin: 6px 0; }
.sx-prose a { color: #2a8cc7; }
.sx-prose a:hover { text-decoration: underline; }
.sx-prose strong { color: var(--sx-ink); }
.sx-prose code {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.85em;
  background: #f4f6fb; border: 1px solid var(--sx-line);
  border-radius: 5px; padding: 1px 6px; color: var(--sx-ink);
}
.sx-prose pre { background: #f4f6fb; border-radius: 12px; padding: 18px; overflow-x: auto; margin: 0 0 18px; }
.sx-prose pre code { background: none; border: none; padding: 0; }
.sx-prose blockquote { border-left: 3px solid #2a8cc7; padding-left: 18px; margin: 0 0 18px; color: var(--sx-ink); }
.sx-prose table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 0.92rem; }
.sx-prose th, .sx-prose td { border: 1px solid var(--sx-line); padding: 8px 12px; text-align: left; }
.sx-prose th { background: #f4f6fb; color: var(--sx-ink); }
.sx-prose hr { border: none; border-top: 1px solid var(--sx-line); margin: 36px 0; }

/* Taller brand logo than the template's 38px cap. */
.desktoplogo img { max-height: 56px !important; }
.wsmobileheader .smllogo img { max-height: 46px !important; }

/* Hero dashboard: the template bleeds this image ~90% off-canvas; render it
   big (150% of the column, pulled slightly left like the original) with the
   bleed confined to the right edge. */
.hero-3-img { margin: 0 -40% 0 0 !important; }
.hero-3-img img { max-width: 150%; }

/* Sun/moon theme toggle in the header — both icons absolutely centered in
   the same box so swapping them never shifts position. */
#sx-theme-toggle { position: relative; display: inline-block; min-width: 2.4em; }
#sx-theme-toggle svg {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.sx-icon-sun { display: none; }
body.theme--dark .sx-icon-sun { display: block; }
body.theme--dark .sx-icon-moon { display: none; }

.sx-post-foot {
  max-width: 46rem; margin: 60px auto 0; padding-top: 24px;
  border-top: 1px solid var(--sx-line);
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
}

/* Dark-mode counterparts (template's .switch toggle sets body.theme--dark) */
body.theme--dark .sx-card, body.theme--dark .sx-prose pre,
body.theme--dark .sx-prose code, body.theme--dark .sx-prose th { background: #1c2338; }
body.theme--dark .sx-card p, body.theme--dark .sx-lede, body.theme--dark .sx-prose { color: #a6aec3; }
body.theme--dark .sx-card h3, body.theme--dark .sx-prose h2, body.theme--dark .sx-prose h3,
body.theme--dark .sx-prose strong, body.theme--dark .sx-meta strong,
body.theme--dark .sx-card .sx-strong, body.theme--dark .sx-prose code { color: #eef1f8; }
body.theme--dark .sx-prose th, body.theme--dark .sx-prose td,
body.theme--dark .sx-post-foot, body.theme--dark .sx-chip { border-color: #38415f; }