/**
 * Front-end styles
 * SCSS -> CSS conversion is handled by gulpfile.js
 * Prefixes are handled by gulpfile.js and configured
 * with browserlist in package.json
 * @see https://github.com/ai/browserslist#queries
 *
 * Prepend JS related fixes with .js
 *
 * @package DTRT Framework - Theme
 * @since 0.1.0
 * @version 0.1.0
 */
/**
 * SCSS Variables
 *
 * @package DTRT Framework - Theme
 * @since 0.1.0
 * @version 0.1.0
 */
/**
 * Responsive Breakpoints: Non-Mobile First Method
 * @see Bootstrap 3 Media Queries - https://stackoverflow.com/a/30542215 * @example
 * .large-block {
 *   @media dollarsign bp_mobile { display: none; }
 * }
 */
/* Extra Small Devices, Phones */
/* Small Devices, Tablets */
/* Medium Devices, Desktops */
/* Large Devices, Wide Screens */
/**
 * SCSS Mixins
 *
 * @package DTRT Framework - Theme
 * @since 0.1.0
 * @version 0.1.0
 */
/**
 * SCSS Extends
 *
 * @package DTRT Framework - Theme
 * @since 0.1.0
 * @version 0.1.0
 */
.font-sharpen,
.text-sharpen {
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.text-outline_white {
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

.wpdtrt-js .wpdtrt-js-webfont {
  visibility: hidden;
}

.wf-active.wpdtrt-js .wpdtrt-js-webfont {
  visibility: visible;
}

/**
 * Theme Requirements
 * aka WordPress Generated Classes
 * As flagged by the Theme Check plugin
 * Copied from twentyseventeen
 * @uses https://codex.wordpress.org/CSS#WordPress_Generated_Classes
 *
 * @package DTRT Framework - Theme
 * @since 0.1.0
 * @version 0.1.0
 */
.alignnone {
  /* this one is not flagged by Theme Check but is in the list of WordPress Generated Classes */
  margin: 5px 20px 20px 0;
  margin: 0.3125rem 1.25rem 1.25rem 0;
}

.aligncenter,
div.aligncenter {
  display: block;
  margin: 5px auto 5px auto;
  margin: 0.3125rem auto 0.3125rem auto;
}

.alignright {
  float: right;
  margin: 5px 0 20px 20px;
  margin: 0.3125rem 0 1.25rem 1.25rem;
}

.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
  margin: 0.3125rem 1.25rem 1.25rem 0;
}

a img.alignright {
  float: right;
  margin: 5px 0 20px 20px;
  margin: 0.3125rem 0 1.25rem 1.25rem;
}

a img.alignnone {
  margin: 5px 20px 20px 0;
  margin: 0.3125rem 1.25rem 1.25rem 0;
}

a img.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
  margin: 0.3125rem 1.25rem 1.25rem 0;
}

a img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption {
  background: #fff;
  border: 1px solid #f0f0f0;
  max-width: 96%;
  /* Image does not overflow the content area */
  padding: 5px 3px 10px;
  padding: 0.3125rem 0.1875rem 0.625rem;
  text-align: center;
}

.wp-caption.alignnone {
  margin: 5px 20px 20px 0;
  margin: 0.3125rem 1.25rem 1.25rem 0;
}

.wp-caption.alignleft {
  margin: 5px 20px 20px 0;
  margin: 0.3125rem 1.25rem 1.25rem 0;
}

.wp-caption.alignright {
  margin: 5px 0 20px 20px;
  margin: 0.3125rem 0 1.25rem 1.25rem;
}

.wp-caption img {
  border: 0 none;
  height: auto;
  margin: 0;
  max-width: 98.5%;
  padding: 0;
  width: auto;
}

.wp-caption p.wp-caption-text {
  font-size: 11px;
  font-size: 0.6875rem;
  line-height: 17px;
  margin: 0;
  padding: 0 4px 5px;
  padding: 0 0.25rem 0.3125rem;
}

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  white-space: nowrap;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  padding: 0.9375rem 1.4375rem 0.875rem;
  text-decoration: none;
  top: 5px;
  top: 0.3125rem;
  width: auto;
  z-index: 100000;
  /* Above WP toolbar. */
}

.sticky {
  position: relative;
}

.gallery-caption {
  display: block;
  text-align: left;
  padding: 0 10px 0 0;
  padding: 0 0.625rem 0 0;
  margin-bottom: 0;
}

.bypostauthor > .comment-body > .comment-meta > .comment-author .avatar {
  border: 1px solid #333;
  padding: 2px;
  padding: 0.125rem;
}

/**
 * Accessibility styles
 * Imported by wpdtrt-handsoflight.scss
 *
 * @package DTRT Framework - Theme
 * @since 0.1.0
 * @version 0.1.0
 */
.accessible {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute !important;
  width: 1px;
  /* many screen reader and browser combinations announce broken words as they would appear visually */
  word-wrap: normal !important;
}

.wpdtrt-featured-image > a {
  display: block;
}