/* --------------------------------------------------------------------------
 *
 * file    : dark-mode.css
 * desc    : Automatic dark theme, follows the visitor's OS/browser preference
 *           (prefers-color-scheme). Loaded last so it can override the
 *           colors set by style.css / whhg.css / foundstrap.css / the
 *           active color theme (css/theme/red.css), without touching those
 *           files.
 *
 * -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {

  /* Base */
  body {
    background: #12151d;
    color: #ccced4;
  }

  #main-container {
    background: #12151d;
  }

  h1, h2, h3, h4, h5, h6 {
    color: #f1f2f4;
  }

  a {
    color: #f69a8b;
  }

  hr {
    background: #2c313d;
  }

  /* Header */
  .header-info {
    background: #1b1f29;
    border-bottom-color: #2c313d;
    color: #9aa0ac;
  }
  .header-info ul li {
    border-right-color: #2c313d;
  }
  .header-info .right-info {
    color: #b7bcc6;
  }
  .login-container {
    border-right-color: #2c313d !important;
    border-left-color: #2c313d !important;
  }
  .header-container {
    border-bottom-color: #2c313d;
  }
  .social-icon a {
    color: #9aa0ac;
  }
  .navigation-container {
    background: #f15c44;
  }

  /* Menu */
  .epicon-menu {
    background: transparent;
  }
  .epicon-menu ul,
  .epicon-menu ul ul {
    background: #171a23;
    border-color: #2c313d;
  }
  .epicon-menu a {
    color: #ccced4;
  }
  .epicon-menu ul a:hover,
  .epicon-menu ul a:focus,
  .epicon-menu ul a:active,
  .epicon-menu ul a.highlighted,
  .epicon-menu-vertical a:hover,
  .epicon-menu-vertical a:focus,
  .epicon-menu-vertical a:active,
  .epicon-menu-vertical a.highlighted {
    background: #20242f;
  }
  .epicon-menu span.scroll-up,
  .epicon-menu span.scroll-down {
    background: #171a23;
  }
  .epicon-menu span.scroll-up:hover,
  .epicon-menu span.scroll-down:hover {
    background: #20242f;
  }
  .menu-container {
    border-top-color: #2c313d;
    border-bottom-color: #2c313d;
  }

  /* Page header banner */
  #page-header .inner-container {
    background-image: url(../img/bg-page-header-dark.jpg);
  }
  #page-header .breadcrumb {
    background: rgba(0, 0, 0, 0.4);
  }

  /* Buttons / forms */
  .form-control {
    background-color: #1b1f29;
    border-color: #333a48;
    color: #ccced4;
  }
  .form-control::-moz-placeholder {
    color: #767c88;
  }
  .form-control:-ms-input-placeholder {
    color: #767c88;
  }
  .form-control::-webkit-input-placeholder {
    color: #767c88;
  }
  .input-group-addon {
    background-color: #20242f;
    color: #9aa0ac;
    border-color: #333a48;
  }
  /* The addon box is transparent in light mode, so 42px of left padding is enough
     to clear the icon glyph. Here it gets an opaque background, which then covers
     the start of the text unless the input's padding clears the full icon box. */
  .input-group .form-control {
    padding-left: 50px;
  }

  /* Login popup (fancybox) */
  .fancybox-skin {
    background: #1b1f29;
    color: #ccced4;
  }

  /* Ordering / contact form panel */
  #contact-form {
    background: #171a23;
  }
  #contact-information .inner-container,
  #contact-information .column:last-child .inner-column {
    border-color: #2c313d;
  }

  /* News / blog listing */
  .blog-info .date-blog-info {
    color: #f1f2f4;
  }
  .post-info {
    background: #1b1f29;
  }
  .post-info a {
    color: #9aa0ac;
  }

  /* Promo box */
  .promo-box {
    border-color: #2c313d;
  }

  /* Home page feature boxes (Modern / Easy / Portable, Features list) */
  #features .column {
    background: #1b1f29;
    border-right-color: #2c313d;
    border-bottom-color: #2c313d;
  }

  /* Pricing table */
  .pricing-table {
    background: #1b1f29;
  }
  .pricing-table .title {
    color: #ffffff;
  }
  .pricing-table .price {
    background: #1b1f29;
  }
  .pricing-table .cta-button {
    background: #171a23;
  }
  .pricing-table .description,
  .pricing-table .bullet-item {
    background-color: #1b1f29;
    color: #ccced4;
  }
  .pricing-table .description:after,
  .pricing-table .bullet-item:after {
    background: #2c313d;
  }

  /* Plain HTML tables (e.g. privacy page) */
  table td {
    background-color: #1b1f29;
    color: #b7bcc6;
    border-bottom-color: #2c313d;
  }

  /* Footer */
  .footer-info {
    background: #f15c44;
  }
}