/* Site-wide header. One markup (templates/areaHeader.php) and one stylesheet for every page, modelled on the
   home page bar: full-width red band, text logo, uniform nav. Rules are prefixed with .site-header so they win
   over header/nav/#logo rules in hci-2013.css (home, research) and hci-test.css (section pages). 2026-10-07. */
.site-header { display: flex; align-items: center; box-sizing: border-box; height: 44px; margin: 0 0 12px; padding: 0 1.5%;
  background: #900; color: #fff; white-space: nowrap;
  font-family: "Gill Sans", Calibri, AvenirNext, Avenir, HelveticaNeue, Helvetica, Arial, Verdana, sans-serif; text-transform: uppercase; }
#centered-page .site-header { padding: 0 10px; }           /* section pages: same 10px inset as their content column */
.site-header #logo { display: block; float: none; width: auto; min-width: 0; height: auto; margin: 0; padding: 0;
  font-size: 32px; font-weight: 500; line-height: 1; letter-spacing: 0; }
.site-header #logo a, .site-header #logo a:hover { display: inline; padding: 0; color: #fff; text-decoration: none; }
.site-header nav { float: none; width: auto; height: auto; margin: 0 0 0 2.6em; padding: 0; line-height: normal;
  font-family: inherit; font-stretch: normal; font-size: 17px; font-weight: 300; text-align: left; }
.site-header nav ul { display: flex; flex-wrap: wrap; gap: 0 1.7em; width: auto; height: auto; margin: 0; padding: 0;
  list-style: none; line-height: normal; text-align: left; }
.site-header nav li, .site-header nav > ul > li:nth-child(n+5) { display: block; height: auto; max-width: none; margin: 0; padding: 0; line-height: normal; }
.site-header nav a, .site-header nav a:hover { display: inline-block; color: #fff; text-decoration: none; }
.site-header nav a:hover { text-decoration: underline; }
.site-header nav li.current a { font-weight: 500; }          /* the section you are on */

/* Section pages are centred in a 1320px column; on wider screens the red band extends to the viewport edges
   (absolute, anchored to the viewport because no ancestor is positioned) while the logo and nav stay aligned with the column. */
@media (min-width: 1321px) {
  .site-header::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 44px; background: #900; z-index: -1; }
}

/* Tablets: logo row, then nav row. */
@media (max-width: 1023px) {
  .site-header, #centered-page .site-header { flex-wrap: wrap; height: auto; padding: 9px 10px 8px; }
  .site-header #logo { width: 100%; font-size: 26px; }
  .site-header nav { width: 100%; margin: 7px 0 0; font-size: 15px; }
  .site-header nav ul { gap: 2px 1.2em; }
}

/* Phones. */
@media (max-width: 767px) {
  .site-header, #centered-page .site-header { white-space: normal; padding: 9px 14px 8px; }   /* phone content gutter is 14px */
  .site-header #logo { font-size: 22px; }
  .site-header nav { font-size: 12.5px; letter-spacing: .02em; }
  .site-header nav ul { gap: 4px 11px; }      /* all five links on one row at 375px */
}