/*
Theme Name: Zuza Makes Theme
Theme URI: 
Author: Zuza Makes
Author URI: 
Description: Child theme of TwentyTwentyFour, which will hopefully let me mess with the product settings better
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: twentytwentyfour
Text Domain: zuza-makes-theme
Tags: 
*/

/*When not on desktop, change from 2 column nav display to burger menu, make the content column be 100%*/
/*When on desktop - bare the content left column has an outline to create a 3d effect*/
/*when on mobile - make headers not break line and scale them smaller*/
@media (max-width: 1023px) {
    .desktop-stack  {
        display: none !important;
        border-right: 0px !important;
    }
    .mobile-row  {
        display: block !important;
    }
    .content-block {
        flex-basis: 100% !important;  
    }
    .footer-stack{
        gap: 2rem !important;
    }
    h1 {
        font-size: clamp(2.5rem, 2.5rem + ((1vw - 0.2rem) * 3.491), 10rem) !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }
}
@media (min-width: 1024px) {
    .mobile-row  {
        display: none !important;
    }
    .desktop-stack  {
        border-right: solid 3px var(--wp--preset--color--semi-transp);
    }
    .content-block {
        flex-basis: 85%;
    }
}
/*when on desktop - show the funky responsibe timeline, otherwise show the mobile simple list*/
@media (max-width:781px) {
    .events-desktop {
        display: none !important;
    }
    .events-mobile {
        display: block !important;
    }
}
@media (min-width:782px) {
    .events-desktop {
        display: block !important;
    }
    .events-mobile {
        display: none !important;
    }
}

/*give the desktop navigation bar a colour*/
.desktop-stack  {
    background-color: var(--wp--preset--color--desktop-nav) ;
}

/*make headers fixed at the top of the page*/
/*header {
    position: fixed;
}*/
.mob-nav {
    position: relative;
    top: 2rem;
    left: 2rem;
}
.deskt-nav {
    position: sticky;
    top: 2rem;
}

/*mobile menu icon fixed at the top*/
button.wp-block-navigation__responsive-container-open {
    position: fixed;
    top: 4rem;
    left: 2rem;
    background-color: var(--wp--preset--color--base-2);
    border: solid 1rem var(--wp--preset--color--base-2);
    border-radius: 2rem;
}
/*adjusting the mobile menu closing button*/
button.wp-block-navigation__responsive-container-close {
    right: 2rem;
}

/*floating back to top button*/
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background-color: var(--wp--preset--color--base-2);
    border: solid 0.8rem var(--wp--preset--color--base-2);
    border-radius: 2rem;
    z-index: 10000000;
}


/*Padding for the open mobile nav and X inside of it*/
.wp-block-navigation__responsive-dialog {
    margin-left: 40px;
    align-items: center;
}
.wp-block-navigation__responsive-container-close {
    padding: 2rem;
}

/*In lieu of a working accordion solution for the side menu, fake the look of submenus with padding - only on Desktop*/
.wp-block-navigation ul li.desktop-submenu {
    padding-left: 2rem;
}
.wp-block-navigation ul li.desktop-subcategory {
    padding-left: 1rem;
}

/*remove default rounding from product lifestyle images*/
.lifestyle-image {
    border-radius: 0px !important;
}

/*remove gap between columns*/
.wp-container-core-columns-is-layout-44590b80 {
    gap: 0em !important;
}

:root :where(.is-layout-flex) {
  gap: 0rem !important;
}

/*padding on the desktop nav bar*/
.wp-block-navigation-item {
    padding-bottom: 0.5rem !important;
}
.wp-block-social-link {
    padding-top: 2rem !important;
    padding-right: 0.9rem !important;
}

/*footer*/
.footer-heading {
    padding-bottom: 1rem;
}

.zm-footer {
    border-top: solid 3px var(--wp--preset--color--footer-bord) !important;
    background-color: var(--wp--preset--color--contrast) !important;
}

/*customising wp forms */
.wpforms-field-medium {
    border-color: var(--wp--preset--color--semi-transp) !important;
    max-width: 100% !important;
}

/*adjusting the look of image and text pairs*/
.noflex.is-layout-flex {
    gap: 1rem !important;
}

.footer-nav {
    color: var(--wp--preset--color--base-2) !important;
}

.wp-block-cover {
    min-height: 700px;
}