/* Reset */
/* Source: http://stackoverflow.com/a/21652935/157216 */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    display: table;
    width: 100%;
    height: 100%;
}

.content {
    display: table-row;
    height: 100%;
}

.content-body {
    display: table-cell;
    padding: 20px;
    background: #e7e7e7;
}

.header, .footer {
    padding: 10px 20px;
    background: #f7f7f7;
}

/**
 * Site header
 */
.site-header {
    border-top: 5px solid $grey-color-dark;
    border-bottom: 1px solid $grey-color-light;
    min-height: 56px;

    // Positioning context for the mobile navigation icon
    position: relative;
    background-color: floralwhite;
}

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

    &,
    &:visited {
        color: $grey-color-dark;
    }
    float: right;
}

.site-nav {
    float: right;
    line-height: 56px;

    .menu-icon {
        display: none;
    }

    .page-link {
        color: $text-color;
        line-height: $base-line-height;

        // Gaps between nav items, but not on the first one
        &:not(:first-child) {
            margin-left: 20px;
        }
    }

    @include media-query($on-palm) {
        position: absolute;
        top: 9px;
        right: 30px;
        background-color: $background-color;
        border: 1px solid $grey-color-light;
        border-radius: 5px;
        text-align: right;

        .menu-icon {
            display: block;
            float: right;
            width: 36px;
            height: 26px;
            line-height: 0;
            padding-top: 10px;
            text-align: center;

            > svg {
                width: 18px;
                height: 15px;

                path {
                    fill: $grey-color-dark;
                }
            }
        }

        .trigger {
            clear: both;
            display: none;
        }

        &:hover .trigger {
            display: block;
            padding-bottom: 5px;
        }

        .page-link {
            display: block;
            padding: 5px 10px;
        }
    }
}

.site-footer {
    border-top: 1px solid $grey-color-light;
    //padding: $spacing-unit 0;
    background-color: floralwhite;
}

.footer-heading {
    font-size: 18px;
    margin-bottom: 0;
    padding-top: .75em;
}

.contact-list,
.social-media-list {
    list-style: none;
    margin-left: 0;
}

.social-media-list .icon {
    width: 1em;
}

#mail-icon {
  filter: invert(100);
}

.footer-col-wrapper {
    font-size: 15px;
    color: $grey-color;
    display: inline-flex;
    margin-top: 1em;
    //margin-left: -$spacing-unit / 2;

    @extend %clearfix;
}

.footer-col {
    float: left;
    //margin-bottom: $spacing-unit / 2;
    padding-left: $spacing-unit / 2;
}

