/*
 * Static Single Dispatch template.
 * Layout and tokens intentionally reuse the theme's Tailwind utility system.
 * Keep this file limited to page-specific behavior that utilities cannot express cleanly.
 */
.hs-single-dispatch {
  --hs-single-paper: #f8fafc;
  --hs-single-ink: #0f172a;
  --hs-single-muted: #64748b;
  --hs-single-line: #e2e8f0;
}

/* Match the existing Hashed System typography: Inter for body/copy,
 * Plus Jakarta Sans for headings, labels and UI. JetBrains Mono remains
 * reserved for telemetry/code elements already designed as monospace. */
.hs-single-dispatch {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.hs-single-dispatch h1,
.hs-single-dispatch h2,
.hs-single-dispatch h3,
.hs-single-dispatch h4,
.hs-single-dispatch h5,
.hs-single-dispatch h6,
.hs-single-dispatch .font-headline-xl,
.hs-single-dispatch .font-headline-lg,
.hs-single-dispatch .font-headline-md,
.hs-single-dispatch .font-label-ui {
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.hs-single-dispatch .font-body-default,
.hs-single-dispatch .font-body-lead,
.hs-single-dispatch .font-body-compact {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.hs-single-dispatch .font-mono-label,
.hs-single-dispatch .font-mono-telemetry,
.hs-single-dispatch code,
.hs-single-dispatch pre {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.hs-single-dispatch .hs-single-code,
.hs-single-dispatch pre {
  tab-size: 2;
  -moz-tab-size: 2;
}

.hs-single-dispatch pre {
  margin: 0;
  white-space: pre;
}

.hs-single-dispatch table {
  border-collapse: collapse;
}

.hs-single-dispatch input[type="email"] {
  min-width: 0;
}

@media (max-width: 767px) {
  .hs-single-dispatch {
    overflow-x: clip;
  }

  .hs-single-dispatch .sticky.top-20 {
    top: 5rem;
  }

  .hs-single-dispatch h1 {
    overflow-wrap: anywhere;
  }

  .hs-single-dispatch section {
    scroll-margin-top: 6rem;
	  padding: 30px 10px;
  }

  .hs-single-dispatch .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hs-single-dispatch .lg\:sticky {
    position: static;
  }
}

.hs-single-dispatch .text-mono-label {
	font-size: 12px;
}
.hs-single-dispatch .text-label-ui{
	font-size:17px;
}

/* =========================================================================
 * Dynamic single blog post (single-post.php)
 * Everything below is scoped to .hs-single-dispatch and only styles markup
 * that comes from WordPress (TOC, Quick Overview, block-editor content).
 * Values mirror the approved static design in page-single.php.
 * ========================================================================= */

/* ---- Table of Contents: show up to 6 entries, scroll the rest ---------- */
.hs-single-dispatch .hs-single-toc {
  position: relative;
}
.hs-single-dispatch .hs-single-toc--scroll {
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hs-single-dispatch .hs-single-toc--scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
/* Post headings are longer than the approved sample labels and wrap; keep
 * wrapped lines readable and the number aligned with the first line. */
.hs-single-dispatch .hs-single-toc a > span:first-child {
  min-width: 0;
  align-items: flex-start;
}
.hs-single-dispatch .hs-single-toc a > span:first-child > span:first-child {
  flex-shrink: 0;
  padding-top: 2px;
}
.hs-single-dispatch .hs-single-toc a > span:first-child > span:last-child {
  line-height: 1.25;
	font-size:15px;
}
.hs-single-dispatch .hs-single-toc .hs-single-toc__sub {
  padding-left: 1.25rem;
}

/* ---- Quick Overview (rich text) ---------------------------------------- */
.hs-single-dispatch .hs-quick-overview > * + * { margin-top: 0.5rem; }
.hs-single-dispatch .hs-quick-overview ul { list-style: disc; padding-left: 1.25rem; }
.hs-single-dispatch .hs-quick-overview ol { list-style: decimal; padding-left: 1.25rem; }
.hs-single-dispatch .hs-quick-overview li + li { margin-top: 0.25rem; }
.hs-single-dispatch .hs-quick-overview a { color: #0891b2; text-decoration: underline; text-underline-offset: 2px; }
.hs-single-dispatch .hs-quick-overview strong,
.hs-single-dispatch .hs-quick-overview b { font-weight: 600; color: #0f172a; }

/* ---- Article content (block editor) ------------------------------------ */
.hs-single-dispatch .hs-single-content {
  line-height: 1.625;
  overflow-wrap: break-word;
}
.hs-single-dispatch .hs-single-content > * { margin-top: 0; margin-bottom: 0; }
.hs-single-dispatch .hs-single-content > * + * { margin-top: 1rem; }

/* H2 = the approved section heading; extra space mimics the section gap. */
.hs-single-dispatch .hs-single-content h2 {
  font-size: 35px;
  line-height: 48px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #0f172a;
  scroll-margin-top: 7rem;
}
.hs-single-dispatch .hs-single-content > h2:not(:first-child) { margin-top: 3.5rem; }
.hs-single-dispatch .hs-single-content h3 {
  font-size: 22px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #0f172a;
  scroll-margin-top: 7rem;
}
.hs-single-dispatch .hs-single-content > h3:not(:first-child) { margin-top: 2rem; }
.hs-single-dispatch .hs-single-content h4,
.hs-single-dispatch .hs-single-content h5,
.hs-single-dispatch .hs-single-content h6 {
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  color: #0f172a;
}
.hs-single-dispatch .hs-single-content > :is(h4, h5, h6):not(:first-child) { margin-top: 1.5rem; }

.hs-single-dispatch .hs-single-content p,
.hs-single-dispatch .hs-single-content li {
  font-size: 16px;
  line-height: 1.625;
  color: #334155;
}
.hs-single-dispatch .hs-single-content strong,
.hs-single-dispatch .hs-single-content b { font-weight: 600; color: #0f172a; }
.hs-single-dispatch .hs-single-content em,
.hs-single-dispatch .hs-single-content i:not(.material-symbols-outlined) { font-style: italic; }
.hs-single-dispatch .hs-single-content a:not(.wp-block-button__link):not(.wp-element-button) {
  color: #0891b2;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 150ms ease;
}
.hs-single-dispatch .hs-single-content a:not(.wp-block-button__link):not(.wp-element-button):hover { color: #06b6d4; }

.hs-single-dispatch .hs-single-content :not(pre) > code {
  padding: 0.125rem 0.375rem;
  background: #e2e8f0;
  color: #0f172a;
  border-radius: 0.125rem;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.hs-single-dispatch .hs-single-content pre {
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 0.5rem;
  padding: 1rem;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.6;
}

.hs-single-dispatch .hs-single-content ul:not(.blocks-gallery-grid):not(.wp-block-gallery) { list-style: disc; padding-left: 1.5rem; }
.hs-single-dispatch .hs-single-content ol { list-style: decimal; padding-left: 1.5rem; }
.hs-single-dispatch .hs-single-content li + li { margin-top: 0.5rem; }
.hs-single-dispatch .hs-single-content li > ul,
.hs-single-dispatch .hs-single-content li > ol { margin-top: 0.5rem; }
.hs-single-dispatch .hs-single-content li::marker { color: #0891b2; }

.hs-single-dispatch .hs-single-content blockquote {
  border-left: 3px solid #06b6d4;
  padding: 0.25rem 0 0.25rem 1rem;
  font-style: italic;
}
.hs-single-dispatch .hs-single-content blockquote p { color: #1e293b; }
.hs-single-dispatch .hs-single-content blockquote cite {
  display: block;
  margin-top: 0.5rem;
  font-style: normal;
  font-size: 13px;
  color: #64748b;
}

.hs-single-dispatch .hs-single-content hr {
  border: 0;
  border-top: 1px solid #e2e8f0;
}

.hs-single-dispatch .hs-single-content img,
.hs-single-dispatch .hs-single-content video {
  max-width: 100%;
  height: auto;
}
.hs-single-dispatch .hs-single-content figure img,
.hs-single-dispatch .hs-single-content > img { border-radius: 0.5rem; }
.hs-single-dispatch .hs-single-content figcaption,
.hs-single-dispatch .hs-single-content .wp-caption-text {
  margin-top: 0.5rem;
  font-size: 13px;
  line-height: 20px;
  color: #64748b;
}
.hs-single-dispatch .hs-single-content .alignleft { float: left; margin: 0.25rem 1.5rem 1rem 0; max-width: 50%; }
.hs-single-dispatch .hs-single-content .alignright { float: right; margin: 0.25rem 0 1rem 1.5rem; max-width: 50%; }
.hs-single-dispatch .hs-single-content .aligncenter { margin-left: auto; margin-right: auto; }
.hs-single-dispatch .hs-single-content .alignwide,
.hs-single-dispatch .hs-single-content .alignfull { max-width: 100%; margin-left: 0; margin-right: 0; }
.hs-single-dispatch .hs-single-content::after { content: ""; display: table; clear: both; }
.hs-single-dispatch .hs-single-content .wp-block-embed__wrapper,
.hs-single-dispatch .hs-single-content iframe { max-width: 100%; border-radius: 0.5rem; }

/* ---- Tables: approved benchmark-table design, applied to every table -------
 * - White rounded card, light row dividers, row hover.
 * - Header row: light grey, monospace, uppercase. If a Table block has no
 *   "Header section", its first row is styled as the header.
 * - First column: dark and semibold.
 * - Tables with 3+ columns (comparisons): middle columns red, last column
 *   green, last header cyan. To switch the colours off for one table, add
 *   the class  hs-table-plain  (Table block → Advanced → Additional CSS class).
 * - Wide tables scroll sideways inside their card on phones.
 */

/* Card */
.hs-single-dispatch .hs-single-content figure.wp-block-table,
.hs-single-dispatch .hs-single-content .hs-table-scroll {
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
  background: #ffffff;
  border: 0;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
/* Tables pasted as HTML (no Table block wrapper) get the same card. */
.hs-single-dispatch .hs-single-content > table {
  background: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

/* Table + cells (body look) */
.hs-single-dispatch .hs-single-content table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
  text-align: left;
}
.hs-single-dispatch .hs-single-content table td,
.hs-single-dispatch .hs-single-content table th {
  padding: 0.5rem 1rem;
  border: 0;
  min-width: 6rem;
  background: transparent;
  color: #334155;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  text-align: inherit;
  vertical-align: middle;
}
.hs-single-dispatch .hs-single-content table strong,
.hs-single-dispatch .hs-single-content table b { color: inherit; }

/* Row dividers + hover */
.hs-single-dispatch .hs-single-content table tbody > tr + tr > *,
.hs-single-dispatch .hs-single-content table tfoot > tr > * { border-top: 1px solid #e2e8f0; }
.hs-single-dispatch .hs-single-content table tbody > tr { transition: background-color 150ms ease; }
.hs-single-dispatch .hs-single-content table tbody > tr:hover > * { background: #f8fafc; }
.hs-single-dispatch .hs-single-content .is-style-stripes table tbody > tr:nth-child(odd) > * { background: #f8fafc; }

/* First column */
.hs-single-dispatch .hs-single-content table tbody > tr > :first-child,
.hs-single-dispatch .hs-single-content table tfoot > tr > :first-child {
  color: #0f172a;
  font-weight: 600;
}

/* Comparison colours (only rows with 3+ cells) */
.hs-single-dispatch .hs-single-content table tbody > tr > td:not(:first-child):not(:last-child) {
  color: #dc2626;
}
.hs-single-dispatch .hs-single-content table tbody > tr > td:nth-child(n+3):last-child {
  color: #059669;
  font-weight: 600;
}
/* Opt-out: class "hs-table-plain" on the Table block (or on a pasted <table>) */
.hs-single-dispatch .hs-single-content :is(.hs-table-plain table, table.hs-table-plain) tbody > tr > td:not(:first-child) {
  color: #334155;
  font-weight: 400;
}

/* Header row: real <thead> ("Header section" switched on in the Table block) */
.hs-single-dispatch .hs-single-content table thead > tr > * {
  background: #f1f5f9;
  color: #475569;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-top: 0;
}
.hs-single-dispatch .hs-single-content table thead :is(strong, b, em, i) { font-weight: inherit; font-style: normal; }
.hs-single-dispatch .hs-single-content table thead > tr > :nth-child(n+3):last-child { color: #0891b2; }
.hs-single-dispatch .hs-single-content :is(.hs-table-plain table, table.hs-table-plain) thead > tr > :last-child { color: #475569; }

/* Header row when the table has no header section: its first row.
 * (Kept in separate rules: browsers without :has() simply skip these.) */
.hs-single-dispatch .hs-single-content table:not(:has(thead)) > tbody:first-of-type > tr:first-child > * {
  background: #f1f5f9;
  color: #475569;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-top: 0;
}
.hs-single-dispatch .hs-single-content table:not(:has(thead)) > tbody:first-of-type > tr:first-child :is(strong, b, em, i) { font-weight: inherit; font-style: normal; }
.hs-single-dispatch .hs-single-content table:not(:has(thead)) > tbody:first-of-type > tr:first-child > :nth-child(n+3):last-child { color: #0891b2; }
.hs-single-dispatch .hs-single-content :is(.hs-table-plain table, table.hs-table-plain):not(:has(thead)) > tbody:first-of-type > tr:first-child > :last-child { color: #475569; }
/* No divider directly under the header row (same as the approved table) */
.hs-single-dispatch .hs-single-content table:not(:has(thead)) > tbody:first-of-type > tr:nth-child(2) > * { border-top: 0; }

/* Column alignment set in the editor */
.hs-single-dispatch .hs-single-content table [data-align="center"],
.hs-single-dispatch .hs-single-content table .has-text-align-center { text-align: center; }
.hs-single-dispatch .hs-single-content table [data-align="right"],
.hs-single-dispatch .hs-single-content table .has-text-align-right { text-align: right; }

/* Caption */
.hs-single-dispatch .hs-single-content .wp-block-table figcaption {
  margin: 0;
  padding: 0.5rem 1rem 0.75rem;
  text-align: left;
}

/* Phones: comparison tables keep readable columns and scroll inside the card */
@media (max-width: 767px) {
  .hs-single-dispatch .hs-single-content figure.wp-block-table table:has(tr > :nth-child(3)) {
    min-width: 560px;
  }
  .hs-single-dispatch .hs-single-content > table:has(tr > :nth-child(3)) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---- Paginated posts (<!--nextpage-->) -------------------------------- */
.hs-single-dispatch .hs-single-content .hs-single-pages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 2rem;
  color: #64748b;
}
.hs-single-dispatch .hs-single-content .hs-single-pages a,
.hs-single-dispatch .hs-single-content .hs-single-pages .post-page-numbers {
  padding: 0.25rem 0.5rem;
  border-radius: 0.125rem;
  background: #ffffff;
  text-decoration: none;
}
.hs-single-dispatch .hs-single-content .hs-single-pages .current { background: #06b6d4; color: #ffffff; }

@media (max-width: 767px) {
  .hs-single-dispatch .hs-single-content h2,
  .hs-single-dispatch .hs-single-content h3 { scroll-margin-top: 6rem; }
  .hs-single-dispatch .hs-single-content .alignleft,
  .hs-single-dispatch .hs-single-content .alignright { float: none; margin: 0; max-width: 100%; }
}