/* blog home page
========================================================================================================================================================================================================
========================================================================================================================================================================================================
======================================================================================================================================================================================================== */

/* main container */
html > body > .main-wrapper > .content-wrapper > .content.blog-home
{
    /* variables */
    --blog-home-section-padding: 5em;

    /* standard rules */
    min-height: 100vh; padding: 0 0 10em 0;
}

/* mobile settings */
@media only screen and (max-width: 1280px)
{
    html > body > .main-wrapper > .content-wrapper > .content.blog-home {--blog-home-section-padding: 4em;}
}
@media only screen and (max-width: 1024px)
{
    html > body > .main-wrapper > .content-wrapper > .content.blog-home {--blog-home-section-padding: 3em;}
}
@media only screen and (max-width: 768px)
{
    html > body > .main-wrapper > .content-wrapper > .content.blog-home {--blog-home-section-padding: 2em;}
}
@media only screen and (max-width: 480px)
{
    html > body > .main-wrapper > .content-wrapper > .content.blog-home {--blog-home-section-padding: 1em;}
}



















/* default blog home section
======================================================================================================================================================================================================== */

/* main container */
html > body .content.blog-home .blog-home-section {padding: var(--blog-home-section-padding);}




















/* page title
======================================================================================================================================================================================================== */

/* main container */
html > body .content.blog-home .blog-home-title
{
    background: linear-gradient(to top right, rgba(0,0,0,0.5), rgba(0,0,0,0.25));
    border-width: 0 0 0.2rem 0; border-style: solid; border-color: rgba(255,255,255,0.25);
    box-shadow: 0 1em 2em 0.5em rgba(0,0,0,0.15);
}

/* mobile settings */
@media only screen and (max-width: 480px)
{
    html > body .content.blog-home .blog-home-title {padding: calc(var(--blog-home-section-padding) * 2) var(--blog-home-section-padding);}
}





/* heading tag
==================================================================================================== */

/* main container */
html > body .content.blog-home .blog-home-title :is(h1,h2,h3,h4,h5,h6)
{
    margin: 0; padding: 0;
    text-align: center; text-transform: uppercase;
    font-size: 2.6em; line-height: 1.35em;
    text-shadow: 0.1em 0.1em 0.1em rgba(0,0,0,0.25);
}

/* mobile settings */
@media only screen and (max-width: 1024px)
{
    html > body .content.blog-home .blog-home-title :is(h1,h2,h3,h4,h5,h6) {font-size: 5vw;}
}




















/* blog posts list
======================================================================================================================================================================================================== */

/* main container */
/*html > body .content.blog-home .blog-posts-list {}*/



















/* filter and sort button
======================================================================================================================================================================================================== */

/* main container */
html > body .blog-menu-button-wrapper
{
    position: fixed; top: calc(var(--header-height) + var(--blog-home-title-height) + 0.75em); right: 0; display: none; float: right;
    will-change: auto;
    transition: transform 0.2s ease 0s, opacity 0.2s ease 0s, visibility 0.2s ease 0s;
}

/* mobile settings */
@media only screen and (max-width: 1024px)
{
    html > body .blog-menu-button-wrapper {display: block;}
}





/* visibility
==================================================================================================== */

/* hidden */
html[data-blog-options="true"] > body .blog-menu-button-wrapper
{
    transform: translate3d(100%,0,0);
    opacity: 0; visibility: hidden;
}

/* visible */
html[data-blog-options="false"] > body .blog-menu-button-wrapper
{
    transform: translate3d(0.1rem,0,0);
    opacity: 1; visibility: visible;
}





/* link
==================================================================================================== */

/* main container */
html > body .blog-menu-button-wrapper a
{
    z-index: 1;
    position: relative; display: block; float: left; margin: 0; padding: 2em;
    color: var(--white);
    background: linear-gradient(to top right, var(--eerie-norm), var(--eerie-lite));
    border-radius: 1em 0 0 1em;
    box-shadow: inset 0 0 0 0.1rem rgba(255,255,255,0.15), 0 0.5em 1em 0.25em rgba(0,0,0,0.25);
}

