/*
Theme Name: Squirrel Framework
Theme URI: https://labs.thecreatology.com/squirrel/
Description: An independent WordPress website framework with all flexibility and extensibility to customise in-house.
Version: 1.2.2
Author:	Aky Joe
Author URI: https://www.thecreatology.com/
Distributor: https://www.thecreatology.com/

WARNING: DO NOT EDIT THIS FILE.
*/

:root {
    --adminbar-height: 32px;
    --navbar-height: 72px;
    --navbar-margin: 10px;
    --navbar-togggle-top: 10px;
    --footer-height: 40px;
    
    --deck-1-width: 98%;
    --deck-1-margin: 1%;
    --deck-2-width: 48%;
    --deck-2-margin: 1%;
    --deck-3-width: 31%;
    --deck-3-margin: 1%;
    
    --light-grey: #ddd;
}
@media all and (max-width: 782px){
    :root {
        --adminbar-height: 46px;
        --navbar-height: 57px;
        --navbar-margin: 20px;
        --footer-height: 64px;
        --deck-1-width: 88%;
        --deck-1-margin: 6%;
        --deck-2-width: 88%;
        --deck-2-margin: 6%;
        --deck-3-width: 88%;
        --deck-3-margin: 6%;
    }   
}

/*---- Color ----*/
.page-item.active .page-link,
.pagination .post-page-numbers.current .page-link,
.badge-action,
.badge-action a,
.btn-action,
.btn-action:hover,
.btn-outline-action:hover,
.btn-outline-action:hover a,
.bypostauthor div.comment-author,
.bypostauthor div.comment-author a{
    color: var(--bs-white);
}
.page-link,
.page-link:focus,
.card-title:hover a,
.btn-outline-action,
.text-action{
    color: var(--bs-primary);
}
.card-title a,
.page-link:hover{
    color: #333;
}
/*---- End Color ----*/

/*---- Background ----*/
.navbar.text-white #nav-icon:after,
.navbar.text-white  #nav-icon:before,
.navbar.text-white  #nav-icon span{
    background-color: var(--bs-white);
}

.page-item.active .page-link,
.pagination .post-page-numbers.current .page-link,
.badge-action,
.badge-action a,
.btn-action,
.btn-outline-action:hover,
.bg-action,
.bypostauthor div.comment-author{
    background-color: var(--bs-primary);
}

#nav-icon:after,
#nav-icon:before, 
#nav-icon span{
    background-color: var(--bs-dark);
}
/*---- End Background ----*/

/*---- Borders ----*/
.page-item.active .page-link,
.pagination .post-page-numbers.current .page-link,
.btn-outline-action{
    border-color: var(--bs-primary);
}
.navbar .dropdown-menu{
    border-radius: 0;
}
/*---- End Borders ----*/

/*---- Display ----*/
.navbar .nav-item .dropdown-menu,
.navbar .nav-item .dropdown-menu .dropdown-menu{
    display: none;
}

/*---- End Display ----*/

/*---- Position ----*/
.adminbar #wpadminbar,
#nav-icon.navbar-toggler{
    position: fixed;
}
/*---- End Position ----*/


/*---- Word Break ----*/
h1,
h2,
h3,
h4,
h5,
h6,
p,
.title{
    word-break: break-word;
}
/*---- End Word Break ----*/

.clearfix:before, 
.clearfix:after{
    content: "";
    display: table;
}
.clear,
.clearfix:after{
    clear: both;
}
.clearfix{
    zoom: 1;
}
a{
    text-decoration: none;
    -webkit-transition: 400ms all ease;
    transition: 400ms all ease;
}
img, svg{
    max-width: 100%;
    height: auto;
}
.btn-xs, .btn-group-xs > .btn {
    border-radius: 0.2rem;
    font-size: x-small;
    padding: 0.15rem 0.5rem;
}
body:not(.adminbar){
    padding-top: calc( var(--navbar-height) + var(--navbar-margin) );
}
.adminbar{
    padding-top: calc( var(--adminbar-height) + var(--navbar-height) - var(--navbar-margin) );
}

