/****************************************
  Theme Name:   Counterpoint 
      Author:   Evan Henley
  Author URI:   http://henleyedition.com
/****************************************/

$primary-color:   #4f4f4f;  // text color
$bg-color:        #fff;     // background
$highlight:       #f6f6f6;  // light gray highlight
$link-color:      #c44;     // linkz
$link-hover:      darken($link-color, 20%);
$line-color:      #dedede;  // borders and <hr>

$container-size:  1280px;   // max container width
$container-margin: 3.5%;
$standard-margin:  3.5vw;
$margin-1280:      44px;
$nav-width:        .19;
$content-width:    .74;     // .07 left over for margins
$post-width:       80.9%;
$post-width-900:   100% - ($container-margin / $content-width);
$post-width-640:   90%;


// Typefaces (base, <code>) //

/*
 * Font:        Droid Serif
 * Author:      Steve Matteson
 * Author URI:  http://www.droidfonts.com/
 * License:     Apache License, version 2.0
 * License URI: http://www.apache.org/licenses/LICENSE-2.0.html
*/

$serif:           'Droid Serif', TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;
$monospace:       'Courier New', Courier, monospace;

// Mixins //

@mixin prefix($property, $value) {
  $prefixes: ('-webkit-', '-moz-', '-ms-', '');
  @each $prefix in $prefixes {
    #{$prefix}#{$property}: $value;
  }
}


// Reset/Normalize Code //
@import '_reset'; 


// Clearfix //
.cf {
  zoom: 1;
  
  &:before, &:after {
    content: "";
    display: table;
  }
  
  &:after {
    clear: both;
  }
}


// Wordpress Classes //

// eliminate stupid smiley face at bottom of page //
img#wpstats{ display: none; }

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.alignright { float: right; }
.alignleft { float: left; }

img.alignright, .wp-caption.alignright,
img.alignleft, .wp-caption.alignleft {
  max-width: 50%;
}

img.alignright, .wp-caption.alignright {
  margin: 0.6em 0 0.6em $standard-margin;
}
img.alignleft, .wp-caption.alignleft {
  margin: 0.6em $standard-margin 0.6em 0;
}
img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

img[class*="align"],
img[class*="wp-image-"] {
  height: auto; // Make sure images with WordPress-added height and width >attributes are scaled correctly //
}
img.size-full {
  max-width: 100%;
  width: auto; // Prevent stretching of full-size images with height and >>width attributes in IE8 //
}

.alert {
  background: rgba(#000,0.05);
  padding: 0.6em 1.2em;
}


// Gallery and Captions //

.gallery {
  clear: both;
  margin: auto;
  width: 100%;
  .gallery-item {
    float: left;
    margin-top: 10px;
    text-align: center;
    width: 33%;
  }
  img {
    border: 2px solid $line-color;
  }
  .gallery-caption {
    margin-left: 0;
    background: none !important;
  }
}

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

.wp-caption-text {
  text-align: center;
  margin: 0 !important;
  padding: 0.6em 1.2em;
  font-style: italic;
  line-height: 1.4;
  background: $highlight;
}

// Miscellaneous Tags //

a,input,select,textarea { @include prefix(transition, all 0.2s); }

kbd { font-family: $monospace; }
pre, code, blockquote { background: rgba(#000,0.05); }

pre, blockquote {
  clear: both;
  margin: 1.2em 0;
  padding: 1.2em;
  border-left: 6px solid $line-color;
}

pre, code { font-family: $monospace; }

pre {
  overflow: auto;
  line-height: 1.5;
  -ms-word-wrap: initial;
  word-wrap: initial;
}

code {
  padding: 0.4em;
  border-left: 4px solid $line-color;
}

blockquote { 
  font-style: italic;
  quotes: "\201C""\201D""\2018""\2019";
  p:first-child { display: inline; }
  &:before {
    content: open-quote;
    float: left;
    height: 0.2em;
    margin-right: .25em;
    margin-top: -.1em;
    font-size: 4em;
    color: $line-color;
    line-height: 1;
  }
  &:after { content: no-close-quote; }
  cite {
    display: block;
    text-align: right;
    &:before {
      content: '\2014 \20';
      color: $line-color;
    }
  }
}

hr {
  display: block;
  height: 0;
  width: 100%;
  margin: 1.2em auto;
  border: 1px solid $line-color;
}


// Tables //

table {
  margin: 0.6em auto;
  max-width: 100%;
  border: 1px solid $line-color;
  border-collapse: collapse;
  font-size: 0.9em;
  th, td {
    padding: 0.6em 1.2em;
    border: 1px solid $line-color;
  }
  th {
    background: darken($highlight, 5%);
    font-weight: bold;
  }
  td { background: $highlight; }
  tr:hover td { background: darken($highlight, 2%); }
}


// Lists //

article {
  ul {
    list-style: disc inside;
    ul,ol { margin-left: 2em; }
  }
  ol {
    list-style: decimal inside;
    ul,ol { margin-left: 2em; }
  }
}


// Forms //

@mixin form-input {
  max-width: 100%;
  margin: 0;
  padding: 0.5em 0.8em;
  line-height: 1.5;
  font-size: 13px;
}

input,select,textarea {
  outline: none;
  border: 2px solid $line-color;
  &:focus {
    border-color: #66c2ff;
  }
}

input[type=submit],
input[type=text],
input[type=email],
input[type=url],
textarea {
  border-radius: 0;
  -webkit-appearance: none; // removes iphone shadow //
}

#searchform {
  label { display: none; }
  input {
    width: 100%;
    min-width: 250px;
    @include form-input;
    line-height: 2;
  }
}

form.post-password-form {
  clear: both;
  text-align: center;
  label { display: none; }
  input[type=password] {
    width: 200px;
    max-width: 100%;
    @include form-input;
  }
  input[type=submit] { margin-left: 1.2em; }
}

input[type=submit], input[type=submit]:visited {
  display: inline-block;
  margin: 0;
  padding: 0 20px;
  height: 34px;
  background: $bg-color;
  border: 2px solid $line-color;
  border-bottom-color: darken($line-color, 30%);
  border-right-color: darken($line-color, 30%);
  color: darken($line-color, 30%);
  text-decoration: none;
  font-size: 13px;
  cursor: pointer;
  
  &:active {
    border-color: $line-color;
    border-top-color: darken($line-color, 30%);
    border-left-color: darken($line-color, 30%);
  }
}


// Widget Areas //

#sidebar #sidebar-widget {
  position: absolute;
  bottom: $standard-margin;
  width: 100%;
}

#header-widget {
  float: right;
  margin-right: $standard-margin;
  height: 74px;
  line-height: 74px;
  overflow: hidden;
}

