/*!
 * ccc-tables v0.6.1 — renderer styles (Cohesive CCC starter)
 * https://github.com/cohesivecc/ccc-tables
 *
 * Base table typography/borders come from the CCC starter's `table_*` class
 * family (table_component / table_header / table_cell / table_row); this sheet
 * carries only the renderer-generated `ccc-table_*` layer.
 *
 * TWO KINDS OF RULES, deliberately:
 *
 * 1. MECHANICS + table_*-family overrides — normal specificity. Sticky
 *    positioning, column hiding, the mobile switcher media block, and the
 *    category-colored header/legend/sticky treatments that must beat the
 *    starter's own .table_* rules. Their COLORS are themable via custom
 *    properties, never by re-declaring the rule:
 *      --ccc-cat-700 / --ccc-cat-500 / --ccc-cat-100   category bridge (from
 *          any ancestor: [benefit-category] pages, u-cat-* painters)
 *      --ccc-cat-on-dark   ink on cat-700 surfaces        (default #fff)
 *      --ccc-table-bg      sticky-cell opaque background  (default #fff)
 *      --ccc-ok / --ccc-danger   [check]/[xmark] + error  (defaults below)
 *    Set these as Webflow Variables (or any ancestor style) per site.
 *
 * 2. SKIN on renderer-minted classes — wrapped in :where(...) so they have
 *    ZERO specificity: any Designer-authored rule on the same class
 *    (.ccc-table_footnotes, .ccc-table_chip, …) wins regardless of
 *    stylesheet order. These are shipped defaults, not decisions.
 */

/* ---------- mechanics + starter-family overrides ---------- */

