/**
 * InTBIR typography.
 *
 * Source Sans 3 for headings, navigation and UI; Source Serif 4 for running
 * prose. The same superfamily, drawn to pair, which is why the two sit together
 * without the mismatch you get from combining unrelated faces.
 *
 * Body text moves from 15px/24px to 17px/1.6. The reviewer's complaint was that
 * the site is hard to read, and the size is most of that: swapping the typeface
 * alone would not have fixed it.
 *
 * These rules override legacy-customize.css, which sets Roboto 16px on body and
 * Roboto Condensed on headings, so this file must load after it.
 */

/* ---- Base ---- */

body {
  font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-size: 18.5px;
  line-height: 1.6;
  color: #2b2b2b;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Running prose in the serif. Scoped to content regions so it never reaches
   navigation, buttons, form labels or admin screens, where a serif would read
   as a mistake rather than a choice. */
.region-content p,
.node__content p,
.field--name-body p,
.post-content p,
.service-content p {
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-size: 18.5px;
  line-height: 1.62;
}

/* ---- Headings ---- */

h1, h2, h3, h4, h5, h6,
.page-title,
.widget.gsc-heading .title,
.post-title-carousal {
  font-family: 'Source Sans 3', system-ui, Arial, sans-serif;
  color: #1f1f1f;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1, .page-title { font-size: 38px; font-weight: 600; line-height: 1.18; }
h2 { font-size: 30px; font-weight: 600; line-height: 1.25; }
h3 { font-size: 24px; font-weight: 600; line-height: 1.3; }
h4 { font-size: 20px; font-weight: 600; line-height: 1.35; }
h5, h6 { font-size: 18px; font-weight: 600; line-height: 1.4; }

/* The theme sets these from Roboto Condensed at its own sizes; they are
   repeated here because the vendor selectors are more specific than a bare
   element selector. */
.widget.gsc-heading.style-1 .title { font-size: 32px; font-weight: 600; }
.widget.gsc-heading.style-2 .title { font-size: 26px; font-weight: 600; }

/* ---- Navigation ---- */

.navigation .gva_menu > li > a {
  font-family: 'Source Sans 3', system-ui, Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.navigation .gva_menu .sub-menu a {
  font-family: 'Source Sans 3', system-ui, Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
}

/* ---- Lists, tables, forms ---- */

.region-content li,
.node__content li {
  font-size: 18.5px;
  line-height: 1.6;
}

table { font-family: 'Source Sans 3', system-ui, Arial, sans-serif; font-size: 17px; }

/* Digits that line up in a column read better tabular. */
table td, table th { font-variant-numeric: tabular-nums; }

input, select, textarea, button,
.webform-submission-form label,
.form-item label {
  font-family: 'Source Sans 3', system-ui, Arial, sans-serif;
}

.webform-submission-form label { font-size: 15px; font-weight: 600; }

/* ---- Small print ---- */

.post-meta, .submitted, .field--name-field-last-reviewed,
.journal, figcaption {
  font-family: 'Source Sans 3', system-ui, Arial, sans-serif;
  font-size: 14.5px;
  color: #615c58;
}

/* ---- Narrow screens ---- */

@media (max-width: 767px) {
  body { font-size: 17.5px; }
  h1, .page-title { font-size: 30px; }
  h2 { font-size: 25px; }
  h3 { font-size: 21px; }
  .region-content p,
  .node__content p { font-size: 17.5px; }
}

/* ---- Measure ----
   Running prose was setting to about 140 characters a line at desktop width,
   roughly twice what is comfortable: the eye loses its place on the return
   sweep. Capping the text column near 75 characters is the other half of the
   readability fix, alongside the size increase.

   Applied to paragraphs and lists rather than their container, so tables,
   figures, galleries and the page-builder's own multi-column rows keep the
   full width they are designed for. */
.field--name-body > p,
.field--name-body > ul,
.field--name-body > ol,
.field--name-body > h2,
.field--name-body > h3,
.field--name-body > h4,
.node__content > p,
/* Page-builder pages put their prose in .column-content. Only full-width
   columns are capped: a two- or three-column row is already narrow, and
   capping it again would leave the text hugging one edge. */
.gsc-column.col-md-12 .column-content > p,
.gsc-column.col-md-12 .column-content > ul,
.gsc-column.col-md-12 .column-content > ol,
.gsc-column.col-md-12 .column-content > h2,
.gsc-column.col-md-12 .column-content > h3,
.gsc-column.col-md-12 .column-content > h4 {
  /* Full width with a 20px gutter either side.

     Note this sets running prose to roughly 130 characters a line at desktop
     width, well past the 65-75 typographic convention: at that length the eye
     can lose which line it came from on the return sweep. Kept because it was
     asked for, and because it matches how the rest of the site's blocks fill
     the container. */
  max-width: none;
  /* The gutter is set with a negative margin against equal padding so the text
     still lines up with the page title, which sits at the container edge.
     Padding alone shifted every paragraph 20px right of the heading. */
  padding-left: 20px;
  padding-right: 20px;
  margin-left: -20px;
  margin-right: -20px;
}



/* ---- Keep widget text in the sans ----
   The serif is for running prose. Page-builder widgets - icon boxes, cards,
   counters, calls to action, carousels - are short promotional summaries with
   a link, and they read as a mistake in a body serif. The rule above catches
   any <p> inside a column, so these are put back explicitly. */
.widget p,
.widget .desc,
.gsc-icon-box p,
.gsc-box-info p,
.gsc-call-to-action p,
.gsc-carousel-content p,
.post-content p,
.service-content p,
.gsc-counter p {
  font-family: 'Source Sans 3', system-ui, Arial, sans-serif;
}

/* Widget blurbs sit in narrow cards already, so the prose measure would fight
   the column width the layout gives them. */
.widget p,
.widget .desc {
  max-width: none;
}