#article-bottom {
  margin-top: $standard-margin;
  padding: 1em 0;
  color: #666;
  background: $highlight;
  text-align: center;
  &:empty { display: none; }
}


// Post Meta Info //
  
.post-meta {
  display: block;
  overflow: hidden;
  background: $highlight;
  .timestamp, .edit-link {
    float: right;
  }
  .timestamp { font-style: italic; }
}

#post .post-meta {
  margin: 1.2em 0;
  padding: 0.6em 1.2em;
}

#archive .post-meta {
  text-align: center;
  margin: 6px 0 6px 0;
  padding: 0.2em 0.6em;
  .timestamp { float: none; }
}

#attachment .post-meta {
  padding-right: 0;
  margin-bottom: 1.2em;
  background: none;
}


// Headings //

article {
  h2,h3,h4,h5,h6 {
    margin: 1.2em 0;
    font-weight: normal;
  }
}

h1,h2,h3 {
  border-bottom: 2px solid $primary-color;
  line-height: 1.3;
  font-variant: small-caps;
}

h2, h3 { padding-bottom: 0.6em; }
h2 {
  font-size: 1.8em;
}

.post-header {
  position: relative;
  display: block;
  width: 100%;
  height: 28vw;
  min-height: 260px;
  max-height: 360px;
  border: 6px solid $line-color;
  border-right: 0;
}

.post-title {
  position: absolute;
  display: block;
  bottom: 0;
  width: 100%;
  background: rgba(#000,0.45);
  color: $bg-color;
  h2,h3 {  // Post Titles Only (archive-post.php, page.php, single.php) //
    padding: 0.5em;
    border: none;
    background: none;
  }
  h2 {
    width: $post-width;
    padding-right: 0;
  }
}

.thumbnail h3 { font-size: 1.5em; }

h3 {
  font-size: 1.5em;
}

h4 {
  font-weight: bold;
  font-size: 1.1em;
}

h5 { font-weight: bold; }
h6 { font-style: italic; }


// Post Headers //

.archive-header, .attachment-header {
  width: 100%;
  padding: 1.2em $standard-margin 1.2em 1.2em;
  background: $highlight;
  h3 {
    font-size: 1.5em;
    border: none;
    padding: 0;
  }
}
.attachment-header { margin-bottom: 1.2em; }
.archive-header { margin-bottom: $standard-margin; }


// Macro Structure //

html { height: 100%; }

body {
  font-family: $serif;
  font-size: 95%;
  background: $primary-color;
  height: 100%;
}

#container {
  margin: 0 auto;
  max-width: $container-size;
  min-height: 100%;
  background: $bg-color;
  color: $primary-color;
}

#header {
  z-index: 10;
  position: relative;
  height: 74px;
  line-height: 74px;
  width: 100%;
  max-width: 100%;
  background: $highlight;
  border-bottom: 1px solid $line-color;
  overflow: hidden;
  
  #title {
    display: inline;
    font-size: 2.4em;
    border: none;
    max-width: 100%;
    a {
      display: inline-block;
      line-height: 74px;
      padding: 0 $standard-margin;
      color: $primary-color;
    }
  }
  .menu-link { display: none; }
}


// Main Content Styles //

#content {
  position: relative;
  float: right;
  width: $content-width * 100%;
  line-height: 1.8;
  padding: $standard-margin 0;
  
  a {
    color: $link-color;
    &:hover { color: $link-hover; }
  }
  
  p { margin: 1.2em 0; }
}

