/*Colors*/
:root {
    --color-bay: #9bdad9;
    --color-black: #2C2C2C;
    --color-white: #ffffff;
    --color-orbit: #0030cc;
    --color-orlando: #078572;
}



/* Resource Card Styles */
.resource-item {
    margin-bottom: 30px;
}

.resource-card {
    background-color: white;
    width: 350px;
    margin: 20px;
    height:100%;
}

.entry-thumbnail img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 1;
}

.entry-content {
    padding: 30px 30px 15px 30px;
}


.resource-card-meta {
    padding: 15px 30px 0px 30px;
}

.resource-card-meta ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
}

.resource-card-meta li {

    margin: 0;
    padding: 0;
    margin-bottom: 15px;

}

.resource-card-meta ul {
    list-style-type: none;
    list-style-image: none;
    display: block;
}



/* Filter Container Styles */
.filter-container {
    margin-left: auto;
    margin-right: auto;
    padding: 20px clamp(20px, 5%, 55px);
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--color-orlando);
}

.filter-container select {
    border: 2px solid var(--color-white);
    background-color: var(--color-orlando);
    color: var(--color-white);

}

.filter-container h1, .filter-container p  {
    color: var(--color-white);
}

.filter-container h1 {
    font-size: clamp(3.2rem, 3.1vw, 5.6rem);
}

.filter-container input#search {
    border: 2px solid var(--color-white);
    background-color: var(--color-orlando);
    color: var(--color-white);
}

.filter-container input::placeholder {
    color: var(--color-white);
}

.filter-container select, .filter-container input {
    margin: 15px;
}



/* Resources Results Styles */
#resources-results {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: var(--color-orlando);
    padding-top: 20px;
    padding-bottom: 80px;
}

.resource-item {
    display: none;
}



/* Filter Form Styles */
#filter-form {
    display: flex;
    flex-direction: row;
    /* Align child items horizontally */
    align-items: center;
    /* Align child items to the center vertically */
    justify-content: center;
    /* Center items horizontally */
    width: 100%;
    /* Ensure the form takes full width */
    margin: 0 auto;
    /* Center the form on the page */
    padding: 20px;
    /* Add padding for better spacing */
    flex-wrap: wrap;
}

#filter-form select,
#filter-form input {
    padding: 12px 5px;
    width: 100%;
    max-width: 300px;
    min-width: 300px;
    margin-bottom: 10px;
    box-sizing: border-box;
    height: 54px;
}

.filter-container input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.9' height='14.9' viewBox='0 0 14.9 14.9'%3E%3Cpath id='Path_3404' data-name='Path 3404' d='M14.9,13.8,9.933,8.83a5.4,5.4,0,0,0,1.1-3.311A5.485,5.485,0,0,0,5.519,0,5.485,5.485,0,0,0,0,5.519a5.485,5.485,0,0,0,5.519,5.519,5.4,5.4,0,0,0,3.311-1.1L13.8,14.9ZM1.577,5.519A3.9,3.9,0,0,1,5.519,1.577,3.9,3.9,0,0,1,9.46,5.519,3.9,3.9,0,0,1,5.519,9.46,3.9,3.9,0,0,1,1.577,5.519Z' fill='%23fff'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 270px 19px;
}


/*Breadcrumbs on Single Resource*/
.bcrumb {
    padding-bottom: 40px;
    padding-top: 80px;

}

.bcrumb a {
    color: var(--color-black);
}

h6.superheading {
    color: var(--color-black);
}

h1.title {
    color: var(--color-black);
    font-size: clamp(3.2rem, 3.1vw, 5.6rem);
}


/* Single-Resource */
.site-main {
    margin-left: auto;
    margin-right: auto;
    padding: 0 clamp(55px, calc(158px + 100vw - 1440px), calc(50vw - 584px));
    background-color: var(--color-bay);
    padding-bottom: 80px;
}

.resource-content {
    display: grid;
    background-color: var(--color-bay);
    grid-auto-rows: minmax(0, auto);
    grid-column-gap: 19px;
    grid-row-gap: 0px;
    grid-template-columns: repeat(12, minmax(0, 100%));


}

.entry-text {
    overflow: auto;
    margin-right: 0;
    grid-column: 1 / span 6;
}

.resource-meta {
    margin: 25px;
    padding: 30px;
    background-color: var(--color-white);
    margin-right: -51px;
    margin-left: 51px;
    margin-top: 30px;
}

.meta-container {
    grid-column: 7 / span 6;
}

.img-thumbnail img {

    width: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='margin-top:20px;'%3E%3Cdefs%3E%3Cpattern id='myPattern' x='8' y='8' width='27' height='27' patternUnits='userSpaceOnUse' %3E%3C!-- start pattern--%3E%3Ccircle cx='3' cy='3' r='3' style='stroke: none; fill: %230030cc' /%3E%3C!-- end pattern --%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' style='fill: url(%23myPattern);'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    padding: 64px 0 0 51px;
    background-clip: padding-box;
}

.resource-meta ul {
    margin-left: 0;
    padding: 0 25px;
    list-style: none;
    margin-top: 0;
    padding: 0;
}

.resource-meta li {
    display: block;
    padding-left: 0;
    margin-bottom: 5px;

}

.resource-meta ul:first-of-type {
  margin-bottom: 5px;
}


.download-pdf-icon {
    margin-left: 10px;
    position: absolute;
    top: -4px;
    background-color: #0030cc;
    padding: 5px 9px 0px 9px;
}

.download-button-pdf {
    font-size: 1.5rem;
    position: relative;
    white-space: nowrap;
}

.wp-block-buttons.download-button .wp-block-button a {
    padding-right: 50px;
    padding-top: 13px;
    padding-bottom: 10px;

}

.wp-block-buttons.download-button {
    margin-left: auto;
}

.pdf-attachment {
    margin-bottom: 40px;
}

.pdf-group {
    display: flex;
    margin-bottom: 30px;
}

.resources-hr {
    border: 0;
    height: 1px;
    background-color: #000;
    margin-bottom: 40px;
    margin-top: 80px;

}

.resources-hr.pdf-hr {
    margin-top: 40px;
}

.pdf-title {
    align-self: center;
    padding-right: 10px;
    font-weight: 500;
    max-width: 350px;
    font-size: 1.8rem;
}


.video-container {
    margin-bottom: 0px;
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Aspect ratio: 16:9 (height divided by width * 100) */
    height: 0;
    grid-column: 1 / span 6;
}

.responsive-iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  
}

.video-title {
    font-size: 1.8rem;
}





@media screen and (max-width: 1000px) {
    .pdf-group {
        display: block;
    }

    .wp-block-buttons.download-button {
        margin-top: 15px;
    }
}


@media screen and (max-width: 770px) {

     /*Filter Select Fields*/


    #filter-form {
        flex-direction: row;
    }


    /*Simgle Resource*/
    .resource-content {
        display: block;
    }

    .img-thumbnail {
        margin-right: 50px;

    }

    .resource-meta {
        margin-right: 0px;
        margin-left: 51px;

    }

    .video-title {
        font-size: 1.6rem;
    }

    .pdf-title {
        font-size: 1.6rem;
    }

   

}