/*Responsive styles*/
/*beyond what was included in theme.json*/

@media (min-width: 1500px) {

}
@media (min-width: 1180px) {
    /*<nav>*/
    .wp-block-navigation.header-navigation {
        flex-wrap: nowrap !important;
        text-wrap: nowrap;
    }
    .wp-block-navigation.header-navigation ul {
        width: 1000px;
    }
    /*pattern: 2 equal columns*/
    section.two-equal-columns {
        display: grid;
        max-width: 1400px;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        grid-template-areas: 
            "head image"
            "main image"
            "after image";
        gap:  0 var(--wp--preset--spacing--24);
        .wp-block-heading:first-child {
            grid-area: head;
        }
        .text-before-image {
            grid-area: main;
            p {
                padding-top: 0 !important;
            }
        }
        .wp-block-image {
            grid-area: image;
        }
        .text-after-image {
            grid-area: after;
        }
    }
    /*footer*/
    #footer-group {
        .footer-column-1 {
            min-width: 220px;
        }
        .footer-column-2 {
            min-width: min(100%, 800px);
            column-gap: 2rem;
        }
    }
}

@media (min-width: 800px) and (max-width: 1179px) {
    /*pattern: 2 equal columns*/
    section.two-equal-columns {
        display: grid;
        max-width: 1400px;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        grid-template-areas: 
            "head head"
            "main image"
            "after image";
        gap:  0 var(--wp--preset--spacing--24);
        .wp-block-heading:first-child {
            grid-area: head;
        }
        .text-before-image {
            grid-area: main;
            p {
                padding-top: 0 !important;
            }
        }
        .wp-block-image {
            grid-area: image;
        }
        .text-after-image {
            grid-area: after;
        }
    }
}
@media (min-width: 800px) {
    /*pattern: wide and narrow columns*/
    section.wide-narrow-columns {
        display: grid;
        max-width: 1400px;
        grid-template-columns: 75% 25%;
        grid-template-rows: auto;
        grid-template-areas: 
            "head image"
            "main image"
            "after image";
        gap:  0 var(--wp--preset--spacing--24);
        .wp-block-heading:first-child {
            grid-area: head;
        }
        .text-before-image {
            grid-area: main;
            p {
                padding-top: 0 !important;
                max-width: 800px;
                text-wrap: pretty;
            }
        }
        .wp-block-image {
            grid-area: image;
        }
        .text-after-image {
            grid-area: after;
        }
    }
}

@media (min-width: 600px) and (max-width: 1179px) {
    
    #header-group>div.wp-block-group {
        flex-wrap: wrap !important;
        text-wrap: wrap;
        row-gap: 1rem;
    }
    .wp-block-site-logo {
        width: 300px;
    }

    #footer-group {
        >.wp-block-columns {
            column-gap: var(--wp--preset--spacing--40);
        }
        .footer-column-1 {
            min-width: 220px;
        }
       .footer-column-2 .wp-block-columns {
            column-gap: unset; 
            justify-content: space-between;
            .wp-block-column {
                flex-basis: unset !important;
                min-width: 120px !important;
                max-width: 120px !important;
                flex-grow: unset;
                }
        }
    }
}
@media (min-width: 600px) and (max-width: 949px) {
    .wp-block-navigation.header-navigation {
        min-width: unset !important;
        max-width: 100%;
    }
    .wp-block-navigation.header-navigation ul {
        justify-content: left !important;
    }
    .wp-block-navigation.header-navigation li a {
        margin-right: 1.75rem;
    }

    #footer-group {
    padding-top: var(--wp--preset--spacing--24) !important; 
    >.wp-block-columns {
            flex-wrap: wrap !important;
            justify-content: center;
        }
        .footer-column-1 {
            display: flex;
            min-width: 100%;
            figure {
                width: 250px;
                align-self: center;
            }
            p {
               text-align: center;
               &.footer-paragraph {
                padding-right: var(--wp--preset--spacing--root-padding);
                padding-left: var(--wp--preset--spacing--root-padding);
               }
               &:has(a) {
                display: grid;
                grid-template-columns: 100%;
                width: 100% !important;
                }
            }
            .wp-block-social-links {
                align-self: center;
            }
        }
       .footer-column-2 {
            min-width: 100%;
        }
        .footer-bottom-links {
            display: grid;
            grid-template-columns: 1fr;
            padding-top: var(--wp--preset--spacing--60) !important;
            >.wp-block-group {
                justify-content: center;
            }
            & .footer-vertical-bar:first-of-type {
                display: none;
                border: solid 1px red !important;
            }
        }
    }
}

@media (min-width: 600px) {
    .about-page-features>.wp-block-group.is-layout-flex {
        align-items: flex-start;
        justify-content: space-around;
    }
    .feature-card-text {
        width: clamp(280px, 30%, 30% )
    }
}


/*Mobile (599px) and smaller*/
@media (max-width: 599px) {
    h1, h2, h3, h4, h5, h6 {
        text-align: center;
    }
    h1 {
        background-position: center bottom !important;
    }
    /*navigation*/
    .wp-block-navigation.header-navigation {
        min-width: unset !important;
    }
    .wp-block-site-logo {
        min-width: unset !important;
        max-width: 75% !important;
        margin-right: var(--wp--preset--spacing--20) !important;
    }
    .wp-block-site-logo img {
        min-width: 100px !important;
        max-width: 100% !important;
    }
    .wp-block-navigation button.wp-block-navigation__responsive-container-open svg,
    .wp-block-navigation button.wp-block-navigation__responsive-container-close svg {
        width: 40px;
        height: 40px;
    }
    .wp-block-navigation__responsive-container-content, 
    .wp-block-navigation__responsive-container ul.header-navigation.items-justified-right.wp-block-navigation,
    .wp-block-navigation__responsive-container ul.header-navigation.items-justified-right.wp-block-navigation li.wp-block-navigation-item.has-child,
    .wp-block-navigation__responsive-container ul.header-navigation.items-justified-right.wp-block-navigation ul.wp-block-navigation__submenu-container {
        align-items: flex-start !important;
    }
    .wp-block-navigation__responsive-container ul.header-navigation.items-justified-right.wp-block-navigation li.wp-block-navigation-item {
        color: white !important;
    }

    #footer-group {
        padding-top: var(--wp--preset--spacing--20) !important; 
        >.wp-block-columns {
            row-gap: var(--wp--preset--spacing--40);
        }
        .footer-column-1 {
            display: flex;
            min-width: 100%;
            figure {
                width: 250px;
                align-self: center;
            }
            p {
               text-align: center;
               &:has(a) {
                display: grid;
                grid-template-columns: 100%;
                width: 100% !important;
                }
            }
            .wp-block-social-links {
                align-self: center;
            }
        }
       .footer-column-2 .wp-block-columns {
           display: grid;
           grid-template-columns: 1fr 1fr;
           row-gap: var(--wp--preset--spacing--40);
           & .footer-nav-label {
            height: var(--wp--preset--spacing--24);
           }
           & .wp-block-separator {
            margin-bottom: 0;
           }
           & .wp-block-navigation-link {
            padding-right: var(--wp--preset--spacing--36);            
            padding-bottom: var(--wp--preset--spacing--10);
           }
        }
        .footer-bottom-links {
            & .footer-vertical-bar:first-of-type {
                display: none;
            }
        }
    }
}

@media (max-width: 400px) {
    .footer-column-2 .wp-block-columns {
           grid-template-columns: 1fr !important;
           .wp-block-column {
            width: 100%;
           }
    }
}