/*
Theme Name: SB
Theme URI: http://bckmn.com/naked-wordpress
Author: J Beckman + Sean Blanda
Author URI: http://bckmn.com
Description: Sean Blanda's theme build on Naked Wordpress
License: GNU General Public License

Color pallette for reference
Primary color: E8CB5D
Darker share: CBAD38
Other options for future:
   shade 1 = #FFF0B5 = rgb(255,240,181) = rgba(255,240,181,1) = rgb0(1,0.941,0.71)
   shade 2 = #FFE78B = rgb(255,231,139) = rgba(255,231,139,1) = rgb0(1,0.906,0.545)
   shade 4 = #A5891B = rgb(165,137, 27) = rgba(165,137, 27,1) = rgb0(0.647,0.537,0.106)

===================================
/**
 * Reset some basic elements
 */
body, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, hr,
dl, dd, ol, ul, figure {
  margin: 0;
  padding: 0; }

  h1, h2, h3, h4, h5, h6 { /* this is up high to prevent an unstyled flash on the post pages. For some reason */
      color: #E8CB5D;
      font-weight: 300;
     }

/* Basic styling
========================== */

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 19px;
  line-height: 26px;
  /* letter-spacing: .001em; */
  color: #ccc;
  background-color: #333;
  -webkit-text-size-adjust: 100%;

 }

 .brand-color {color: #e8cb5d;}

  blockquote {
      border-left: 4px solid #ccc;
      padding-left: 15px !important;
      font-style: italic;
      margin-left: 20px;

      > :last-child {
          margin-bottom: 0;
      }
  }

ul, ol {
    margin-left: 30px; }
ol > li{margin-bottom: 12px;}
li > ul,
li > ol {
    margin-bottom: 0; }

 /* Links */
   main a {
     color: #E8CB5D;
     text-decoration: none; }
     main a:visited {
       color: #E8CB5D; /* seperated incase you want to change later using lighten(#E8CB5D, 5%) */ }
     main a:hover {
       color: #E8CB5D;
       text-decoration: underline; }


/*
   * Set `margin-bottom` to maintain vertical rhythm
   There is probably a better way to do this. Dont hate me. */

  .page-content h1,.page-content h2,.page-content h3,.page-content h4,.page-content h5,.page-content h6,
  .page-content p,.page-content blockquote,.page-content pre,
  .page-content ul,.page-content ol, .page-content dl,.page-content figure,.page-content img,
  .highlight, .page-content {
  margin-top: 23px;
  margin-bottom: 23px; }

  .site-footer h1,.site-footer h2,.site-footer h3,.site-footer h4,.site-footer h5,.site-footer h6,
    .site-footer p,.site-footer blockquote,.site-footer pre,
    .site-footer ul,.site-footer ol,.site-footer dl,.site-footer figure,.site-footer img,
    .highlight {
    margin-top: 23px;
    margin-bottom: 23px; }

  .post h1,.post h2,.post h3,.post h4,.post h5,.post h6,
  .post p,.post blockquote,.post pre,
  .post ul,.post ol,.post dl,.post figure,
  .highlight, .post {
  margin-top: 23px;
  margin-bottom: 23px; }

  .archive h1,.archive h2,.archive h3,.archive h4,.archive h5,.archive h6,
  .archive p,.archive blockquote,.archive pre,
  .archive ul,.archive ol,.archive dl,.archive figure,
  .highlight, .archive {
  margin-top: 23px;
  margin-bottom: 23px; }

.site-footer {
margin-top: 46px; /* who knows why I need to double this, but I do. */
 }

#content {
  max-width: 600px;
  margin: 0 auto;
}

.site-footer .wrapper{
  max-width: 600px;
  margin: 0 auto;
}

/* Wrapper
 ======================= */
.wrapper {
  max-width: -webkit-calc(800px - (30px * 2));
  max-width: calc(800px - (30px * 2));
  margin-right: auto;
  margin-left: auto;
  padding-right: 30px;
  padding-left: 30px;
}
  @media screen and (max-width: 800px) {
    .wrapper {
      max-width: -webkit-calc(800px - (30px));
      max-width: calc(800px - (30px));
      padding-right: 15px;
      padding-left: 15px; } }

/* Header
========================== */

header{
  border-top: 5px solid #E8CB5D;
  min-height: 56px;
  position: relative;
  background-color: #111;

}

header a{
color: #ccc;
text-decoration: none;
}

header a:hover{
text-decoration: underline;
}

.site-title {
  font-size: 26px;
  line-height: 56px;
  letter-spacing: -1px;
  margin-bottom: 0;
  float: left;
  text-decoration: none;
}

.site-title, .site-title:visited {
  color: #ddd; }
  .site-title:hover {
    text-decoration: underline;
  }

.site-nav {
float: right;
}

.site-nav li{
margin: 0;
padding: 0;
margin-left: 30px;
float: left;
line-height: 56px;
list-style: none;
color: #ccc;
padding-top: 2px; /* this is to vertically align the nav items, for some reason */
}


/* Footer
========================== */

.site-footer{
  border-top: 3px solid #222;
  padding: 30px 0;
  background-color: #111;
}

.site-footer a {
  color: #E8CB5D;
  text-decoration: none; }
  .site-footer a:visited {
    color: #E8CB5D; /* seperated incase you want to change later using lighten(#E8CB5D, 5%) */ }
  .site-footer a:hover {
    color: #E8CB5D;
    text-decoration: underline; }



/* single post
================ */

iframe {max-width: 600px; /* keeps youtube embeds from braking on mobile */}

.post-title {
  font-size: 42px;
  letter-spacing: -1px;
  line-height: 1; }
  @media screen and (max-width: 800px) {
    .post-title {
      font-size: 36px; } }

.post-meta{ /* makes the meta a grey-ish shade */
  color: #828282;
}

.post h1, h2, h3, h4, h6 {line-height: 125%;}

.cover{
max-height: 400px;
width: 100%;
object-fit: cover;
}


img, .wp-caption{ /* you MUST include the caption otherwise all captions will be sized differently on mobile */
  max-width: 100%;
  height: auto; /* so images stay the size of window on mobile. But only on pages and posts */
}

.wp-caption-text{
  text-align: center;
  font-size: 60%;
  max-width: 600px;
  line-height: 140%;
}

.aligncenter, .twitter-tweet{
  margin-right: auto;
	margin-left: auto;
	display: block;
	clear: both;
}

/* Archive
=============================== */
.archive-item{border-bottom: solid 1px #222;}
.archive-date{float:left; width: 120px; } /*includes the dash */
.archive-dash{float:left; padding-left: 5px; padding-right: 15px;}
.archive-title{float:left; min-width: 200px; max-width: 400px; }

/* Things I added
=============================== */

.hello{ /*the welcome text on the home page*/
  font-size: 36px !important;
  line-height: 45px;
}

.headshot{
  float: left;
  margin-right: 10px;
}

.center{ /* my attempt not to use the center tag all the time */
  text-align: center;
}

.selectedwriting{ /* for curated writing on home page. Meant to have less emphasis than essays */
  font-size: 60%;
}

.page-title{
  font-size: 26px;
}



/* color pallette for reference
Primary color: E8CB5D
Darker share: CBAD38
Other options for future:
   shade 1 = #FFF0B5 = rgb(255,240,181) = rgba(255,240,181,1) = rgb0(1,0.941,0.71)
   shade 2 = #FFE78B = rgb(255,231,139) = rgba(255,231,139,1) = rgb0(1,0.906,0.545)
   shade 4 = #A5891B = rgb(165,137, 27) = rgba(165,137, 27,1) = rgb0(0.647,0.537,0.106)
*/