/* ==================================================================
   mwd2026 — SITE-LOCAL STYLES
   ==================================================================

   Put every site-specific style and override in THIS file.

   This file is yours. It is not part of the template package, so
   installing a new mwd2026 zip will never overwrite or remove it.
   css/template.css, by contrast, IS replaced on every install — do not
   edit that one for site-specific work, or you will lose the changes.

   It is loaded immediately after template.css, so a rule here beats the
   template's rule at equal specificity. Prefer matching the template's
   selector exactly over reaching for !important.

   Use the template's custom properties rather than literal values, and
   never a px font-size — sizes come from the --fs-* scale defined in
   section 1 of template.css:

     .t-page-title { font-size: var(--fs-1400); }

   Re-pointing a design token in :root changes it everywhere at once, which
   is usually better than overriding the same colour rule by rule.

   ================================================================== */

/* ---- pagehead ****  */
.t-pagehead {
  height:200px;
}
/* ==================================================================
   CONTACT US — photo / bio grid
   ==================================================================

   Recovered from the deployed template.css on 2026-07-31 and moved here
   so it survives template upgrades. These four items were the only
   difference between the deployed stylesheet and the mwd2026 package.

   Only the CHANGED properties are repeated below. Everything else in
   these rules still comes from section 9 of template.css — the selectors
   are identical, so equal specificity applies and this file, loading
   second, wins.
   ================================================================== */

/* Was gap: 1rem — more separation between people. */
div.contact_us_info div.contact_us_photos_and_bios {
  gap: 2rem;
}

/* Was a fixed two-column grid (1fr 1fr), which squashed the photo and the
   bio side by side on narrow screens. auto-fit + minmax lets the columns
   drop to a single stack once they can no longer hold 160px.
   align-items: center is new — it vertically centres the photo against
   the bio text instead of top-aligning it. */
div.contact_us_info div.contact_us_photos_and_bios .contact_bio {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  align-items: center;
}

/* Was justify-content: flex-end. Once the grid can wrap to one column, a
   right-aligned photo looks misplaced; centred reads correctly in both
   the one- and two-column states. */
div.contact_us_info div.contact_us_photos_and_bios .contact_bio .contact_bio_picture {
  justify-content: center;
}

/* NEW — no equivalent in template.css. Keeps the portrait inside its
   column and stops it distorting as the column resizes. */
div.contact_us_info div.contact_us_photos_and_bios .contact_bio_picture img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}