html {
    scroll-behavior:smooth;
}

/* Body    
============================ */

    body {        
        background: var(--color-body-bg);
    }

/* Header
============================ */

    .site-header {
        background: var(--color-body-bg);
    }

    .site-header__container {
        display: flex;
        justify-content: space-between;
        align-items: center;        
        padding: var(--size-24) 0;
    }

    
    /* site-header__navigation ==== */

    .site-header__navigation,
    .site-header__navigation ul {        
        display: flex;
        align-items: center;
        gap: var(--size-32);
        margin: 0;
        padding: 0;
    }

    .site-header__navigation ul {
        list-style: none;
        gap: var(--size-16);
    }

    .site-header__navigation a {
        color: var(--color-text-primary);
        font-weight: 500;
        letter-spacing: .5px;
        transition: color .3s ease;
    }

    .site-header__navigation .current-menu-item a,
    .site-header__navigation a:hover {
        color: var(--color-text-muted);
    }

    .site-header__navigation svg {
        color: var(--color-text-primary);
        transition: color .3s ease;
    }

    .site-header__navigation .site-header__navigation-item--search,
    .site-header__navigation .site-header__navigation-item--moon {
        display: none;
    }

    .site-header__navigation-button {
        width: var(--size-32);
        height: var(--size-32);
        padding: var(--size-8);
        border-radius: var(--size-8);
        background: var(--color-surface);
    }

	.site-header__navigation .menu-header-container,
    .site-header__navigation .menu-header-menu-container,
    .site-header__navigation .menu-item-toogle-theme {
        display: none;
    }
    
    @media (min-width: 768px) {

        .site-header__navigation .site-header__navigation-item--search,
        .site-header__navigation .site-header__navigation-item--moon {
            display: block;
        }

        .site-header__navigation .site-header__navigation-item--menu {
            display: none;
        }

		.site-header__navigation .menu-header-container,
        .site-header__navigation .menu-header-menu-container,
        .site-header__navigation .menu-item-toogle-theme {
            display: flex;
        }
    }

/* Container    
============================ */

    .container {
        margin: 0 var(--size-32);
    }

    @media (min-width: 1024px) {
        .container {
            max-width: 1024px;
            margin: 0 auto;
        }
    }

    @media (min-width: 1200px) {
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
    }


/* Overlay
============================ */    

    .overlay {
        position: fixed;
        inset: 0;
        background: rgba(var(--color-overlay), .5);
        overflow: hidden;
        z-index: 100;
        
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .25s ease, visibility 0s linear .25s;
    }

    body.show-sidenav .overlay,
    body.show-search .overlay {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity .25s ease, visibility 0s;
    }

    body.show-sidenav,
    body.show-search {
        overflow: hidden;
        padding-right: 14px;
    }

/* Search
============================ */ 

    .modal-search {
        position: fixed;
        top: 80px;
        left: calc(50% - 250px);
        width: 500px;

        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        background: var(--color-body-secondary-bg);
        border-radius: var(--size-8);
        z-index: 110;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .25s ease, visibility 0s linear .25s;
    }

    body.show-search .modal-search {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity .25s ease, visibility 0s;
        transition-delay: .15s;
    }

    body.show-search .search-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: var(--size-16) var(--size-32);    
    }

    body.show-search .modal-search h2 {
        color: var(--color-text-primary);
        font-size: var(--size-16);
        font-weight: 500;
        letter-spacing: .5px;
    }

    .modal-search .search-header--close {
        width: var(--size-32);
        height: var(--size-32);
        padding: var(--size-8);
        border-radius: var(--size-8);
        background: var(--color-surface-alt);
        color: var(--color-text-primary);
        transition: color .3s ease;
    }

    .search__list-wrapper {
        width: 100%;
        padding: var(--size-16) var(--size-32);
        margin-bottom: var(--size-16);
    }

    .search__list-wrapper h2 {
        padding-bottom: var(--size-16);
    }

    .search__list-wrapper .search__cotegories {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        gap: var(--size-16);
    }

    .search__list-wrapper .menu-item a{
        display: block;
        font-size: var(--size-14);
        color: var(--color-text-secondary);
        transition: color .3s ease;
    }

    .search__list-wrapper .menu-item a:hover {
        color: var(--color-text-primary);
    }

