/*
 * Alternate Lite, fitted to the Chronicles.
 *
 * Loaded after the theme's own style.css. The theme was written for a short
 * blog with a five-word menu; this site is 144 long chapters under a two-level
 * menu of full-sentence titles, in Russian. Everything here is that difference
 * — nothing restyles what the theme already gets right.
 *
 * The menu is the theme's own .mmenu, driven by reaktion.js. Its breakpoint is
 * 7000px, so the menu is permanently in "mobile" mode: a vertical tree that
 * opens a section when its arrow is clicked. That is the behaviour this site
 * needs; the rules below only make a deep tree of long titles readable in a
 * 230px column.
 */

/* ---------- shell ---------- */

/* The theme sets 14px/300 — a light weight meant for short posts. Chapters
   here run to thousands of words in Cyrillic, where 300 goes thin and grey. */
body {
  font-size: 15px;
  font-weight: 400;
}

/* A 68% column at the theme's 1000px is ~680px — right for reading, but the
   article should not stretch past that on a wide screen either. */
#rightside .entry {
  max-width: 42em;
}

#leftside {
  margin-top: 60px;
}

#rightside {
  margin-top: 60px;
}

/* ---------- masthead in the left column ---------- */

#logo img {
  max-width: 130px;
  height: auto;
}

#logo h1 a,
#logo h1 {
  font-size: 28px;
  line-height: 34px;
  letter-spacing: 1px;
}

h2.site-description {
  font-size: 13px;
  line-height: 20px;
}

/* ---------- menu ---------- */

.mmenu {
  margin-top: 24px;
}

/* Titles here are sentences, not labels: they have to wrap, and the arrow
   needs a column of its own so it never lands on top of the text. */
.mmenu ul li a {
  padding: 7px 22px 7px 0;
  line-height: 1.35;
  letter-spacing: 0.4px;
}

.mmenu.mobile ul li span.arrow {
  top: 4px;
  right: 0;
  padding: 4px;
  color: #999;
}

.mmenu ul li ul {
  margin-left: 10px;
  padding-left: 8px;
  border-left: 1px solid #e2e2e2;
}

/* Second level: the chapter titles. Sentence case, quieter, still legible. */
.mmenu ul li ul li a,
.mmenu ul li:hover ul a {
  text-transform: none;
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: 0;
  color: #666;
  padding: 5px 0;
}

.mmenu ul li ul li a:hover,
.mmenu ul li:hover ul a:hover {
  color: #b32d2d;
}

/* Where the reader is now. The theme greys the current item, which on this
   site reads as "disabled" rather than "here". */
.mmenu ul li.current-menu-item > a,
.mmenu ul li.current-menu-item > a:hover,
.mmenu ul li ul li.current-menu-item > a {
  color: #b32d2d;
}

.mmenu ul li.current-menu-ancestor > a {
  color: #3f3f3f;
}

/* ---------- widgets under the menu ---------- */

#leftbar h3.widget-title {
  font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #3f3f3f;
  text-transform: uppercase;
  margin: 0 0 4px;
  letter-spacing: 0.5px;
}

#leftbar .widget-container {
  padding: 0;
  margin-bottom: 24px;
  list-style: none;
}

#leftbar .textwidget p {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.45;
}

/* ---------- article ---------- */

h1.entry-title {
  line-height: 1.25;
  margin-bottom: 24px;
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 12px;
}

/* A few pages are posts, whose heading is a link to itself. */
h1.entry-title a {
  color: inherit;
  text-decoration: none;
}

.entry h2,
.entry h3,
.entry h4 {
  line-height: 1.3;
  margin-top: 32px;
}

.entry p {
  margin: 0 0 14px;
}

.entry img,
.entry iframe,
.entry embed,
.entry object {
  max-width: 100%;
  height: auto;
}

/* Captured pages carry hard pixel widths on figures — wider than the column
   on a phone, and wider than the article on a laptop. */
.entry .wp-caption,
.entry figure {
  max-width: 100% !important;
  height: auto;
  margin: 18px 0;
}

.entry .wp-caption-text,
.entry figcaption {
  font-size: 12.5px;
  color: #777;
  line-height: 1.4;
  margin-top: 4px;
}

.entry blockquote {
  color: #555;
}

/* Some chapters are mostly tables of council members and dates. */
.entry table {
  border-collapse: collapse;
  max-width: 100%;
}

.entry table td,
.entry table th {
  border: 1px solid #e2e2e2;
  padding: 5px 8px;
  vertical-align: top;
}

/* A table that will not fit scrolls on its own rather than pushing the page. */
#content {
  overflow-x: auto;
}

/* Footnotes: every chapter ends in a long numbered list of sources. */
.simple-footnotes {
  margin-top: 32px;
  border-top: 1px solid #eaeaea;
  padding-top: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #666;
}

.simple-footnotes p.notes {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  margin-bottom: 4px;
}

.simple-footnotes ol {
  margin-left: 18px;
}

.simple-footnotes a {
  word-break: break-word;
}

a.simple-footnote {
  text-decoration: none;
}

/* ---------- footer ---------- */

#footer {
  border-top: 1px solid #eaeaea;
  margin-top: 20px;
  padding: 18px 0 40px;
}

#copyinfo {
  color: #999;
  font-size: 12.5px;
}

/* ---------- narrow screens ---------- */

@media screen and (max-width: 768px) {
  #leftside {
    margin-top: 30px;
    margin-bottom: 20px;
  }

  #logo {
    width: 100%;
  }

  /* reaktion.js moves #leftbar under the article here; the menu itself stays
     above it, folded, with the hamburger the theme draws. */
  .mmenu {
    margin-top: 0;
  }

  #rightside .entry {
    max-width: none;
  }
}

@media print {
  #leftside,
  #footer {
    display: none;
  }

  #rightside {
    width: 100%;
    float: none;
    margin: 0;
  }
}