/* Color palette - matching original snakeskin theme */
:root {
  --snakeskin-dark-grey: #7A7671;
  --snakeskin-medium-grey: #B5AFA7;
  --snakeskin-light-grey: #D7D2C9;
  --snakeskin-dark-beige: #CCB588;
  --snakeskin-light-beige: #E3CCA8;
  --snakeskin-ultradark-beige: #7a5e2a;
  --snakeskin-ultradark-grey: #2b2a28;
  --apress-yellow: #EEC338;

  /* Bootstrap primary override */
  --bs-btn-color: #fff;
  --bs-link-color: var(--snakeskin-ultradark-beige);
  --bs-link-hover-color: var(--snakeskin-dark-beige);
}

/* ---- Layout ---- */

html {
  position: relative;
  min-height: 100vh;
}

body {
  padding-bottom: 170px;
}

.main-content {
  margin-bottom: 20px;
}

/* ---- Footer ---- */

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 150px;
  line-height: 60px;
  background-color: var(--snakeskin-light-grey);
}

.footer a {
  color: black;
  text-decoration: underline;
}

.footer .disclaimer {
  line-height: 0.9em;
  font-size: 8pt;
  margin-bottom: 4px;
}

/* ---- Navigation ---- */

nav {
  margin-bottom: 10px;
}

.btn-outline-primary {
  --bs-btn-color: var(--snakeskin-dark-beige);
  --bs-btn-border-color: var(--snakeskin-dark-beige);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--snakeskin-dark-beige);
  --bs-btn-hover-border-color: var(--snakeskin-dark-beige);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--snakeskin-dark-beige);
  --bs-btn-active-border-color: var(--snakeskin-dark-beige);
}

/* ---- Articles ---- */

article a {
  color: var(--snakeskin-ultradark-beige);
  text-decoration: underline;
}

article kbd {
  color: black;
  background: var(--snakeskin-light-grey);
  white-space: nowrap;
}

article .tableflow {
  overflow-x: auto;
  width: 100% !important;
}

article table td {
  vertical-align: top;
  padding-left: 8px;
  padding-right: 8px;
  border: 1px solid var(--snakeskin-ultradark-grey);
}

article table td pre {
  font-size: 77.5%;
}

pre .red { color: red; }
pre .green { color: green; }

pre + em {
  display: block;
}

.article-intro {
  margin-bottom: 5ex;
}

.article-intro cite {
  color: var(--snakeskin-dark-grey);
}

/* ---- Article List ---- */

.article-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.article-list a {
  padding: 0;
  font-size: 14pt;
  color: black;
  text-decoration: underline;
}

.article-list a:hover {
  color: var(--snakeskin-ultradark-beige);
}

.article-list li {
  padding: 2ex;
  border: 2px solid var(--snakeskin-dark-grey);
  flex-basis: 40%;
  min-width: 300px;
  flex-grow: 1;
  margin: 2ex;
}

.article-list .date {
  float: right;
}

/* ---- Brand social colors ---- */

a.brandcolor .fa-github { color: black; }
a.brandcolor .fa-twitter { color: #00aced; }
a.brandcolor .fa-twitter:hover { color: #0084b4; }

/* ---- Book page viewer ---- */

.book-page .page-select-element {
  display: flex;
  flex-direction: row;
}

.book-page .page-select-input {
  display: block;
  margin: auto;
  margin-top: 10px;
}

.book-page .page-select-input input {
  width: 3em;
}

.book-page img {
  background: whitesmoke;
  max-width: 300px;
  box-shadow: 2px 2px #eee;
  border: 1px solid #999;
}

.book-page .page-navigate {
  height: 100%;
  background: none;
  border: none;
  font-size: 16px;
  padding: 5px;
  color: var(--snakeskin-ultradark-beige);
}

.book-page .page-navigate:hover:not(:disabled) {
  color: var(--snakeskin-dark-beige);
}

.book-page .page-navigate:disabled {
  color: var(--snakeskin-dark-grey);
}

.page-metadata {
  text-align: left;
}

/* ---- Video embeds ---- */

.video_wrapper {
  position: relative;
  padding-bottom: 56.25%;
  margin-bottom: 1em;
}

.video_wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ---- Images ---- */

img.big {
  width: 100%;
}