/* Sidenav
============================ */    

    .sidenav {
        position: relative;
        height: 100%;
        top: 0;
        left: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        background: var(--color-body-secondary-bg);
        -webkit-overflow-scrolling: touch;
        z-index: 110;
        transform: translateX(-100%);
        transition: transform .35s ease;
        transition: .4s;
        transition-delay: 0s;
        overflow: hidden;
    }

    body.show-sidenav .sidenav {
        transform: translateX(0);
        transition-delay: .15s;
    }

    /* Sidenav Header ========== */

    .sidenav .sidenav-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--size-24) var(--size-32);
    }

    .sidenav .sidenav-header__logo-img {
        width:  fit-content;
        height: var(--size-32);
    }

    .sidenav .sidenav-header--close{
        width: var(--size-32);
        height: var(--size-32);
        padding: var(--size-8);
        border-radius: var(--size-8);
        background: var(--color-surface-alt);
        color: var(--color-text-primary);
        transition: color .3s ease;
    }

    /* Sidenav Search ========== */

    .sidenav .sidenav-header__search {
        padding: var(--size-32) 0;        
    }

    /* Sidenav Items =========== */

    .sidenav .sidenav__items {
        display: flex;
        flex-direction: column;    
        padding: var(--size-32);
        font-weight: 500;
    }

    .sidenav .sidenav__item {
        margin-bottom: var(--size-24) ;
    }

    .sidenav .sidenav__link,
    .sidenav .sidenav__dropdown-title {
        display: block;
        width: fit-content;
        height: var(--size-20);
        font-weight: 600;
        letter-spacing: .5px;
        color: var(--color-text-primary);
        transition: color .3s ease;
    }

    .sidenav .sidenav__dropdown {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--size-8);
        cursor: pointer;
        margin-bottom: var(--size-16);
    }

    .sidenav .sidenav__dropdown .sidenav__item {
        margin-bottom: var(--size-16);
    }

    .sidenav .sidenav__link:hover,
    .sidenav .sidenav__dropdown:hover .sidenav__dropdown-title {
        color: var(--color-text-secondary);
    }

    .sidenav__dropdown ~ .sidenav__dropdown-items {
        padding-left: var(--size-16);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease, opacity 0.3s ease;
        opacity: 0;
    }

    .sidenav__items { 
        padding-left: var(--size-16);
        padding-top: var(--size-16);
    }

    .sidenav__dropdown--clicked ~ .sidenav__dropdown-items {
        max-height: 500px;
        opacity: 1;
    }

    .sidenav__dropdown .sidenav__dropdown-icon {
        color: var(--color-text-primary);
        transform: rotate(-90deg);
        transition: transform 0.3s ease, color .3s ease;;
    }

    .sidenav .sidenav__dropdown:hover .sidenav__dropdown-icon {
        color: var(--color-text-secondary);
    }

    .sidenav__dropdown.sidenav__dropdown--clicked .sidenav__dropdown-icon {
        transform: rotate(0);
    }

    /* Sidenav Footer ========== */
    
    .sidenav .sidenav-footer {
        position: absolute;
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: var(--size-24) var(--size-32);
    }

    .sidenav .sidenav-footer__social {
        display: flex;
        gap: var(--size-16);
    }

    .sidenav .sidenav-footer__button {
        width: var(--size-32);
        height: var(--size-32);
        padding: var(--size-8);
        border-radius: var(--size-8);
        background: var(--color-surface-alt);
        color: var(--color-text-primary);
        transition: color .3s ease;
    }

    @media (min-width: 640px) {
        .sidenav {
            max-width: 500px;
        }
    }

