/* How a rendered body looks on the 'sjol' site.
 *
 * This file is committed and it is yours. ,web-tcm-add writes it once and never
 * again — a re-run to take a newer TCM leaves whatever you have made of it.
 *
 * TCM serves it at /tcm/style.css and reads none of it. The site's own page
 * links that URL, in web/src/index.html:
 *
 *     <link rel="stylesheet" href="/tcm/style.css">
 *
 * The editor's View column links the same URL, which is what makes one edit
 * here change the preview and the page together.
 *
 * Everything is scoped under `.tcm`, because that is the wrapper the site puts
 * a rendered body in — see renderContent() in web/src/pages/content.ts:
 *
 *     <div class="tcm">…the fragment TCM rendered…</div>
 *
 * The editor's preview wraps the fragment in the same div, so a selector means
 * the same thing in both places. Two rules follow from that, and breaking
 * either is how the preview starts lying:
 *
 *   - Nothing may depend on an ancestor above `.tcm`. On the site there is a
 *     whole page up there; in the preview there is nothing.
 *   - `.tcm` sets the inherited basics — font, line height, colour — itself.
 *     On the site they would otherwise come from the site's own body, which the
 *     preview does not have.
 *
 * Which is why the values below deliberately repeat what web/src/css/for-all.css
 * says for `body.um` and `.um h1`. On the page either rule may win — they have
 * the same specificity and the site's stylesheet is linked second — and the
 * result is the same because they agree. In the preview only these apply. If
 * you change a heading here, change it there too, or the preview drifts.
 */

.tcm {
  font-family: "Droid Sans", sans-serif;
  line-height: 1.5em;
  color: #000;
  /* What #z-content gives the content on the page. */
  max-width: 750px;
}

/* HEADINGS — mirroring `.um h1`…`.um h4`.
 *
 * The h1 is the item's title, put there by the renderer whichever way the
 * author wrote it, so no page adds a heading of its own above a body. */
.tcm h1 {
  font-size: 1.7em;
  margin: 100px 0 60px 0;
  letter-spacing: 2px;
  line-height: 1.7em;
}

.tcm h2 {
  font-size: 1.5em;
  margin: 60px 0 20px 0;
  letter-spacing: 1px;
}

.tcm h3 {
  font-size: 1.1em;
  margin: 40px 0 15px 0;
  letter-spacing: 1px;
}

.tcm h4 {
  margin: 30px 0 15px 0;
  letter-spacing: 1px;
}

/* A heading is a link target: every one carries an id, and `?scrollto=` on this
   site's own hash links to them. A reader arriving at one should not find it
   hard against the top of the window. */
.tcm :is(h1, h2, h3, h4) { scroll-margin-top: 1rem; }

/* A float taken out of the flow still has to stop before the next heading. */
.tcm :is(h1, h2, h3, h4) { clear: both; }

/* TEXT */

.tcm a:link,
.tcm a:visited,
.tcm a:hover {
  color: #000;
  text-decoration: underline;
}

.tcm ul {
  list-style-type: none;
  padding-left: 10px;
  padding-top: 0;
  padding-bottom: 4px;
}

.tcm hr {
  border: 1px solid rgba(0, 0, 0, 0.09);
  margin: 30px 0;
}

.tcm blockquote {
  border-left: 3px solid #8884;
  padding-left: 1em;
  margin-left: 0;
  color: #555;
}

/* Two block shapes the older content uses, written as HTML in the body: a
   quoted passage, and the text of a rule. */
.tcm div.speech,
.tcm div.speach {
  display: block;
  font-family: "Droid Sans Mono", monospace;
  font-size: 0.9em;
  padding: 10px 20px;
  background: #f7f7f7;
  margin: 40px 0;
}

.tcm div.rule {
  display: block;
  font-family: "Droid Sans Mono", monospace;
  font-size: 0.9em;
  padding: 5px 10px;
  background: #f7f7f7;
  margin: 20px 0;
}

/* TABLES
 *
 * TCM emits a plain <table>. The site's own stylesheet reaches these on the
 * page; these rules are what the preview has, and what the shaded rows come
 * from in both. */
.tcm table {
  border-collapse: collapse;
  margin-bottom: 20px;
}

.tcm table tbody tr { border: 1px solid #ddd; }
.tcm table tbody tr:nth-child(odd) { background-color: #f2f2f2; }

.tcm :is(th, td) {
  padding: 5px 10px;
  text-align: left;
  white-space: nowrap;
}

/* PICTURES
 *
 * A captioned image is a <figure>; an uncaptioned one is a bare <img> in a
 * paragraph. Almost every picture in this site's content is uncaptioned —
 * `![|right](…)` — so every rule below is written for both shapes, and the two
 * selectors `.tcm figure` and `.tcm p > img` never match the same element.
 *
 * The layout classes land on the outermost element, which is the figure when
 * there is one: floating the image alone would leave its caption behind at the
 * old width.
 *
 * Sized by height rather than width on purpose: these sit beside text, and what
 * has to stay even down a page of them is how far a picture reaches down the
 * column, not how far across.
 */

/* The picture itself, inside a figure or on its own. */
.tcm figure img,
.tcm p > img {
  height: 150px;
  width: auto;
  max-width: 100%;
  border-radius: 5px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

/* The default placement: floated left, the text closing round it. */
.tcm figure,
.tcm p > img {
  float: left;
  margin: 5px 0 15px 15px;
}

.tcm figcaption {
  font-style: italic;
  font-size: 0.9em;
  position: relative;
  top: 0;
  left: 5px;
}

/* The names in `image_classes:` in tcm.yaml. That list is the menu the editor
   offers; these rules are what the names mean, and there is nowhere else they
   mean anything. A name added there without a rule here does nothing.

   They are grouped there into three axes — placement, size, edge — and the
   grouping is a fact about these rules: `standalone` and `right` both set
   `float`, so a picture carrying both would be decided by the order below
   rather than by anybody's intention. Each axis has an unnamed default, which
   is what the two base rules above already give: floated left, 150px tall. */

/* On a line of its own, the text starting again below it. */
.tcm figure.standalone,
.tcm p > img.standalone {
  display: block;
  float: none;
  margin: 25px 15px 25px 0;
}

/* Floated the other way. */
.tcm figure.right,
.tcm p > img.right {
  float: right;
  margin-left: 15px;
  margin-right: 0;
}

/* Twice the height, for a picture that is the point of the paragraph. */
.tcm figure.big img,
.tcm p > img.big {
  height: 350px;
}

/* Smaller than the default, for a badge or a mark that says what it is at any
   size. A logo at 150px sits like a photograph and reads like a mistake. */
.tcm figure.small img,
.tcm p > img.small {
  height: 90px;
}

/* For a picture with its own white edge, where a drop shadow reads as dirt. */
.tcm figure.noshadow img,
.tcm p > img.noshadow {
  box-shadow: none;
}

/* NARROW SCREENS
 *
 * Below this width there is no room beside a picture for the text that would
 * wrap around it, so nothing floats. */
@media (max-width: 470px) {
  .tcm figure,
  .tcm figure.right,
  .tcm figure.standalone,
  .tcm p > img,
  .tcm p > img.right,
  .tcm p > img.standalone {
    float: none;
    margin: 5px 0 15px 0;
  }
}