/* =========================================================================
   Pricing Block – v2  (replaces icp_pricing_patch.css)
   -------------------------------------------------------------------------
   Targets:  table#pricing  AND  any table inside a .cost-matrix blade
   Handles:  2, 3 or 4 column tables (EMT / Paralegal / standard)
             header as first <tr> of <td>s, or a real <thead>/<th>
             Info / Apply buttons in any row (AI, Accounting, Sports Mgmt,
             Tech Mgmt, BCBA, Behavior Supports)
             colspan footnote rows (Tech Mgmt)
             inline width styles pasted from WYSIWYG (Behavior Supports)
             page-level ".cost-matrix tr { height: 2.5em }" (AI page)
             legacy "Public: " colon labels from icp_live / icp_mobile_*
             teal hover colour from program_pages_spotlights
   Optional: icp_pricing_labels.js adds data-label (real header text),
             .is-empty cells and .is-action-row rows. Everything below
             works without it, the JS just makes mobile labels exact.
   ========================================================================= */

/* ---------- Shared (all widths) ---------- */
.cost-matrix {
  background: #1583be;
  color: #fff;
}

.cost-matrix h2 {
  color: #fff;
}

:is(table#pricing, .cost-matrix table) {
  background: none !important;
  border: 0;
  margin-left: 0 !important;
  width: 100%;
}

/* Theme sets 1.2em / 22px here and the root font is 10px, so use px */
:is(table#pricing, .cost-matrix table) :is(thead, tbody) {
  font-size: 18px !important;
  line-height: 1.4;
  color: #fff;
}

:is(table#pricing, .cost-matrix table) tr {
  background: none !important; /* kill .table-striped / nth-child(2n) */
  height: auto !important;     /* some pages inline ".cost-matrix tr { height: 2.5em }" */
}

:is(table#pricing, .cost-matrix table) :is(th, td) {
  color: #fff;
  font-weight: 400;
  border: 0;
  box-sizing: border-box;
  height: auto;
}

