/* ==========================================================================
   Blog Single -- content tables
   --------------------------------------------------------------------------
   Common styling for every <table> inside .blog_single_content_bx, plus a
   green variant for .pricing-table. Presentation only -- no template or
   post-content changes.

   What the existing markup looks like (all three tables in the blog were
   pasted in as legacy HTML, so there is no <th>, <thead>, <caption> or
   <colgroup> anywhere to hook on to):

     .pricing-table > table    header row = td.pricing-table-heading,
                               bgcolor="#548a10", 3 columns
     table.brdr                header row = plain td bgcolor="#f1f1f1",
                               body cells td.fnt-black, 5 columns

   So the header row is matched two ways below: a real <th>, and "a cell in
   the first row carrying a bgcolor attribute". bgcolor/align/valign/width
   are presentational hints, which any author rule outranks -- that is why
   restyling them from CSS works at all.

   Deliberately NOT set on td: text-align and width. The posts use
   align="left" on label columns and align="center" on figure columns, and
   width="50%" / width="20%" to proportion them. A CSS text-align or width
   here would outrank those attributes and flatten the intended layout.

   Colours and type follow the Blog Single design tokens in
   adluge-system.css (#101F45 navy, #5A9B2B green, #E7EAEF borders,
   Plus Jakarta Sans).
   ========================================================================== */


/* ==========================================================================
   1. COMMON -- every table in the post body
   ========================================================================== */

/* display:block + overflow-x makes the table its own scroll container, which
   is what keeps it responsive without a wrapper div in the markup (only
   .pricing-table has one, and the two .brdr tables have none). The section
   elements below are switched to display:table + width:100% so the table
   still fills the column -- without that, the anonymous table box the block
   generates would shrink-to-fit and the table would stop stretching to the
   content width. */
.blog_single_content_bx table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  margin: 26px 0 30px;
  border: 1px solid #E7EAEF;
  border-radius: 4px;          /* clipped by the overflow above */
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 31, 69, .04);
  border-collapse: collapse;   /* inherits down to the sections below */
  border-spacing: 0;
  font: 400 15px/1.55 'Plus Jakarta Sans', -apple-system, "Segoe UI", sans-serif;
  color: #3F4A5C;
}
.blog_single_content_bx table > thead,
.blog_single_content_bx table > tbody,
.blog_single_content_bx table > tfoot {
  display: table;
  width: 100%;
}

/* Guard for any future table that uses a real <thead>: thead and tbody as
   two separate display:table boxes would size their columns independently
   and visibly misalign. Such a table keeps native table layout instead,
   which keeps one column grid across both sections. The cost is that it
   gets no scroll container, so table-layout:fixed (with the cells'
   overflow-wrap:break-word) is what stops a wide one pushing past the
   content column and giving the whole page a horizontal scrollbar.

   These also cancel the responsive min-width in section 3 -- :has(> thead)
   contributes an element to the selector, so they outrank it on specificity
   and their position in the file does not matter.

   No table in the blog has a <thead> today; all three are tbody-only, so
   this is purely a guard for content added later. Browsers without :has()
   drop these rules and fall back to the scrollable behaviour above. */
.blog_single_content_bx table:has(> thead) {
  display: table;
  table-layout: fixed;
}
.blog_single_content_bx table:has(> thead) > thead {
  display: table-header-group;
  width: auto;
  min-width: 0;
}
.blog_single_content_bx table:has(> thead) > tbody {
  display: table-row-group;
  width: auto;
  min-width: 0;
}
.blog_single_content_bx table:has(> thead) > tfoot {
  display: table-footer-group;
  width: auto;
  min-width: 0;
}

/* ---- Cells ---- */
.blog_single_content_bx table td,
.blog_single_content_bx table th {
  padding: 13px 16px;
  border: 0;
  border-bottom: 1px solid #EDF0F4;
  vertical-align: middle;
  overflow-wrap: break-word;            /* holds min-content width down */
  font-variant-numeric: tabular-nums;   /* figures line up column to column */
}
.blog_single_content_bx table tr:last-child td,
.blog_single_content_bx table tr:last-child th {
  border-bottom: 0;
}

/* ---- Header row ----
   Matches a real <th>, or the legacy pattern: a first-row cell carrying a
   bgcolor attribute. A bgcolor cell further down the table is left alone
   and keeps whatever colour the attribute asked for. */
