/* ---------------------------------------
 Section Styles: Light Cool
 --------------------------------------- */

/* Splide Carousel */
.is-style-section-cool-light .wp-block-splide-carousel,
.is-style-section-cool-light .slider-wrapper {
    & .splide__arrow {
        background-color: var(--theme-color-primary);
    }

    & .splide__arrows .splide__arrow {
        background-color: var(--theme-color-primary);
        box-shadow: var(--wp--preset--shadow--dark-cool);
    }

    & .splide__pagination {
        .splide__pagination__page {
            &.is-active,
            &:hover {
                background-color: var(--theme-color-primary);
            }
        }
    }
}

header .is-style-section-cool-light a {
    color: inherit;
}

.is-style-section-cool-light:has(.wp-block-acf-retreat-accommodation-list) a {
    color: var(--theme-color-primary);
}

header .is-style-section-cool-light a:hover {
    color: var(--theme-color-primary);
}

/* Header */
header .is-style-section-cool-light {
    .wp-block-site-logo .custom-logo-link img {
        filter: unset;
    }

    .menu-main-menu-container {
        ul {
            li {
                & a:hover {
                    color: var(--theme-color-primary);
                }

                &.open > a {
                    color: var(--theme-color-primary);
                }

                &.current-menu-ancestor > a {
                    color: var(--theme-color-primary);
                }

                & ul li.current-menu-item > a {
                    color: var(--theme-color-primary);
                }

                & li.menu-item-has-children > a::after {
                    filter: brightness(0) saturate(100%) invert(64%) sepia(83%) saturate(1748%) hue-rotate(157deg) brightness(86%) contrast(81%);
                }
            }
        }
    }

    .header--shadow:has(.is-style-section-cool-dark) {
        box-shadow: var(--wp--preset--shadow--light-cool);
    }

    @media screen and (max-width: 899px) {
        .mobile-menu-panel {
            background-color: var(--wp--preset--color--snow-frost);

            ul {
                li.menu-item-has-children {
                    a {
                        &::after {
                            filter: brightness(0) saturate(100%) invert(64%) sepia(83%) saturate(1748%) hue-rotate(157deg) brightness(86%) contrast(81%);
                        }
                    }
                }
            }
        }
    }
}