/* hover */
html > body .blog-menu-button-wrapper a:hover
{
    text-decoration: none;
    color: var(--white);
}





/* scaling background
==================================================================================================== */

/* main container */
html > body .blog-menu-button-wrapper a::before
{
    z-index: 1;
    transform: scaleX(0); transform-origin: left center;
    top: 0; left: 0; display: block; float: left;
    background: linear-gradient(to top right, var(--persian-norm), var(--persian-lite));
    border-radius: inherit;
    opacity: 0;
    will-change: auto;
    transition: transform 0.2s ease 0s, opacity 0.2s ease 0s;
}

/* hover */
html > body .blog-menu-button-wrapper a:hover::before
{
    transform: scaleX(1); transform-origin: right center;
    opacity: 1;
}





/* icon
==================================================================================================== */

/* main container */
html > body .blog-menu-button-wrapper a .icon
{
    z-index: 2;
    position: relative; display: block; float: left; clear: both; margin: 0;
}

/* icon container */
html > body .blog-menu-button-wrapper a .icon::before
{
    position: relative; display: block; float: left; height: auto; content: "\f002";
    text-align: center;
    font-family: var(--fa7); font-weight: 700; font-size: 2em; line-height: 1em;
}





/* text
==================================================================================================== */

/* main container */
html > body .blog-menu-button-wrapper a .text
{
    z-index: 3;
    position: relative; display: none; float: left; clear: both;
    text-align: center; text-transform: uppercase; white-space: nowrap;
    font-family: var(--oswald); font-size: 1.6em; line-height: 1em;
}



















/* close button
======================================================================================================================================================================================================== */

/* main container */
html > body .close-blog-menu-button-wrapper
{
    position: fixed; top: calc(var(--header-height) + 2em); left: 0; display: none;
    background: linear-gradient(to top right, var(--eerie-norm), var(--eerie-lite));
    border-radius: 50%;
    box-shadow: inset 0 0 0 0.1rem rgba(255,255,255,0.15), 0 0.5em 1em 0.25em rgba(0,0,0,0.35);
    will-change: auto;
    transition: transform 0.2s ease 0s, opacity 0.2s ease 0s, visibility 0.2s ease 0s;
}

/* mobile settings */
@media only screen and (max-width: 1024px)
{
    html > body .close-blog-menu-button-wrapper {display: block;}
}





/* visibility
==================================================================================================== */

/* hidden */
html[data-blog-options="false"] > body .close-blog-menu-button-wrapper
{
    transform: translate3d(-100%,0,0);
    opacity: 0; visibility: hidden;
}

/* visible */
html[data-blog-options="true"] > body .close-blog-menu-button-wrapper
{
    transform: translate3d(1em,0,0);
    opacity: 1; visibility: visible;
}





/* icon
==================================================================================================== */

/* main container */
html > body .close-blog-menu-button-wrapper a
{
    display: block; float: left; width: auto; height: auto; margin: 0; padding: 0;
    color: var(--white);
    border-radius: inherit;
}

/* hover */
html > body .close-blog-menu-button-wrapper a:hover {color: var(--white);}





/* icon
==================================================================================================== */

/* main container */
html > body .close-blog-menu-button-wrapper a::before
{
    z-index: 1;
    position: relative; display: block; float: left; width: 2em; height: 2em; content: "\f00d";
    text-align: center;
    font-family: var(--fa7); font-weight: 700; font-weight: 700; font-size: 3em; line-height: 2em;
    border-radius: inherit;
}





/* scaling background
==================================================================================================== */

/* main container */
html > body .close-blog-menu-button-wrapper::after
{
    z-index: -1;
    transform: scale(0); transform-origin: center center;
    top: 0; left: 0; display: block; float: left;
    background: linear-gradient(to top right, var(--persian-norm), var(--persian-lite));
    border-radius: inherit;
    will-change: auto;
    transition: transform 0.2s ease 0s, opacity 0.2s ease 0s;
}

/* hover */
html > body .close-blog-menu-button-wrapper:hover::after
{
    transform: scale(1);
    opacity: 1;
}