/*!
Theme Name: My Site Blueprint
Description: Your Website Matters—and it’s simpler than you think.
Version: 1.1.4
Tags: block-patterns, full-site-editing, my-site-blueprint
Text Domain: my-site-blueprint
Tested up to: 6.7
Requires at least: 6.8
Requires PHP: 7.4
Author: My Site Blueprint Team
 */

 
/*
Get rid of the padding above/below the blocks wrapper,
which was leaving whitespace above/below the header/footer
*/
.wp-site-blocks {
	padding: 0;
}

/*
Get rid of the default margin-top around all of the outer blocks (example: hero section after header),
changing here instead of theme.json so that global blockGap is not changed for inner blocks and elements
 */
:where(.wp-site-blocks) > * {
	margin-block-start: 0;
}

/*
Adjust positioning of the "details" block summary when it is an H4
 */
summary h4{
    display: inline;
    margin-left: 10px;
}

/*
Add a bottom box shadow to the header block
 */
.header-block{
    position: relative;
    z-index: 1;
    border-bottom: 2px solid;
}


/*
Hide an info box/block from the frontend of the site (like the info box on the contact page block pattern.
 */
.hide-from-site-frontend{
    display: none;
}


/*
(MSB) Utility class for mobile flex column layout
 */

.mobile-column {
  @media only screen and (max-width: 800px) {
    flex-direction: column;
  }
}

/*
(MSB) Utility class for mobile flex column layout
 */
 
.mobile-hide {
  @media only screen and (max-width: 1250px) {
    display: none;
  }
}

/*
(MSB) Utility class for mobile img center
 */
 
.mobile-img-center {
  @media only screen and (max-width: 1250px) {
    display: flex !important;
    justify-content: center;
    margin-inline-start: auto !important;
    float: none !important;
  }
}


/*
(MSB) Adjustments to allow footer to remain at the bottom of the page
 */

 .msb-home-body {
    display: flex;
    flex-direction: column;
}

.footer{
    margin-top: auto;
}


/*
(MSB) Home page mobile responsiveness
 */

 .msb-home-body {

    @media only screen and (max-width: 1250px) {
        .wp-block-columns {
            flex-direction: column-reverse;

            img {
                max-width: 75%;
            }

            .mobile-cta {
                padding-bottom: 1.5rem !important;
                margin-left: auto !important;

                .wp-block-columns {
                    flex-direction: column-reverse;
                    gap: 2rem;

                    img {
                        max-width: 100%;
                    }
                }
            }
        }

        h2, p {
            text-align: center;
        }

        .wp-block-buttons {
            justify-content: center !important;
        }

        .mobile-center {
            display: flex;
            justify-content: center;

            img {
                width: auto;
            }
        }

        .mobile-padding {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

    }
 }

.msb-about-body, .msb-contact-body {
     @media only screen and (max-width: 1250px) {

        p, h2 {
            text-align: center;
        }

        .wp-block-columns {
             flex-direction: column;

             .about-intro {
                margin-left: auto !important;
                align-items: center;
                min-width: 100%;
             }
        }

        .mobile-cta {
            padding-bottom: 1.5rem !important;
            margin-left: auto !important;

            .wp-block-columns {
                flex-direction: column-reverse;
                gap: 2rem;

                p {
                    margin-left: auto !important;
                }

                img {
                    max-width: 100%;
                    }
            }
        }

        .about-benefits {
            .wp-block-columns {
                padding-top: 0 !important;
            }

            .mobile-center {
                justify-content: center;
                text-align: center;
                align-items: center;
            }
        }

        .contact-intro {

            margin-left: auto !important;
            align-items: center;
            min-width: 100%;

            .wp-block-group {
                width: 100%;
            }

            .cta-benefits {
            margin-left: auto !important;
            flex-direction: row;
            min-width: 100%;

                .mobile-center {
                    justify-content: center;
                    text-align: center;
                    align-items: center;
                }

                .wp-block-column {
                    display: flex;
                    flex-direction: column;
                    gap: 0.3rem;
                }
            }
        }
     }
}