/*
Theme Name: PeepSo Block Theme
Theme URI: https://www.peepso.com/theme/
Author: PeepSo
Author URI: https://www.peepso.com/
Description: Block theme for PeepSo.<!--PeepSo Block Theme Parent-->
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.2
Version: 7.1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: peepso-block-theme
Domain Path: /language
Tags: block-patterns
*/

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
/* a {
    text-decoration-thickness: 1px !important;
    text-underline-offset: .1em;
} */

/* Focus styles */
/* :where(.wp-site-blocks *:focus) {
    outline-width: 2px;
    outline-style: solid;
} */

/* Increase the bottom margin on submenus, so that the outline is visible. */
/* .wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
    margin-bottom: 3px;
} */

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
/* .wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
    outline-offset: 4px;
} */

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
/* .wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    outline-offset: 0;
} */

/*
 * Global styles
 */
html {
    box-sizing: border-box;
}
html * {
    box-sizing: inherit;
}

body {
    overflow-x: hidden;
    overflow-y: auto;
}

header {
    position: relative;
    z-index: 100;
}

.wp-admin, .plg-peepso, .block-editor-iframe__body {
    --COLOR--PRIMARY: var(--wp--preset--color--primary);
    --COLOR--PRIMARY--SHADE: color-mix(in srgb, var(--wp--preset--color--primary) 50%, white); /* #FFC691 */
    --COLOR--PRIMARY--LIGHT: var(--wp--preset--color--primary-l);
    --COLOR--PRIMARY--ULTRALIGHT: color-mix(in srgb, var(--wp--preset--color--primary) 10%, white); /* #fff6f0 */
    --COLOR--PRIMARY--DARK: var(--wp--preset--color--primary-d);
    --COLOR--APP: var(--wp--preset--color--base);
    --COLOR--APP--LIGHTGRAY: var(--wp--preset--color--base-light);
    --COLOR--APP--GRAY: var(--wp--preset--color--base-light);
    --COLOR--APP--DARKGRAY: var(--wp--preset--color--contrast-ulight);
    --COLOR--APP--DARK: var(--wp--preset--color--contrast-medium);
    --COLOR--APP--DARKER: var(--wp--preset--color--contrast);
    --COLOR--TEXT: var(--wp--preset--color--contrast-medium);
    --COLOR--TEXT--LIGHT: var(--wp--preset--color--contrast-light);
    --COLOR--HEADING: var(--wp--preset--color--contrast);
    --c-ps-checkbox-border: rgba(0,0,0, .15);
    --BOX-SHADOW--HARD: var(--wp--preset--shadow--natural) !important;

    --c-primary: var(--wp--preset--color--primary);
    --c-primary-dark: var(--wp--preset--color--primary-d);
    --c-primary-sdark: var(--wp--preset--color--primary-d);
    --c-primary-light: var(--wp--preset--color--primary-l);
    --c-primary-slight: color-mix(in srgb, var(--wp--preset--color--primary) 50%, white);
    --c-primary-elight: color-mix(in srgb, var(--wp--preset--color--primary) 30%, white);
    --c-primary-ulight: color-mix(in srgb, var(--wp--preset--color--primary) 10%, white);
}

body.ps-dark-mode,
.plg-peepso.ps-dark-mode,
.block-editor-iframe__body.ps-dark-mode {
    --c-ps-checkbox-border: rgba(255,255,255, .15);
    --COLOR--PRIMARY--SHADE: color-mix(in srgb, var(--wp--preset--color--primary) 25%, transparent); /* #FFC691 */
    --COLOR--PRIMARY--LIGHT: var(--wp--preset--color--primary-l);
    --COLOR--PRIMARY--ULTRALIGHT: color-mix(in srgb, var(--wp--preset--color--primary) 15%, transparent); /* #fff6f0 */
    --c-primary-slight: color-mix(in srgb, var(--wp--preset--color--primary) 50%, transparent);
    --c-primary-elight: color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent);
    --c-primary-ulight: color-mix(in srgb, var(--wp--preset--color--primary) 15%, transparent);
    --wp--preset--shadow--natural: 0 0 0 1px rgba(255,255,255, .08), 0 20px 40px rgba(0,0,0,0.1) !important;
    --SH: inset 0 0 0 1px rgba(255,255,255, .08), 0 10px 30px rgba(0, 0, 0, .5), 0 1px 4px rgba(0, 0, 0, .5);
    --DIVIDER: rgba(255,255,255, .2);
    --DIVIDER--LIGHT: rgba(255,255,255, .1);
    --DV: rgba(255,255,255,.08);
}

.ps-widget,
.ps-widget--external .ps-text--muted {
    font-size: .975rem;
}

@media screen and (max-width: 782px) {
    .pso-w-userbar--open {
        position: absolute;
        left: 0;
        right: 0;
        background-color: var(--COLOR--APP);
    }

    .pso-w-userbar--open .pso-w-userbar__inner {
        justify-content: start;
    }
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
    text-wrap: pretty;
}

.has-text-color h1,
.has-text-color h2,
.has-text-color h3,
.has-text-color h4,
.has-text-color h5,
.has-text-color h6 {
    color: inherit;
}

/* Blur background helper class */
.has-background-blur {
    backdrop-filter: blur(10px);
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
    display: block;
}