article { text-align: justify; }


// Top-Level Navigation (sidebar.php) //

#sidebar {
  position: fixed;
  top: 74px; bottom: 0;
  width: $nav-width * 100%;
  margin-left: $standard-margin;
  padding: $standard-margin 0;
}

// Wordpress Admin Bar Fix //
.admin-bar #sidebar { top: 102px; }
@media screen and (max-width: 782px) {
  .admin-bar #sidebar { top: 120px; }
}
  
#site-nav {
  
  > ul {
    width: 100%;
    list-style: none;
    font-size: 1.1em;
    
    li {
      text-align: right;
      border-color: $bg-color;
      @include prefix(transition, all 0.2s);
      overflow: hidden;
      
      a {
        display: block;
        padding: 0.8em 0 0.8em 6px;
        color: $primary-color;
        border-color: $line-color;
        line-height: 1.4;
        -webkit-backface-visibility: hidden;
        -webkit-transform: translateZ(0);
      }
      
      a:hover {
        padding-right: 6px;
        border-right: 6px solid $link-hover !important;
        color: $link-hover;
      }
      
      ul.sub-menu { height: 0; }
      
      &.active {
        > a {
          color: $link-hover;
          padding-right: 6px;
          border-right: 6px solid $link-hover !important;
        }
        > ul.sub-menu {
          height: auto;
          > li > a {
            padding-right: 6px;
            border-right: 6px solid rgba(#000,0.12);
          }
        }
      }
      &.inactive > a {
        opacity: 0.3;
        border-right: none;
      }
    }
    
    li.menu-item-has-children { cursor: pointer; }
  }
}


// Post Navigation //

nav#post-nav {
  margin-top: $standard-margin;
  clear: both;
  border: 6px solid $line-color;
  div {
    display: block;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    a {
      display: block;
      width: 100%;
      font-size: 1.8em;
      line-height: 0;
      color: $bg-color;
      background: rgba(#000,0.1);
      text-align: center;
      &:hover {
        color: $bg-color;
        background: rgba(#000,0);
      }
    }
    &.half-width {
      width: 50%;
      a, span { padding: (50% / 1.618) 0; }
    }
    &.full-width {
      width: 100%;
      a, span { padding: (25% / 1.618) 0; }
    }
    &.next-post { float: left; }
    &.prev-post { float: right; }
  }
}

// Page Numbers //

@mixin pagination {
  position: relative;
  clear: both;
  background: $highlight;
  text-align: center;
  padding: 0.6em 0;
  > * {
    display: inline-block;
    padding: 0 0.6em;
  }
}

nav.pagination {
  @include pagination;
  margin: $standard-margin $standard-margin 0 0;
  > * {
    &.prev { position: absolute; left: 0; }
    &.next { position: absolute; right: 0; }
  }
}

nav.post-pagination {
  @include pagination;
  margin: 1.2em 0;
  padding-left: 7em;
  padding-right: 7em;
  
  > a {
    &:first-child { position: absolute; left: 0; top: 0.6em; }
    &:last-child { position: absolute; right: 0; top: 0.6em; }
  }
  
  &:empty { display: none; }
}


// Front-Page, Archives, Attachment (index.php, archive.php, attachment.php) //

#archive {
  margin-right: $standard-margin;
  
  .tags {
    margin-top: 1.2em;
    font-size: 0.8em;
    line-height: 1.8;
  }
  
  li {
    width: (100% - ($container-margin / ($content-width - 0.07))) / 2;
    margin-bottom: $standard-margin;
    
    &.odd-post { 
      float: left;
      clear: both;
    }
    &.even-post {
      float: right;
    }
    
    .thumbnail {
      position: relative;
      width: 100%;
      padding-top: (1 / 1.618) * 100%;
      border: 6px solid $line-color;
    }
    
    .more-link {
      display: inline;
      float: right;
    }
  }
  
  // Sticky Posts //
  
  .sticky {
    float: none;
    width: 100%;
    .thumbnail {
      border-color: #fff3c1;
      padding-top: (1 / 2.618) * 100%;
    }
    h3 { font-size: 2em; }
  }
}


// Archive Page //

#archive-page {
  #searchform { margin: 1.2em 0; }
  ul { margin: 0; padding: 0; }
  ul.topics li, ul.monthly li {
    display: inline;
  }
  .tag-cloud { line-height: 1.4; }
}


// Post Content (single.php, page.php) //

article:not(.excerpt) {
  position: relative;
  width: $post-width;
  margin-bottom: $standard-margin;
  img { max-width: 100%; }
  iframe {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100% !important;
  }
}

#post > p:first-of-type:not(.no-dropcap):first-letter {
  display: block;
  float: left;
  height: 1em;
  line-height: 1;
  font-size: 5.9em;
  margin: -3px 10px -10px 6px;
}

#page { margin-top: 2vw; }

#attachment {
  width: 100%;
  padding-right: $standard-margin;
  img { display: block; margin: 0 auto; }
}

@import '_comments';
@import '_1280min';
@import '_900max';
@import '_640max';
@import '_480max';
@import '_print';