/* Accessibility fixes layered over the archived History Matters styles (chnm/sustainability#120). */

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 10000; padding: 8px 12px; background: #fff; color: #3a4592; border: 2px solid #3a4592; font: 14px/1.4 sans-serif; }
.skip-link:focus { left: 8px; top: 8px; }
:focus-visible { outline: 2px solid #3a4592 !important; outline-offset: 2px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the banner inherits each section's body styles (hm_search_style.css centers all text);
   pin it to the home page look, with links that stand apart from the banner text */
.archive-notice { text-align: left; color: #3a4592; }
.archive-notice a, .archive-notice a:visited { color: #1a4d8f !important; text-decoration: underline !important; }

/* 2.5.8: the quizzes' radio buttons are 13px by default */
input[type="radio"], input[type="checkbox"] { width: 24px; height: 24px; margin: 2px 6px 2px 0; vertical-align: middle; }

/* 1.4.10: the fixed-width layouts linearize on narrow screens. Data tables (header cells in their own rows) keep their grid and scroll. */
@media (max-width: 800px) {
  body { margin: 8px; overflow-wrap: anywhere; }
  nobr { white-space: normal; }
  #container, #header, #sub_header, #search_boxes, #content_area, div[id], div[class], div[style*="width"] { width: auto !important; max-width: 100%; float: none !important; position: static !important; margin-left: 0 !important; margin-right: 0 !important; }
  table:not(:has(> * > tr > th)), table:not(:has(> * > tr > th)) > tbody, table:not(:has(> * > tr > th)) > * > tr, table:not(:has(> * > tr > th)) > * > tr > td { display: block; width: auto !important; height: auto !important; }
  table:has(> * > tr > th) { display: block; overflow-x: auto; }
  img, video, iframe, embed, object, textarea, input, select { max-width: 100%; }
  img { height: auto; margin-left: 0 !important; margin-right: 0 !important; }
  img[usemap] { max-width: none; }
  :has(> img[usemap]), :has(> a > img[usemap]) { overflow-x: auto; }
  pre { white-space: break-spaces; }
  blockquote { margin-left: 8px; margin-right: 0; }
  .archive-notice { flex-wrap: wrap; }
}