/* --------------- */
/* --- Extends --- */
/* --------------- */

// Menus
%menus {
    list-style: none;
    padding: 0;
    margin: 0;
    li {
        font-family: inherit;
        position: relative;
        a {
            color: inherit;
            text-decoration: none;
            position: relative;
            white-space: nowrap;
        }
    }
    .sub-menu {
        display: none;
    }
}

// Featured image preview
%img-preview {
    height: 300px;  
    background-position: center center;
    background-size: cover;
    background-color: #f2f2f2;
    position: relative;
    a {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #000;
        opacity: 0.2;
        transition: opacity 0.3s ease-in-out;
        &:hover {
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }
    }
}

%btn {
    display: inline-block;
    padding: 8px 20px;
    text-decoration: none;
    text-transform: uppercase;
    background: inherit;
    color: inherit;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    &:hover {
        background: inherit;
        color: inherit;
        transition: all 0.3s ease-in-out;
    }
}


/* --------------------- */
/* --- Global styles --- */
/* --------------------- */

// Framework for site width.
.container_wrap {
    display: grid;
    grid-gap: 0 15px;
    .container {
        grid-column: 2 / 3;
    }
}

// WordPress menus
.menu {
    @extend %menus;
}

// Sidebar
.sidebar {
    .widget {
        margin-bottom: 15px;
        .widget-title {
            margin-bottom: 5px;
        }
        ul {
            @extend %menus;    
        }
    }
}

// pagination 
.pagination {
    padding: 10px 0;
    .nav-links {
        .page-numbers {
            border: solid 1px inherit;
            padding: 6px 10px;
            text-decoration: none;
            color: inherit;
            font-family: inherit;
            transition: all 0.2s ease-in-out;
        }
        .current {
            border-color: inherit;
            color: inherit;
        }
        a:hover {
            border-color: inherit;
            background-color: inherit;
            transition: all 0.2s ease-in-out;
        }
    }
    &.next-prev {
        a {
            text-decoration: none;
            color: inherit;
            border: solid 1px inherit;
            transition: all 0.2s ease-in-out;
            &:hover {
                border-color: inherit;
                background-color: inherit;
                transition: all 0.2s ease-in-out;
            }
        }
    }
}

// Error 404
.custom-404 {
    padding: 30px 15px 60px;
}