/*
Theme Name: Fostering South East.
Author: Netready (Lead: Tylah).
Description: A Theme for the Fostering South East Wordpress Site.
Version: 0.1
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 8.1
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.wp-block-search div {
    background-color: var(--wp--preset--color--white) !important;
    border-color: var(--wp--preset--color--button-pink) !important;
    border-radius: 25px !important;
    border-width: 2px !important;
    padding: unset !important;
    box-shadow:  3px 3px 0px rgba(0, 0, 0, 0.25);
}

.wp-block-search input {
    background-color: unset !important;
    margin-left: 20px !important;
}

.wp-block-search__input {
 font-family: "Poppins", sans-serif;
}

.wp-block-search button {
    background-color: unset !important;
    border-left: 2px solid var(--wp--preset--color--button-pink) ;
    padding: calc(0.1em + 2px) calc(0.1em + 2px) !important
}

.wp-block-search svg {
    color: var(--wp--preset--color--button-pink) !important;
    padding: calc(0.1em + 2px) calc(0.333em + 2px) !important;
}

.header-block{
    width: 50%;
}

.wp-block-navigation__submenu-container a span {
    color: var(--wp--preset--color--text-grey);
}

.wp-block-navigation__submenu-container {
    border-radius: 4px;
}

.is-menu-open ul {
    padding-left: 20px;
}

.is-menu-open  a span, .is-menu-open  a{
    color: var(--wp--preset--color--text-grey) !important;
}
.is-menu-open  button {
    color: var(--wp--preset--color--text-grey);
}

a.wp-block-navigation-item__content:hover {
    background-color: var(--wp--preset--color--primary);
}

.entry-content {
    margin-block-start: 0px;
}

.header-cover-title-block {
    width: 50%;
}

.entry-content .header-cover-block .wp-block-cover__inner-container
{
    position: absolute;
}

.title-block {
    margin-block-start: 0px;
}

.wp-block-navigation__container span {
    font-weight: 400 ;
}

.wp-block-navigation__container a{
    font-weight: 400;
    box-sizing:border-box;
}

.wp-block-navigation__container > li {
    padding: 5px 0 !important;
    box-sizing:border-box;
    border-bottom: 5px solid var(--wp--preset--color--primary);
}

.wp-block-navigation__container > li:hover{
    border-bottom: 5px solid rgba(102, 212, 241, 1);
}

.wp-block-navigation-submenu,
.wp-block-navigation-item.wp-block-navigation-link{
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

.wp-block-navigation-submenu .wp-block-navigation__submenu-container a{
    font-size: 0.8em; /* sub menu items are smaller ( 16px ish) */
}

.wp-block-navigation__submenu-container  a.wp-block-navigation-item__content:hover {
    background-color: var(--wp--preset--color--highlight-1);
}

.wp-block-navigation__submenu-container  a.wp-block-navigation-item__content  span{
    text-wrap: nowrap;
}

.wp-block-navigation__submenu-container  a.wp-block-navigation-item__content:hover  span{
    color: var(--wp--preset--color--text-navy)  !important;
}

a.wp-block-button__link:hover
{
    background-color: var(--wp--preset--color--text-navy) !important;
    color: white !important;
}

