/* Site styling on top of the stock mkdocs theme.
 *
 * THE LEFT COLUMN IS DELETED. The stock theme puts a per-page table of contents in a
 * col-md-3 on the left, beside the top navbar that already carries the site nav. Eric,
 * 2026-09-05: "Do we need both left and top nav? Seems overly complicated and redundant.
 * Could probably just delete left nav - the pages aren't that complicated or long that we
 * need within page nav." There is exactly one col-md-3 in this theme and it is that column,
 * so hiding it by class is unambiguous. The main column is then widened to fill the row. */

.col-md-3 { display: none !important; }

.col-md-9 {
  flex: 0 0 100%;
  max-width: 100%;
}

/* Long prose wants a measure, not the full width of a monitor. The disease briefs are the
   longest pages on the site and are read start to finish. */
[role="main"] {
  max-width: 52rem;
}

[role="main"] h1 { margin-bottom: .6em; }

[role="main"] h2 {
  margin-top: 1.8em;
  padding-bottom: .2em;
  border-bottom: 1px solid #e6e6e6;
}

[role="main"] table {
  border-collapse: collapse;
  margin: 1em 0;
}

[role="main"] table td,
[role="main"] table th {
  padding: .4em .8em;
  border: 1px solid #e0e0e0;
  vertical-align: top;
}

[role="main"] table th { background: #f6f7f9; text-align: left; }

/* The "How this level was decided" disclosure on every brief. */
[role="main"] details {
  margin: .6em 0 1.4em;
  padding: .2em .9em;
  background: #fafbfc;
  border-left: 3px solid #d6dae0;
}

[role="main"] details > summary {
  cursor: pointer;
  padding: .45em 0;
  color: #44506a;
  font-size: .93em;
}

[role="main"] details[open] > summary { margin-bottom: .3em; }

[role="main"] details p { margin: .2em 0 .6em; font-size: .93em; color: #333; }

[role="main"] blockquote {
  border-left: 3px solid #c8cdd4;
  background: #fbfbfc;
  padding: .5em .9em;
  font-size: .94em;
}

/* ---------------------------------------------------------------------------
   THE SURVEY PAGE, added 2026-09-09.
   Several invitations went to spam, so the page has to be findable from cold and
   obvious once found. Eric: "make it a bright color or something so they see it.
   If we hide it and they navigate to another part of the site, they will never
   find it again."
   #5a3362 is the purple sampled from the SHIC logo; the amber is the call to
   action, deliberately not a brand colour so it reads as a button rather than
   as decoration.
   --------------------------------------------------------------------------- */

/* The nav item, matched ONLY by href, which is true at any depth: "survey/"
   from the root, "../survey/" from a section, "../../survey/" from a brief.
   AN EARLIER VERSION ALSO MATCHED :nth-child(2) TO CATCH THE SURVEY PAGE
   ITSELF, AND THAT WAS A MISTAKE -- against a browser-cached copy of a page
   built before this nav item existed, position 2 is a DIFFERENT link, so the
   highlight landed on "Definitions & Scope" and pointed people at the wrong
   page. A positional selector fails by mislabelling rather than by doing
   nothing. The survey page styles its own active item in a page-scoped <style>
   block in docs/survey.md instead, where it cannot be wrong about anything
   else. */
.navbar-nav > .nav-item > .nav-link[href$="survey/"] {
  background: #f0a020;
  color: #23150f !important;
  font-weight: 700;
  border-radius: 4px;
  padding-left: .95em;
  padding-right: .95em;
  margin: 0 .3em;
}

.navbar-nav > .nav-item > .nav-link[href$="survey/"]:hover {
  background: #ffc04d;
  color: #23150f !important;
}

/* The masthead: logo beside the page title. */
.survey-head {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  margin-bottom: .4rem;
}

.survey-head img {
  width: 190px;
  max-width: 45vw;
  height: auto;
}

/* The call to action. This replaces a bare heading followed by a naked URL,
   which Eric called crappy and was right about. */
.cta {
  margin: 1.8em 0;
  padding: 1.5em 1.6em 1.3em;
  background: #fbf7fc;
  border: 2px solid #5a3362;
  border-radius: 8px;
  text-align: center;
}

.cta-deadline {
  margin: 0 0 .2em;
  font-size: 1.28em;
  font-weight: 700;
  color: #5a3362;
  line-height: 1.35;
}

.cta-note { margin: 0 0 1.1em; font-size: .95em; color: #55505a; }

a.cta-button,
a.cta-button:link,
a.cta-button:visited {
  display: inline-block;
  padding: .75em 2.1em;
  background: #f0a020;
  color: #23150f;
  font-size: 1.18em;
  font-weight: 700;
  text-decoration: none;
  border-radius: 6px;
  border-bottom: 3px solid #c47c07;
}

a.cta-button:hover,
a.cta-button:focus {
  background: #ffc04d;
  color: #23150f;
  text-decoration: none;
}

.cta-url {
  margin: 1.1em 0 0;
  font-size: .88em;
  color: #55505a;
  line-height: 1.6;
}

.cta-url code {
  font-size: .95em;
  word-break: break-all;
  background: #fff;
  border: 1px solid #e2dae6;
  padding: .15em .4em;
}

/* The secondary material, as buttons rather than a buried table row. */
.matrow {
  display: flex;
  flex-wrap: wrap;
  gap: .7em;
  margin: 1.1em 0 1.6em;
}

a.matbtn,
a.matbtn:link,
a.matbtn:visited {
  display: block;
  flex: 1 1 15em;
  padding: .8em 1em;
  background: #fff;
  border: 1px solid #cbbed2;
  border-left: 5px solid #5a3362;
  border-radius: 5px;
  color: #2f2634;
  text-decoration: none;
  line-height: 1.4;
}

a.matbtn:hover { background: #fbf7fc; border-color: #5a3362; text-decoration: none; }
a.matbtn strong { display: block; color: #5a3362; font-size: 1.02em; }
a.matbtn span { font-size: .88em; color: #55505a; }