.footer-col-1 {
    width: -webkit-calc(35% - (#{$spacing-unit} / 2));
    width: calc(35% - (#{$spacing-unit} / 2));
}

.footer-col-2 {
    width: -webkit-calc(20% - (#{$spacing-unit} / 2));
    width: calc(20% - (#{$spacing-unit} / 2));
}

.footer-col-3 {
    width: -webkit-calc(45% - (#{$spacing-unit} / 2));
    width: calc(45% - (#{$spacing-unit} / 2));
}

@include media-query($on-laptop) {
    .footer-col-1,
    .footer-col-2 {
        width: -webkit-calc(50% - (#{$spacing-unit} / 2));
        width: calc(50% - (#{$spacing-unit} / 2));
    }

    .footer-col-3 {
        width: -webkit-calc(100% - (#{$spacing-unit} / 2));
        width: calc(100% - (#{$spacing-unit} / 2));
    }
}


@include media-query($on-palm) {
    .footer-col {
        float: none;
        width: -webkit-calc(100% - (#{$spacing-unit} / 2));
        width: calc(100% - (#{$spacing-unit} / 2));
        padding-left: unset;
    }

    #footer_description, #gravatar_container, #footer_build_status,
        .footer-heading, #license_link {
        display: none;
    }

    #license {
        font-size: 9px;
    }

    .site-footer {
      text-align: center;
    }

    .social-media-list {
        display: flex;
        margin-top: 1em;
        padding-right: unset;
    }

    #motto {
        display: none;
    }

    .social-media-list li {
        margin-right: 4px;
    }

    ul, ol {
        margin-right: auto;
    }
}


/**
 * Page content
 */
.page-content {
    padding: $spacing-unit 0;
}

.page-heading {
    font-size: 20px;
}

.post-list {
    margin-left: 0;
    padding-right: initial;
    list-style: none;

    > li {
        margin-bottom: $spacing-unit;
    }
}

.post-list h2 {
    margin-bottom: initial;
}

.post-meta {
    font-size: $small-font-size;
    color: $grey-color;
}

.post-link {
    display: block;
    font-size: 24px;
    font-weight: bold;
}

.post-header {
    margin-bottom: $spacing-unit;
}

.post-title {
    letter-spacing: -1px;
    line-height: 1.25;
    margin-bottom: 0;

    @include media-query($on-laptop) {
        font-size: 36px;
    }
}

.post-content {
    margin-bottom: $spacing-unit;

    h1 {
        font-size: 34px;

        @include media-query($on-laptop) {
            font-size: 36px;
        }
    }

    h2 {
        font-size: 32px;

        @include media-query($on-laptop) {
            font-size: 28px;
        }
    }

    h3 {
        font-size: 26px;

        @include media-query($on-laptop) {
            font-size: 22px;
        }
    }

    h4 {
        font-size: 20px;

        @include media-query($on-laptop) {
            font-size: 18px;
        }
    }
}

/* Extra styles */

.circle {
    clip-path: circle();
    width: 100px;
}

#gravatar {
    //margin-top: 5em;
}

table, td, th {
    border: 1px dotted;
}

.image-caption {
    text-align: center;
    color: $grey-color;
    margin-top: $spacing-unit / 3;
}

ul, ol {

    list-style-type: persian;
}

a {
    color: $text-color;
}

a:hover {
    text-decoration: none;
    color: $brand-color;
}

a:visited {
    color: darken($brand-color, 20%);
}

h1, h2:not(.footer-heading), h3, h4, h5, h6 {
    color: darken($header-color, 20%);
    margin-bottom: unset;
}

/* Style for glyphs in quotation marks, courtesy of EnigmaRM http://stackoverflow.com/a/16326442/157216 */
blockquote {
    border-left: none;
    padding-right: $spacing-unit / 2;
    padding-left: none;
    font-size: x-large;
    margin: 0.25em 0;
    padding: 0.35em;
    line-height: 1.45;
    position: relative;
    //background-color: lighten($grey-color, 47%);
}

blockquote p {
    border-right: 4px solid $brand-color;
    padding-right: $spacing-unit / 2;
}

pre {
    overflow-x: auto;
}

/* To adapt different screen sizes, mostly for code blocks */
@media screen and (max-width: 240px) {
    pre {
        width: 200px;
    }

    li .list-meta-col {
        display: none;
    }
}

@media screen and (max-width: 540px) {
    li .list-meta-col {
        display: none;
    }
}

@media screen and (min-width: 240px) and (max-width: 280px) {
    pre {
        width: 240px;
    }
}

/*Including Apple iPhone 5 */
@media screen and (min-width: 280px) and (max-width: 320px) {
    pre {
        width: 260px;
    }
}

/*Including Apple iPhone 5 */
@media screen and (min-width: 321px) and (max-width: 360px) {
    pre {
        width: 300px;
    }
}

@media screen and (min-width: 361px) and (max-width: 400px) {
    pre {
        width: 340px;
    }
}

/* Nexus 4 */
@media screen and (min-width: 384px) and (max-width: 384px) {
    pre {
        width: 330px;
    }
}

@media screen and (min-width: 401px) and (max-width: 540px) {
    pre {
        width: 365px;
    }
}

@media screen and (min-width: 541px) and (max-width: 640px) {
    pre {
        width: 500px;
    }
}

@media screen and (min-width: 641px) and (max-width: 768px) {
    pre {
        width: 600px;
    }
}

/* iPad */
@media screen and (min-width: 768px) and (max-width: 768px) {
    pre {
        width: 705px;
    }
}

/* Apple iPhone 6 */
@media screen and (min-width: 375px) and (max-width: 375px) {
    pre {
        width: 323px;
    }
}

/* Apple iPhone 6 Plus */
@media screen and (min-width: 414px) and (max-width: 414px) {
    pre {
        width: 363px;
    }
}

.site-header, .site-footer {
    background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%) 8px 9px;
    background-color: #282828;
    background-size: 16px 16px;
    border-top: none;
    color: white;
}

.site-nav {
    float: left;

    @include media-query($on-palm) {
        right: -webkit-calc(88% - (#{$spacing-unit} / 2));
        right: calc(88% - (#{$spacing-unit} / 2));
    }
}

.footer-col {
    float: right;
}

/* Correcting direction for code blocks */
.code, .highlighter-coderay, .highlight {
    direction: ltr;
}

.post-title, a.post-link {
    color: darken($brand-color, 10%);
}

/* Center page titles */
.post-title {
    text-align: center;
    font-weight: bold;
    font-size: 2em;
}

.footnotes {
    font-size: small;
}

/* To center images */
.center {
    text-align: center;
}

.post-meta {
    @extend .center;

    //font-family: 'Open Sans', sans-serif;
}

/* Dotted bottom border for links */
.post-content p a:hover {
    border-bottom: 1px dotted;
    color: $brand-color;
}

.post-content a {
    border-bottom: 1px dotted;
    color: darken($brand-color, 10%);
}

.site-footer {
    padding-bottom: 0px;
}


.site-header {
    border-bottom: none;
}

/* Overwrite colors for header and footer */
.site-title, .site-title:visited {
    color: white;
}

.site-title a, .site-footer a {
    color: white;
}

/* Fix incorrect video sizes in post content (which messes the gradient lines */
.post-content iframe {
    width: 100%;
}

.border {
    border-style: dotted;
    border-radius: 10px;
    border-color: $brand-color;
}

.post-image {
    text-align: center;

    img {
        width: 50%;
        display: inline;
    }
}

.list-meta-col {
    display: inline-block;
    width: 160px;
    text-align: right;
}

#post-list {
    list-style: none;
}

#post-list a {
    color: $text-color;
}

#post-list a:hover {
    color: $brand-color;
}

/* For license text */
#license {
    font-style: small;
}

#forkme {
    @include media-query($on-palm) {
        display: none;
    }
}

/* Tag cloud sets. Numbers demonstrate repeat frequency for each tag */

#post-tags {
    vertical-align: middle;

    > i {
        background-image: url($assets-dir + "/img/noun_4018.png");
        display: inline-block;
        width: 14px;
        height: 14px;
        margin-top: 1px;
        line-height: 14px;
        background-repeat: no-repeat;
        background-size: 15px 15px;
    }

    > a {
        vertical-align: middle;
    }
}

#tag-cloud [class^=set-] {
    color: $text-color;

    &:hover {
        color: $brand-color;
    }
}

.set-1 {
    font-size: 0.7em;
}

.set-2 {
    font-size: 0.8em;
}

.set-3 {
    font-size: 0.9em;
}

.set-4 {
    font-size: 1.0em;
}

.set-5 {
    font-size: 1.1em;
}

.set-6 {
    font-size: 1.2em;
}

.set-7 {
    font-size: 1.3em;
}

.set-8 {
    font-size: 1.4em;
}

.set-9 {
    font-size: 1.5em;
}

.set-10 {
    font-size: 1.6em;
}

@counter-style abjad {
    system: additive;
    range: 1 1000;
    additive-symbols: 1000 "\63A", 900 "\638", 800 "\636", 700 "\630", 600 "\62E", 500 "\62B", 400 "\62A", 300 "\634", 200 "\631", 100 "\642", 90 "\635", 80 "\641", 70 "\639", 60 "\633", 50 "\646", 40 "\645", 30 "\644", 20 "\6A9", 10 "\649", 9 "\637", 8 "\62D", 7 "\632", 6 "\648", 5 "\FEEB", 4 "\62F", 3 "\62C", 2 "\628", 1 "\627\644\641";
}

@counter-style abjad-persian {
    system: additive;
    range: 1 1000;
    additive-symbols: 1000 "\63A", 900 "\638", 800 "\636", 700 "\630", 600 "\62E", 500 "\62B", 400 "\62A", 300 "\634", 200 "\631", 100 "\642", 90 "\635", 80 "\641", 70 "\639", 60 "\633", 50 "\646", 40 "\645", 30 "\644", 20 "\6AF", 10 "\649", 9 "\637", 8 "\62D", 7 "\698", 6 "\648", 5 "\FEEB", 4 "\62F", 3 "\686", 2 "\67E", 1 "\627\644\641";
    suffix: ". ";
}