/* ==========================================================================
   sitekit.css - styles for site-kit sections and blocks.

   The engine's app.css already carries the Bootstrap-named utilities and the
   ss-* topic-page components, and kit markup uses those first. This file adds
   only what they do not cover, under an sk- prefix, and reads the engine's
   tokens (--accent, --radius, --shadow-1) with a fallback so a page still
   looks right where they are not defined.

   A tenant restyles by shipping sites/<domain>/themes/public/<theme>/assets/
   site.css, which loads after this file.
   ========================================================================== */

.sk-page{ max-width:1080px; margin:0 auto; padding:4px 0 28px; }
.sk-page .ss-crumbs{ margin:14px 2px 0; }

/* --- Headers -------------------------------------------------------------- */
.sk-eyebrow{
  margin:0 0 4px; font-size:11.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent,#1abc9c);
}
.sk-summary{ font-size:17px; color:#1f2937; }
.sk-aka, .sk-byline{ margin:0 0 10px; font-size:13px; color:#5b6472; }
.sk-updated{ margin:14px 2px 22px; font-size:12.5px; color:#7a8290; }
.sk-grid-wide{ grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); }
/* A block sits in someone else's page: give it room from whatever is above. */
.sk-block{ margin-top:14px; }
.sk-more{ margin:8px 2px 0; font-size:13px; }
.sk-more a, .sk-chip-more{ font-weight:600; }
.sk-sub{ display:block; font-size:12.5px; font-weight:400; color:#5b6472; line-height:1.45; }

/* --- Long-form text ------------------------------------------------------- */
.sk-prose{
  background:#fff; border:1px solid #e7eaf0; border-radius:var(--radius,10px);
  box-shadow:var(--shadow-1,0 1px 2px rgba(16,24,40,.05)); padding:20px 24px 8px;
  margin:0 2px 18px; font-size:16px; line-height:1.7; color:#1f2937;
}
.sk-prose > *{ max-width:72ch; }
.sk-prose h2{ margin:26px 0 8px; font-size:21px; font-weight:700; letter-spacing:-.01em; color:#0e1116; scroll-margin-top:90px; }
.sk-prose h3{ margin:20px 0 6px; font-size:17px; font-weight:700; color:#0e1116; }
.sk-prose h2:first-child, .sk-prose h3:first-child{ margin-top:4px; }
.sk-prose p, .sk-prose ul, .sk-prose ol, .sk-prose blockquote, .sk-prose pre{ margin:0 0 14px; }
.sk-prose ul, .sk-prose ol{ padding-left:22px; }
.sk-prose li{ margin-bottom:5px; }
.sk-prose a{ color:#0060a9; text-decoration:underline; text-decoration-color:#b9d2e8; text-underline-offset:3px; }
.sk-prose a:hover{ text-decoration-color:#0060a9; }
.sk-prose a.sk-xref{ text-decoration-style:dotted; }
.sk-prose code{ padding:1px 5px; border-radius:4px; background:#f1f4f8; font-size:.9em; color:#0e1116; }
.sk-prose pre{ padding:12px 14px; border-radius:8px; background:#0e1116; color:#e6edf3; overflow-x:auto; max-width:100%; }
.sk-prose pre code{ padding:0; background:none; color:inherit; }
.sk-prose blockquote{ padding:2px 0 2px 14px; border-left:3px solid var(--accent,#1abc9c); color:#374151; }
.sk-prose table{ width:100%; max-width:100%; border-collapse:collapse; margin:0 0 16px; font-size:14.5px; }
.sk-prose th, .sk-prose td{ padding:8px 10px; border-bottom:1px solid #e7eaf0; text-align:left; vertical-align:top; }
.sk-prose thead th{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#5b6472; }

.sk-toc{ margin:0 2px 16px; padding:12px 18px; background:#f7f9fc; border:1px solid #e7eaf0; border-radius:var(--radius,10px); }
.sk-toc-title{ margin:0 0 4px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#5b6472; }
.sk-toc ol{ margin:0; padding-left:20px; font-size:14px; line-height:1.8; }

/* --- Glossary ------------------------------------------------------------- */
.sk-az{ display:flex; flex-wrap:wrap; gap:4px; }
.sk-az a{
  min-width:30px; padding:3px 0; text-align:center; border:1px solid #dde6f0; border-radius:6px;
  background:#eef3f9; font-size:13px; font-weight:600; color:#0060a9; text-decoration:none;
}
.sk-az a:hover{ background:#e2ebf5; }
.sk-terms{ margin:0; background:#fff; border:1px solid #e7eaf0; border-radius:var(--radius,10px); box-shadow:var(--shadow-1,0 1px 2px rgba(16,24,40,.05)); }
.sk-term-row{ display:grid; grid-template-columns:minmax(180px, 260px) 1fr; gap:4px 18px; padding:11px 16px; border-bottom:1px solid #eef1f5; }
.sk-term-row:last-child{ border-bottom:0; }
.sk-term-row dt{ font-weight:600; font-size:15px; }
.sk-term-row dt a{ color:#0060a9; text-decoration:none; }
.sk-term-row dt a:hover{ text-decoration:underline; }
.sk-term-row dd{ margin:0; font-size:14px; line-height:1.5; color:#374151; }

/* --- Directory and comparisons ------------------------------------------- */
.sk-facts, .sk-tiers{ width:100%; margin:0; background:#fff; border:1px solid #e7eaf0; border-radius:var(--radius,10px); border-collapse:separate; border-spacing:0; font-size:14.5px; }
.sk-facts th, .sk-facts td, .sk-tiers th, .sk-tiers td{ padding:10px 14px; border-bottom:1px solid #eef1f5; text-align:left; vertical-align:top; }
.sk-facts tr:last-child > *, .sk-tiers tr:last-child > *{ border-bottom:0; }
.sk-facts tbody th, .sk-tiers tbody th{ width:170px; font-weight:600; color:#374151; white-space:nowrap; }
.sk-facts thead th, .sk-tiers thead th{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#5b6472; background:#f7f9fc; }
.sk-facts thead th a{ font-size:15px; letter-spacing:0; text-transform:none; color:#0060a9; text-decoration:none; }
.sk-facts-list tbody th{ width:auto; white-space:normal; }
.sk-facts-list tbody th a{ font-size:15px; color:#0060a9; text-decoration:none; }
.sk-facts .sk-tiers{ border:0; font-size:13.5px; }
.sk-facts .sk-tiers th, .sk-facts .sk-tiers td{ padding:4px 8px 4px 0; }
.sk-facts .sk-tiers tbody th{ width:auto; white-space:normal; }
.sk-plain{ margin:0; padding-left:16px; }
.sk-pricing-summary{ margin:0 2px 10px; font-size:15px; color:#1f2937; }
.sk-verified{ margin:8px 2px 0; font-size:12.5px; color:#5b6472; max-width:72ch; }
.sk-cols{ margin:0; padding:14px 18px 14px 34px; columns:2 260px; column-gap:28px; background:#fff; border:1px solid #e7eaf0; border-radius:var(--radius,10px); font-size:14.5px; line-height:1.6; }
.sk-cols li{ break-inside:avoid; margin-bottom:4px; }

/* --- Live block, search, signup, answer card ------------------------------ */
.sk-live-list{ margin:0 0 10px; padding:0; list-style:none; background:#fff; border:1px solid #e7eaf0; border-radius:var(--radius,10px); }
.sk-live-list li{ padding:9px 14px; border-bottom:1px solid #eef1f5; font-size:14.5px; }
.sk-live-list li:last-child{ border-bottom:0; }
.sk-live-list a{ color:#0060a9; text-decoration:none; font-weight:600; }
.sk-live-meta{ display:block; font-size:12px; color:#7a8290; }

.sk-search, .sk-signup{ display:flex; flex-wrap:wrap; gap:8px; margin:0; max-width:560px; }
.sk-search .form-control, .sk-signup .form-control{ flex:1 1 240px; min-width:0; }
.sk-fineprint{ margin:8px 0 0; font-size:12.5px; color:#5b6472; }
.sk-promise{ margin:0 0 14px; background:transparent; border:0; padding:0 0 0 20px; }
.sk-callout{ padding:14px 16px; background:#f7f9fc; border:1px solid #e7eaf0; border-radius:var(--radius,10px); }

.sk-answer{
  margin:10px 2px 14px; padding:14px 18px; background:#fff; border:1px solid #e7eaf0;
  border-left:4px solid var(--accent,#1abc9c); border-radius:var(--radius,10px);
  box-shadow:var(--shadow-1,0 1px 2px rgba(16,24,40,.05));
}
.sk-answer-title{ margin:0 0 4px; font-size:19px; font-weight:700; letter-spacing:-.01em; }
.sk-answer-title a{ color:#0e1116; text-decoration:none; }
.sk-answer-text{ margin:0 0 10px; font-size:15px; line-height:1.55; color:#374151; max-width:72ch; }

/* --- Navigation slot ------------------------------------------------------ */
.sk-nav-list{ display:flex; flex-wrap:wrap; gap:4px 18px; margin:0; padding:0; list-style:none; font-size:14px; }
.sk-nav-list a{ color:inherit; text-decoration:none; font-weight:600; opacity:.92; }
.sk-nav-list a:hover{ opacity:1; text-decoration:underline; }
.sk-footer-col a{ text-decoration:none; }

@media (max-width:767.98px){
  .sk-prose{ padding:16px 16px 4px; font-size:15.5px; }
  .sk-term-row{ grid-template-columns:1fr; }
  .sk-facts tbody th, .sk-tiers tbody th{ width:auto; white-space:normal; }
}

/* The directory's jump list: every category at the top of a long index. */
.sk-cat-jump{ margin-top:12px; max-height:230px; overflow-y:auto; padding:2px; }