/* Footer
============================*/    

    .site-footer {
        margin-top: var(--size-32)
    }

    .site-footer__main-meta {
        display: flex;
        justify-content: flex-start;
        align-items: start;
        flex-direction: column;
        gap: var(--size-14);
    }

    .site-footer__list-title {
        font-size: var(--size-16);
        font-weight: 600;
        color: var(--color-text-primary);
        margin-bottom: var(--size-24);
    }

    .site-footer__description {
        font-size: var(--size-12);
        font-weight: 300;
        color: var(--color-text-primary);
        line-height: 1.5;
    }

    .site-footer__list-wrapper .menu-item a {
        display: block;
        font-size: var(--size-14);
        color: var(--color-text-primary);
        margin-bottom: var(--size-16);
    }

    .site-footer__list-wrapper .menu-item:hover a {
        color: var(--color-text-secondary);
    }

    .site-footer__bar {
        display: flex;
        justify-content: flex-start;
        align-items: start;
        flex-direction: column-reverse;
    }

    .site-footer__copyright {
        font-size: var(--size-12);
        font-weight: 300;;
        color: var(--color-text-secondary);
        padding-top: var(--size-12);
        padding-bottom: var(--size-20);
    }

    .site-footer__privacy {
        display: flex;
        gap: var(--size-16);
        justify-content: space-between;
        margin-top: var(--size-12);
    }

    .site-footer__privacy .menu-item a {
        font-size: var(--size-12);
        font-weight: 300;;
        color: var(--color-text-secondary);
        padding: var(--size-8) 0;
        text-decoration: underline;
    }

    .site-footer__privacy .menu-item:hover a {
        color: var(--color-text-muted);
    }

    @media (min-width: 768px) {

        .site-footer__main-meta {
            padding-top: var(--size-32);
            flex-direction: row;
            gap: var(--size-64);
        }

        .site-footer__description {
            max-width: 350px;
            margin: var(--size-20) 0;
            text-align: justify;
        }

        .site-footer__bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-direction: row;
        }

        .site-footer__privacy {
            margin: 0;
        }

        .site-footer__privacy .menu-item a,
        .site-footer__copyright {
            display: block;
            margin: var(--size-12) 0;
            padding: var(--size-20) 0;
        }
    }

/* Pages
============================*/

    /* Page 404 ================*/

        .page--404 .page__container > p {
            font-size: var(--size-14);
            color: var(--color-text-secondary);
        }

        .page--404 .page__container a {
            color: var(--color-link);
        }

        .page--404 .page__container {
            padding: var(--size-32) 0;
        }

/* Pages Common
============================*/

    .page__title {
        font-size: var(--size-32);
        margin: 0.67em 0;
        color: var(--color-text-primary);
    }

    .page__description {
        font-size: var(--size-24);
        color: var(--color-text-secondary);
        margin-top: var(--size-16);
    }

    .page__posts-load {
        width: 100%;
    }

    .page__button-load {
        display: block;
        width: fit-content;
        padding: var(--size-12) var(--size-16);
        margin: var(--size-24) auto;
        font-size: var(--size-14);
        font-weight: 500;
        letter-spacing: .5px;
        border-radius: var(--size-24);
        color: var(--color-text-primary);
        background: var(--color-button);
        transition: background .3s ease;
    }

    .page__button-load:hover {
        background: var(--color-button-hover);
    }

/* Page--Sidebar
============================*/

    .page__content {
        font-family: 'Inter', sans-serif;
    }

    .page__header--sidebar .page__title {
        margin-top: var(--size-32);
        margin-bottom: var(--size-64);
    }

    .page__content p,
    .page__content .wp-block-list,
    .page__content strong {
        font-size: var(--size-16);
        color: var(--color-text-post);
        line-height: 1.75;
        max-width: 70ch;
        font-weight: 400;
    }

    .page__content strong {
        color: var(--color-text-primary);
    }

    .page__content .wp-block-heading {
        color: var(--color-text-white);
        scroll-margin-top: 90px;
        margin-top: var(--size-32);
        margin-bottom: var(--size-20);
    }

    .wp-block-separator {
        border: none;
        border-top: 1px solid var(--color-text-post);
        margin: var(--size-32) 0;
    }

    .page__content a {
        position: relative;
        color: var(--color-link);
        font-weight: 400;
        line-height: 1.75;
        transition: color .3s ease;
    }

    .page__content a:hover {
        color: var(--color-link-hover);
    }

    .page__content a[rel~="nofollow"] {
        margin-right: var(--size-14);
    }

    .page__content a[rel~="nofollow"]::after {
        position: absolute;
        content: " ↗";
        font-size: var(--size-14);
        top: calc(var(--size-4) * -1);
        right: calc(var(--size-14) * -1);
    }

    .page__content code {
        color: var(--color-text-secondary);
    }

    .page__content .wp-block-code {
        background: var(--color-surface);
        padding: var(--size-16);
        color: var(--color-text-secondary);
        border-radius: var(--size-8);
    }

    @media (min-width: 1024px) {
        .page--home .page__container,
        .page--sidebar .page__container {
            display: flex;
            justify-content: space-between;
            align-items: stretch;
            gap: var(--size-32);
        }

        .page--home .page__sidebar,
        .page--sidebar .page__sidebar {
            flex: 1 0 300px;
            max-width: 320px;
        }
    }

    @media (min-width: 1200px) {
        .page--home .page__container,
        .page--sidebar .page__container {
            gap: var(--size-64);
        }

        .page--home .page__sidebar,
        .page--sidebar .page__sidebar {
            flex: 0 0 320px;
        }

        .page__content {
            max-width: 70ch;
            width: 100%;
        }
    }