.adminbar .navbar.fixed-top{
    top: var(--adminbar-height);
}
.navbar-collapse.show{
    height: calc(100vh - var(--navbar-height) - var(--navbar-margin) );
    overflow-y: scroll;
}
#nav-icon.navbar-toggler{
    border-width: 0;
    right: 10px;
    top: var(--navbar-togggle-top);
    transition: all 400ms linear;
    z-index: 999;
}
#nav-icon:not(.collapsed){
    top: calc(var(--navbar-togggle-top) + 5px );
}
.adminbar #nav-icon{
    top: calc( var(--adminbar-height) + var(--navbar-togggle-top) );
}
.adminbar #nav-icon:not(.collapsed){
    top: calc( var(--adminbar-height) + var(--navbar-togggle-top) + 5px );
}
#nav-icon:after,
#nav-icon:before, 
#nav-icon span {
    border-radius: 0;
    content: '';
    display: block;
    height: 3px;
    margin: 5px 0;
    transition: all 200ms ease-in-out;
    width: 25px;
}

#nav-icon:not(.collapsed):before {
    transform: translateY(0px) rotate(135deg);
}

#nav-icon:not(.collapsed):after {
    transform: translateY(-16px) rotate(-135deg);
}
#nav-icon:not(.collapsed) span {
    transform: scale(0);
}

.navbar .nav-item .dropdown-menu{
    margin-top: 0;
}
.navbar .nav-item:hover .dropdown-menu{
    display: block; 
}
.navbar .dropdown-menu .nav-link{
    font-size: 85%;
}
.navbar .nav-item .dropdown-menu .dropdown-toggle::after{
    float: right;
    position: relative;
    top: 7px;
    transform: rotate(-90deg);
}
.navbar .nav-item .dropdown-menu .dropdown-menu{ 
    left: 100%;
    margin-top: -40px;
}
.navbar .nav-item .dropdown-menu .nav-item:hover .dropdown-menu{
    display: block;
}
@media all and (max-width: 782px){
    .navbar .nav-item .dropdown-menu{
        padding: 0.5em;
    }
    .navbar .nav-item .dropdown-menu .dropdown-toggle::after{
        float: none;
        position: static;
        transform: rotate(0deg);
    }
    .navbar .nav-item .dropdown-menu .dropdown-menu{ 
        left: 0;
        margin-top: 0;
    }
}
@media all and (max-width: 768px){
    .squirrel{
        min-height: calc( 100vh - var(--navbar-height) - var(--footer-height) - 1.25em);
    }   
}
@media (min-width: 769px){
    .squirrel{
        min-height: calc( 100vh - var(--navbar-height) - var(--footer-height) - 3.75em);
    }
}
@media (min-width: 1440px){
    .squirrel{
        min-height: calc( 100vh - var(--navbar-height) - var(--footer-height) - 6.5em);
    }
}
.card-columns {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 1.25rem;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem;
}
.card-columns .card {
    display: inline-block;
    margin-bottom: .75rem;
    width: 100%;
}
.card-deck{
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    margin-right: -15px;
    margin-left: -15px;
}
.card-deck.deck-1 .col{
    flex: var(--deck-1-width) 0 0;
    margin: 0 var(--deck-1-margin) 1em;
}
.card-deck.deck-2 .col {
    flex: var(--deck-2-width) 0 0;
    margin: 0 var(--deck-2-margin) 1em;
}
.card-deck.deck-3 .col {
    flex: var(--deck-3-width) 0 0;
    margin: 0 var(--deck-3-margin) 1em;
}
.card .card-img-overlay{
    background-color: #0004;
}

.is-single .post-head{
    margin-bottom: 1.5em;
}
.is-single .post-title{
    font-size: 2.5rem;
}
.page-meta h1{
    font-size: 1.75rem;
}
@media all and (max-width: 782px){
    .is-single .post-title{
        font-size: 1.75rem;
    }   
}
.hands .card-title{
    font-size: 1.25rem;
}
.hands .widget ol,
.hands .widget ul{
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
.hands .widget li a{
    border-bottom: 1px solid var(--light-grey);
    display: block;
    padding: 0.5em 0.25em;
}
.hands .widget{
    font-size: 0.9rem;
}
.page-item.active .page-link,
.pagination .post-page-numbers.current .page-link{
    z-index: 3;
}
.comment #respond{
    margin: 1rem;
}
.bypostauthor div.comment-author{
    padding: 0.5rem;
}
.bypostauthor div.comment-author .btn-outline-action{
    border-color: var(--bs-white);
}