/*
 * ATS Dark Mode
 * Automatic dark theme via prefers-color-scheme.
 * Targets: Simppeli parent + child theme (Among The Stones)
 */

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

  /* ---- CSS custom properties ---- */
  :root {
    --at-border: #999;
	--at-highlight: #3a3117;
  }

  /* ---- Base ---- */
  body {
    background-color: #1a1a1a;
    color: #d4d4d4;
  }

  /* ---- Typography ---- */
  h1, h2, h3, h4, h5, h6,
  .site-title,
  .site-title a,
  .entry-title,
  .entry-title a,
  .page-title {
    color: #e8e8e8;
  }

  .page-content,
  .entry-content,
  .entry-summary,
  .entry-footer,
  .comments-area {
    color: #c8c8c8;
  }

  .entry-meta,
  .entry-footer > .entry-footer-links {
    color: #aaa;
  }

  /* ---- Links ---- */
  a,
  a:visited {
    color: #e8e8e8;
  }

  a:hover,
  a:focus,
  a:active {
    color: #fff;
  }

  /* ---- Borders & rules ---- */
  .site-header,
  .page-header {
    border-bottom-color: #555;
  }

  .entry,
  .hentry {
    border-bottom-color: #555;
  }

  .comment-list > li {
    border-bottom-color: #555;
  }

  hr {
    background-color: #555;
  }

  /* ---- Blockquote ---- */
  blockquote {
    color: #bbb;
    border-left-color: #888;
  }

  /* ---- Mark / highlight ---- */
  mark {
    background-color: #3a3117;
    color: inherit;
  }

  .site-description mark {
    background-color: #3a3117;
    color: inherit;
  }

  /* ---- Callout box ---- */
  .callout-box {
    background-color: #3a3117;
    border-color: var(--at-border);
    color: inherit;
  }

  /* ---- Images ---- */
  .entry-content img {
    border-color: var(--at-border);
  }

  /* ---- Code & pre ---- */
  pre {
    border-color: #555;
    background-color: #222;
    color: #d4d4d4;
  }

  code, kbd, tt, var {
    color: #d4d4d4;
  }

  /* ---- Forms ---- */
  button,
  input[type="button"],
  input[type="reset"],
  input[type="submit"] {
    border-color: #999;
    color: #d4d4d4;
  }

  button:hover,
  input[type="button"]:hover,
  input[type="reset"]:hover,
  input[type="submit"]:hover,
  button:focus,
  input[type="button"]:focus,
  input[type="reset"]:focus,
  input[type="submit"]:focus,
  button:active,
  input[type="button"]:active,
  input[type="reset"]:active,
  input[type="submit"]:active {
    background: #e8e8e8;
    color: #1a1a1a;
  }

  input[type="number"],
  input[type="date"],
  input[type="datetime"],
  input[type="datetime-local"],
  input[type="email"],
  input[type="month"],
  input[type="password"],
  input[type="reset"],
  input[type="search"],
  input[type="tel"],
  input[type="text"],
  input[type="time"],
  input[type="url"],
  input[type="week"],
  textarea,
  select {
    border-color: #666;
    background-color: #222;
    color: #d4d4d4;
  }

  input[type="number"]:focus,
  input[type="date"]:focus,
  input[type="datetime"]:focus,
  input[type="datetime-local"]:focus,
  input[type="email"]:focus,
  input[type="month"]:focus,
  input[type="password"]:focus,
  input[type="reset"]:focus,
  input[type="search"]:focus,
  input[type="tel"]:focus,
  input[type="text"]:focus,
  input[type="time"]:focus,
  input[type="url"]:focus,
  input[type="week"]:focus,
  textarea:focus,
  select:focus {
    border-color: #aaa;
    border-style: solid;
    color: #e8e8e8;
  }

  input::placeholder {
    color: #777;
  }

  /* ---- Page links ---- */
  .page-links a,
  .page-links > span {
    border-color: #555;
  }

  /* ---- Screen reader focus ---- */
  .screen-reader-text:focus {
    background-color: #333;
    color: #6db8d4;
  }

  /* ---- Widgets / misc ---- */
  fieldset {
    border-color: #555;
  }

  abbr[title] {
    border-bottom-color: #777;
  }

  abbr, acronym {
    border-bottom-color: #777;
  }

  /* ---- Details / summary (Then page) ---- */
  details {
    color: #d4d4d4;
  }

  /* ---- WordPress calendar ---- */
  #wp-calendar th,
  #wp-calendar td {
    color: #d4d4d4;
  }

  /* ---- Jetpack related posts ---- */
  .jp-relatedposts-post .jp-relatedposts-post-title a {
    color: #e8e8e8;
  }

  .jp-relatedposts-post .jp-relatedposts-post-context,
  .jp-relatedposts-post .jp-relatedposts-post-date {
    color: #999;
  }

  /* ---- WP caption ---- */
  .wp-caption-text {
    color: #aaa;
  }

} /* end @media (prefers-color-scheme: dark) */