/*
Theme Name: Blockio
Author: Mariusz Borkowski
Author URI: https://profiles.wordpress.org/mariusz88atelierweb/
Description: Blockio is an experimental full site editing theme. It is simple and minimal. It has its own templates, thanks to which you can quickly create a blog page, portfolio, or even a store.
Tags: block-patterns, block-styles, blog, custom-background,right-sidebar, custom-colors, custom-logo, custom-menu, editor-style, full-site-editing, grid-layout, one-column, template-editing, wide-blocks
Version: 1.0.3
Requires at latest: 5.9
Tested up to: 6.0
Requires PHP: 7.3
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blockio
 */
body {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

header.wp-block-template-part {
    box-shadow: 0 0 5px var(--wp--preset--color--purple-main);
    position: sticky;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background-color: var(--wp--preset--color--white);
}

.wp-site-blocks > * + * {
    margin-block-start: 0;
}

.wp-block-button:hover {
    opacity: 0.65;
}

.pagination-single {
    display: flex;
    justify-content: space-between;
}

h1.wp-block-site-title a {
    font-weight: bolder;
    text-decoration: none;
}

.header-nav {
    position: relative;
    height: 120px;
}

ul.wp-block-navigation__container {
    height: 120px;
}

ul.wp-block-navigation__container > li {
    height: 120px;
}


ul > li > a {
    text-transform: uppercase;
    text-decoration: none;
    transition: 0.6s;
}

.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
    color: unset;
}

.ft-featured-posts ul li {
    display: flex;
    justify-content: space-between;
    margin: 0;
}

.main-page .page-container-head {
    position: relative;
    height: 480px;
    width: 100%;
}

.main-page .page-container-head .wp-block-post-featured-image {
    display: block;
    position: relative;
    max-height: 480px;
    width: 100%;
}

.main-page .page-container-head .wp-block-post-featured-image img {
    opacity: 0.2;
    object-fit: cover;
    width: 100%;
    max-height: 480px;
}

.main-page .page-container-head .wp-block-post-title {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-height: 480px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wp-block-button.is-style-outline.center-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 80px 0;
}

.ft-featured-posts ul li figure {
    width: 30%;
}

.ft-featured-posts ul li h2 {
    width: 70%;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-weight: normal;
}

.ft-featured-posts ul li h2 a {
    text-decoration: none;
}

.wp-block-column.our-ft-shadow {
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 0 6px rgba(0,0,0, 0.35);
}

/* Pricing Tables */
.pricing-col {
    border-radius: 20px;
    box-shadow: 0 0 10px rgba( 0, 0, 0, 0.25);
    padding-bottom: 20px;
}

.pricing-col .wp-block-group h3 {
    font-size: 2.2em;
}

.pricing-col .wp-block-group h4 {
    font-size: 2em;
    padding: 0;
    margin: 0;
}

ul.list-green-items {
    list-style-type: none;
    border-radius: 20px;
    background-color: white;
}

ul.list-green-items > li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 15px 0;
}

/* Single Post */
.blockio-content-post.wp-block-post-content p img {
    width: 100%;
}

/* Colors */
.white {
    color: #ffffff;
}

.media-shadow {
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}

.widget-about {
    margin-top: 40px;
}

/* BLOG PAGE */
.wp-block-columns.blog-columns .wp-block-column {
    margin: 0;
}

.wp-block-group.blog-pagination {
    margin: 100px 0 60px;
}

/**
*    Media
 */
@media only screen and (max-width: 600px) {

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
        height: 20px;
    }

    .wp-block-navigation-item__label img {
        display: none;
    }

    ul.wp-block-navigation__container {
        height: auto;
    }

    ul.wp-block-navigation__container > li {
        display: block;
        height: auto;
    }

}