/* Remove margin at top of entry content */
.entry-content {
    margin-block-start: 0;

    &:not(.wp-block-post-content) {
        > * {
            margin: 0 !important;
        }
    }
}

/* Mobile menu */
@media screen and (max-width: 767px) {
    body:not(.wp-admin):not(.block-editor-iframe__body) {
        header {
            .wp-block-navigation__responsive-container {
                min-height: 100vh !important;
 		background-color:#000;

                &.has-modal-open {
                    background-color: var(--wp--preset--color--secondary);

                    .wp-block-navigation__container {
                        gap: 10px;
                        width: 100%;

                        > li {
                            width: 100%;
                            box-sizing: border-box;
                            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
                            padding-bottom: 20px;

                            > a {
                                color: white;
                                padding: 0 var(--wp--preset--spacing--small-secondary);
                                font-size: 16px;
                            }

                            + li {
                                padding-top: var(--wp--preset--spacing--small-secondary);
                            }

                            .wp-block-navigation-submenu {
                                gap: 10px;
                                margin-top: 15px;
                                padding-left: 0 !important;
                                padding-top: var(--wp--preset--spacing--small-secondary);
                                padding-bottom: 0;

                                > li {
                                    margin-bottom: 5px;

                                    > a {
                                        color: rgba(255, 255, 255, 0.75);
                                        padding: 0 var(--wp--preset--spacing--small-secondary);
                                        font-size: 14px;
                                    }
                                }
                            }

                            &:last-child {
                                border-bottom: 0;
                            }
                        }
                    }

                    .wp-block-buttons {
                        padding: 0 var(--wp--preset--spacing--small-secondary);
                        width: 100%;
                        box-sizing: border-box;

                        .wp-block-button {
                            flex: 0 1 100%;
                            width: 100%;
                            display: block;

                            .wp-block-button__link {
                                display: block;
                            }
                        }
                    }

                }

                .wp-block-navigation__responsive-container-close {
                    top: 30px !important;
                    right: 30px !important;

                    svg {
                        fill: white !important;
                    }
                }
            }
        }
    }
}

/* Header */
body:not(.wp-admin):not(.block-editor-iframe__body) {
    header {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 99;

        > .has-background{
            transition-property: background-color;
            transition-duration: 0.2s;
            transition-timing-function: ease-in-out;
        }

        .site-header--inner{
            transition-property: background-color, padding;
            transition-duration: 0.2s;
            transition-timing-function: ease-in-out;
        }

        #logo-wrapper{
            align-self: flex-start;
            opacity: 1;
            overflow: hidden;
            transition-property: opacity, width;
            transition-duration: 0.2s;
            transition-timing-function: ease-in-out;

            .wp-block-site-logo{
                img{
                    transition: width 0.2s ease-in-out;
                }
            }
        }


        &.transparent-on-load:not(.scrolling){
            .site-header--inner{
                --wp--preset--color--primary: #fff;
                background-color: unset !important;

                img{
                    filter: brightness(0) invert(1);
                }

                .wp-block-button__link{
                    &:hover{
                        color: #4E6D64 !important;
                    }
                }
            }
        }

        @media screen and (max-width: 992px) {
            #logo-wrapper{
                justify-content: flex-start;
            }
        }

        &.scrolling{
            .wp-block-navigation-item__content{
                &::before{
                    background-color: var(--wp--preset--color--primary);
                }
            }

            .site-header--inner{
                padding-bottom: 10px !important;
                padding-top: 10px !important;
            }

            #logo-wrapper{
                height: 0;
                opacity: 0;
                pointer-events: none;
            }
        }

        #header-hero{
            #header-inner{
                position: relative;

                #logo-wrapper{
                    max-width: 26%;
                    min-width: 100px;
                    position: absolute;
                    top: 0;
                }

                #menu-wrapper{
                    margin-left: auto;
                }
            }
        }
    }
}

/* Helper Classes */
@media screen and (max-width: 767.98px) {
    .vertical-center-on-mobile{
        &.is-vertical{
            justify-content: center !important;
        }
    }
}

.is-position-sticky,
.avoid-header {
    top: 200px !important;
    scroll-margin-top: 200px;
}

html{
    scroll-behavior: smooth;
}

