/* ==========================================================================
   Devgun Family Law -- content tables (rich text / .typography)

   No Figma frame specifies a table: none of the 5 page templates contains
   one. The tables live in blog article copy (18 of them across 17 wave-two
   posts, 2-5 columns, prose-heavy cells), so this file derives the look from
   the existing card/rail language rather than inventing a new one:
   Dark Blue header row (--color-action, white label 9.26:1 AA), hairline
   grid in --color-border-subtle, Lighter Blue-2 zebra, card radius.

   TWO LAYERS, deliberately separated:

     1. LOOK -- `.typography table` -- applies to EVERY table in rich text,
        wherever it renders (blog copy, elemental blocks, FAQ answers).
     2. RESPONSIVE BEHAVIOUR -- `.typography .table-scroll` -- applies ONLY
        inside the scroll region that App\Extensions\ResponsiveTablesExtension
        wraps around each table at render time (see ContentWithResponsiveTables).

   The split matters: the min-widths in layer 2 are what stop a 5-column
   comparison table collapsing into unreadable slivers, but they only work
   because something is there to absorb the overflow. Applying them to a
   table with NO wrapper would push the overflow onto the page instead --
   i.e. exactly the mobile break this file exists to fix. So an unwrapped
   table keeps the browser's own shrink-to-fit sizing, and just gets the
   look. Any template that starts rendering tables should switch its content
   call to the wrapped variant rather than widen these selectors.

   Column widths: at >=992px the blog article column is ~577px (926px
   container less the 19rem category rail), so 4- and 5-column tables scroll
   at EVERY viewport, not just on phones. That is the intended outcome -- a
   115px column of prose is not a table anyone can read -- and it is why the
   first column is sticky at all widths, not behind a media query.

   Consumes tokens from foundation/tokens.css only -- no raw hex.
   Loaded globally by templates/Page.ss (after legacy-overrides.css, so the
   legacy Bootstrap `table` rules in site.css cannot out-cascade it).
   ========================================================================== */

/* ------------------------------------------------------------------ *
 * 1. Look -- every rich-text table
 * ------------------------------------------------------------------ */

.typography table {
  width: 100%;
  border-collapse: separate;  /* NOT collapse: sticky cells lose their
                                 borders under border-collapse (Chrome
                                 paints collapsed borders on the table, so
                                 they do not travel with a sticky cell).
                                 Separate + border-spacing:0 + one border
                                 per edge gives the same single hairline. */
  border-spacing: 0;
  margin: 0;
  font-size: var(--fs-body2);
  line-height: var(--lh-body1);   /* looser than body2's 1.30: cells wrap */
  color: var(--color-text-default);
}

.typography table caption {
  caption-side: top;
  padding: 0 0 0.625rem;
  color: var(--color-text-heading);
  font-size: var(--fs-body2);
  font-weight: var(--fw-semibold);
  text-align: left;
}

.typography table th,
.typography table td {
  padding: 0.75rem 1rem;
  background-color: var(--row-bg);
  border-bottom: 1px solid var(--color-border-subtle);
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;   /* a pasted URL must not set the column width */
}

/* Row fill is carried on a custom property, not on the <tr>, so that a
   sticky cell can re-declare the SAME fill for itself (a sticky cell paints
   over the row it sits in; without its own background the scrolled content
   shows through). Header cells override the property on themselves. */
.typography table tr {
  --row-bg: var(--color-white);
}

.typography table tbody tr:nth-child(even) {
  --row-bg: var(--color-blue-lightest);
}

.typography table th {
  --row-bg: var(--color-action);
  color: var(--color-text-on-dark);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-body2);
  vertical-align: bottom;
}

/* Vertical hairlines: border-RIGHT on every cell but the last, never
   border-left on the following cell -- the first column's separator has to
   belong to the first column, or it scrolls out from under the sticky cell. */
.typography table th:not(:last-child),
.typography table td:not(:last-child) {
  border-right: 1px solid var(--color-border-subtle);
}

/* The subtle rgba divider is invisible on the Dark Blue header fill. */
.typography table th:not(:last-child) {
  border-right-color: rgba(255, 255, 255, 0.22);
}

.typography table th {
  border-bottom-color: transparent;
}

