// Import mixins
@import 'mixins';
// Import Bootstrap theme
@import 'bootstrap';
// Import Google Fonts
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');

body {
    overflow-x: hidden;
    font-family: 'Roboto', sans-serif;
}

a {
    color: $link_color;

    // &:hover,
    // &:active,
    // &:focus,
    // &:visited {
    //     color: darken($link_color, 15%);
    // }
}

main a,
aside a,
header a,
footer a,
.subnav a {
    text-decoration: underline;

    &:hover,
    &:active,
    &:focus,
    &:visited {
        text-decoration: underline;
    }
}

.skip-navigation {
    z-index: 10000;

    @extend .position-fixed;
    @extend .border-primary;
    @extend .mt-2;

    a {
        @extend .p-3;
    }
}

a:focus:not(.archive-link) {
    @include linkstyles;
}

.skip-navigation a {
    background: $primary;
    color: dynamic-text-color($primary) !important;

    @include linkstyles;
}

.navbar-toggler {
    border: 0;

    &:focus {
        @include linkstyles;
    }
}

.form-control:focus {
    border-color: $primary;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .25),
                0 0 0 0.2rem rgba($primary, .75);
}

.btn-secondary:focus {
    outline-style: dashed;
    outline-width: 2px;
    outline-color: darken($secondary, 20%);
}

.btn-primary:focus {
    outline-style: dashed;
    outline-width: 2px;
    outline-color: darken($secondary, 20%);
}

.footer .form-control:focus {
    border-color: $secondary;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .25),
                0 0 0 0.2rem rgba(lighten($secondary, 50%), .75);
}

.footer .btn-secondary:focus,
.footer .btn-secondary:active {
    outline-style: dashed;
    outline-width: 2px;
    outline-color: lighten($secondary, 50%);
}

.footer .btn-primary:focus,
.footer .btn-primary:active {
    outline-style: dashed;
    outline-width: 2px;
    outline-color: lighten($primary, 75%);
}

.wp-sticky-admin {
    margin-top: 32px;
}

.sticky-header {
    @extend .fixed-top;
}

.navbar {
    z-index: 3;
    font-weight: 600;
    color: dynamic-text-color($primary);

    @extend .navbar-expand-md;
    @extend .navbar-dark;
    @extend .bg-primary;

    .navbar-nav {
        color: dynamic-text-color($primary);
        @extend .col-12;
        @extend .ml-md-auto;
        @extend .col-md-auto;
    }

    .nav-item {
        transition: all 150ms ease;
    }
    
    .navbar-dark {
        .nav-item {
            box-shadow: inset 0 0 0 lighten($secondary, 10%);
        }
    
        .nav-item:hover {
            box-shadow: inset 0 -5px 0 lighten($secondary, 10%);
        }
    
        .nav-item.active {
            box-shadow: inset 0 -5px 0 lighten($secondary, 15%);
        }
    }
}

.subnav {
    z-index: 0;

    @extend .navbar-expand-md;
    @extend .bg-gradient-light;
    @extend .text-capitalize;
    @extend .py-2;
    @extend .nav;

    .category-tags {
        font-weight: 500;
        
        @extend .list-unstyled;
        @extend .d-flex;
        @extend .flex-wrap;
        @extend .flex-column;
        @extend .flex-md-row;

        @extend .my-auto;
        
        @extend .pb-2;
        @extend .pb-lg-0;

        & a {
            color: $black;
            @extend .nav-item;
        }
    }
    

    .active a {
        font-weight: 500;

        box-shadow: inset 0 -5px 0 $primary;
        text-decoration: none;

        &:focus,
        &:active {
            box-shadow: inset 0 -5px 0 $primary,
                        0 0 0 2px darken($primary, 20%),
                        inset 0 0 3px 1px lighten($primary, 25%);
        }
    }
}

// Collapse nav bar on scroll down
.sub-collapse {
    animation: collapse .5s ease forwards;
}
  
// Open nav bar on scroll up
.sub-open {
    animation: open .5s ease forwards;
}

@keyframes collapse {
    from {
      opacity: 1;
      transform: translateY(0);
      max-height: 100%;
      pointer-events: all;
      overflow: hidden;
    }
    to {
      opacity: 0;
      transform: translateY(-3rem);
      max-height: 0%;
      pointer-events: none;
      overflow: hidden;
    }
  }
  
  @keyframes open {
    from {
      opacity: 0;
      transform: translateY(-3rem);
      max-height: 0%;
      pointer-events: none;
      overflow: hidden;
    }
    to {
      opacity: 1;
      transform: translateY(0);
      max-height: 100%;
      pointer-events: all;
      overflow: visible;
    }
  }

