/*!
Theme Name: Vanilla Milkshake
Theme URI: http://hongkonggong.github.io/vanilla-milkshake/
Author:  Jason Li
Author URI: http://www.hongkonggong.com/
Description: A minimalist WordPress theme built with elegant typography and responsive design for simple weblogs. Allows for easy customization and extension.
Version: 1.18
License: GNU General Public License v3
License URI: http://www.gnu.org/licenses/gpl.html
Tags: light, two-columns, right-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-colors, rtl-language-support, translation-ready
Text Domain: vanillamilkshake

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/


/* Custom styles */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Tachyons Add-ons */

/* Scaling type for large screens */

.container {
  max-width: 30em;
}
@media screen and (min-width: 42em) {
  .container {max-width: 45em;}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
  html {font-size: 120%;}
}
@media screen and (min-width: 64em) and (max-width: 86em) {
  html {font-size: 150%;}
}
@media screen and (min-width: 86em) and (max-width: 108em) {
  html {font-size: 180%;}
}
@media screen and (min-width: 108em) and (max-width: 130em) {
  html {font-size: 210%;}
}
@media screen and (min-width: 130em) and (max-width: 152em) {
  html {font-size: 240%;}
}
@media screen and (min-width: 152em) {
  html {font-size: 270%;}
}
@media screen and (min-width: 86em) {
  .paddinghorizontal-xxxlarge-xl {
    padding-left: 8rem;
    padding-right: 8rem;
  }
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Tachyons-Wordpress adapations */

/* Font resets */
h1, h2, h3, h4, h5, h6 {
  font-size: 1rem;
}
h1, h2 {
  font-weight: bold;
}
h3 {
  font-weight: normal;
  font-style: italic;
}
.widget {
    margin-bottom: 1.5rem;
}
.widget-title {
    font-weight: normal;
    font-style: italic;
    margin-top: 0.25rem;
}
hr {
  border: 1px dotted #EEE;
  margin: 2rem 0;
}
pre, code {
  font-size: .790rem;
  padding: 0.5rem;
  background-color: #EEE;
  display: block;
  color: #666;
}
/* To format the classless post contents and/or widgets without having to make PHP code injections */
ul {
    list-style: none;
    padding-left: 1em;
}
li {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
ul > li:before { 
    content: "\25AA";
    display: block;
    color: #999;
    height: 0;
    width: 0;
    left: -1em;
    top: 0;
    position: relative;
}
.entry-content {
  color: #333;
  position: relative; /* fix embed floats that have absolute positions */
}
.wp-caption {
  margin-bottom: 1rem;
}
.wp-caption-text {
  font-size: 0.889rem;
  padding-left: 1.25em;
  color: #666;
  min-width: 12rem; /* for really skinny images */
}
.wp-caption-text:before {
  content: "\21B3";
  display: block;
  font-size: 0.889em;
  color: #CCC;
  height: 0;
  width: 0;
  left: -1.5em;
  top: 0.25em;
  position: relative;
}
blockquote {
  margin-left: 0;
  padding-left: 0.75em;
  border-left: 0.25em solid #EEE;
}
dt {
  margin: 0.5rem 0;
}
.aligncenter {
  margin-left: auto;
  margin-right: auto;
}
.alignleft {
  float: left;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  margin-right: 1rem;
  clear: both;
}
.alignright {
  float: right;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  margin-left: 1rem;
  clear: both;
}
/* Responsive images & media! */

img, figure {
  max-width: 100%;
  height: auto;
}
iframe, embed, object, video {
  max-width: 100%;
}
.maxwidth-100p {
  max-width: 100%;
}

/* Relying on default Wordpress-generated search forms, so styling them using their native classes */
/* COMMENTS */
.comment-metadata {
  font-size: 0.6141rem;
  margin-top: 0.25rem;
}
/* comment form buttons: submit comment, reply within thread(s), comment pagination */
#submit, .comment-reply-link {
  border-radius: .3em;
  border: 1px solid #CCC;
  font-family: "Helvetica Neue", "Helvetica", arial, sans-serif;
  color: #111;
  background-color: #FFF;
  display: inline-block;
  text-decoration: none;
  padding: 0.5em 0.8em;
  transition: color .4s, background-color .4s, border .4s;
  font-size: 0.7225rem;
}
.comment-reply-link, .comment-reply-link:link, .comment-reply-link:visited {
  color: #666;
  font-size: 0.522rem;
  margin-bottom: 1rem;
}
input, textarea {
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  border-style: inset;
  border-width: 1px;
  background-color: #F5F5F5;
  max-width: 100%;
}
.pagination {
  margin-bottom: 2rem;
}
.page-numbers, .page-links > a {
  padding: 0.5rem;
  border-radius: .3em;
  border: 1px solid #CCC;
  margin-right: 0.125rem;
  min-width: 1.25rem;
  display: inline-block;
  text-align: center;
  transition: color .4s, background-color .4s, border .4s;
}
.page-numbers:hover, .page-links > a:hover {
  color: #999999;
  transition: background-color .3s, color .3s, border .3s;
}
.page-numbers:active, .page-links > a:active {
  color: #0074D9;
  border: 1px solid #0074D9;
  transition: background-color .3s, color .3s, border .3s;
}
.page-numbers.current {
  border: 0;
  font-weight: bold;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
/* for current page in multi-page posts... no default class argh! */
.page-links > span:nth-child(n+2) {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.page-numbers.dots {
  border: 0;
  font-size: 0.889rem;
  padding-left: 0;
  padding-right: 0;
}
.prev, .next {
  display: none;
}
/* tables groan */
thead {
  border-bottom: 1px solid #333;
}
th, td {
  padding: 0.25rem 1rem;
  text-align: left;
}
/* featured/sticky posts */
/* see: https://css-tricks.com/html-for-icon-font-usage/ */
[data-icon]:before {
  content: attr(data-icon);
  display: block;
  color: #000;
  height: 0;
  width: 0;
  font-size: 0.70rem;
  left: -1.5rem;
  top: 0.20rem;
  position: relative;
  speak: none; /* Not to be trusted, but hey. */
}
.sticky {} /* required by WordPress but no longer used */


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Personal styling! */
  
  /* BUTTONS */

  .button,
  .button:link,
  .button:visited,
  .more-link,
  .more-link:link,
  .more-link:visited {
    border-radius: .3em;
    border: 1px solid #CCC;
    font-family: "Helvetica Neue", "Helvetica", arial, sans-serif;
    background-color: #FFF;
    padding: 0.75em 1em;
    text-transform: none;
    color: #333;
  }

  .button:hover, 
  .more-link:hover {
    color: #757575; /* lightest grey for accesibility */
  }

  .button:active, 
  .more-link:active {
    color: #AAA;
    border: 1px solid #EEE;
  }

  /* more link is auto-generated sometimes so have to apply button and button--xsmall class to it :( */
  .more-link {
    font-size: 0.694rem;
  }


  /*
     LINKS
  */

  a, .link {
    text-decoration: none;
    transition: color .15s ease-in;
  }

  a:link, .link:link {
    color: #30BBDB;
  }

  a:visited, .link:visited {
    color: #177185;
  }

  a:hover,
  .link:hover {
    color: #7bcde0;
  }

  a:active,
  .link:active {
    text-decoration: underline;
  }

  h1 a:link, 
  h2 a:link, 
  h3 a:link, 
  h4 a:link,
  h5 a:link, 
  h6 a:link {
    color: #000;
  }
  h1 a:visited,
  h2 a:visited,
  h3 a:visited,
  h4 a:visited,
  h5 a:visited,
  h6 a:visited {
    color: #000;
  }


  /* 
     TYPE SCALE
  */

  /* JL: toning down Tachyons font sizes based on a "major second" progression from: http://type-scale.com/ */

  .mega {
    font-size: 2rem;
  }

  .f1 {
    font-size: 1.424rem;
  }

  .f2 {
    font-size: 1.266rem;
  }

  .f3 {
    font-size: 1.125rem;
  }
  .f4 {
    font-size: 1rem;
  }
  .f5,
  .small {
    font-size: .889rem;
  }
  .f6,
  .xsmall {
    font-size: .790rem
  }
  .f7,
  .xxsmall {
    font-size: .702rem
  }

  @media screen and (min-width: 42em) {
    .mega-ns {
      font-size: 4rem;
    }

    .f1-ns {
      font-size: 3rem;
    }

    .f2-ns {
      font-size: 2rem;
    }

    .f3-ns {
      font-size: 1.5em;
    }

    .f4-ns {
      font-size: 1rem;
    }

    .f5-ns {
      font-size: .85rem;
    }
    .f6-ns,
    .xsmall-ns {
      font-size: .790rem
    }
    .f7-ns,
    .xxsmall-ns {
      font-size: .702rem
    }
  }

  @media screen and (min-width: 42em) and (max-width: 64em) {
    .mega-m {
      font-size: 4rem;
    }

    .f1-m {
      font-size: 3rem;
    }

    .f2-m {
      font-size: 2rem;
    }

    .f3-m {
      font-size: 1.5rem;
    }

    .f4-m {
      font-size: 1rem;
    }

    .f5-m {
      font-size: .85rem;
    }
    .f6-m,
    .xsmall-m {
      font-size: .790rem
    }
    .f7-m,
    .xxsmall-m {
      font-size: .702rem
    }
  }

  @media screen and (min-width: 64em) {
    .mega-l {
      font-size: 4rem;
    }

    .f1-l {
      font-size: 3rem;
    }

    .f2-l {
      font-size: 2rem;
    }

    .f3-l {
      font-size: 1.5rem;
    }

    .f4-l {
      font-size: 1rem;
    }

    .f5-l {
      font-size: .85rem;
    }
    .f6-l,
    .xsmall-l {
      font-size: .790rem
    }
    .f7-l,
    .xxsmall-l {
      font-size: .702rem
    }
  }


  /* Dimmed custom class! */

  @media screen and (min-width: 42em) {
    .display-none-ns {
      display: none;
    }
    /* dimmed is for hovering if on desktop */
    .dimmed-ns {
      opacity: 0.75;
      transition: opacity .25s ease-in;
    }

    .dimmed-ns:hover {
      opacity: 1;
      transition: opacity .25s ease-in;
    }

    .dimmed-ns:active,
    .dimmed-ns:focus {
      opacity: 1;
      transition: opacity .25s ease-out;
    }
  }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ACCESSIBILITY */

/* Lightest grey text on white background to satisfy 4.5:1 AA contrast requirements */

.black-54 {
  color: rgba(0, 0, 0, .54);
}

/* Focus states for keyboard navigation, derived from the Twentyfiften theme */

a:focus,
.link:focus,
input:focus,
textarea:focus,
select:focus
   {
    outline: 1px dashed #c1c1c1;
  }

input:focus,
textarea:focus {
  background-color: #fff;
  border: 1px solid #ccc;
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
button:focus,
input[type="button"]:focus,
input[type="reset"]:focus {
  background-color: #707070;
  background-color: rgba(51, 51, 51, 0.7);
  outline: 0;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
  outline: 0;
}



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/**
 * Accessibility continued - imported from WordPress 2015 theme
 */

/* Text meant only for screen readers */
.says,
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute !important;
  width: 1px;
}

/* must have higher specificity than alternative color schemes inline styles */
.site .skip-link {
  background-color: #f1f1f1;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
  color: #21759b;
  display: block;
  font: bold 14px/normal sans-serif;
  left: -9999em;
  outline: none;
  padding: 15px 23px 14px;
  text-decoration: none;
  text-transform: none;
  top: -9999em;
}

.logged-in .site .skip-link {
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  font: bold 14px/normal sans-serif;
}

.site .skip-link:focus {
  clip: auto;
  height: auto;
  left: 6px;
  top: 7px;
  width: auto;
  z-index: 100000;
}
