/* ============================================================
   SEO Task 14 -- shared stylesheet for accessible article
   illustrations and semantic tables (2026-08-03).

   Loaded by all six educational articles:
     what-is-keto/, calculate-net-carbs/, net-carbs-vs-total-carbs/,
     keto-friendly-foods/, keto-grocery-guide/, hidden-carbs/

   Scope: responsive <figure>/<img> illustrations, figure captions,
   and semantic <table> styling (including a locally scrollable
   wrapper so a wide table never forces the page to scroll
   horizontally), plus print behavior. No CSS framework, no
   animation, no layout-changing JavaScript is used anywhere in
   this file.
   ============================================================ */

.article-visual{
  margin:22px 0;
  break-inside:avoid;
  page-break-inside:avoid;
}
.article-visual img{
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;
  border:1px solid rgba(34,29,23,0.18);
  background:#fff;
}
.article-visual figcaption{
  margin-top:8px;
  font-size:13px;
  color:rgba(34,29,23,0.62);
  text-align:center;
}

/* ---------- Semantic tables (shared across Task 13's existing
   comparison table and any Task 14 tables) ---------- */
.table-scroll{
  overflow-x:auto;
  margin:16px 0;
  border-radius:12px;
  border:1px solid rgba(34,29,23,0.18);
  -webkit-overflow-scrolling:touch;
}
.compare-table{
  border-collapse:collapse;
  width:100%;
  min-width:480px;
  font-size:14px;
}
.compare-table caption{
  text-align:left;
  font-weight:700;
  font-size:14.5px;
  padding:12px 14px;
  background:#E7E6D5;
}
.compare-table th, .compare-table td{
  text-align:left;
  padding:10px 14px;
  border-bottom:1px solid rgba(34,29,23,0.18);
  vertical-align:top;
}
.compare-table thead th{
  background:#fff;
  font-weight:700;
  border-bottom:2px solid rgba(34,29,23,0.18);
}
.compare-table tbody th{
  background:#F6F1E1;
  font-weight:600;
  white-space:nowrap;
}
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td{
  border-bottom:none;
}

@media(max-width:480px){
  /* Narrow-viewport tables (e.g. four-column tables with longer cell
     copy) get a wider scrollable floor so columns don't compress to an
     unreadably narrow width. Scrolling still happens only inside
     .table-scroll; tablet and desktop are unaffected because this rule
     is gated behind the same 480px breakpoint the article template
     already uses elsewhere. */
  .compare-table{min-width:560px;}

  /* SEO Task 17C mobile-usability correction: the "Keto side effects and
     safety overview" table has longer prose per cell than other article
     tables (four columns of full-sentence guidance rather than short
     phrases), so the shared 560px floor above still compresses it to an
     unreadably narrow column width on small phones. This rule targets
     only that one table, scoped via the page's existing unique heading
     id (#sideEffectsTableHeading, already present in
     keto-diet-side-effects/index.html) so no HTML markup has to change
     -- the table's `class="compare-table"` attribute is untouched, and
     every other article table's mobile behavior is unaffected. Scrolling
     remains confined to the existing `.table-scroll` wrapper; the page
     itself does not gain horizontal scroll. */
  #sideEffectsTableHeading + p + .table-scroll .compare-table{min-width:640px;}

  /* SEO Task 17D UX correction: the "Keto macro calculation overview"
     table has the same four-column, full-sentence-per-cell structure as
     the Task 17C table above, so it needs the same wider mobile floor.
     Scoped via the page's existing unique heading id (#macroTableHeading,
     already present in keto-macros-calculator/index.html) so no HTML
     markup changes -- the table's `class="compare-table"` attribute is
     untouched, and every other article table's mobile behavior
     (including the default 560px floor above) is unaffected. Scrolling
     remains confined to the existing `.table-scroll` wrapper. */
  #macroTableHeading + p + .table-scroll .compare-table{min-width:640px;}
}

@media print{
  .article-visual{break-inside:avoid;page-break-inside:avoid;}
  .table-scroll{overflow-x:visible;border:none;}
  .compare-table{min-width:0;font-size:11px;}
}