/* Common article styles for damun-craft.com.
   Served from /assets/common/dmn.css and loaded on every page by the mu-plugin dmn-common.php.
   Everything is scoped to .dmn-article: the wrapper of a whole article, or the .explanation part of a tool article.
   Base look: the explanation of the slime chunk finder; font: the nether fortress finder.
   Some rules reset Cocoon's article styles (.article h2 background, .article h3 borders, table row stripes). */

/* Blogger's image links (.separator > a) carry inline side margins of 1em. With the theme's
   img { max-width: 100% } the image then sticks out on the right on phones. Not scoped: such
   images also sit outside .dmn-article (e.g. above the map art tool). */
.separator > a { margin-left: 0 !important; margin-right: 0 !important; }

.dmn-article {
  font-family: 'Ubuntu', 'Helvetica Neue', Arial, sans-serif;
  color: #212121;
  line-height: 2;
  text-align: left;
}

/* Headings */
.dmn-article h2 {
  font: 500 clamp(18px, 4.5vw, 22px)/1.4 'Ubuntu', 'Helvetica Neue', Arial, sans-serif;
  color: #000000;
  background: none;
  text-align: left;
  margin: 32px 0 12px;
  padding: 0 0 6px;
  border: 0;
  border-bottom: 2px solid #729c0b;
  border-radius: 0;
}
.dmn-article h2:first-child { margin-top: 0; }
.dmn-article h3 {
  font: 500 18px/1.4 'Ubuntu', 'Helvetica Neue', Arial, sans-serif;
  color: #000000;
  background: none;
  margin: 24px 0 8px;
  padding: 0 0 0 10px;
  border: 0;
  border-left: 4px solid #729c0b;
  border-radius: 0;
}

/* Text */
.dmn-article p { margin: 0 0 16px; }
.dmn-article ul, .dmn-article ol { margin: 0 0 16px; padding-left: 1.5em; }
.dmn-article ul { list-style: disc; }
.dmn-article ol { list-style: decimal; }
.dmn-article li { margin: 0 0 4px; }
.dmn-article a { color: #5c7d09; }
.dmn-article code {
  font-family: Consolas, Menlo, monospace;
  font-size: 0.9em;
  background: #f1f3f5;
  padding: 2px 6px;
  border-radius: 4px;
}

/* Tables (Blogger's image caption tables are layout only and excluded) */
.dmn-article table:not(.tr-caption-container) {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.6;
}
.dmn-article table:not(.tr-caption-container) tr:nth-of-type(n) { background: transparent; }
.dmn-article table:not(.tr-caption-container) th,
.dmn-article table:not(.tr-caption-container) td {
  border: 1px solid #cfd4da;
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.dmn-article table:not(.tr-caption-container) th { background: #f1f6e3; color: #000000; font-weight: 500; }
.dmn-article table:not(.tr-caption-container) td:first-child { background: #fafafa; }

/* Image with caption (Blogger's table layout) */
.dmn-article .tr-caption-container { margin: 0 auto 16px; border: 0; }
.dmn-article .tr-caption-container tr:nth-of-type(n) { background: transparent; }
.dmn-article .tr-caption-container td { border: 0; padding: 0; background: none; }
.dmn-article .tr-caption { font-size: 0.85em; color: #555555; text-align: center; line-height: 1.6; padding-top: 4px; }

/* Data tables (dmn-table): wide tables scroll sideways; numbers are centered */
.dmn-article .dmn-table-wrap { overflow-x: auto; margin: 0 0 16px; }
.dmn-article .dmn-table-wrap > table { margin-bottom: 0; }
.dmn-article .dmn-table td { text-align: center; white-space: nowrap; }
.dmn-article .dmn-table th { text-align: center; }
.dmn-article .dmn-table td:first-child { text-align: left; font-weight: bold; }
.dmn-article .dmn-table td.best { background: #e8f2d0; color: #3d5a00; font-weight: bold; }
.dmn-article .dmn-table.dmn-list td:last-child { text-align: left; white-space: normal; }
.dmn-article .dmn-table.dmn-armor td:first-child { white-space: normal; }
.dmn-article .dmn-table.dmn-wrap td { text-align: left; white-space: normal; }
.dmn-article .dmn-table.dmn-wrap td:first-child { width: 28%; }
@media (max-width: 480px) {
  .dmn-article table:not(.tr-caption-container) { font-size: 13px; }
  .dmn-article table:not(.tr-caption-container) th,
  .dmn-article table:not(.tr-caption-container) td { padding: 6px 5px; }
}

/* Small parts */
.dmn-article .dmn-sub { font-size: 0.85em; font-weight: normal; }
.dmn-article .dmn-note { font-size: 0.9em; color: #555555; }
.dmn-article .dmn-table-wrap + .dmn-note { margin-top: -8px; }
.dmn-article .dmn-disclaimer { margin-top: 32px; padding-top: 16px; border-top: 1px solid #dddddd; font-size: 0.85em; color: #666666; }
.dmn-article .dmn-code,
.dmn-article pre {
  font-family: Consolas, Menlo, monospace;
  background: #f4f4f4;
  border: 1px solid #dddddd;
  border-radius: 4px;
  padding: 0.8em;
  margin: 0 0 16px;
  overflow-x: auto;
  font-size: 0.85em;
  line-height: 1.4;
  white-space: pre;
}
.dmn-article .dmn-file { font-weight: bold; margin-bottom: 4px; }
.dmn-article .dmn-file + .dmn-code { margin-top: 0; }
.dmn-article .dmn-steps { background: #f7f9f2; border-left: 4px solid #729c0b; padding: 0.8em 1em 0.8em 2.2em; }
.dmn-article .dmn-download {
  margin: 1.2em 0;
  padding: 1em;
  border: 2px solid #729c0b;
  background: #f6faeb;
  text-align: center;
  font-size: 1.1em;
}