/* ---------------------------------------
 Section Styles: Dark Cool
 --------------------------------------- */

/* Splide Carousel */
.is-style-section-cool-dark .wp-block-splide-carousel,
.is-style-section-cool-dark .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 */
header .is-style-section-cool-dark a {
    color: var(--wp--preset--color--snow-frost);
}

.is-style-section-cool-dark.has-retreat-accommodation-list a {
    color: var(--wp--preset--color--white);
}

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

header .is-style-section-cool-dark .wp-block-site-logo .custom-logo-link img {
    filter: brightness(0) saturate(0) invert(100%) sepia(0) saturate(0) hue-rotate(0) brightness(100%) contrast(100%);
}

header .is-style-section-cool-dark .menu-main-menu-container ul li.current-menu-ancestor > a {
    color: var(--theme-color-primary);
}

header .is-style-section-cool-dark .menu-main-menu-container ul li.open > a {
    color: var(--theme-color-primary);
}

header .is-style-section-cool-dark .menu-main-menu-container ul li a:hover {
    color: var(--theme-color-primary);
}

header .is-style-section-cool-dark .menu-main-menu-container ul li ul li.current-menu-item > a {
    color: var(--theme-color-primary);
}

header .is-style-section-cool-dark .menu-main-menu-container ul li li.menu-item-has-children > a::after {
    filter: brightness(0) saturate(0) invert(100%) sepia(0) saturate(0) hue-rotate(0) brightness(100%) contrast(100%);
}

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

@media screen and (max-width: 899px) {
    header .is-style-section-cool-dark .mobile-menu-panel {
        background-color: var(--theme-color-darkest-snow-blue-ice);
    }

    header .is-style-section-cool-dark .mobile-menu-panel 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%);
    }

    header .is-style-section-cool-dark .menu-main-menu-container ul li.menu-item-has-children.open {
        background-color: var(--theme-color-darkest-snow-blue-ice);
    }
}

