/* Theme for golovizin.ru.
 *
 * The original site styled itself with Tailwind 1.x. Every rule below carries
 * the value the deployed stylesheet computed for it, so this file reproduces
 * the appearance of https://golovizin.ru/ without Tailwind. Rules are kept in
 * the original cascade order: normalize, then the Tailwind base layer, then the
 * project's own sheet.
 *
 * Only rules that apply to elements this site actually contain are kept. The
 * original also styled forms, sidebars, tables and code blocks, none of which
 * appear on any page.
 */

/* --- normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css --- */

html { line-height: 1.15; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
h1 { font-size: 2em; margin: .67em 0; }
a { background-color: transparent; }
b, strong { font-weight: bolder; }
img { border-style: none; }
/* The hamburger checkbox is hidden in every viewport, but it is still in the
 * document, so form controls have to inherit typography the way the original
 * reset made them. */
button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
  padding: 0;
  line-height: inherit;
  color: inherit;
}

[type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; }

/* --- base layer ---
 * The Tailwind base layer. It is load-bearing: it zeroes the padding of lists
 * and sets list-style-position: inside later on, which is why list markers sit
 * inline with the text. Restoring the browser defaults would visibly change the
 * look of every list on the site.
 */

html { box-sizing: border-box; font-family: sans-serif; }

*, *::before, *::after { box-sizing: inherit; }

h1, h2, h3, h4, h5, h6, p { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }

/* This is the stack the deployed site rendered. The project's tailwind.config.js
 * declares a different one, with Verdana and no Arial, but that override only
 * ever reached an unused .font-sans utility and never the <html> element. */
html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  line-height: 1.5;
}

/* The zero border width makes the border style irrelevant, which is why the
 * original contradicted itself about img borders without any visible effect. */
*, *::before, *::after { border: 0 solid #e2e8f0; }

h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }

audio, canvas, embed, iframe, img, object, svg, video { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }

/* --- theme --- */

html { font-size: 14pt; color: #1a202c; }

p { line-height: 1.5; margin-top: .75rem; margin-bottom: .75rem; }

h1, h2, h3, h4, h5, h6 { font-weight: 700; }
h1 { font-size: 2.25rem; margin-top: 1.5rem; }
h2 { font-size: 1.875rem; margin-top: 1rem; }
h3 { font-size: 1.5rem; margin-top: .5rem; }
h4 { font-size: 1.25rem; margin-top: .25rem; }

ul { list-style-type: disc; }
ol { list-style-type: decimal; }
ul, ol { list-style-position: inside; margin-left: 1rem; }
ul li, ol li { margin-top: .75rem; margin-bottom: .75rem; }

a { color: #3182ce; text-decoration: underline; }
a:hover { color: #2c5282; }

/* --- page frame ---
 * Replaces the utility classes "container mx-auto my-8". Tailwind's container
 * has no padding, so text runs flush to the viewport edge on narrow screens. */

.site {
  width: 100%;
  margin-top: 2rem;
  margin-bottom: 2rem;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 640px) {
  .site { max-width: 640px; }
}

@media (min-width: 800px) {
  .site { max-width: 800px; }
}

/* --- navigation ---
 * The hamburger menu is CSS only: a hidden checkbox and a label. The checkbox
 * stays hidden in every viewport; clicking the label toggles it.
 */

#page-nav {
  display: block;
  background-color: #276749;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

#page-nav ul { margin: 0; padding: 0; list-style-type: none; overflow: auto; }
#page-nav ul li { margin: 0; padding: 0; float: left; }
#page-nav ul li a {
  display: block;
  padding: .75rem;
  font-size: 1.125rem;
  color: #ffffff;
  text-decoration: none;
}
#page-nav ul li a:hover { background-color: #22543d; }
#page-nav ul li.selected a { background-color: #38a169; }

.menu-toggle { display: none; }
#page-nav input { display: none; }

@media screen and (max-width: 768px) {
  .menu-toggle {
    display: inline-block;
    font-style: normal;
    font-size: 1.2em;
    padding: 10px;
  }

  #page-nav ul li { display: block; float: none; border-top: 1px solid #22543d; }
  #page-nav ul { display: none; }
  #page-nav input:checked ~ ul { display: block; }
}