/*
 * Poole - Base styles
 * Adapted from https://github.com/poole/poole
 * Provides base typography and element styling for Simply Technical Blog.
 */

/* ==========================================================================
   Reset & Box Sizing
   ========================================================================== */

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

/* ==========================================================================
   Root & Body
   ========================================================================== */

html {
  font-family: 'PT Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

@media (min-width: 1024px) {
  html {
    font-size: 18px;
  }
}

body {
  margin: 0;
  padding: 0;
  color: var(--stb-text-color, #515151);
  background-color: var(--stb-body-bg, #fff);
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* ==========================================================================
   Links
   ========================================================================== */

a {
  color: var(--stb-link-color, #268bd2);
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
}

a strong {
  color: inherit;
}

/* ==========================================================================
   Headings
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  margin-bottom: .5rem;
  font-weight: bold;
  line-height: 1.25;
  color: var(--stb-heading-color, #313131);
}

h1 {
  font-size: 2rem;
}

h2 {
  margin-top: 1.5rem;
  font-size: 1.5rem;
}

h3 {
  margin-top: 1.5rem;
  font-size: 1.25rem;
}

h4, h5, h6 {
  margin-top: 1rem;
  font-size: 1rem;
}

/* ==========================================================================
   Body Text
   ========================================================================== */

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

strong {
  color: var(--stb-heading-color, #313131);
}

/* ==========================================================================
   Lists
   ========================================================================== */

ul, ol, dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

dt {
  font-weight: bold;
}

dd {
  margin-bottom: .5rem;
}

/* ==========================================================================
   Code
   ========================================================================== */

code,
pre {
  font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

code {
  padding: .15em .4em;
  font-size: 85%;
  color: var(--stb-code-color, #bf616a);
  background-color: var(--stb-code-bg, #f9f9f9);
  border-radius: 3px;
}

pre {
  display: block;
  margin-top: 0;
  margin-bottom: 1rem;
  padding: 1rem;
  font-size: .875rem;
  line-height: 1.4;
  white-space: pre;
  overflow-x: auto;
  background-color: var(--stb-pre-bg, #f9f9f9);
  border-radius: 4px;
}

pre code {
  padding: 0;
  font-size: 100%;
  color: inherit;
  background-color: transparent;
}

/* ==========================================================================
   Quotes
   ========================================================================== */

blockquote {
  padding: .5rem 1rem;
  margin: .8rem 0;
  color: var(--stb-blockquote-color, #7a7a7a);
  border-left: .25rem solid var(--stb-blockquote-border, #e5e5e5);
}

blockquote p:last-child {
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  blockquote {
    padding-right: 5rem;
    padding-left: 1.25rem;
  }
}

/* ==========================================================================
   Images
   ========================================================================== */

img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 0 1rem;
}

.stb-content img {
  border-radius: 4px;
}

/* ==========================================================================
   Tables
   ========================================================================== */

table {
  margin-bottom: 1rem;
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--stb-table-border, #e5e5e5);
}

td,
th {
  padding: .25rem .5rem;
  border: 1px solid var(--stb-table-border, #e5e5e5);
}

th {
  text-align: left;
}

tbody tr:nth-child(odd) td,
tbody tr:nth-child(odd) th {
  background-color: var(--stb-table-stripe, #f9f9f9);
}

/* ==========================================================================
   Horizontal Rules
   ========================================================================== */

hr {
  position: relative;
  margin: 1.5rem 0;
  border: 0;
  border-top: 1px solid var(--stb-hr-color, #eee);
}

/* ==========================================================================
   Forms (Search, Comments)
   ========================================================================== */

input,
textarea,
select,
button {
  font-family: inherit;
  font-size: 100%;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea {
  display: block;
  width: 100%;
  padding: .5rem .75rem;
  margin-bottom: 1rem;
  color: var(--stb-text-color, #515151);
  background-color: var(--stb-input-bg, #fff);
  border: 1px solid var(--stb-input-border, #ccc);
  border-radius: 4px;
  transition: border-color .15s ease-in-out;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus {
  border-color: var(--stb-link-color, #268bd2);
  outline: 0;
}

button,
input[type="submit"] {
  display: inline-block;
  padding: .5rem 1rem;
  color: #fff;
  background-color: var(--stb-link-color, #268bd2);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity .15s ease-in-out;
}

button:hover,
input[type="submit"]:hover {
  opacity: .85;
}

/* ==========================================================================
   WordPress Specific
   ========================================================================== */

.alignleft {
  float: left;
  margin-right: 1rem;
  margin-bottom: 1rem;
}

.alignright {
  float: right;
  margin-left: 1rem;
  margin-bottom: 1rem;
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
}

.wp-caption {
  max-width: 100%;
  margin-bottom: 1rem;
}

.wp-caption-text {
  font-size: .875rem;
  color: var(--stb-blockquote-color, #7a7a7a);
  text-align: center;
  padding-top: .5rem;
}

.gallery {
  margin-bottom: 1rem;
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: .875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}