/* Supplementary styles layered on top of the Illinois Toolkit (toolkit.css).
   The toolkit provides all branding, layout, header/footer, cards and buttons;
   this file only adds a few things the toolkit doesn't cover. */

/* Accessibility: visually hide content while keeping it available to screen
   readers (used for table captions and off-screen labels). */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Footer action buttons: the toolkit paints them UIUC orange (#ff5f05) with
   white text — only 3.05:1. Darken to Altgeld so white text passes WCAG AA. */
ilw-footer [slot="actions"] a,
ilw-footer [slot="actions"] button {
  background-color: var(--il-altgeld, #c84113) !important;
  border-color: var(--il-altgeld, #c84113) !important;
  color: #fff !important;
}

/* Data-caution callouts use Altgeld (a darker Illinois orange) with white text.
   White on #C84113 is 4.97:1 (passes WCAG AA); the bright-orange theme's white
   heading was only ~3:1 and navy body ~4.76:1 — both borderline. Text is forced
   white because navy on Altgeld fails (2.92:1). */
ilw-card.data-note { background: var(--il-altgeld, #C84113) !important; }
ilw-card.data-note :is(h3, p, a, strong, em) { color: #fff !important; }

/* Page-title banner image (banner.png) replaces the toolkit's Ascend pattern.
   The image is slotted into ilw-page-title's background; make it cover the band
   without distortion. object-position keeps the central chat window in frame. */
ilw-page-title img[slot="background"] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Align the default content column to the toolkit's width="page" column so
   prose, headings and lists share BOTH edges with the page-title, cards, orange
   callout and CTA. Without this the toolkit centres slotted content in a wider,
   differently-sized column, so text ended well short of the cards on the right
   and the page looked left-heavy on wide screens.
   The gutter formula max(1.875rem, calc(50% - 35.625rem)) reproduces the
   toolkit page column (71.25rem max content, 1.875rem min side margin); using
   it as BOTH inline margins makes these blocks exactly the page-column width. */
:root { --reading-gutter: max(1.875rem, calc(50% - 35.625rem)); }
/* !important is needed: the toolkit centres slotted content with a
   higher-specificity rule, which would otherwise win over these. */
ilw-content > :is(p, ul, ol, h2, h3, h4, blockquote) {
  margin-inline: var(--reading-gutter) !important;
}
/* Width must be reduced by BOTH gutters: the base rule sets width:100% (= full
   content-inner width), which combined with the gutter margins would overflow
   the viewport on the right. Sizing to (100% - 2 gutters) makes the table
   exactly the page column, matching the cards and prose. */
ilw-content > table.facts {
  width: calc(100% - 2 * var(--reading-gutter)) !important;
  margin-inline: var(--reading-gutter) !important;
}
ilw-content > ilw-breadcrumbs { display: block; margin-inline: var(--reading-gutter) !important; }

/* Tagline under each card/offering title */
.tagline {
  color: #605f5f;
  font-weight: 700;
  margin: -0.25rem 0 0.75rem;
}

/* "Best for" emphasis line */
.bestfor { margin-top: 0.75rem; }

/* Facts table on detail pages */
table.facts {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
}
table.facts th,
table.facts td {
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid #e2e2e6;
  vertical-align: top;
}
table.facts th {
  width: 13rem;
  white-space: nowrap;
  color: #13294b;
  font-weight: 700;
}

/* Colour each offering's title so the four are easy to tell apart. The h3 is
   slotted light-DOM content, so these rules apply reliably over the toolkit. */
.offer-card.llmhub h3       { color: #1d58a7; }
.offer-card.illinoischat h3 { color: #c84113; }
.offer-card.llmflux h3      { color: #006230; }
.offer-card.lumen h3        { color: #007e8e; }