/**
 * Theme Name:        My Site Blueprint
 * Description:       Your Website Matters—and it’s simpler than you think.
 * Version:           1.1.0
 * Tags:              block-patterns, full-site-editing, my-site-blueprint
 * Text Domain:       my-site-blueprint
 * Tested up to:      6.7
 * Requires at least: 6.7
 * 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) Adjustments to allow footer to remain at the bottom of the page
 */

 .msb-home-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.footer{
    margin-top: auto;
}

/*
(MSB) Button Hover
 */

 .msb-home-body {
    .wp-block-button {
        a {
            transition: background-color 0.5s ease-in-out;
        }
        a:hover {
            background-color: var(--msb-navy) !important;
            transition: background-color 0.5s ease-in-out;
        }
    }
}


/*
(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;
        }

    }
 }