.ccc-table_scroll { overflow-x: auto; overscroll-behavior-x: contain; max-height: 70vh; overflow-y: auto; }
.ccc-table thead .table_header { position: sticky; top: 0; z-index: 2; background-color: var(--ccc-cat-700, #1f3d38); color: var(--ccc-cat-on-dark, #fff); border-color: color-mix(in oklab, #fff 25%, var(--ccc-cat-700, #1f3d38)); }
.ccc-table thead .table_row:nth-child(2) .table_header { top: 2.6em; }
.ccc-table .table_row.is-legend-row .table_header { background-color: var(--ccc-cat-100, #e9f1ee); color: var(--ccc-cat-700, #1f3d38); }

[ccc-sticky-first] .table_header.is-row-header, [ccc-sticky-first] td[data-col="0"] { position: sticky; left: 0; z-index: 1; background-color: var(--ccc-table-bg, #fff); box-shadow: 6px 0 8px -6px rgba(0,0,0,.15); }
[ccc-sticky-first] thead .table_header.is-row-header { z-index: 3; background-color: var(--ccc-cat-700, #1f3d38); }
[ccc-sticky-first] tbody .table_header.is-row-header { background-color: var(--ccc-table-bg, #fff); }

/* !important: must beat the opaque sticky-cell background above. */
.ccc-table_highlight { background-color: var(--ccc-cat-100, #e9f1ee) !important; }

.ccc-table_group-toggle { all: unset; cursor: pointer; display: flex; justify-content: space-between; align-items: center; width: 100%; font: inherit; }
.ccc-table_group-toggle:focus-visible { outline: 2px solid var(--ccc-cat-500, #2f6e63); outline-offset: 2px; }
.ccc-table_group-toggle[aria-expanded="false"] .ccc-table_group-chevron { transform: rotate(-90deg); }
.ccc-table_group-chevron { transition: transform .15s ease; }

.ccc-table_toolbar { display: none; margin-bottom: .5rem; }

/* [reg:] de-emphasis token — regular weight. NOT zero-specificity: (0,2,0)
   must out-rank the starter's bold `.table_header` (0,1,0) on first-column
   cells. Upright by default; add `font-style: italic` in Designer for italic. */
.ccc-table .ccc-table_soft { font-weight: 400; }

/* First-column width cap (config.firstColMax, default 50% of table). The outer
   becomes an inline-size query container so `50cqi` on the wrapped col-0 box
   (.ccc-table_rh) means "50% of the table's own width" — long labels wrap and
   the value columns keep their share, while short first columns stay narrow. */
[ccc-clamp-first] { container-type: inline-size; }
[ccc-clamp-first] .ccc-table_rh { width: fit-content; max-width: var(--ccc-first-col-max, 50cqi); }

/* Per-column text alignment (config.align). Deliberately NOT zero-specificity:
   (0,2,0) must out-rank the starter's own .table_cell / .table_header default
   alignment. The stacked mobile-switcher rule below re-wins to left-align. */
.ccc-table [data-ccc-align="left"] { text-align: left; }
.ccc-table [data-ccc-align="center"] { text-align: center; }
.ccc-table [data-ccc-align="right"] { text-align: right; }

/* Column dividers (config.colDividers): a vertical rule on the LEFT edge of a
   grid column — marks a group boundary (e.g. between two plan groups). Colored
   from the category hook; override --ccc-divide-color to reskin per site. */
.ccc-table [data-ccc-divide] { border-left: 2px solid var(--ccc-divide-color, var(--ccc-cat-500, #2f6e63)); }

/* ---------- skin (zero specificity — restyle these classes in Designer) ---------- */

:where(.ccc-table_caption) { caption-side: top; text-align: left; font-weight: 600; padding-bottom: .5em; }
:where(.ccc-table_chips) { display: flex; gap: .4rem; flex-wrap: wrap; }
:where(.ccc-table_chip) { display: inline-block; border: 1px solid var(--ccc-cat-500, #2f6e63); color: var(--ccc-cat-700, #1f3d38); background: transparent; border-radius: 99px; padding: .3em .95em; font-size: .85rem; line-height: 1.4; cursor: pointer; text-decoration: none; }
:where(.ccc-table_chip.is-active) { background: var(--ccc-cat-500, #2f6e63); color: var(--ccc-cat-on-dark, #fff); }
/* Footnotes render as an attached footer row: full width, continuing the table
   frame (side + bottom borders in the table's own Row/border token). The block
   sits BELOW the scroll wrapper on purpose — a real tfoot would scroll
   horizontally with wide tables and hide inside the max-height scroll region. */
:where(.ccc-table_footnotes) { font-size: .78rem; padding: .7em 1em .55em; border-style: none solid solid; border-width: 0 1px 1px; border-color: var(--_table-row-styles---row--border, #d8dde2); }
:where(.ccc-table_footnotes p) { margin: 0 0 .35em; opacity: .72; }
/* The footnotes block hugs its frame: its first/last child shed the outer
   margins — covers <p>, <ul>, <ol> alike (CMS rich text is usually <p>). Inner
   spacing between items is left to the host. Deliberately NOT zero-specificity:
   (0,2,0) must out-rank the host rich-text rule (e.g. `.text-rich-text p`,
   (0,1,1)) that otherwise leaves a fat margin below the last line. */
.ccc-table_footnotes > :first-child { margin-top: 0; }
.ccc-table_footnotes > :last-child { margin-bottom: 0; }
:where(.ccc-table_error) { border: 1px dashed var(--ccc-danger, #b03a2e); color: var(--ccc-danger, #b03a2e); padding: .75em 1em; border-radius: .4em; font-size: .9rem; }

/* cell tokens */
:where(.ccc-table_link) { color: var(--ccc-cat-500, #2f6e63); text-decoration: underline; text-underline-offset: .15em; }
:where(.ccc-table_link:hover) { color: var(--ccc-cat-700, #1f3d38); }
:where(.ccc-table_tip) { text-decoration: underline dotted; text-underline-offset: .2em; cursor: help; }
:where(.ccc-ico) { font-weight: 700; }
:where(.ccc-ico.is-check)::before { content: "\2713"; color: var(--ccc-ok, #2e7d32); }
:where(.ccc-ico.is-xmark)::before { content: "\2715"; color: var(--ccc-danger, #b03a2e); }
:where(.ccc-ico.is-dollar)::before { content: "$"; color: var(--ccc-cat-500, #2f6e63); }
:where(.ccc-table) sup { font-size: .65em; }

/* ---------- mobile switcher (mechanics) ---------- */

@media (max-width: 767px) {
  [ccc-mobile-switcher] .ccc-table_toolbar { display: block; }
  [ccc-mobile-switcher] [data-ccc-colhide] { display: none; }
  [ccc-mobile-switcher] thead { display: none; }
  /* !important: must beat the starter's own mobile grid rule. */
  [ccc-mobile-switcher] .table_row { grid-template-columns: 1fr !important; }
  /* Stacked cells read left-aligned regardless of a per-column align override,
     and a group divider makes no sense in a single-column stack. */
  [ccc-mobile-switcher] .table_cell,
  [ccc-mobile-switcher] [data-ccc-align] { text-align: left; }
  [ccc-mobile-switcher] [data-ccc-divide] { border-left: none; }
  [ccc-mobile-switcher] tbody .table_header.is-row-header { border-bottom: none; padding-bottom: .25em; }
  /* Stacked rows are full-width — the first-column cap would crush the label. */
  [ccc-mobile-switcher] .ccc-table_rh { max-width: none; }
}