@charset "utf-8";

/* ╔══════════•●•══════════╗ */
/* ║  Browser Style Reset  ║ */
/* ╚══════════•●•══════════╝ */
/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Prevent font size inflation */
html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
    margin: 0;
    margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul,
ol {
    list-style: none;
}

/* Set core body defaults */
body {
    margin: 0;
    min-height: 100vh;
    line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
    line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
    text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
    text-decoration-skip-ink: auto;
    color: currentColor;
}

/* Make images easier to work with */
img,
picture {
    max-width: 100%;
    display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
    font-family: inherit;
    font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
    min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
    scroll-margin-block: 5ex;
}

/* ╔══════════•●•══════════╗ */
/* ║     Custom Styles     ║ */
/* ╚══════════•●•══════════╝ */
:root {
    --breakpoint--fluid: 480px;
    --breakpoint--desktop: 1032px;
    --section-width--left-sidebar: 210px;
    --section-width--right-sidebar: 260px;

    --gap--text-inset: 10px;
    --gap--inner-margin: 20px;
    --gap--outer-margin: 0;

    --swiper-wrapper-transition-timing-function: cubic-bezier(0.76, 0, 0.24, 1);

    svg {
        transform: translate3d(0, 0, 0);

        * {
            transform: translate3d(0, 0, 0);
        }
    }

    @media screen and (min-width: 1032px) {
        --page-width: var(--breakpoint--desktop);
        --gap--outer-margin: calc(66px - var(--gap--inner-margin));
    }

    * {
        color: #333333;
        font-family: "Lucida Sans Unicode", sans-serif;
        font-size: 1rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.4;

        box-sizing: border-box;

        span {
            font-size: inherit;
            font-style: inherit;
            font-weight: inherit;
            line-height: inherit;
        }
    }

    &, body {
        min-height: 100vh;
    }

    body {
        display: grid;
        grid-template-columns: 1fr [page-start] var(--page-width) [page-end] 1fr;

        background-color: #d0d0d0;
    }

    .grid--content-layout {
        display: grid;
        grid-template-rows: max-content;
        grid-template-columns:
            var(--gap--outer-margin)
            [sidebar-left-start content-left-start content-full-size-start]
            var(--section-width--left-sidebar)
            [sidebar-left-end content-right-start]
            1fr
            [sidebar-right-start content-left-end]
            var(--section-width--right-sidebar)
            [sidebar-right-end content-right-end content-full-size-end]
            var(--gap--outer-margin);
        gap: var(--gap--inner-margin);
        align-items: start;
    }

    .grid--content-layout:after {
        content: '';
        display: block;
    }

    .grid-column--left-sidebar {
        grid-column: sidebar-left;
    }

    .grid-column--right-content {
        grid-column: content-right;
    }

    .grid-column--right-sidebar {
        grid-column: sidebar-right;
    }

    .grid-column--left-content {
        grid-column: content-left;
    }

    .grid-column--full-size-content {
        grid-column: content-full-size;
    }

    @media screen and (max-width: 1031px) {
        .page-section--header,
        .grid--content-layout {
            max-width: 940px;
        }

        .grid--content-layout {
            margin: 0 auto;
        }

        .page-section--header {
            justify-content: center;
        }

        body main.grid--vertical-layout {
            grid-column: auto;
        }
    }

    @media screen and (max-width: 767px) {
        .grid-column--left-content,
        .grid-column--right-sidebar {
            grid-column: content-full-size;
        }
    }

    @media screen and (max-width: 633px) {
        main .grid--content-layout .page-section--booking-widget {
            height: auto;
        }
    }

    main .grid--content-layout .page-section--booking-widget:has(.ftb-bookingWidget__inner--md) {
        height: 138px;
    }

    @media screen and (max-width: 549px) {
        --gap--inner-margin: 10px;
        --section-width--left-sidebar: auto;

        body {
            min-width: 340px;
        }

        .grid-column--left-sidebar,
        .grid-column--right-content {
            grid-column: content-full-size;
        }

        main .grid--content-layout .page-section--booking-widget:has(.ftb-bookingWidget__inner--md) {
            height: 148px;
        }

        header.page-section--header {
            margin-top: 0;

            nav li {
                margin-right: 0;
            }
        }

        header .page-section--header-gallery {
            margin-bottom: var(--gap--inner-margin);
            order: 0;

            swiper-container {
                height: auto;
            }
        }

        .page-section--header-sidebar {
            order: 1;
        }
    }

    body .grid--vertical-layout {
        grid-column: page;

        background-color: #fff;
        box-shadow: 0 1px 15px 0 rgba(0,0,0,0.33),
        0 1px 1px 0 rgba(0,0,0,0.14),
        0 2px 1px -1px rgba(0,0,0,0.12);
    }

    .grid--vertical-layout {
        display: grid;
        grid-template-rows: auto 1fr auto;
        min-height: 100%;
        row-gap: var(--gap--inner-margin);
    }

    .bullet-list {
        list-style-type: disc;
    }

    ol {
        padding-left: var(--gap--inner-margin);
        margin: 0;

        list-style-type: decimal;
    }

    .page-section--header {
        width: 100%;
        margin-top: var(--gap--inner-margin);
        overflow: hidden;

        .abacus-logo {
            display: block;
            margin: 0 var(--gap--text-inset);
        }

        p {
            padding: 0 var(--gap--text-inset);
            font-size: 0.84rem;
        }

        strong {
            font-size: 0.89rem;
            font-weight: 600;
        }

        nav {
            margin-top: var(--gap--inner-margin);

            ul {
                display: contents;
            }

            li {
                display: flex;
                margin-right: 20px;

                background: linear-gradient(#ffffff, #f3f3f3);

                a, span {
                    display: flex;
                    width: 100%;
                    height: 32px;
                    padding: 0 10px;
                    align-items: center;

                    font-size: 0.85rem;
                    font-weight: bold;
                    text-decoration: none;
                }

                &:hover {
                    background: linear-gradient(#d5acD3, #ce9ecc);

                    a {
                        color: #ffffff;
                    }
                }

                &[aria-current] {
                    background: linear-gradient(#ae5aa7, #884382);

                    span {
                        color: #ffffff;
                    }
                }
            }
        }
    }

    .page-section--header-gallery {
        display: flex;
        margin-top: auto;
        justify-content: end;
        overflow: hidden;

        swiper-container {
            position: relative;
            width: 100%;
            height: 390px;
            margin: auto 0 0;

            overflow: hidden;

            swiper-slide {
                align-content: center;
                align-self: center;
            }

            &:not([initialized]) {
                display: flex;
            }

            &:not([initialized]) swiper-slide:not(:first-child) {
                position: absolute;
                visibility: hidden;
            }
        }

        &> img,
        swiper-slide img {
            width: 100%;
        }

        .swiper--button-container {
            position: absolute;
            display: grid;
            grid-template-columns: 40px 1fr 40px 40px;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            gap: 1px;

            pointer-events: none;
            touch-action: none;

            transition: opacity 150ms linear;
            opacity: 0;
            z-index: 10;

            .swiper--button-play-pause,
            .swiper--button-prev,
            .swiper--button-next {
                display: flex;
                width: 40px;
                height: 40px;
                margin: auto 0;
                align-items: center;
                justify-content: center;

                border: 0;
                background-color: rgba(216, 216, 216, 0.85);

                cursor: pointer;
                pointer-events: auto;
                touch-action: auto;
            }

            .swiper--button-prev {
                grid-column: 1;
            }

            .swiper--button-play-pause {
                grid-column: -2;
                padding: 10px;

                visibility: hidden;

                &.playing,
                &.paused {
                    visibility: visible;
                }

                svg {
                    display: none;
                }

                &.playing .pause-icon {
                    display: block;
                }

                &.paused .play-icon {
                    display: block;
                }
            }

            .swiper--button-next {
                grid-column: -1;
            }
        }

        &:hover .swiper--button-container {
            opacity: 1;
        }
    }

    main {
        .page-section--booking-widget {
            height: 108px;
            border-top: 6px solid #9e9e9e;

            &:before {
                content: '';

                display: block;
                width: 100%;
                height: 26px;

                background: linear-gradient(#ae5aa7, #884382);
            }
        }

        .page-section--main-content {
            padding: var(--gap--inner-margin);
            background: linear-gradient(#ffffff, #e8e8e8);

            h1,
            h2 {
                font-size: 1.375rem;
                font-weight: 600;
            }

            li,
            p,
            span,
            a,
            a strong,
            li strong {
               font-size: 0.85rem;
            }

            p {
               padding-bottom: 1em;
            }

            a, a:hover {
                text-decoration: none;
            }

            .block-heading {
                margin: 30px 0 15px;

                &:first-child {
                    margin-top: 0;
                }
            }

            .offset-list-item {
                margin-top: var(--gap--text-inset);
            }

            .text-row {
                display: flex;
                flex-direction: row;
                gap: var(--gap--text-inset);
                align-items: end;
            }

            .dead-end-sign {
                transform-origin: bottom left;
                transform: scale(0.5);
            }
        }

        .page-section--review-sidebar {
            display: flex;
            flex-direction: column;
            min-height: 50vh;
            gap: var(--gap--inner-margin);

            .reviews-button {
                display: block;
                padding: var(--gap--text-inset);
                background-color: #9a5296;
                border-radius: 10px;
                text-decoration: none;

                &, strong {
                    color: #fff;
                    font-size: 1.275rem;
                }
            }

            strong {
                font-size: 0.85rem;
                font-weight: 600;
            }

            .reviews-scoring {
                margin-top: auto;
            }
        }
    }

    .page-section--footer {
        padding: 12px 0 10px;
        border-top: 1px solid #d0d0d0;
        text-align: center;

        p {
            margin: 3px auto;
            font-size: 0.68rem;
        }
    }
}