.wp-block-search__button:hover  {
    background-color: var(--wp--preset--color--text-navy) !important;
    color: white !important;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.wp-block-search__button:hover svg {
    background-color: var(--wp--preset--color--text-navy) !important;
    color: white !important;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.is-style-highlight .wp-block-button__link  {
    background-color: var(--wp--preset--color--highlight-1);
    color: var(--wp--preset--color--text-navy);
}

.is-style-highlight .wp-block-button__link:hover  {
    background-color: var(--wp--preset--color--text-navy) !important;
    color: var(--wp--preset--color--highlight-1) !important;
}

.wp-block-template-part {
    margin-block-start: 0px !important;
}

.wp-block-group {
    margin-block-start: 0px;
}

.wp-block-query-pagination span,
.wp-block-query-pagination a {
    color: var(--wp--preset--color--text-grey) !important;
}

.banner-image-icon img {
    object-fit: contain !important;
    max-height: 430px !important;
    height: 100% !important;
}

/*<!-- General CSS -->*/
.padding-xy-0 {
    padding: 0 !important;
}

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

.padding-y-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.padding-top-0 {
    padding-top: 0 !important;
}

.padding-top-10 {
    padding-top: 10px !important;
}

.padding-bottom-0 {
    padding-bottom: 0 !important;
}

.padding-x-10 {
    padding: 0 10px;
}

.padding-10 {
    padding: 10px;
}

.margin-top-0 {
    margin-top: 0 !important;
}

.text-align-centre {
    text-align: center;
}

.text-align-start {
    text-align: start;
}

.image-padding-x-15 {
    padding: 0 15px;
}

.video-padding-x-15 {
    padding: 0 15px;
}

.image-padding-x-25 {
    padding: 0 25px;
}

.hidden-mobile {
    display: none !important;
}

.wp-block-image.hidden-mobile {
    display: none;
}

.d-flex-direction-column-reverse {
    display: flex !important;
    flex-direction: column-reverse !important;;
}

.justify-content-centre {
    justify-content: center !important;
}

.border-left-0 {
    border-left: 0 !important;
}

.local-authorities-block .wp-block-column {
    flex-basis: 18% !important;
}

.wp-block-group.local-authorities-block.local-authorities-block-mobile .wp-block-columns {
    flex-wrap: wrap !important;
}

.wp-block-query-pagination span,  .wp-block-query-pagination a {
    color: var(--wp--preset--color--text-grey) !important;
}

footer a {
    text-decoration: none;
    color: white !important;
}

footer a:hover {
    text-decoration: underline;
    color: var(--wp--preset--color--highlight-1) !important;
}

p > a {
    color: var(--wp--preset--color--primary);
}

a > svg {
    text-decoration: none;
    fill: white;
}

a:hover > svg {
    text-decoration: none;
    fill: var(--wp--preset--color--highlight-1) !important;
}

.wp-block-group.header-hero-banner {
    display: block;
    flex-direction: column;
    align-content: start;
    flex-wrap: wrap;
}

.footer-heart-pin {
    opacity: 0.5;
}

.image-card {
    cursor: pointer;
}
.image-card:hover h2, .image-card:hover p {
    color:var(--wp--preset--color--text-navy);
}
.image-card:hover img{
    filter: opacity(60%)
}
.image-card:hover figure {
    background: #000;
}

.wp-block-cb-carousel .slick-next:before,
.wp-block-cb-carousel .slick-prev:before {
    color: white !important;
}

.talk-to-us-about-fostering-modal-btn {
    border-radius: 9999px;
    box-shadow: none;
    padding: calc(.667em + 2px) calc(1.333em + 2px);
    text-decoration: none;
}


.talk-to-us-about-fostering-modal-btn:hover {
    background-color: var(--wp--preset--color--text-navy) !important;
    color: var(--wp--preset--color--highlight-1) !important;
}

.footer-netready-ltd-mobile {
    background-image: url('/wp-content/themes/south-east-foster-hub-theme/assets/images/heart-pin.png') !important;
    background-position: 95% 50%;
    background-repeat: no-repeat;
}

.footer-icon-column-max-width {
    max-width: 168px !important;
    width: 168px !important;
}

.wp-block-column.footer-icon-column-max-width {
    max-width: 168px !important;
}


.search-filters-form {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}
.search-filters-form select, .search-filters-form input{
    height: 40px;
    padding: 0 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

.search-filters-form select {
    width: 200px;
}
.post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px; 
  }
  
.post-item {
    max-width: 300px;
    margin: 0 auto; 
}
.post-item img{
    width: 100%;
    height: auto;
}

@media screen and (min-width: 768px) {
    .desktop-justify-end {
        justify-content: end;
    }

    .desktop-text-center {
        text-align: center;
    }
}

/*<!-- Tablet CSS -->*/
@media screen and (min-width: 768px) and (max-width: 920px) {
    .wp-block-columns.wp-block-columns-tablet {
        margin-left: 142px !important;
    }
}

/*<!-- Mobile CSS -->*/
@media screen and (max-width: 768px) {
    .post-grid {
        grid-template-columns: 1fr; 
    }

    .banner-image-icon {
        width: 42% !important;
    }

    .entry-content .wp-block-cover.wp-block-cover-mobile {
        min-height: 825px !important;
    }

    .wp-block-group.header-hero-banner {
        padding-left: 15px !important;
        padding-right: 5px !important;
    }

    .has-text-align-left.header-hero-banner-text {
        padding-left: 0 !important;
    }

    .has-text-align-left.header-hero-banner-title {
        margin-left: 0 !important;
    }

    .wp-block-image.hidden-mobile {
        display: block !important;
    }

    .header-cover-block .wp-block-cover__image-background {
        display: none !important;
    }

    .header-cover-block {
        background-image: url('/wp-content/uploads/2024/05/background-taller.png');
        min-height: 750px !important;
        padding-top: 36px !important;
    }

    .padding-mobile-top-0 {
        padding-top: 0 !important;
    }

    .padding-mobile-10 {
        padding: 10px;
    }

    .image-padding-x-mobile-25 {
        padding: 0 25px;
    }

    /*<!-- Header Template -->*/
    .wp-block-navigation-item__content .wp-block-navigation-item__label {
        color: var(--wp--preset--color--text-grey);
    }

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

    .header-padding-x-25-mobile {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }

    /*<!-- Footer Template -->*/
    .footer-netready-ltd-mobile .wp-block-group.is-vertical {
        align-items: flex-start !important;
    }

    .height-mobile-fit-content {
        height: fit-content !important;
    }

    /*<!-- Homepage -->*/
    .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
        align-items: center !important;
        padding-right: 15px;
    }

    .header-cover-title-block {
        width: 100%;
    }

    .local-children-heart {
        display: flex;
        justify-content: center;
    }

    .real-fostering-stories {
        display: flex;
        justify-content: center;
    }

    .wp-block-cb-carousel .slick-prev:before,
    .wp-block-cb-carousel .slick-next:before {
        color: #fff;
    }

    .wp-block-cb-carousel .slick-slide {
        padding: 0 0;
    }

    .wp-block-navigation__responsive-container-close {
        right: 25px;
    }

    .local-authorities-block-mobile .wp-block-image  {
        width: 95px;
        height: auto;
        padding: 15px 0;
    }

    .local-authorities-block-mobile .wp-block-column.is-vertically-aligned-center {
        flex-basis: 30% !important;
    }

    .local-authorities-block-mobile .wp-block-image:last-child {
        padding-bottom: 0 !important;
    }

    .wp-block-cb-carousel .wp-block-cover.header-cover-block {
        min-height: 60rem !important;
    }


    /*<!-- Why Foster -->*/
    .why-foster-slider-height-mobile {
        height: 745px !important;
    }

    /*<!-- Burger Menu Changes -->*/
    .wp-block-navigation__responsive-container-open::after {
        background: none;
        border: none;
        color: inherit;
        font-size: inherit;
        cursor: pointer;
        content: "MENU";
    }

    .wp-block-navigation__responsive-container-open svg {
        fill: currentColor;
        display: block;
        height: 30px;
        pointer-events: none;
        width: 24px;
        margin-right: 5px;
    }
}


.blog-entry-info {
    padding: 10px 20px;
    text-align: center;

}
.blog-entry-info i, .blog-entry-info svg {
    color: var(--wp--preset--color--primary) !important;
    margin-right: 10px;
}

.blog-entry-icons {
    margin: 0px auto;
    max-width: fit-content;
}
.blog-entry-icons a {
    color: var(--wp--preset--color--text-grey);
}
.blog-entry-icons div {
    display:flex;
    justify-content: flex-start;
}
.blog-entry-title {

    text-align: center;
}
.blog-entry-title a {
    color: var(--wp--preset--color--primary) !important;
    text-decoration: none;
}

.event-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
} 