.typography table tbody tr:last-child th,
.typography table tbody tr:last-child td {
  border-bottom: 0;
}

@media (hover: hover) {
  .typography table tbody tr:hover {
    --row-bg: var(--color-blue-lighter);
  }
}

/* Links inside a cell: the foundation link style is bold + tracked, which
   fights the tighter table type. Keep the colour, drop the swagger. */
.typography table a {
  font-weight: var(--fw-medium);
  letter-spacing: 0;
}

/* ------------------------------------------------------------------ *
 * 2. Responsive behaviour -- inside the server-rendered scroll region
 *
 * The wrapper is <div class="table-scroll" role="region" tabindex="0"
 * aria-label="..."> emitted by ResponsiveTablesExtension. tabindex is what
 * makes the region scrollable by keyboard (WCAG 2.1.1) and the accessible
 * name is what stops it being an unlabelled region in the landmark list.
 * Wrapping (rather than putting overflow on the table with display:block)
 * keeps native table semantics intact -- display:block on a <table> drops
 * them in Safari/VoiceOver.
 * ------------------------------------------------------------------ */

.typography .table-scroll {
  margin: var(--space-gap) 0;
  max-width: 100%;
  /* THE fix for the mobile break, and it is not the overflow property.
     A table reports a min-content width (its longest unbreakable content,
     plus these min-widths) and that number propagates up through every
     ancestor that sizes to its content -- a grid item defaults to
     min-width:auto, so .blog-layout__main grew to 672px and dragged the
     whole PAGE to 693px on a 375px viewport. max-width:100% cannot help:
     it resolves against a parent that has already been stretched. Inline
     size containment stops the table contributing to any ancestor's
     intrinsic width, so the overflow stays inside this box where the
     scrollbar is. blog.css also sets min-width:0 on the article column --
     belt and braces, and the one that carries pre-2022 browsers. */
  contain: inline-size;
  overflow-x: auto;
  overscroll-behavior-x: contain;  /* a fling inside the table must not
                                      navigate back / scroll the page */
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  background-color: var(--color-white);
  scrollbar-width: thin;
  scrollbar-color: var(--color-blue-light) var(--color-blue-lightest);
}

.typography .table-scroll:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Persistent scrollbar on desktop pointers: it is the affordance that says
   "there is more table this way". Touch platforms show theirs on contact. */
.typography .table-scroll::-webkit-scrollbar {
  height: 0.5rem;
}

.typography .table-scroll::-webkit-scrollbar-track {
  background-color: var(--color-blue-lightest);
  border-radius: var(--radius-pill);
}

.typography .table-scroll::-webkit-scrollbar-thumb {
  background-color: var(--color-blue-light);
  border-radius: var(--radius-pill);
}

/* Minimum readable column. Below this a prose cell breaks one word per
   line; above it the table simply fits and no scrollbar ever appears --
   the rule is self-regulating, which is why it needs no media query. */
.typography .table-scroll th,
.typography .table-scroll td {
  min-width: 10rem;
}

/* First column pinned: on a 4- or 5-column table the row you are reading
   loses its label the moment you scroll right. Sticky keeps it. It is a
   no-op on tables that fit. */
.typography .table-scroll th:first-child,
.typography .table-scroll td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 8rem;
}

/* Content passes UNDER a frozen column and re-emerges mid-word on the other
   side. That is how every frozen column behaves, but with only a hairline to
   mark the boundary it reads as a rendering fault rather than a pinned
   column. The soft falloff (spread-negative, so it casts to the right only)
   is the cue that says "there is a column behind this one".

   Gated on [data-scrollable], which chrome.js sets when the region actually
   overflows -- on a table that fits, the shadow would just be a stray
   divider after column one. Without JS the attribute never appears and the
   shadow never shows, which is the safe way round: the cue is missing, not
   wrong. */
.typography .table-scroll[data-scrollable] th:first-child,
.typography .table-scroll[data-scrollable] td:first-child {
  box-shadow: 10px 0 12px -8px rgba(32, 49, 52, 0.3);
}

/* The wrapper owns the outer border + radius, so the table must not draw a
   second one along the edges it shares. */
.typography .table-scroll table {
  border: 0;
}