/*
Theme Name: MWP Cloud
Theme URI: 
Author: Smashstar Media
Author URI: 
Description: 
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 5.7
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mwp-cloud
Tags: 

/* Layout Management */

@media (max-width:850px){
    .pivot-mobile {
       display:flex;
       flex-direction: column;
    }
    
    /* Inner Stack */
    .pivot-mobile > .wp-block-group.is-vertical {
        flex-grow:1;
        justify-content:center;
        width:100%;
        flex-basis:initial;
    }
    
    /* Inner-Row */
    .pivot-mobile > .wp-block-group:not(.is-vertical) {
        flex-grow:1;
        justify-content:space-around;
        width:100%;
    }
    
    /* Inner Button Group */
    .pivot-mobile > .wp-block-buttons {
        flex-grow:1;
        justify-content:space-between;
        width:100%;
        padding:4px !important;
    }
    
    /* Inner Button */
    .pivot-mobile > .wp-block-buttons > .wp-block-button {
        width:49%;
    }
}

/* Layout Management */

header > .wp-block-group:first-of-type {
    background: linear-gradient(180deg, var(--wp--preset--color--light) 1%, rgba(255, 255, 255, 0) 99%) !important;
}

header.wp-block-template-part::after {
    position:absolute;
    content:'';
    background:#ffffff00 !important;
    height:75px;
    width:100%;
    top:0px;
    z-index:-1;
    mask: linear-gradient(black, black, transparent);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.sidebar-column {
    /* min-width:150px !important; */
    /* width:10vw !important; */
    max-width:275px !important;
}

ul.loop-list {
    border-radius: 1.5rem;
    padding:2px;
    border:outset 1px var(--wp--preset--color--light-10) !important;
    box-shadow:0px 0px 24px var(--wp--preset--color--dark-5);
}

ul.loop-list > li {
    border-radius: calc( 1.5rem - 2px );
    border:solid 1px #ffffff00 !important;
    background:var(--wp--preset--color--light-5);
    padding:15px 19px;
    transition: all 0.15s ease-in-out;
}
ul.loop-list > li:hover {
    transform:scale(1.01);
    border:outset 1px var(--wp--preset--color--light-225, #ffffff22) !important;
    background:var(--wp--preset--color--mwpc-10);
    box-shadow:0px 0px 14px var(--wp--preset--color--dark-5);
    transition: all 0.15s ease-in-out;
}

/* Titles */
div.wp-block-columns.hero-title-container,
div.wp-block-group.hero-title-container {
    height:200px !important;
    /* overflow: hidden; */
    margin-bottom:1rem !important;
    background: linear-gradient(0deg, var(--wp--preset--color--mwpc-25) 1%, rgba(255, 255, 255, 0) 85%) !important;

}

#titlebar-title {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
}

h1.wp-block-site-title,
#titlebar-title {
    text-shadow: 0px 0px 15px var(--wp--preset--color--light),
                 0px 0px 15px var(--wp--preset--color--light),
                 0px 0px 15px var(--wp--preset--color--light);
}
/* 
#view-title {
    transition: all 1s ease-in-out;
} */

.frost-1 {
    backdrop-filter: blur(0.15rem);
    -webkit-backdrop-filter: blur(0.15rem);
}
.frost-2 {
    backdrop-filter: blur(0.25rem);
    -webkit-backdrop-filter: blur(0.25rem);
}
.frost-3 {
    backdrop-filter: blur(0.45rem);
    -webkit-backdrop-filter: blur(0.45rem);
}

/* Navigation */

.menu-wrap {
    background:var(--wp--preset--color--light-5);
    padding:2px !important;
    /* z-index:11 !important; */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border:outset 1px var(--wp--preset--color--light-10);
}

.menu-wrap .bubble.wp-block-navigation > li > a,
.wp-block-outermost-icon-block.expand-nav-modal {
    padding:9px 16px !important;
    background:var(--wp--preset--color--light-25);
    border:solid 1px #ffffff00;
    backdrop-filter: blur(0.05rem);
    -webkit-backdrop-filter: blur(0.05rem);
    transition: all 0.15s ease-in-out;
    border-radius: 25px;
    cursor: pointer;
}

.menu-wrap .bubble.wp-block-navigation > li > a:hover,
.wp-block-outermost-icon-block.expand-nav-modal:hover {
    box-shadow: 0px, 0px, 7px, #00000077;
    border:outset 1px var(--wp--preset--color--light-25);
    background:var(--wp--preset--color--mwpc-10);
    transform:scale(1.05);
    transition: all 0.15s ease-in-out;
}

.wp-block-cloudcatch-light-modal-block__wrapper.is-open:has(.nav-modal) {
    align-items:start;
    justify-content: end;
    margin-top:15px !important;
    padding-right:25px !important;
}

/* Heading Padding */

.entry-content.wp-block-post-content > h2.wp-block-heading:not(:first-of-type) {
    margin-top:3.1rem !important;
}
/* .entry-content.wp-block-post-content > h2.wp-block-heading:first-of-type {
    margin-top:2.25rem !important;
} */
.entry-content.wp-block-post-content > h3.wp-block-heading {
    margin-top:2.5rem !important;
}

/* TOC */

.mwp-cloud-toc {
    position:sticky;
    top:75px;
}

.mwp-cloud-toc > ul.simpletoc-list > li {
    margin-bottom:12px;
}

.mwp-cloud-toc > ul.simpletoc-list > li > ul > li {
    margin-top:12px;
}

/* theme mode toggle */
.theme-toggle{
  position: fixed;
  inset-inline-end: 1rem;
  inset-block-end: 1rem;
  display: inline-flex;
  gap: 0;
  border: 1px outset var(--wp--preset--color--light-25);
  border-radius: 999px;
  padding: 1px; 
  background: var(--wp--preset--color--light-5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0px 0px 24px var(--wp--preset--color--dark-5);
  z-index: 9999;
  font: 500 13px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.theme-toggle button{
  appearance: none;
  border: 0;
  background: transparent;
  padding: .5rem .75rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .2s, transform .12s ease;
  color: inherit;
}
.theme-toggle button.is-active{
  background: var(--wp--preset--color--mwpc-10);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.theme-toggle button:hover{ transform: scale(1.025); }
.theme-toggle button:focus-visible{
  outline: 1px outset var(--wp--preset--color--mwpc-10);
  /* outline-offset: 2px; */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
@media (prefers-color-scheme: dark){
  .theme-toggle button.is-active{ background: var(--wp--preset--color--mwpc-25, #ffffff1a); }
}
@media (prefers-reduced-motion: reduce){
  .theme-toggle, .theme-toggle *{ transition: none !important; }
}

/* brand colors */