.yoast-breadcrumbs{
    a,
    span {
        font-size: clamp(0.75rem, 0.692rem + 0.308vw, 1rem);
    }

    a{
        color: inherit;
        transition: color 0.2s ease-in-out;

        &:hover{
            color: var(--wp--preset--color--primary);
        }
    }

    span.breadcrumb_last{
        font-weight: 700;
    }
}

.query-loop-filters-render{
    flex-wrap: wrap;
}

footer{
    margin: 0;
}

.expander {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 1s;

    .expander-content {
        min-height: 200px;
        position: relative;

        &::before{
            background-image: linear-gradient(0deg, rgba(255,255,255,1), rgba(255,255,255,0) 100%);
            bottom: 0;
            content: '';
            height: 100px;
            left: 0;
            opacity: 1;
            position: absolute;
            transition-property: opacity;
            transition-duration: 0.2s;
            transition-timing-function: ease-in-out;
            width: 100%;
        }

        &.dark{
            &::before{
                background-image: linear-gradient(0deg, rgba(21,62,72,1), rgba(21,62,72,0) 100%);
            }
        }
    }

    &.expanded {
        grid-template-rows: 1fr;

        .expander-content{
            &::before{
                opacity: 0;
            }
        }
    }
}

.select-wrapper,
.control {
    display: inline-block;
    position: relative;

    &:has(> select){
        &::before{
            background-image: url("../images/chevron-outline-down.svg");
            background-repeat: no-repeat;
            background-size: contain;
            content: '';
            height: 18px;
            pointer-events: none;
            position: absolute;
            right: 10px;
            top: 50%;
            translate: 0 -50% 0;
            width: 18px;
            z-index: 1;
        }
    }

    select,
    input:not([type="checkbox"]),
    textarea,
    &.control-property_type div.selected,
    &.control-address_custom_location div.selected{
        appearance: none;
        background-color: var(--wp--preset--color--white);
        border: 1px solid var(--wp--preset--color--secondary);
        border-radius: 100px;
        color: var(--wp--preset--color--secondary);
        cursor: pointer;
        font-family: var(--wp--preset--font-family--neutraface-text);
        font-size: 16px;
        font-weight: 400;
        line-height: 1;
        padding: 10px 35px 10px 10px;
    }

    .selected::after{
        content: unset;
    }

    &.control-property_type,
    &.control-address_custom_location{
        .ms-options-wrap{
            max-width: 250px;
            width: 100%;

            .selected{
                &::after{
                    content: unset;
                }
            }

            .ms-options{
                border-radius: 15px;
                border: unset;
                min-height: unset !important;

                input[type="checkbox"]{
                    top: 4px;
                }

                label{
                    font-size: 16px;
                }
            }
        }
    }
}

body{
    &.accent-color-primary{
        --wp--preset--color--page-accent-colour: var(--wp--preset--color--primary) !important;

        .editor-styles-wrapper{
            --wp--preset--color--page-accent-colour: var(--wp--preset--color--primary) !important;
        }

        .has-page-accent-colour-background-color{
            color: var(--wp--preset--color--secondary) !important;
        }
    }
    &.accent-color-tertiary{
        --wp--preset--color--page-accent-colour: var(--wp--preset--color--tertiary) !important;

        .editor-styles-wrapper{
            --wp--preset--color--page-accent-colour: var(--wp--preset--color--tertiary) !important;
        }
    }
    &.accent-color-quinary{
        --wp--preset--color--page-accent-colour: var(--wp--preset--color--quinary) !important;

        .editor-styles-wrapper{
            --wp--preset--color--page-accent-colour: var(--wp--preset--color--quinary) !important;
        }
    }
}

button.components-button[aria-label="Colour: Page Accent Colour"]{
    color: unset;

    &::after{
        background-image: linear-gradient(0deg, rgba(202,77,10,1) 20%, rgba(197,241,32,1) 50%, rgba(119,215,156,1) 80%);
    }
}

.splide__track--fade ul {
    max-width: 100vw;
}

#inner-logo-wrapper{
    min-width: 200px;
}

iframe{
    border-radius: 20px;
}

/* Sold properties */
.availability-sold {
    .location,
    .location + .property-type {
        display:none;
    }
}

.property_tour,
.property_tour iframe {
    width:100%;
    height:auto;
    aspect-ratio: 16/9;
}

.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
    background-color: #000!important;
}