/*    
Index template styles
*/
$primary-background: #fff;
$primary-color: #000;
$primary-hovor-color: #DAA520;
$primary-article-padding: 0;
$secondary-background: #fff;


#primary {
    @include container(12 of 12);
        #main{
        @include clearfix();
        article {
            @include span(4 of 12);
            &:nth-child(3n) {           
                margin-right: 0;
            }
            margin-bottom: gutter(12);
        } // end of article
        @include susy-breakpoint($phones) {        
            article {
                @include span(12 of 12);   
            }
        } //end of susy-breakpoint
        @include susy-breakpoint($small) {        
            article {
                @include span(6 of 12);   
                &:nth-child(2n) {           
                    margin-right: 0;
                }
                &:nth-child(3n) {           
                    margin-right: gutter(12);
                }
            }
        } //end of susy-breakpoint
    
    background: $primary-background;
    color: $primary-color;
    a {
        color: $primary-color;
    }
    a:hover {
        color: $primary-hovor-color;
    }
    
    // Entry header and Post meta
    
    .entry-content {
        margin-top: 20px;
    }
     .index-thumb {
        position: relative;
    }   
    #meta {
        width: 35%;
        min-height: 75px;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top:20px;
        left: 0;
        background: black;
        color: white;
        a {
            background: black;
            color: white;    
        }
        .posted-on, .byline {
            display: block;
            clear:both;
            text-align: left;
        }
        .posted-on a, .byline a {
            font-size: 15px;
            font-size: 1.5rem;   
        }
        .byline {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        opacity: 0.7;
    } // end of meta
    
    h2.entry-title {
       width: 65%;
       min-height: 75px;
       margin: 0;
       position: absolute;
       top: 20px;
       right: 0;    
       background: white;
       color: black;
       display:flex;
       align-items: center;
       justify-content: center;
       position: absolute;    
       a {
          background: white;
          color: black;    
       }    
          opacity: 0.7;
    } //end of .entry-title
            
    //Entry footer
    span.comments-link {
        display: block;
        text-align: center;       
    }
    span.comments-link a {
        font-style: italic;            
    }        
    footer.entry-footer {
        display: block;
        text-align: center;
    }    
    i.fa.fa-arrow-circle-o-right {
        display: block;
        font-weight: bold;
        font-size: 1.8rem;
    }    
    a.post-edit-link {
        display: block;
    }
        
  } //end of main
} //end of primary

//    Main widgetized area
    #main-widget {
        background: black;
        color: rgb(121, 121, 121);
        a {
            color: rgb(121, 121, 121);
        }
        a:hover {
            color: white;
        }
        font-size: 1.7rem;
        margin: 0 -20px;
        padding: 0 20px;
        h2.widgetTitle {
            color: white;
        }
        #widgets-holder {
            @include container(12 of 12);  
            .singleWidget {
                border-right: 1px solid rgb(121, 121, 121);
                &:nth-child(4n) {
                    border-right: 0;    
                }
                ul {
                    margin:0;
                    padding: 0;
                }
                caption {
                    color: white;
                    font-family: "Josefin Sans";
                    font-size: 30px;
                    font-size: 3rem;
                    line-height: 30px;
                    line-height: 3rem;
                    margin: 0.83em 0;
                }
                @include span(3 of 12);  
                &:nth-child(4n) {           
                    margin-right: 0;
                }
                margin-bottom: gutter(12);
            } //end of .singleWidget
            @include susy-breakpoint($phones) {
                .singleWidget {
                    border-right: 0;
                    @include span(12 of 12);  
                } //end of .singleWidget    
            } //end of phones
            @include susy-breakpoint($small) {
                .singleWidget {
                    @include span(6 of 12);  
                        border-right: 0;
                        &:nth-child(2n) {           
                            margin-right: 0;
                        }
                        &:nth-child(3n) {           
                            margin-right: gutter(12);
                        }
                } //end of .singleWidget
            }
        } // end of #widgets-holder
    } // end of #main-widget

// Secondary

#secondary {
    background: $secondary-background;
    padding: $primary-article-padding;
    overflow: hidden;
    .recentcomments {
        font-size: 1.6rem !important;
    }
    ul {
        padding-left: 0;
        margin-left: 0;
    }
    a {
        color: $primary-color;
        abbr {
            color: $primary-color;
        }
    }
    a:hover {
        color: $primary-hovor-color;
    }
    .widget-title {
        line-height: 2rem;
        font-weight: normal;
    }
    
    form input {
        padding: 0 5px;
        box-sizing: border-box;
        font-size: 1.4rem;
    }
     form input:focus {
        background: #EEE8AA; 
    }

    /* calendar widget */
    #calendar_wrap {
            #wp-calendar {
            width: 100%; 
            caption {
                text-align: right; color: #0000; font-size:12px; margin-top: 10px; margin-bottom: 15px; 
            }
                 thead { font-size: 10px; }
            thead th { padding-bottom: 10px; }
            tbody { color: #aaa; }
            tbody td { background: #f5f5f5; border: 1px solid #fff; text-align: center; padding:8px;}
            tbody td:hover { background: #fff; }
            tbody .pad {background: #f5f5f5;}
            tfoot #next { font-size: 10px; text-transform: uppercase; text-align: right; }
            tfoot #prev { font-size: 10px; text-transform: uppercase; padding-top: 10px; }
        } //end of #wp-calendar
    } //end of #calendar_wrap
    
    /*RSS*/
    .rssSummary {
        font-size: 1.5rem;
    }
    cite {
            font-size: 1rem;
        }
        
} // end of #secondary

.home {
    article:hover {
        box-shadow: 0 2px 4px 1px;
        transform: scale(1.03);
        p{
            padding: 0 5px;
        }
    }
}