.event-content div:first-of-type {
    flex-grow: 1;
}

.event-content .wp-block-heading {
    margin: 0;
}
.event-content p {
    margin: 0;
}
.event-content img{
    max-height: 200px;
    width: auto;
}
.more-info {
    margin-right: 20px;
}
.event-details {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
@media all and (max-width: 500px) {
    .event-details * {
        flex: 1 1 100%;
    }
    .event-content img {
        width: 100% !important;
        height: auto !important;
    }
}
.event-details i, .event-details svg {
    color: var(--wp--preset--color--primary);
    margin-right: 8px;
}

.search-events-title {
    color: var(--wp--preset--color--text-grey) !important;
    font-weight: 500 !important;
}

.event-block {
    margin-top: 30px;
}

#map {
    height: 500px;
}

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    margin: 0px 4px;
  }
  
  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #2196F3;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

  .d-flex {
    display: flex;
  }
  .justify-content-end {
    justify-content: end;
  }

  .posts-pagination {
    display: flex;
    justify-content: center;
    align-items: middle;
}
  .page-numbers {
    margin: 0;
    text-decoration: none;
    font-size: 25px;
    text-align: center;
    min-width: 30px;
    padding: 3px 7px;
    background-color: var(--wp--preset--color--white);
    color:  var(--wp--preset--color--primary);
    transition: all ease-out 0.3s;
}

