/* ub/data-table — a real table for regulated disclosures.
   ==========================================================================

   Loaded only on pages carrying ub/data-table (see ub-elements.php).

   The design problem: CAEP accountability measures and Title II pass rates run
   to eight columns of numbers, and state licensure tables carry a paragraph in
   a single cell. Neither can be reflowed into cards without changing what the
   University has published, so the table stays a table and the LAYOUT absorbs
   the width instead.

   Wide tables therefore scroll inside .ub-table-scroll rather than pushing the
   page sideways. The page body must never scroll horizontally; a data table
   legitimately may.
   ========================================================================== */

.ub-table-sec {
  padding: var(--section-pad, 72px) 0;
  background: var(--white);
}

.ub-table-sec--dark {
  background: var(--bg-light);
}

/* Two tables in a row on the same tint are one run of content: the lower one
   drops its top padding so the seam is one section pad, not two (Chiropractic:
   ~300px of empty grey between the CCE tables). A tint change keeps both pads. */
.ub-table-sec:not(.ub-table-sec--dark) + .ub-table-sec:not(.ub-table-sec--dark),
.ub-table-sec--dark + .ub-table-sec--dark {
  padding-top: 0;
}

.ub-table-head {
  margin-bottom: 1.8rem;
}

.ub-table-head h2 {
  /* Display LG in UB Purple, like every other section head. */
  font-size: clamp(2.3rem, 4vw, 3.6rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.026em;
  margin: 0 0 0.6rem;
  color: var(--ub-purple);
}

.ub-table-head .section-lede {
  color: var(--text-light);
  line-height: var(--line-height-base, 1.6);
  margin: 0;
}

/* The scroll container is focusable (tabindex="0" in the renderer) so keyboard
   users can reach and pan a wide table. That focus must be visible. */
.ub-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(44, 62, 80, 0.14);
  border-radius: 0;
  background: var(--white);
}

.ub-table-scroll:focus-visible {
  outline: 3px solid var(--ub-blue);
  outline-offset: 2px;
}

.ub-table {
  width: 100%;
  min-width: 40rem;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-main);
}

/* Opt-in for tables whose columns should share the width evenly. Numeric
   reporting tables read better this way; a table with one prose column does
   not, which is why it is not the default. */
.ub-table--fixed { table-layout: fixed; }

/* A wide reporting table gets a minimum width so eight columns of numbers stay
   legible; .ub-table-scroll takes the overflow. Without this, "fixed" divides
   the container evenly and every column ends up too narrow to read. */
.ub-table--fixed { min-width: 46rem; }

.ub-table caption {
  caption-side: top;
  text-align: left;
  font-weight: 700;
  color: var(--text-main);
  padding: 0.95rem 1.05rem 0.75rem;
  border-bottom: 1px solid rgba(44, 62, 80, 0.1);
}

/* The caption is part of the table, so on a phone a table wider than the screen
   carried its sentence-long caption off the right edge until panned. Size it to
   the visible strip and pin it to the left so it wraps there and stays put while
   the columns scroll beneath. */
.ub-table-scroll { container-type: inline-size; }
.ub-table caption {
  position: sticky;
  left: 0;
  box-sizing: border-box;
  width: 100cqw;
}

.ub-table th,
.ub-table td {
  padding: 0.72rem 1.05rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(44, 62, 80, 0.09);
  overflow-wrap: break-word;
  word-break: normal;
}

/* Header labels WRAP. Title II columns carry names like "% pass rate (1st time
   test takers)" — eight of those cannot each hold one line, and nowrap under
   table-layout: fixed clips them rather than overflowing, so the label is
   silently truncated with no scrollbar to reveal it. Wrapping is the honest
   behaviour for a disclosure: the full column name has to be readable. */
.ub-table thead th {
  background: var(--bg-light);
  font-weight: 700;
  font-size: 0.83rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--ub-purple-dark);
  border-bottom: 2px solid rgba(89, 45, 130, 0.22);
  vertical-align: bottom;
  white-space: normal;
  /* Manual: automatic hyphenation split words that fitted ("ex-ams",
     "en-trance") at full width. overflow-wrap still breaks a word that
     cannot fit its column. */
  hyphens: manual;
}

/* A row header names the thing being measured — a program, a year, a term.
   Allow natural wrapping within its proportional <col> width so long program
   titles never squeeze neighboring prose columns. */
.ub-table tbody th[scope="row"] {
  font-weight: 700;
  color: var(--text-main);
  white-space: normal;
  overflow-wrap: break-word;
}

/* A phone number never breaks across lines ("203-576-" / "4104"). */
.ub-table td a[href^="tel:"] { white-space: nowrap; }

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

.ub-table tbody tr:nth-child(even) { background: rgba(244, 247, 246, 0.55); }

.ub-table-note,
.ub-table-source {
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-light);
}

.ub-table-source { font-style: italic; }

@media (max-width: 768px) {
  .ub-table { font-size: 0.86rem; }
  .ub-table th,
  .ub-table td { padding: 0.6rem 0.8rem; }
  /* table-layout: fixed plus a narrow viewport squeezes eight columns into
     unreadable slivers. Let the content set the width and let the container
     scroll instead. */
  /* Content sets the column widths on a phone. Under the fixed layout the
     percentage columns broke row headers mid-word ("Laborator y Science"). */
  .ub-table,
  .ub-table--fixed { table-layout: auto; }
  .ub-table thead th { white-space: normal; }
  /* A table of three columns or fewer fits a phone; the 40rem floor hid its
     second and third columns behind a sideways scroll with no cue. */
  .ub-table:not(:has(tr > :nth-child(4))) { min-width: 0; }
}

/* A group heading spanning the table — "Middle level education areas" in the
   CAEP program list. Distinct from a column header so it does not read as a
   second header row. */
.ub-table .ub-table-group th {
  background: rgba(89, 45, 130, 0.06);
  color: var(--ub-purple-dark);
  font-weight: 700;
  font-size: 0.84rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: normal;
}