/* ==========================================================================
   Agora components  |  agora-components.css
   Version 1.0.0  |  18/10/2026
   Lives in: wp-content/themes/agora/agora-components.css (child theme)
   Master copy: D:\Documents\Claude\Projects\Agora Website\components\
   --------------------------------------------------------------------------
   Change log
   1.0.0  18/10/2026  First version: tokens, tables (compare, simple, cards),
                      pair layout, notes and source lines, scroll wrapper.
   --------------------------------------------------------------------------
   Rules
   - Every class starts "agora-". Never style Divi classes in this file.
   - Selectors start with #page-container so they beat Divi's own table rules
     (Divi uses "#content-area table td" for padding) without !important.
   - Change a colour or size in the tokens block only.
   - Test every change on the private test page before going live, then
     purge WP Rocket.
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --agora-green: #087a2d;        /* Agora figures (text-safe, 5.6:1 on white) */
  --agora-green-brand: #00b03f;  /* Brand green, bars and accents only */
  --agora-teal: #00566a;         /* Header rows, national figures (8:1) */
  --agora-ink: #222826;          /* Body text in tables */
  --agora-muted: #55605b;        /* Sub-text, notes (6.5:1) */
  --agora-line: #dfe5e2;         /* Row dividers */
  --agora-soft: #f3f7f5;         /* Shaded rows */
  --agora-radius: 6px;
  --agora-table-font: 15px;
  --agora-figure-font: 19px;
  --agora-small-font: 12.5px;
  --agora-gap: 28px;
}

/* 2. Base table: <table class="agora-table"> ------------------------------- */
#page-container table.agora-table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  table-layout: fixed;
  background: #fff;
  color: var(--agora-ink);
  font-size: var(--agora-table-font);
  line-height: 1.3;
  text-align: left;
}
#page-container table.agora-table caption {
  caption-side: top;
  padding: 0 0 8px;
  text-align: left;
  color: var(--agora-teal);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}
#page-container table.agora-table caption .agora-table__subtitle {
  display: block;
  color: var(--agora-ink);
  font-size: 14px;
  font-weight: 400;
}
#page-container table.agora-table tr { padding: 0; }
#page-container table.agora-table th,
#page-container table.agora-table td {
  padding: 10px 6px;
  border: 0;
  border-bottom: 1px solid var(--agora-line);
  background: none;
  vertical-align: middle;
  text-align: center;
  max-width: none;
}
#page-container table.agora-table thead th {
  background: var(--agora-teal);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  border-bottom: 0;
}
#page-container table.agora-table thead th:first-child {
  border-radius: var(--agora-radius) 0 0 0;
  padding-left: 10px;
  text-align: left;
}
#page-container table.agora-table thead th:last-child {
  border-radius: 0 var(--agora-radius) 0 0;
}
#page-container table.agora-table tbody th {
  padding-left: 10px;
  text-align: left;
  color: var(--agora-ink);
  font-weight: 700;
}
/* A figure and its small line underneath, for example "43%" and "189 embryos" */
#page-container table.agora-table .agora-table__value {
  display: block;
  font-size: var(--agora-figure-font);
  font-weight: 700;
}
#page-container table.agora-table .agora-table__sub {
  display: block;
  margin-top: 2px;
  color: var(--agora-muted);
  font-size: var(--agora-small-font);
  font-weight: 400;
}
/* Totals row, for example "All ages": <tr class="agora-table__total"> */
#page-container table.agora-table tr.agora-table__total th,
#page-container table.agora-table tr.agora-table__total td {
  background: var(--agora-soft);
  border-top: 2px solid var(--agora-ink);
  border-bottom: 0;
}

/* 3. Comparison table: Agora against the national average ------------------ */
/* <table class="agora-table agora-table--compare">, cells <td class="agora-table__agora"> and <td class="agora-table__national"> */
#page-container table.agora-table--compare tbody th { width: 34%; }
#page-container table.agora-table .agora-table__agora .agora-table__value { color: var(--agora-green); }
#page-container table.agora-table .agora-table__national .agora-table__value { color: var(--agora-teal); }