/* Page---no-sidebar
============================*/

    .page--no-sidebar .page__title {
        text-align: center;;
    }

    .page--no-sidebar .page__content {
        max-width: 80ch;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .page--no-sidebar .page__content p {
        max-width: 80ch;
    }

/* Component - Search
============================*/

    .component-search {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        padding: 0 var(--size-32);
    }
    
    .component-search .component-search-header {
        font-size: var(--size-20);
        text-align: center;
        font-weight: 600;
        color: var(--color-text-primary);
        margin-bottom: var(--size-32);
    }

    .component-search .component-search-form {
        position: relative;
        display: block;
        width: 100%;
        background-color: var(--color-body-bg);
        border-radius: var(--size-24);
        padding: var(--size-4);
        overflow: hidden;
    }

    .component-search .component-search-input {
        width: 100%;
        height: var(--size-32);
        padding-left: var(--size-16);
        background: transparent;
        border: none;
        outline: none;
        border-radius: var(--size-24);
        font-size: var(--size-14);
        color: var(--color-text-primary);
    }

    .component-search .component-search-submit {
        position: absolute;
        right: var(--size-4);
        top: var(--size-4);
        bottom: var(--size-4);
        padding: 0 var(--size-20);
        background: var(--color-surface);
        border-radius: var(--size-16);
        color: var(--color-text-primary);
        font-size: var(--size-14);
        font-weight: 500;
    }

    .component-search--invert .component-search-form {
        background-color: var(--color-surface);
    }

    .component-search--invert .component-search-input {
        background: var(--color-surface);
    }

    .component-search--invert .component-search-submit {
        background: var(--color-body-bg);
    }

/* Component - Tag Cards
============================*/

    .categories {
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }

    .categories__title {
        font-size: var(--size-20);
        text-align: center;
        font-weight: 600;
        color: var(--color-text-primary);
        margin-bottom: var(--size-32);
    }

    .categories__item {
        background: var(--color-body-bg);
        border-radius: var(--size-8);
        margin-bottom: var(--size-16);
        overflow: hidden;
    }

    .categories__link {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        width: 100%;
        height: auto;
        padding: var(--size-8);
        gap: var(--size-16);
        line-height: 0;
    }

    .categories__image {
        display: block;
        flex: 0 0 100px;
        width: 100px;
        height: 100px;
        border-radius: var(--size-8);
    }

    .categories__data > * {
        display: block;
        margin: 0;
        line-height: 1.5;
    }

    .categories__data-title {
        margin-bottom: var(--size-8);
        font-size: var(--size-16);
        font-weight: 500;
        color: var(--color-text-primary);
        transition: color .3s ease;
    }

    .categories__data-description {
        font-size: var(--size-14);
        color: var(--color-text-secondary);
        transition: color .3s ease;
    }

    .categories--invert .categories__item {
        background: var(--color-surface);
    }

    @media (min-width: 768px) {

        .categories__list {
            display: flex;
            justify-content: space-between;
            gap: var(--size-24);
            flex-wrap: wrap;
        }

        .categories__item {
            max-width: 310px;
        }

    }

    /* Component - Vertical Separator
    ============================*/

    .vertical-separator {
        width: 100%;
        height: 1px;
        background: transparent;
    }

    .vertical-separator--32 {
        margin: var(--size-32) 0;
    }

    .vertical-separator--64 {
        margin: var(--size-64) 0;
    }

    @media (width < 768px) {

        .vertical-separator--32 {
            margin: var(--size-16) 0;
        }

        .vertical-separator--64 {
            margin: var(--size-32) 0;
        }

    }