/*
Theme Name: AploBlocks
Theme URI: http://www.aploweb.com/aploblocks
Author: aploweb.com
Author URI: https://www.aploweb.com
Description: AploBlocks is a block based theme with full support for the Block Editor includng custom colors, typography and full customisation of page layouts.  It comes with over 20 patterns to help you build your pages the way you want them.  This theme includes extra styling options for blocks to allow entrance animations, filters & transforms with no coding knowledge needed.  Suitable for all kinds of websites tailored to exactly fit your needs.  Now includes templates for a hiding sticky header and 2 extra colour styles!  See documentation at https://aploweb.com/aploblocks-theme
Requires at least: 6.1
Tested up to: 6.4
Requires PHP: 7.4
Version: 1.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: aploblocks
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, blog, portfolio, sticky-header
*/

body {
    --aplo-filter-string:"none";
    --aplo-filter-hover-string:"none";
    --aplo-transform-string:"none";
    --aplo-transform-hover-string:"none";

    /* filter drop-shadow  */
    --aplo-fdsc:0,0,0; /* color */
    --aplo-fdso:0.7; /* opacity */

    /* box-shadow values */
    --aplo-box-shadow-small: 0px 3px 3px 0 rgba(0, 0, 0, 0.6);
    --aplo-box-shadow-med: 0px 7px 7px 0 rgba(0, 0, 0, 0.6);
    --aplo-box-shadow-large: 12px 12px 12px 0 rgba(0, 0, 0, 0.6);

    /* the default transition for hover */
    --aplo-thdu : 350ms;
    --aplo-thti : ease-out;

    /* the default transition for entrance */
    --aplo-tedu : 900ms;
    --aplo-tede : 0ms;
    --aplo-teti : ease-out;

    /* defaults for animation */
    --aplo-andu : 5s;
    --aplo-anit : infinite;

    /* the default clip amount for masks */
    --aplo-clip:10%;

    --aplo-image-mask-size:100% 100%;
    --aplo-image-mask-position:center;
    --aplo-image-mask-repeat-x:no-repeat;
    --aplo-image-mask-repeat-y:no-repeat;
  
    --aplo-stuck-header-base:#000;
    --aplo-stuck-header-contrast:#fff;

  }

  /* styling from version 0.8.5 that is no longer in block-styles.css - can be removed is these styles are not set in the theme */

  figure.wp-block-image.is-style-aplo-image-caption-top {
    position:relative;
  }
  figure.wp-block-image.is-style-aplo-image-caption-top figcaption {
    background-color:var(--wp--preset--color--contrast);
    color:var(--wp--preset--color--base);
    position:absolute;
    top:10px;
    left:-10px;
    padding:10px;
    text-align:center;
    width:50%;
    margin-bottom:0;
    box-sizing:border-box;
    box-shadow:var(--aplo-box-shadow-small);
    
  }
  
  figure.wp-block-image.is-style-aplo-image-caption-bottom {
    position:relative;
  }
  figure.wp-block-image.is-style-aplo-image-caption-bottom figcaption {
    background-color:var(--wp--preset--color--contrast);
    color:var(--wp--preset--color--base);
    position:absolute;
    bottom:10px;
    right:-10px;
    padding:10px;
    text-align:center;
    width:50%;
    margin-bottom:0;
    box-sizing:border-box;
    box-shadow:var(--aplo-box-shadow-small);
    
  }

  .is-style-aplo-cover-hover {padding:0px;overflow:hidden;}
.is-style-aplo-cover-hover  .wp-block-cover__image-background {transition:all 0.3s ease-out;}
.is-style-aplo-cover-hover .wp-block-cover__background {transition: all 0.5s ease-out;}
.is-style-aplo-cover-hover:hover  .wp-block-cover__image-background {transform:scale(1.2);}
.is-style-aplo-cover-hover:hover .wp-block-cover__background {opacity:0 !important;}
.is-style-aplo-cover-hover .wp-block-cover__inner-container {background-color: var(--wp--preset--color--contrast);    
    color:var(--wp--preset--color--base) !important;
    transition: all 0.4s ease-out;
    width:100% !important;  
}
.is-style-aplo-cover-hover .wp-block-cover__inner-container a {color:var(--wp--preset--color--base) !important;}
.is-style-aplo-cover-hover:hover .wp-block-cover__inner-container a {color:var(--wp--preset--color--contrast) !important;}
.is-style-aplo-cover-hover:hover .wp-block-cover__inner-container {
    background-color: var(--wp--preset--color--base);
    color: var(--wp--preset--color--contrast)!important;
}

.is-style-aplo-cover-hover-two .wp-block-cover__background {transition: all 1.2s;}
.is-style-aplo-cover-hover-two:hover .wp-block-cover__background {opacity:0;}
.is-style-aplo-cover-hover-two .wp-block-cover__inner-container {opacity:0;transition: all 1.2s;;}
.is-style-aplo-cover-hover-two:hover .wp-block-cover__inner-container {opacity:1;}

.wp-block-media-text.is-style-aplo-fixed-content-400 {
	grid-template-columns: 1fr 400px!important;
}

.wp-block-media-text.is-style-aplo-fixed-content-400.has-media-on-the-right {
  grid-template-columns: 400px 1fr!important;
}

.aplo-sticky-group {
  position:sticky;
  top:30px;
  z-index:5;
}
/* end styling 0.8.5 */


/* general theme styling */

/* responsive nav styling */

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container{
    width:100%;
    gap:0.5rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .submenu-container, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
  padding-left:30px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
  padding-top:5px;
}

.wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    background-color:rgba(255,255,255,0.03)!important;
    width:100%;
    padding:5px 10px;
    border-radius:10px;
    box-sizing:border-box;

}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container > li {
    width:100%;
    background-color:rgba(255,255,255,0.03)!important;
    border-radius:10px;
    padding:0 0 5px 0;
    margin:3px;
    box-shadow:var(--aplo-box-shadow-small);
}