/* 4. Simple data table: label plus text or figures ------------------------- */
/* <table class="agora-table agora-table--simple"> */
#page-container table.agora-table--simple th,
#page-container table.agora-table--simple td { text-align: left; padding-left: 10px; }
#page-container table.agora-table--simple tbody tr:nth-child(even) td,
#page-container table.agora-table--simple tbody tr:nth-child(even) th { background: var(--agora-soft); }
/* Right-align a column of numbers or prices: <td class="agora-table__num"> */
#page-container table.agora-table .agora-table__num {
  text-align: right;
  padding-right: 10px;
  font-variant-numeric: tabular-nums;
}
#page-container table.agora-table thead th.agora-table__num { text-align: right; }

/* 5. Card table: wide tables become one card per row on phones ------------- */
/* <table class="agora-table agora-table--cards">, every <td data-label="Column name"> */
@media (max-width: 599px) {
  #page-container table.agora-table--cards,
  #page-container table.agora-table--cards tbody,
  #page-container table.agora-table--cards tr,
  #page-container table.agora-table--cards th,
  #page-container table.agora-table--cards td { display: block; width: 100%; box-sizing: border-box; }
  #page-container table.agora-table--cards thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  #page-container table.agora-table--cards caption { display: block; width: 100%; }
  #page-container table.agora-table--cards tbody tr {
    box-sizing: border-box;
    padding: 0;
    margin: 0 0 12px;
    border: 1px solid var(--agora-line);
    border-radius: var(--agora-radius);
    overflow: hidden;
  }
  #page-container table.agora-table--cards tbody th {
    background: var(--agora-teal);
    color: #fff;
    border-bottom: 0;
  }
  #page-container table.agora-table--cards tbody td {
    padding: 8px 10px;
    text-align: right;
  }
  #page-container table.agora-table--cards tbody td::after { content: ""; display: block; clear: both; }
  #page-container table.agora-table--cards tbody td::before {
    content: attr(data-label);
    float: left;
    padding-right: 12px;
    color: var(--agora-muted);
    font-weight: 700;
    text-align: left;
  }
  #page-container table.agora-table--cards tbody tr:nth-child(even) td { background: none; }
  #page-container table.agora-table--cards tr.agora-table__total th { background: var(--agora-teal); color: #fff; border-top: 0; }
  #page-container table.agora-table--cards tr.agora-table__total td { border-top: 0; border-bottom: 1px solid var(--agora-line); }
}

/* 6. Figure wrapper and notes ---------------------------------------------- */
/* <figure class="agora-figure"> table </figure> with <figcaption class="agora-note"> underneath */
#page-container .agora-figure { margin: 0 0 var(--agora-gap); padding: 0; min-width: 0; }
#page-container .agora-pair .agora-figure { margin-bottom: 0; }
#page-container .agora-note {
  margin-top: 8px;
  padding: 0;
  color: var(--agora-muted);
  font-size: var(--agora-small-font);
  line-height: 1.45;
  text-align: left;
}

/* 7. Pair: two items stacked on phones, side by side from 768px ------------- */
/* <div class="agora-pair"> two .agora-figure </div> */
#page-container .agora-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--agora-gap);
  margin: 8px 0 var(--agora-gap);
}
@media (min-width: 768px) {
  #page-container .agora-pair { grid-template-columns: 1fr 1fr; gap: 24px; }
}

/* 8. Scroll wrapper: last resort for very wide tables ----------------------- */
/* <div class="agora-scroll" tabindex="0" role="region" aria-label="Table name, scrolls sideways"> table </div> */
#page-container .agora-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#page-container .agora-scroll table.agora-table { min-width: 560px; }
#page-container .agora-scroll:focus-visible { outline: 3px solid var(--agora-teal); outline-offset: 2px; }