/* What this build adds to the old theme's stylesheets, which load before it
   unchanged (main.min.css, custom.css, theme.css): the menu, whose branches
   are <details> now, made to look and behave like the old checkbox tree; and
   the text, whose HTML now comes from the CMS editor rather than Kirby. */

/* The old site loaded a Font Awesome kit after its own stylesheet, so the
   icons were drawn with Font Awesome 4.6.3 rather than the 4.2 file the theme
   bundles. The two differ slightly in their metrics; this keeps 4.6.3. */
@font-face {
  font-family: FontAwesome;
  src: url(../fonts/fontawesome-webfont-4.6.3.woff2) format("woff2"),
    url(../fonts/fontawesome-webfont-4.6.3.woff) format("woff");
  font-weight: 400;
  font-style: normal;
}

.summary__branch > summary {
  position: relative;
  list-style: none;
}

.summary__branch > summary::-webkit-details-marker {
  display: none;
}

/* The marker sits on the link, as before: a plus in a square when shut, a
   minus when open. */
.summary__branch > summary > a::before {
  font-family: FontAwesome;
  content: "\f196";
}

.summary__branch[open] > summary > a::before {
  content: "\f147";
}

/* The old theme indented childless entries with a:last-child; a branch's link
   is now the last child of its summary, so it must not pick that up. */
li.summary__item > .summary__branch > summary > a {
  margin-left: 0;
}

/* Clicking the marker opens and closes the branch, where the hidden checkbox
   used to sit; the rest of the line is the link. */
.summary__branch > summary::before {
  content: "";
  position: absolute;
  top: 0.7em;
  left: -0.2em;
  z-index: 2;
  width: 1.1em;
  height: 1.1em;
  cursor: pointer;
}

.summary__item--active > .summary__branch > summary > a {
  font-weight: 700;
  color: #f45555;
}

/* The page title is an <hgroup> so that a subtitle can sit under it, above
   the red line. The theme's .page__headline styles the group. */
.page__headline h2 {
  margin: 0;
  font-size: inherit;
}

.page__subtitle {
  margin: 0.25rem 0 0;
  font-size: 2rem;
  letter-spacing: normal;
}

/* The text's headings are one level lower than Kirby's were (the editor's
   top level is h2), and each keeps the look of the level it used to be. */
.page__content h2 {
  font-size: 2rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  margin: 0 0 2rem;
}

.page__content h3 {
  font-size: 1.75rem;
  margin: 2rem 0;
}

.page__content h4 {
  font-size: 1.5rem;
  margin: 2rem 0 1.5rem;
}

/* The editor puts each list item's text in a paragraph. */
.page__content li > p {
  margin-bottom: 0;
}

/* Publication details are a paragraph or two in the CMS; the box holds them
   as it held bare text, after a copyright sign. */
.publication-information p {
  margin: 0;
}

.publication-information p:first-child::before {
  display: inline-block;
  margin-right: 0.25em;
  font-family: FontAwesome;
  line-height: 1;
  content: "\f1f9" / "";
}

/* The PDF and Линк к статье buttons (.pdf_link and .text_link in theme.css)
   share a row under the box. */
.page__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1rem;
}

.page__links a {
  flex: 0 1 200px;
  margin: 0;
}

/* Paragraph styles offered in the editor, beside .epigraph in theme.css.
   Verse is centred on its longest line. */
.page__content .verse {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.page__content .signature {
  text-align: right;
}

/* An image is a block of its own now. Kirby's sat in a paragraph and took
   its spacing, so its captioned figure gets the same space below. */
.page__content > figure.captionjs {
  margin-bottom: 1rem;
}

/* The front page's photograph, a strip cropped from the right. */
.page__content .home-image {
  display: block;
  width: 90%;
  max-width: none;
  height: 600px;
  margin: 0 auto;
  object-fit: cover;
  object-position: right;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}