.page-header {
    color: dynamic-text-color($secondary);

    @extend .bg-secondary;
    @extend .mb-0;
    @extend .py-3;
}

.bg-card-gradient {
    background-color: #ece9e6;
    background-image: linear-gradient(to top, lighten(#ece9e6, 5%), #ffffff);
}

.section-image {
    position: relative;
    background-size: cover;
    background-position: center;
    background-color: $secondary;

    &:before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 1));
    }
}

.section-no-image {
    position: relative;
    background-size: cover;
    background-position: center;
    background-image: linear-gradient(35deg, lighten($secondary, 15%), $secondary);

    &:before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 1));
    }
}

.fold {
    color: $white;

    @extend .text-center;
    @extend .text-lg-left;
    @extend .jumbotron;
    @extend .jumbotron-fluid;
    @extend .my-0;

    .card {
        color: $black;
    }
}

.featured-title {
    color: darken($primary, 15%);
    
    @extend .d-inline-block;
    @extend .mr-2;
}

.featured-post-img {
    @extend .rounded-right;
}

.content-before {
    color: dynamic-text-color($secondary);

    @extend .bg-secondary;
    @extend .py-5;
    @extend .my-0;
}

.content-after {
    color: dynamic-text-color($primary);

    @extend .bg-primary;
    @extend .py-5;
    @extend .my-0;


    .content-after-widget {
        color: $black;

        @extend .col-12;
        @extend .col-sm-9;
        @extend .col-md-7;
        @extend .card;
        @extend .card-body;
        @extend .mx-auto;

        &:not(:last-of-type) {
            @extend .mb-4;
        }
    }
}

.content-sidebar {
    @extend .col-md-4;

    .section-title {
        color: dynamic-text-color($primary);

        @extend .bg-primary;
        @extend .card-header;
        @extend .mb-3;
    }

    ul {
        @extend .list-unstyled;
    }
}

.lower-aside-title {
    color: dynamic-text-color($primary);

    @extend .card-header;
    @extend .bg-primary;
}

.footer {
    border-top: 12px ridge $secondary;
    color: dynamic-text-color($primary);

    @extend .pt-3;
    @extend .pb-0;
    @extend .bg-primary;
    @extend .text-center;
    @extend .text-lg-left;

    a, caption {
        color: dynamic-text-color($primary);
    }

    i {
        @extend .mr-1;
    }

    ul {
        @extend .list-unstyled;
    }

    .footer-widgets {
        @extend .row;
    }

    .footer-block {
        @extend .d-flex;
        @extend .flex-column;
        @extend .mt-4;
        @extend .py-4;


        /* one item */
        &:first-child:nth-last-child(1) {
        /* -or- li:only-child { */
            @extend .col-12;
        }
        
        /* two items */
        &:first-child:nth-last-child(2),
        &:first-child:nth-last-child(2) ~ .footer-block {
            @extend .col-sm-6;
            @extend .col-12;
        }
        
        /* three items */
        &:first-child:nth-last-child(3),
        &:first-child:nth-last-child(3) ~ .footer-block {
            @extend .col-lg-4;
            @extend .col-sm-12;
        }
        
        /* four items */
        &:first-child:nth-last-child(4),
        &:first-child:nth-last-child(4) ~ .footer-block {
            @extend .col-lg-3;
            @extend .col-sm-6;
            @extend .col-12;

            @include media-breakpoint-down(md) {
                &:nth-child(even) {
                    border-left: 1px dotted darken($primary, 15%);
                }
            }
        }
        
        @include media-breakpoint-up(lg) {
            &:not(:first-child) {
                border-left: 1px dotted darken($primary, 15%);
            }
        }

        @include media-breakpoint-down(md) {
            &:not(:first-child) {
                border-top: 1px dotted darken($primary, 15%);
            }
        }
    }

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

    .footer-bottom {
        border-top: 1px solid darken($primary, 15%);
        border-left: 1px solid darken($primary, 15%);
        border-right: 1px solid darken($primary, 15%);

        @extend .col-12;
        @extend .d-flex;
        @extend .justify-content-between;
        @extend .bg-gradient-primary;
        @extend .rounded-top;
        @extend .py-4;
        
        ul {
            @extend .list-inline;
            @extend .mb-0;

            li {
                @extend .list-inline-item;
            }
        }

        .top-link {
            @extend .d-flex;

            a {
                @extend .my-auto;
            }
        }
    }
}

#searchresults .card,
#archive .card,
#fourohfour .card {
    border-left: 7px solid $primary;
}

#archive .categories a {
    @extend .badge;
    @extend .badge-primary;
    @extend .text-capitalize;
    @extend .mr-1;
}

// .calendar_wrap {
//     @extend .d-flex;
//     @extend .justify-self-center;
// }


@import 'patterns';