/**
 * Theme Name: Seattle GiveCamp 2024
 * Author: Seattle GiveCamp
 **/


 @media ( min-width: 1000px ) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
      display: none !important;
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
      display: block !important;
    }
}
@media ( min-width: 600px ) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
      display: flex;
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
      display: none;
    }

    .wp-block-site-logo {
        text-align: center;
    }
}

/* Style the active menu link */
.wp-block-navigation .current-menu-item > a {
    color: var(--wp--preset--color--highlight) !important;  
    text-decoration: underline;
}

/* Apply CSS Grid to the Query Loop block */
.wp-block-query .wp-block-post-template {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* Creates a 3-column grid */
    gap: 20px;                              /* Adds space between grid items */
}

/* Set the post element to display flex */
.wp-block-query .wp-block-post {
    display: flex;                  /* Enable flexbox for the post element */
    flex-direction: column;        /* Stack children vertically */
}

/* Ensure the featured image container can grow */
.wp-block-query .wp-block-post-template .wp-block-post-featured-image {
    flex: 1;                       /* Allow the featured image to grow and fill available space */
    display: flex;                 /* Enable flex for the container */
}

/* Ensure all images fill the container */
.wp-block-query .wp-block-post-template .wp-block-post-featured-image img {
    width: 100%;                  /* Make images responsive */
    height: 100%;                 /* Ensures they fill the height of the container */
    object-fit: contain !important;
}

/* Adjust for responsiveness: 2 columns on tablets */
@media (max-width: 768px) {
    .wp-block-query .wp-block-post-template {
        grid-template-columns: repeat(2, 1fr);  /* 2-column grid for tablets */
    }
}

/* 1 column on mobile */
@media (max-width: 480px) {
    .wp-block-query .wp-block-post-template {
        grid-template-columns: 1fr;  /* Stacks posts in a single column on mobile */
    }
}