body .is-style-section-cool-light {
    --theme-color-primary: var(--wp--preset--color--snow-blue-ice, #2ba4ca);
    --theme-color-secondary: var(--theme-color-darker-snow-blue-ice, #006f92);
    --theme-color-accent: var(--theme-color-dark-accent);
    --theme-color-light: var(--wp--preset--color--snow-frost);
    --theme-color-dark: var(--theme-color-darkest-snow-blue-ice);
    --theme-color-grey: var(--theme-color-darker-snow-blue-ice);
    --theme-color-base: var(--wp--preset--color--white);
    --theme--error: var(--theme-color-dark-snow-blue-ice);
    --scrollbar-thumb-color: var(--theme-color-primary, #2ba4ca);
    --loading-progress-colour: var(--theme-color-primary);

    & .has-primary-color {
        color: var(--theme-color-primary) !important;
    }

    /* Custom theme colours for icons */
    & .primary-theme-color {
        color: var(--theme-color-primary, #2ba4ca);
    }

    & .secondary-theme-color {
        color: var(--theme-color-secondary, #006f92);
    }

    & .wp-block-group.has-neutral-200-background-color {
        background-color: var(--wp--preset--color--snow-frost);
    }

    /* Button Variations -- Unable to target these in section-styles.json */
    & .wp-block-buttons {
        & .wp-block-button {
            & .wp-block-button__link.wp-element-button {
                background-color: var(--theme-color-primary);
                border: 1px solid var(--theme-color-primary);
                color: var(--wp--preset--color--white);

                &:hover {
                    background-color: var(--theme-color-dark-snow-blue-ice);
                    border: 1px solid var(--theme-color-dark-snow-blue-ice);
                    color: var(--wp--preset--color--white);
                }
            }

            &.is-style-icon-link {
                & .wp-block-button__link.wp-element-button {
                    background-color: transparent;
                    border: 0;
                    color: var(--theme-color-primary);

                    &.wp-element-button--has-icon {
                        filter: brightness(0) saturate(100%) invert(64%) sepia(83%) saturate(1748%) hue-rotate(157deg) brightness(86%) contrast(81%);
                    }
                }
            }

            &.is-style-outline {
                & .wp-block-button__link.wp-element-button {
                    background-color: transparent;
                    border: 1px solid var(--theme-color-primary);
                    color: var(--theme-color-primary);

                    &:hover {
                        background-color: var(--theme-color-primary);
                        border: 1px solid var(--theme-color-primary);
                        color: var(--wp--preset--color--white);
                    }
                }
            }
        }
    }

    /* List styles */
    & ul.wp-block-list > li::before {
        filter: brightness(0) saturate(100%) invert(64%) sepia(83%) saturate(1748%) hue-rotate(157deg) brightness(86%) contrast(81%);
    }

    /* ACF Basic Slider */
    & .wp-block-acf-slider .wp-block-slider-buttons {
        & .wp-block-slider-button:focus,
        & .wp-block-slider-button:hover {
            background-color: var(--theme-color-primary);
        }
    }

    /* Accordion  */
    & .wp-block-accordion--pagination .pagination-button {
        background-color: var(--theme-color-primary);
    }

    /* Package Card */
    .wp-block-acf-package-card {
        & .packages {
            & .package {
                & img {
                    box-shadow: var(--wp--preset--shadow--light-cool);
                }
            }
        }

        @media screen and (max-width: 900px) {
            &::after {
                filter: brightness(0) saturate(100%) invert(64%) sepia(83%) saturate(1748%) hue-rotate(157deg) brightness(86%) contrast(81%);
            }
        }
    }

    .wp-block-acf-retreat-accommodation-list {
        & form button[type=submit] {
            background-color: var(--theme-color-primary);
            color: var(--wp--preset--color--white);
            cursor: pointer;

            &:hover {
                background-color: var(--theme-color-secondary);
                color: var(--wp--preset--color--white);
            }
        }

        .villa-0 {
            --bg-color: var(--theme-color-darker-snow-blue-ice);
            --color: #fff;
        }

        .villa-1 {
            --bg-color: var(--theme-color-dark-snow-blue-ice);
            --color: #fff;
        }

        .villa-2 {
            --bg-color: var(--theme-color-primary);
            --color: #fff;
        }

        .villa-3 {
            --bg-color: var(--wp--preset--color--theme-color-darker-accent);
            --color: #000;
        }

        .villa-4 {
            --bg-color: var(--wp--preset--color--theme-color-dark-accent);
            --color: #fff;
        }

        .villa-5 {
            --bg-color: var(--wp--preset--color--accent);
            --color: #fff;
        }

        .villa-6 {
            --bg-color: var(--wp--preset--color--accent-2);
            --color: #fff;
        }

        .villa-7 {
            --bg-color: var(--wp--preset--color--snow-frost);
            --color: #000;
        }

        & .close-modal {
            color: var(--wp--preset--color--black);

            & svg {
                color: var(--wp--preset--color--black);
            }

            &:hover {
                color: var(--theme-color-primary);

                & svg {
                    color: var(--theme-color-primary);
                }
            }
        }

        & .room-details {
            & .room-title {
                color: var(--theme-color-primary);
            }

            & .room-price {
                & .standard-price,
                & .package-price {
                    & small {
                        color: var(--theme-color-primary);
                    }
                }
            }

            & .room-meta {
                & svg {
                    color: var(--theme-color-primary);
                }
            }

            & a:where(:not(.wp-element-button)).button,
            & a:where(:not(.wp-element-button)).link i {
                background-color: var(--theme-color-primary);

                &:hover {
                    background-color: var(--theme-color-secondary);
                }
            }

            & a:where(:not(.wp-element-button)).link {
                &:hover {
                    color: var(--theme-color-darkest-snow-blue-ice);

                    & i {
                        background-color: var(--theme-color-darkest-snow-blue-ice);
                    }
                }
            }

            & .room-links.wp-block-button a {
                color: inherit;

                &:hover {
                    background-color: var(--theme-color-secondary);
                    border-color: var(--theme-color-secondary);
                    color: var(--wp--preset--color--white);
                }
            }
        }

        & .slider-wrapper {
            background-color: var(--theme-color-dark-snow-frost);
            box-shadow: var(--wp--preset--shadow--light-cool);

            & .villa {
                background-color: var(--bg-color, --theme-color-dark-snow-blue-ice);
            }
        }

        & #room-modal {
            & .room-details {
                & .room-links.wp-block-button a {
                    color: var(--wp--preset--color--white);

                    /* &:hover {
                        background: var(--wp--preset--color--black);
                        border: 1px solid var(--wp--preset--color--black);
                    } */
                }
            }
        }

        & #calendar-modal {
            & form {
                & .button {
                    background-color: var(--theme-color-primary);
                }
            }

            & .js-date-selector {
                & .daterangepicker {
                    & tr td.custom-range.available {
                        &.active {
                            background-color: var(--theme-color-primary);
                        }

                        &:hover {
                            background-color: var(--theme-color-secondary);
                            color: var(--wp--preset--color--white);
                        }
                    }

                    & td.off {
                        color: var(--wp--preset--color--accent);
                    }
                }

                & .daterangepicker.single {
                    & .drp-calendar {
                        & th.available {
                            & span {
                                background-color: var(--theme-color-dark-snow-blue-ice);

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

                    & .ranges {
                        & li.active {
                            background-color: var(--theme-color-primary);
                            color: var(--wp--preset--color--white);
                        }

                        & li:hover {
                            background-color: var(--theme-color-dark-snow-blue-ice);
                            color: var(--wp--preset--color--white);
                        }
                    }
                }
            }
        }
    }
}

/* Accommodation section */
.is-style-section-cool-light:has(.wp-block-acf-retreat-accommodation-list) {
    background-color: var(--wp--preset--color--snow-frost);
}

/* Footer */
footer {
    & .is-style-section-cool-light {
        & .safe-svg-cover .safe-svg-inside {
            & svg {
                & path {
                    fill: var(--theme-color-primary);
                }

                &:hover {
                    & path {
                        fill: var(--theme-color-dark-snow-blue-ice);
                    }
                }
            }
        }
    }
}