/* 
* Header Sicky/Scroll Styles 
* Works with stickyHeader.js
*/
#brx-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999999999999;
    opacity: 1;
    transition: all 0.65s ease-in-out;
}

/* For the sticky on scroll up effect */
#brx-header.not-sticky {
    transition: all 0.65s ease-in-out;
    transform: translateY(-101%);
    opacity: 0;
}

#brx-header.sticky-header {
    transition: all 0.65s ease-in-out;
    top: 0;
    opacity: 1;
}

/* Header Search Bar */
.brxe-xheadersearch .x-search-form {
    background-color: #f2f2f2;
}

@media screen and (max-width: 1120px) {
    .brxe-xheadersearch .x-search-form {
        padding: 0 2.4rem;
    }
}

/* Content Spacing For Header */
main {
    padding-top: 82px;
}

@media screen and (min-width: 767px) {
    main {
        padding-top: 110px;
    }
}

@media screen and (min-width: 1120px) {
    main {
        padding-top: 125px;
    }
}

/* Blog Single */
.prev-post {
    padding-right: 24px;
}

.next-post {
    padding-left: 24px;
}

/* 
*
* Footer 
*
*/

/* Social Links ShortCode */
.social-links {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.header__r-col .social-links {
    color: #363636;
    justify-content: flex-end;
}

.header__r-col .social-links li a {
    color: #363636;
}

.header__r-col .social-links li a:hover {
    color: #d33568;
}

/* 
*
* Filters for Blog 
*
*/
.filters {
    grid-row: 1 / -1;
}

.wpgb-facet select.wpgb-select + .wpgb-select-controls .wpgb-select-separator {
    background: transparent !important;
}

.wpgb-facet .wpgb-facet-title {
    font-size: unset !important;
    margin: 0 0 0.8rem 0 !important;
}

.x-accordion_header {
    padding: 9px 14px 9px 8px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 400;
}

.x-accordion_title {
    font-weight: normal;
    color: #797979 !important;
    font-size: 16px;
}

.x-accordion_header,
.wpgb-facet .wpgb-input,
.wpgb-facet .wpgb-select {
    border: 1px solid var(--base-light-trans-50) !important;
}

.x-accordion_header:hover,
.wpgb-facet .wpgb-input:hover,
.wpgb-facet .wpgb-select:hover {
    border-color: var(--action-light) !important;
}

.x-accordion_header:focus,
.x-accordion_header:focus-within,
.wpgb-facet .wpgb-input:focus,
.wpgb-facet .wpgb-input:focus-within,
.wpgb-facet .wpgb-select:focus,
.wpgb-facet .wpgb-select:focus-within {
    border-color: var(--action) !important;
}

/* Ordering the checkboxes */
.wpgb-facet .wpgb-hierarchical-list {
    display: flex !important;
    flex-direction: column !important;
}

.pos-relative {
    position: relative !important;
}

/* Mobile Filters */
/* Filter Card Positioning added with JS */
@media screen and (max-width: 478px) {
    .filters {
        position: fixed;
        top: 0px;
        right: 0;
        bottom: 0;
        left: 0;
        transition: all 0.5s ease-in-out;
        transform: translateX(-101%);
        opacity: 0;
        z-index: 99999999999999999999999;
    }

    .filters.filters-open {
        transform: translateX(0);
        opacity: 1;
    }

    /* Grid Control */
    .blog-archive-grid {
        grid-column: 1 / -1;
    }

    /* Filters Button */
    .open-filters-btn {
        position: fixed;
        bottom: 4rem;
        left: 4rem;
        display: block;
        width: 4.8rem;
        height: 4.8rem;
        aspect-ratio: 1/1;
        background-color: #fff;
        border: 2px solid var(--action);
        justify-content: center;
        align-items: center;
        z-index: 9999999999999999999;
    }

    .open-filters-btn i {
        font-weight: 600;
        margin-left: -0.15rem;
        margin-top: 0.05rem;
    }

    .filters-wrapper {
        width: 94%;
        margin: 0 auto;
        padding: 0 24px;
    }
}

/* 
*
* Other
*
*/

/* Fix clickable parent class */
.clickable-parent:not(a) > a::after {
    z-index: 999999;
}
.clickable-parent::after {
    z-index: 999999;
}

/* Bu;tton Styling */
.btn,
.btn--action.btn--outline,
.bricks-button.btn--action.btn--outline {
    transition: all 0.3s ease-in-out;
}

@media screen and (max-width: 768px) {
    .btn--action.btn--outline:hover,
    .bricks-button.btn--action.btn-outline:hover {
        min-width: 75%;
    }
}

/* Image sizing */
body.single-post p > img {
    margin: 2rem auto;
}

@media screen and (max-width: 768px) {
    .btn--action.btn--outline:not(.filters-close-icon),
    .bricks-button.btn--action.btn--outline:not(.filters-close-icon) {
        min-width: 75% !important;
    }
}

/* Image Aspect Ratio */
html body.brx-body main.brx-content img,
.related-img-wrapper {
    aspect-ratio: 4/5 !important;
}

.slider-card-media {
    min-height: 375px !important;
}

/* Related Images Shortcode */
.related-recipes-ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1em 0;
}

.related-img-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-block-start: 0 !important;
}

.related-img-wrapper {
    order: -1;
}

.related-img-card .related-img-wrapper img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
}

/* Pinterest Button */
.pinterest-share-button {
    display: none;
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    z-index: 999;
}

body.single-post .image-container {
    position: relative;
    width: 100%;
    height: 100%;
}

body.single-post .image-container:hover .pinterest-share-button,
body.single-post .image-container:focus .pinterest-share-button,
body.single-post img[class*="wp-image-"]:hover ~ .pinterest-share-button,
body.single-post img[class*="wp-image-"]:focus ~ .pinterest-share-button {
    display: block;
}

/* Dynamically generated Pinterest Save button */
body.single-post
    .image-container
    a[class*="PIN_"][href*="pinterest.com/pin/create/button/"] {
    display: none !important;
    position: absolute !important;
    top: 50% !important;
    right: 50% !important;
    transform: translate(50%, -50%) !important;
    z-index: 999 !important;
    background-size: contain !important;
}

body.single-post
    .image-container:hover
    a[class*="_button_pin"][href*="pinterest.com/pin/create/button/"],
body.single-post
    .image-container:focus
    a[class*="_button_pin"][href*="pinterest.com/pin/create/button/"],
body.single-post
    img[class*="wp-image-"]:hover
    ~ a[class*="_button_pin"][href*="pinterest.com/pin/create/button/"],
body.single-post
    img[class*="wp-image-"]:focus
    ~ a[class*="_button_pin"][href*="pinterest.com/pin/create/button/"] {
    display: block !important;
}