/* Header row text */
:is(table#pricing, .cost-matrix table) :is(thead tr, tbody tr:first-child) :is(th, td),
:is(table#pricing, .cost-matrix table) th {
  font-weight: 700;
}

/* Category names (first column of data rows) */
:is(table#pricing, .cost-matrix table) tr :is(th, td):first-child {
  font-weight: 700;
}

/* Text links (e.g. BCBA "*25% Discount…") */
body :is(table#pricing, .cost-matrix table) a:not(.btn) {
  color: #fff !important;
  font-size: 16px;
  font-weight: inherit !important; /* no bold-on-hover layout shift */
  text-decoration: underline;
}

/* Info / Apply buttons — `body` prefix beats program_pages_spotlights'
   teal  table#pricing a.btn.btn-secondary.int-info:hover */
body :is(table#pricing, .cost-matrix table) a.btn {
  display: inline-block;
  background: none !important;
  border: 2px solid #fff;
  color: #fff !important;
  font-size: 16px;
  font-weight: 400 !important;
  padding: 12px 40px;
  white-space: nowrap;
}

body :is(table#pricing, .cost-matrix table) a.btn:is(:hover, :focus-visible) {
  background: #fff !important;
  color: #15385e !important;
}

/* Footnotes inside a colspan row */
:is(table#pricing, .cost-matrix table) tr :is(th, td)[colspan] {
  font-weight: 400;
}

:is(table#pricing, .cost-matrix table) td[colspan] :is(p, sub, sup) {
  color: #fff;
}

:is(table#pricing, .cost-matrix table) td[colspan] p {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.45;
}

:is(table#pricing, .cost-matrix table) td[colspan] sub {
  font-size: inherit;
  vertical-align: baseline;
}

/* ---------- Mobile (< 768px): stacked cards ---------- */
@media (max-width: 767.98px) {
  :is(table#pricing, .cost-matrix table),
  :is(table#pricing, .cost-matrix table) :is(thead, tbody, tr) {
    display: block !important;
    width: 100% !important;
  }

  /* Hide header row visually (kept for screen readers) */
  :is(table#pricing, .cost-matrix table) thead,
  :is(table#pricing, .cost-matrix table) tbody tr:first-child:not(:has(td[colspan])) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  :is(table#pricing, .cost-matrix table) tr {
    margin: 0 !important;
    padding: 14px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  }

  :is(table#pricing, .cost-matrix table) tr:last-child {
    border-bottom: 0 !important;
  }

  /* flow-root (not flex) so prices with inner markup like
     $1,149-$1250<sup>**</sup> or $<span>525</span> stay together */
  :is(table#pricing, .cost-matrix table) tr :is(th, td) {
    display: flow-root !important;
    width: 100% !important;          /* beats inline style="width: 58px" */
    padding: 4px 8px !important;
    text-align: right !important;
  }

  /* Category name */
  :is(table#pricing, .cost-matrix table) tr :is(th, td):first-child {
    display: block !important;
    text-align: left !important;
    padding-bottom: 8px !important;
  }

  /* Column labels. !important so the legacy "Public: " colon rules
     in icp_live / icp_mobile_responsiveness can't win on rows 2, 3, last */
  :is(table#pricing, .cost-matrix table) tr :is(th, td):nth-child(n+2)::before {
    float: left !important;
    margin-right: 12px !important;
    font-weight: 700;
    text-align: left;
  }

  :is(table#pricing, .cost-matrix table) tr :is(th, td):nth-child(2)::before { content: "Public" !important; }
  :is(table#pricing, .cost-matrix table) tr :is(th, td):nth-child(3)::before { content: "UCSB Students" !important; }
  :is(table#pricing, .cost-matrix table) tr :is(th, td):nth-child(4)::before { content: "International" !important; }

  /* Exact header text when the helper JS (or an editor) adds data-label */
  :is(table#pricing, .cost-matrix table) tr :is(th, td)[data-label]:nth-child(n+2)::before {
    content: attr(data-label) !important;
  }

  /* Truly empty cells (or .is-empty from the helper JS) */
  :is(table#pricing, .cost-matrix table) tr :is(th, td):is(:empty, .is-empty) {
    display: none !important;
  }

  /* Action rows: blank first cell + buttons (Behavior Supports, Tech Mgmt,
     BCBA footer). The helper JS flags them; :has() covers the common
     BCBA / Behavior Supports pattern of a last row whose 2nd cell has
     no price. */
  :is(table#pricing, .cost-matrix table) tr.is-action-row :is(th, td):first-child {
    display: none !important;
  }

  /* Legacy footer row (BCBA / Behavior Supports): last row with a link and
     no category. Hide the label + empty filler cells, left-align content. */
  :is(table#pricing, .cost-matrix table) tr:last-child:has(a):not(:has(td[colspan])) :is(th, td)::before {
    content: none !important;
  }

  :is(table#pricing, .cost-matrix table) tr:last-child:has(a):not(:has(td[colspan])) :is(th, td):is(:first-child, :nth-child(2):not(:has(a))) {
    display: none !important;
  }

  :is(table#pricing, .cost-matrix table) tr:last-child:has(a):not(:has(td[colspan])) :is(th, td):not(.is-empty) {
    display: block !important;
    text-align: left !important;
  }

  /* Button inside a normal price row (AI / Accounting / Sports Mgmt):
     keep the "International" label, button on the right */
  :is(table#pricing, .cost-matrix table) td a.btn {
    margin: 4px 0;
  }

  :is(table#pricing, .cost-matrix table) tr:last-child:has(a) a.btn {
    margin-top: 8px;
  }

  /* Colspan footnote row: full width, no label, left aligned */
  :is(table#pricing, .cost-matrix table) tr :is(th, td)[colspan] {
    display: block !important;
    text-align: left !important;
    padding-top: 8px !important;
  }

  :is(table#pricing, .cost-matrix table) tr :is(th, td)[colspan]::before {
    content: none !important;
  }
}

/* ---------- Tablet & desktop (>= 768px): real table ---------- */
@media (min-width: 768px) {
  :is(table#pricing, .cost-matrix table) {
    display: table !important;
    table-layout: fixed;
    border-collapse: collapse;
  }

  :is(table#pricing, .cost-matrix table) thead { display: table-header-group !important; }
  :is(table#pricing, .cost-matrix table) tbody { display: table-row-group !important; width: auto !important; }

  :is(table#pricing, .cost-matrix table) tr {
    display: table-row !important;
    position: static !important;
    padding: 0 !important;
    border: 0 !important;
  }

  :is(table#pricing, .cost-matrix table) tr :is(th, td) {
    display: table-cell !important;
    width: auto !important;          /* beats inline style widths */
    vertical-align: middle;
    text-align: center !important;
    padding: 14px 12px !important;
  }

  /* Category column wider; price columns share the rest evenly */
  :is(table#pricing, .cost-matrix table) tr :is(th, td):first-child {
    width: 34% !important;
    text-align: left !important;
  }

  /* 2-column tables (EMT): give the price column a sensible width */
  :is(table#pricing, .cost-matrix table) tr:first-child:has(> :last-child:nth-child(2)) :is(th, td):first-child {
    width: 66% !important;
  }

  /* Divider lines above every data row (not the header, not footnotes) */
  :is(table#pricing, .cost-matrix table) tbody tr:not(:first-child) :is(th, td):not([colspan]),
  :is(table#pricing, .cost-matrix table) thead + tbody tr:first-child :is(th, td):not([colspan]) {
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
  }

  /* …except rows that only hold buttons */
  :is(table#pricing, .cost-matrix table) tr.is-action-row :is(th, td),
  :is(table#pricing, .cost-matrix table) tr:last-child:has(a):not(:has(td[colspan])) :is(th, td) {
    border-top: 0 !important;
    vertical-align: top;
    padding-top: 20px !important;
  }

  :is(table#pricing, .cost-matrix table) tbody tr:first-child :is(th, td) {
    padding-bottom: 10px !important;
  }

  /* Colspan footnote row */
  :is(table#pricing, .cost-matrix table) tr :is(th, td)[colspan] {
    text-align: left !important;
    padding-top: 20px !important;
  }

  /* No mobile labels on desktop (also neutralises legacy colon rules) */
  :is(table#pricing, .cost-matrix table) tr :is(th, td)::before {
    content: none !important;
    float: none !important;
  }

  body :is(table#pricing, .cost-matrix table) a.btn {
    padding: 12px 24px;
  }
}

/* ---------- Desktop (>= 1200px) ---------- */
@media (min-width: 1200px) {
  /* Keep each price range on one line */
  :is(table#pricing, .cost-matrix table) tr :is(th, td):not(:first-child):not([colspan]) {
    white-space: nowrap;
  }

  body :is(table#pricing, .cost-matrix table) a.btn {
    padding: 12px 40px;
  }
}