.blog_single_content_bx table th,
.blog_single_content_bx table > thead td,
.blog_single_content_bx table > tbody > tr:first-child > td[bgcolor],
.blog_single_content_bx table > tr:first-child > td[bgcolor] {
  background: #101F45;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-bottom: 0;
}
.blog_single_content_bx table th strong,
.blog_single_content_bx table > thead td strong,
.blog_single_content_bx table > tbody > tr:first-child > td[bgcolor] strong,
.blog_single_content_bx table > tr:first-child > td[bgcolor] strong {
  color: inherit;
  font-weight: 700;
}
/* Only th gets a text-align -- td alignment is left to the align attribute
   in the markup (see the file header). */
.blog_single_content_bx table th {
  text-align: left;
}

/* ---- Body rows ---- */
.blog_single_content_bx table > tbody > tr:nth-child(even) {
  background: #FAFBFC;
}
.blog_single_content_bx table > tbody > tr:not(:first-child):hover {
  background: #F4F8EE;
}

/* First-column labels read as the row heading in these tables. */
.blog_single_content_bx table > tbody > tr > td:first-child strong,
.blog_single_content_bx table td.fnt-black {
  color: #101F45;
  font-weight: 600;
}

.blog_single_content_bx table a {
  color: #5A9B2B;
  text-decoration: underline;
}
.blog_single_content_bx table a:hover {
  color: #4B8523;
}
.blog_single_content_bx table caption {
  caption-side: top;
  padding: 0 0 10px;
  text-align: left;
  font: 600 13px 'Plus Jakarta Sans', -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #98A0AC;
}


/* ==========================================================================
   2. VARIANT -- .pricing-table
   ========================================================================== */

/* The wrapper is a plain spacing element; the table inside it is still its
   own scroll container, exactly like every other table. */
.blog_single_content_bx .pricing-table {
  margin: 26px 0 30px;
}
.blog_single_content_bx .pricing-table table {
  margin: 0;
  border-color: #DDE7D0;
}

/* Green header, replacing the pasted bgcolor="#548a10" with the site green.
   The first heading cell carries an inline style="color:#fff" in the post
   content, which no colour declared here can outrank without !important --
   white is what this variant wants anyway, so the two agree. */
.blog_single_content_bx .pricing-table table td.pricing-table-heading,
.blog_single_content_bx .pricing-table table > tbody > tr:first-child > td[bgcolor] {
  background: #5A9B2B;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-bottom: 0;
}
.blog_single_content_bx .pricing-table table td.pricing-table-heading strong,
.blog_single_content_bx .pricing-table table > tbody > tr:first-child > td[bgcolor] strong {
  color: #fff;
  font-weight: 700;
}

/* Roomier rows and a green-tinted zebra -- this variant is the figure
   comparison table, so the metric names carry the scan. */
.blog_single_content_bx .pricing-table table td {
  padding: 15px 16px;
}
.blog_single_content_bx .pricing-table table > tbody > tr:not(:first-child) > td:first-child {
  color: #101F45;
}
.blog_single_content_bx .pricing-table table > tbody > tr:nth-child(even) {
  background: #F6FAF1;
}
.blog_single_content_bx .pricing-table table > tbody > tr:not(:first-child):hover {
  background: #EDF5E3;
}


/* ==========================================================================
   3. RESPONSIVE
   ========================================================================== */

/* Below this width the columns squash to unreadable widths, so give the
   sections a floor and let the table scroll horizontally instead. min-width
   goes on the sections, not on the table: the table element is the scroll
   viewport, the sections are the content being scrolled. */
@media (max-width: 767px) {
  .blog_single_content_bx table > thead,
  .blog_single_content_bx table > tbody,
  .blog_single_content_bx table > tfoot {
    min-width: 480px;
  }
  .blog_single_content_bx table {
    font-size: 14.5px;
  }
  .blog_single_content_bx table td,
  .blog_single_content_bx table th {
    padding: 11px 13px;
  }
  .blog_single_content_bx .pricing-table table td {
    padding: 12px 13px;
  }
  .blog_single_content_bx table th,
  .blog_single_content_bx table > thead td,
  .blog_single_content_bx table > tbody > tr:first-child > td[bgcolor] {
    font-size: 12px;
  }
}

/* Always-visible slim scrollbar, so it reads as scrollable rather than cut
   off on the platforms that hide overlay scrollbars until you scroll. */
.blog_single_content_bx table {
  scrollbar-width: thin;
  scrollbar-color: #C6CEDA transparent;
}
.blog_single_content_bx table::-webkit-scrollbar {
  height: 8px;
}
.blog_single_content_bx table::-webkit-scrollbar-track {
  background: #F1F3F7;
}
.blog_single_content_bx table::-webkit-scrollbar-thumb {
  background: #C6CEDA;
  border-radius: 4px;
}
.blog_single_content_bx table::-webkit-scrollbar-thumb:hover {
  background: #A7B0BE;
}