/**
 * Fallsky Lite Fallback CSS for browsers don't support CSS Variables (aka CSS Custom Properties)
*/
$body-font:            'Roboto', sans-serif;
$heading-font:         'Source Sans Pro', sans-serif;
$primary-color:        #c09f68;
$light-color:          #fff;
$text-color:           #212121; 
$content-color:        #515151;
$dark-color:           #282828; 
$dark-text-color:      #fff;
$dark-content-color:   #e2e2e2;

/* Typography
   ========================================================================== */

body,
button,
input,
select,
textarea,
.ui-widget,
.widget-title,
.comments h2.comments-title,
.comment-respond h3.comment-reply-title,
.search-screen .shortcuts-cat span.counts,
.error404 .page-404-page-header h1.page-title,
blockquote cite,
blockquote small {
    font-family: $body-font;
}

.site-branding .site-title,
.post-title,
.cat-links,
blockquote,
.wp-caption-text,
.fallsky-lite-fullmenu .main-navigation,
.fallsky-lite-fullmenu .search input,
.search-screen .search input,
.search-screen .shortcuts-cat,
.comments ol.comment-list li .comment-author b.fn,
h1,
h2,
h3,
h4,
h5,
h6,
.post-entry .dropcap:first-letter,
.widget.widget_rss ul li a.rsswidget,
.widget.widget_recent_entries a,
.widget_recent_comments ul li > a {
    font-family: $heading-font;
}

/* General Colors
   ========================================================================== */

.light-color {
    background: $light-color;
    color: $text-color;
    
    #page {
        background-color: $light-color;
    }
}

.dark-color {
    background: $dark-color;
    color: $dark-text-color;
    
    #page {
        background-color: $dark-color;
    }
}

/* Text Colors
   ========================================================================== */

.post-entry {
    color: $content-color;
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    form,
    blockquote {
        color: $text-color;
    }
}

.error404 {
    .page-404-container p {
        color: $content-color;
    }
    
    &.dark-color .page-404-container p {
        color: $dark-content-color;
    }
}

.comments #respond p.comment-notes,
.comments ol.comment-list li .comment-content p {
    color: $content-color;
}

.single #primary .author-bio .author-bio-text {
    color: $content-color;
}

/* Primary Colors
   ========================================================================== */

.primary-color-enabled {
    a,
    blockquote:before,
    .comments ol.comment-list li .comment-metadata,
    .no-touch & .comments ol.comment-list li a.comment-reply-link:hover,
    .no-touch & .widget a:not(.button):hover,
    .no-touch & .posts .post .post-title a:hover,
    .widget-area .widget .textwidget a:not(.button) {
        color: $primary-color;
    }
    
    .site-header nav ul.primary-menu > li.button > a,
    #page .button,
    #page input[type="submit"],
    mark,
    .cat-links a:before,
    .pagination .page-numbers.current:after,
    .no-touch & .widget.widget_calendar table#wp-calendar tbody a:hover {
        background: $primary-color;
    }
}

.no-touch .single.primary-color-enabled #primary > article .post-tag-cloud .tagcloud a:hover,
.single.primary-color-enabled #primary > article .post-tag-cloud .tagcloud a:focus {
    border-bottom-color: $primary-color;
}

.post-entry,
.comment-content {
    ul li:before {
        .primary-color-enabled & {
            background: $primary-color;
        }
    }
}

/* Button & Submit Button Colors
   ========================================================================== */

body:not(.primary-color-enabled) {
    &.light-color #page {
        .button,
        input[type="submit"] {
            background: #000;
            color: #fff;
        }
    }
    
    #page .site-footer.dark-color {
        .button,
        input[type="submit"] {
            background: #fff;
            color: #000;
        }
    }
}

.light-color .posts .post .more-btn .read-more-btn {
    background: #000;
    color: #fff;
}

@media screen and (min-width: 1120px) {
    .primary-color-enabled .site-header .site-header-menu .main-navigation ul.sub-menu li.current-menu-item > a, 
    .primary-color-enabled .site-header .site-header-menu .main-navigation ul.sub-menu li.current-menu-ancestor > a {
        color: $primary-color;
    }
}