/* E-Systems – site styles
   Colors are carried over unchanged from the original format.css / page markup. */

:root {
  --page:      #EEEEEE;  /* page + content background */
  --header:    #C1C1C1;  /* logo bar */
  --sidebar:   #445A6F;  /* menu background (behind pattern.jpg) */
  --text:      #333366;  /* body text */
  --accent:    #FFFF00;  /* menu hover + current page */
  --menu-link: #FFFFFF;
  --link:      #0000EE;
  --visited:   #551A8B;
  --es-blue:   #0080C0;  /* the "E" in "E-Systems" document links */
  --es-navy:   #000080;  /* the "-Systems" part */
}

*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--page);
  color: var(--text);
  font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
  font-size: 11pt;
  line-height: 1.55;
}

img { max-width: 100%; height: auto; }

/* ---------- header ---------- */
.site-header { background: var(--header); }
.site-header a { display: block; }
.site-header img { display: block; }

/* ---------- layout ---------- */
.layout {
  flex: 1;
  display: grid;
  grid-template-columns: 233px minmax(0, 1fr);
}

/* ---------- menu ---------- */
nav {
  background: var(--sidebar) url("images/pattern.jpg");
  padding: 33px 20px 24px 0;
}
nav ul { list-style: none; margin: 0; padding: 0; text-align: right; }
nav a {
  display: block;
  font-size: 10pt;
  line-height: 24px;
  color: var(--menu-link);
  text-decoration: none;
}
nav a:hover,
nav a:focus-visible { color: var(--accent); }
nav a[aria-current="page"] { color: var(--accent); font-weight: bold; }
nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- content ---------- */
main { padding: 22px 2rem 3rem; min-width: 0; }
.text { max-width: 46rem; }
.text::after { content: ""; display: block; clear: both; }

h1 {
  margin: 0 0 1.25rem;
  font-size: 1em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .03em;
}
p { margin: 0 0 1.1em; }
ul { margin: 0 0 1.1em; padding-left: 1.5rem; }
li { margin-bottom: .6em; }

main a { color: var(--link); }
main a:visited { color: var(--visited); }

figure { margin: 0; }
figure.side {
  float: right;
  margin: 0 0 1rem 2rem;
  max-width: 30%;
  text-align: center;
}
figure.side img { display: block; margin: 0 auto; }
figcaption { margin-top: .5rem; font-size: 9pt; }

.wide-figure { margin: 0 0 1rem; }

.notes {
  font-size: 9pt;
  margin-top: 1.5rem;
  padding-top: .75rem;
  border-top: 1px solid var(--text);
  max-width: 24rem;
}
.notes p { margin: 0 0 .4em; }

address { font-style: normal; margin: 0 0 1.1em; }

.board { list-style: none; padding-left: 0; }
.board li { margin-bottom: .3em; }

/* documents page */
.doclist { list-style: none; padding: 0; }
.doclist li { margin-bottom: 1.5em; }
.doclist p { margin: .2em 0 0; }
.doclist a {
  font-family: "Lucida Sans Unicode", "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
  font-style: italic;
  font-weight: bold;
}
.es-e    { color: var(--es-blue); }
.es-rest { color: var(--es-navy); }

/* ---------- home page ---------- */
body.home main { padding: 0; }
.hero { background: url("images/pattern.jpg"); }
.hero img { display: block; }
.featured { padding: 1rem 2rem 0; margin: 0; }

/* ---------- accessibility helpers ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--accent);
  color: #000;
  padding: .5rem 1rem;
  z-index: 10;
}
.skip-link:focus { left: 0; }

/* ---------- phones / narrow windows ---------- */
@media (max-width: 760px) {
  .layout { grid-template-columns: 1fr; }
  nav { padding: .5rem 1rem; }
  nav ul { display: flex; flex-wrap: wrap; gap: 0 1.1rem; text-align: left; }
  nav a { padding: .45rem 0; line-height: 1.3; }
  main { padding: 1.25rem 1rem 2.5rem; }
  .featured { padding: 1rem 1rem 0; }
  figure.side { float: none; max-width: 100%; margin: 0 0 1.25rem; }
}

/* ---------- print ---------- */
@media print {
  nav, .skip-link { display: none; }
  .layout { display: block; }
  body { background: #fff; }
}