body .is-style-section-cool-dark {
    --theme-color-primary: var(--wp--preset--color--snow-blue-ice);
    --theme-color-secondary: var(--wp--preset--color--accent-2);
    --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);
    --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);
    }

    .secondary-theme-color {
        color: var(--theme-color-secondary);
    }

    /* 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(--wp--preset--color--snow-blue-ice);
                border: 1px solid var(--wp--preset--color--snow-blue-ice);
                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(--wp--preset--color--snow-blue-ice);

                    &.wp-element-button--has-icon {
                        filter: brightness(0) saturate(0) invert(100%) sepia(0) saturate(0) hue-rotate(0) brightness(100%) contrast(100%);
                    }
                }
            }

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

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

    /* List styles */
    ul.wp-block-list > li::before {
        filter: brightness(0) saturate(0) invert(100%) sepia(0) saturate(0) hue-rotate(0) brightness(100%) contrast(100%);
    }

    /* 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(--wp--preset--color--snow-blue-ice);
    }

    /* 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%);
            }
        }
    }

    /* Accommodation section */
    .has-retreat-accommodation-list {
        background-color: var(--theme-color-darker-snow-blue-ice);
    }

    .wp-block-acf-retreat-accommodation-list .room-details .room-title {
        color: var(--wp--preset--color--accent-2);
    }

    .wp-block-acf-retreat-accommodation-list .room-details .room-title h3 {
        color: var(--wp--preset--color--snow-frost);
    }

    .wp-block-acf-retreat-accommodation-list .room-details .room-price .standard-price small,
    .wp-block-acf-retreat-accommodation-list .room-details .room-price .package-price small {
        color: var(--theme-color-secondary);
    }

    .wp-block-acf-retreat-accommodation-list .close-modal svg {
        color: var(--wp--preset--color--white);
    }

    .wp-block-acf-retreat-accommodation-list .room-details .room-meta svg {
        color: var(--wp--preset--color--accent-2);
    }

    .wp-block-acf-retreat-accommodation-list .room-details a:where(:not(.wp-element-button)).link i {
        background-color: var(--wp--preset--color--snow-blue-ice);
    }

    .wp-block-acf-retreat-accommodation-list .room-details a:where(:not(.wp-element-button)).link:hover {
        color: var(--wp--preset--color--black);
    }

    .wp-block-acf-retreat-accommodation-list .room-details a:where(:not(.wp-element-button)).link:hover i {
        background-color: var(--wp--preset--color--black);
    }

    .wp-block-acf-retreat-accommodation-list .room-details .room-links.wp-block-button a:hover {
        background-color: var(--wp--preset--color--black);
        border-color: var(--wp--preset--color--black);
    }

    .wp-block-acf-retreat-accommodation-list .villa-0 {
        --bg-color: var(--wp--preset--color--white);
        --color: #000;
    }

    .wp-block-acf-retreat-accommodation-list .villa-1 {
        --bg-color: var(--theme-color-dark-snow-blue-ice);
        --color: #fff;
    }

    .wp-block-acf-retreat-accommodation-list .villa-2 {
        --bg-color: var(--wp--preset--color--snow-blue-ice);
        --color: #fff;
    }

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

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

    .wp-block-acf-retreat-accommodation-list .villa-5 {
        --bg-color: var(--wp--preset--color--accent);
        --color: #fff;
    }

    .wp-block-acf-retreat-accommodation-list .villa-6 {
        --bg-color: var(--wp--preset--color--accent-2);
        --color: #fff;
    }

    .wp-block-acf-retreat-accommodation-list .villa-7 {
        --bg-color: var(--wp--preset--color--snow-frost);
        --color: #000;
    }

    .wp-block-acf-retreat-accommodation-list .slider-wrapper {
        background-color: var(--theme-color-dark-snow-frost);
        box-shadow: var(--wp--preset--shadow--light-cool);
    }

    .wp-block-acf-retreat-accommodation-list .slider-wrapper .villa {
        background-color: var(--bg-color, --theme-color-dark-snow-blue-ice);
    }

    .wp-block-acf-retreat-accommodation-list #room-modal .room-details {
        background-color: var(--theme-color-darker-snow-blue-ice);
        color: var(--wp--preset--color--white);
    }

    .wp-block-acf-retreat-accommodation-list #room-modal .room-details .room-links.wp-block-button a:hover {
        background: var(--wp--preset--color--black);
        border: 1px solid var(--wp--preset--color--black);
    }

    .wp-block-acf-retreat-accommodation-list .close-modal {
        color: var(--wp--preset--color--white);
    }

    .wp-block-acf-retreat-accommodation-list .close-modal:hover {
        color: var(--wp--preset--color--black);
    }

    .wp-block-acf-retreat-accommodation-list .close-modal:hover svg {
        color: var(--wp--preset--color--black);
    }

    .wp-block-acf-retreat-accommodation-list #calendar-modal {
        background-color: var(--theme-color-darker-snow-blue-ice);
    }

    .wp-block-acf-retreat-accommodation-list #calendar-modal form .button {
        background-color: var(--wp--preset--color--snow-blue-ice);
    }

    .wp-block-acf-retreat-accommodation-list #calendar-modal .js-date-selector .daterangepicker tr td.custom-range.available:hover {
        background-color: var(--theme-color-primary);
        color: var(--theme-color-darkest-snow-blue-ice);
    }

    .wp-block-acf-retreat-accommodation-list #calendar-modal .js-date-selector .daterangepicker.single .drp-calendar th.available span {
        background-color: var(--theme-color-primary);
    }

    .wp-block-acf-retreat-accommodation-list #calendar-modal .js-date-selector .daterangepicker.single .drp-calendar th.available span:hover {
        background-color: var(--wp--preset--color--accent-2);
    }

    .wp-block-acf-retreat-accommodation-list #calendar-modal .js-date-selector .daterangepicker.single .ranges li:hover {
        background-color: var(--theme-color-primary);
        color: var(--theme-color-darkest-snow-blue-ice);
    }

    .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);
            }
        }
    }
}

/* Footer */
footer {
    & .is-style-section-cool-dark {
        .safe-svg-cover .safe-svg-inside {
            svg {
                path {
                    fill: var(--wp--preset--color--snow-blue-ice);
                }

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