/* Button styles */
.wp-block-button.is-style-outline .wp-element-button {
    box-shadow: inset 0 0 0 1px currentColor;
}
.wp-block-button:not(.is-style-outline):not(.is-style-link):hover {
    opacity: .9;
}
.wp-block-button__link.has-text-align-left {
    justify-content: flex-start;
}
.wp-block-button__link.has-text-align-center {
    justify-content: center;
}
.wp-block-button__link.has-text-align-right {
    justify-content: flex-end;
}

/* Page list styles */
.wp-block-page-list {
    list-style: none;
    padding-inline: 0;
}
.wp-block-pages-list__item {
    list-style-type: none;
}

/* Tweak background on blocks */
.has-background {
    background-repeat: no-repeat;
}

/* Add a hover zoom effect */
@media screen and (min-width: 783px) {
    .hover-zoom {
        transition: all .3s ease-in-out;
        background-size: 100%;
    }
    .hover-zoom:hover {
        transform: scale(1.05);
    }
    .hover-zoom-bg {
        background-size: 100% !important;
        background-position: center center;
        transition: all .3s ease-in-out;
    }
    .hover-zoom-bg:hover {
        background-size: 105% !important;
    }
}

/* Cover block styles */
.is-image-cover > img {
    width: 100%;
}

/* Post terms style */
.is-style-post-terms-1 > a {
    transition: var(--TRANS);
}
.is-style-post-terms-1 > a:hover {
    background-color: color-mix(in srgb, currentColor 5%, transparent);
}
.wp-block-cover .is-style-post-terms-1 > a {
    backdrop-filter: blur(10px);
    background-color: color-mix(in srgb, currentColor 10%, transparent);
}
.wp-block-cover .is-style-post-terms-1 > a:hover {
    background-color: color-mix(in srgb, currentColor 20%, transparent);
}

/* Post template styles */
.wp-block-post-template .wp-block-cover .wp-block-post-title,
.wp-block-post-template .wp-block-cover .wp-block-post-excerpt,
.wp-block-post-template .wp-block-cover .wp-block-post-date {
    text-shadow: 0 0 8px rgba(0,0,0,.5);
}
.wp-block-post-template .wp-block-post-title > a:hover {
    text-decoration: underline;
}

/* Featured image styles */
.wp-block-post-featured-image {
    max-width: 100%;
}

/* Post Author styles */
.wp-block-post-author__avatar > img {
    border-radius: 50%;
    vertical-align: middle;
}

/* Make sure the Query block and its inner blocks stretch to the full height of the column */
.wp-block-column.is-vertically-aligned-stretch > .wp-block-query,
.wp-block-column.is-vertically-aligned-stretch > .wp-block-query > .wp-block-post-template,
.wp-block-column.is-vertically-aligned-stretch > .wp-block-query > .wp-block-post-template > .wp-block-post,
.wp-block-column.is-vertically-aligned-stretch > .wp-block-query > .wp-block-post-template > .wp-block-post > .wp-block-columns {
    height: 100%;
}

/* Default logo placeholder size */
.custom-logo--default {
    width: 36px !important;
    height: 36px !important;
}

/* Make sure the grid layout in the Group block works on smaller screens */
@media screen and (max-width: 782px) {
    .wp-block-group-is-layout-grid {
        grid-template-columns: 1fr;
        container-type: inline-size;
    }

    .wp-block-group-is-layout-grid > * {
        grid-column-start: auto !important;
        grid-column-end: auto !important;
        grid-row-start: auto !important;
        grid-row-end: auto !important;
    }
}
 
/* Change the color of menu items on hover */
.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
    padding-block: 8px;
    color: inherit;
    opacity: 1;
}
.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
    color: inherit;
    opacity: .8 !important;
}

/* Change the background color of submenu container */
@media screen and (min-width: 783px) {
    .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
        z-index: 9999;
    }

    .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        color: var(--wp--preset--color--contrast);
    }

    .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
        color: var(--wp--preset--color--contrast);
    }
    
    .wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
        animation-name: "submenu";
        animation-timing-function: ease-in-out;
        animation-duration: .3s;
        animation-iteration-count: 1;
    }
    .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
        padding: var(--wp--preset--spacing--20);
        background-color: var(--wp--preset--color--base);
        border: none;
        border-radius: var(--wp--custom--radius--large);
        box-shadow: var(--wp--preset--shadow--sharp), var(--wp--preset--shadow--natural);
    }
    .wp-block-navigation__submenu-container .wp-block-navigation-item {
        background-color: transparent;
        border-radius: var(--wp--custom--radius--medium);
    }
    .wp-block-navigation__submenu-container .wp-block-navigation-item:hover {
        background-color: var(--wp--preset--color--base-light);
    }
}

@keyframes submenu {
    0% {
        opacity: 0;
        transform: translateY(-20px) scale(.95);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Animated background based on PeepSo cover */
.js-has-ps-cover-bg {
    position: relative;
    overflow: hidden;
}
.js-has-ps-cover-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100px;
    right: -100px;
    inset: 0;
    background-image: var(--cover-url);
    background-size: cover;
    background-position: center;
    max-height: 60vh;
    filter: blur(30px);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.js-has-ps-cover-bg.bg-loaded::before {
    opacity: 0.3;
}