.page-numbers:not(.current):hover {
    color: var(--wp--preset--color--white);
    background-color:  var(--wp--preset--color--primary);
}

.page-numbers:not(.prev):not(.next) {
    border: solid 1px  var(--wp--preset--color--primary);
}

.page-numbers:last-child {
    border: solid 1px  var(--wp--preset--color--primary);
}

.page-numbers.prev {
    border: solid 1px  var(--wp--preset--color--primary); 
    border-right: none;
    border-top-left-radius: 22.5px;
    border-bottom-left-radius: 22.5px;
}

.page-numbers.next {
    border: solid 1px  var(--wp--preset--color--primary);
    border-left: none;
    border-top-right-radius: 22.5px;
    border-bottom-right-radius: 22.5px;
}

.page-numbers.current {
    background-color: var(--wp--preset--color--secondary);
}
.pagination {
    display: flex;
    justify-content: center;
    align-items: middle;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}


/* Form styling */
#guide-signup-form {
    max-width: 500px;
    margin: 20px auto;
    padding: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--wp--preset--color--text-grey);
}

.form-group input[type="email"],
.form-group input[type="text"] {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    font-family: "Poppins", sans-serif;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

.form-group input[type="email"]:focus,
.form-group input[type="text"]:focus {
    outline: none;
    border-color: var(--wp--preset--color--primary);
}

.form-group input[type="checkbox"] {
    margin-right: 10px;
    transform: scale(1.2);
}

.form-group label[for="opt-in"] {
    display: inline;
    margin-bottom: 0;
    font-weight: normal;
}

#guide-signup-form button {
    background-color: var(--wp--preset--color--primary);
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-family: "Poppins", sans-serif;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#guide-signup-form button:hover {
    background-color: var(--wp--preset--color--text-navy);
}

#guide-signup-form p {
    font-size: 14px;
    color: var(--wp--preset--color--text-grey);
    line-height: 1.4;
    margin: 15px 0;
}

.thank-you-message {
    background-color: var(--wp--preset--color--highlight-1);
    color: var(--wp--preset--color--text-navy);
    padding: 15px 20px;
    border-radius: 8px;
    margin: 20px 0;
    text-align: center;
    font-weight: 500;
    max-width: 500px;
    border: 2px solid var(--wp--preset--color--primary);
}