/*
Theme Name:   Kraken Framework Child
Theme URI:    https://www.splashmg.ca
Description:  Kraken Framework is a foundational theme designed to help create WordPress websites with a strong focus on speed, efficiency, and optimization.
Author:       Splash Media Group Inc.
Author URI:   https://www.splashmg.ca
Template:     kraken-framework
Version:      3.11.0
License URI: https://www.gnu.org/licenses/gpl-3.0.en.html
Copyright: (c) Splash Media Group
Tags: blog,accessibility-ready,custom-menu,featured-images,footer-widgets,theme-options,translation-ready
Text Domain: kraken-framework
*/

:root {
    /* -- Header -- */
    --kf-header-max-width: 100%;
    --kf-header-padding: 0;
    --kf-header-inner-max-width: 100%;
    --kf-header-inner-padding: 0;
    --kf-header-row-max-width: 100%;

    /* -- Main -- */
    --kf-main-inner-padding-top: var(--kf-page-padding-top);
    --kf-main-inner-padding-bottom: var(--kf-page-padding-bottom);
    --kf-main-inner-padding-left: var(--kf-global-padding-left);
    --kf-main-inner-padding-right: var(--kf-global-padding-right);
    --kf-entry-header-max-width: var(--kf-max-width);
    --kf-entry-content-max-width: var(--kf-max-width);
    --kf-entry-footer-max-width: var(--kf-max-width);

    /* -- Footer -- */
    --kf-footer-max-width: 100%;
    --kf-footer-padding: 0;
    --kf-footer-inner-max-width: 100%;
    --kf-footer-inner-padding: 0;
    --kf-footer-row-max-width: 100%;

    /* -- Card -- */
    --kf-post-padding: 1.5rem;
    --kf-post-border-radius: 0.5rem;

    /* - Post Image - */
    --kf-post-image-border-radius: 0.3rem;
    --kf-post-image-margin: 0 0 1.5rem 0;
    --kf-post-image-padding: 0;

    /* - Excerpt - */
    --kf-post-excerpt-margin: 0 0 1rem 0;
    --kf-post-excerpt-padding: 0;

    /* - Tags - */
    --kf-tag-label-font-size: 0.8rem;
    --kf-tag-label-font-weight: 700;
    --kf-tag-padding: 0.2rem 0.5rem;

    /* - Categories - */
    --kf-categories-padding: 0.2rem 0.5rem;
    --kf-categories-border: 1px solid var(--kf-border);
    --kf-categories-border-radius: 0.5rem;
    --kf-categories-font-size: 0.7rem;
    --kf-categories-line-height: 1.1;

    /* - Single Image - */
    --kf-single-post-image-aspect-ratio: 900 / 506;
    --kf-single-post-image-margin: 1.5rem 0 1.5rem 0;
    --kf-single-post-image-padding: 0;
    --kf-single-post-image-border-radius: 0.3rem;

    /* Post Navigation */
    --kf-post-navigation-padding: 0.3rem 0.9rem;
    --kf-post-navigation-border-radius: 0.3rem;

    /* Address */
    --kf-address-padding: 0.3rem 0;

    /* Phone */
    --kf-phone-padding: 0;

    /* Email */
    --kf-email-padding: 0;

    /* Splash Credit */
    --kf-splash-credit-font-size: 0.8rem;
}

.kf-navigation--mobile {
    /* Navigation */
    --kf-navigation-display: flex;
    --kf-navigation-flex-direction: column;
    --kf-navigation-flex-gap: 1rem;
    --kf-navigation-flex-justify: flex-start;
    --kf-navigation-link-align: flex-start;
    --kf-navigation-link-padding: 0.5rem 0.5rem;
    --kf-navigation-link-margin: 0;

    /* Sub Navigation */
    --kf-navigation-subnav-flex-direction: column;
    --kf-navigation-subnav-flex-justify: flex-start;
    --kf-navigation-subnav-link-align: flex-start;
    --kf-navigation-subnav-flex-gap: 1rem;
    --kf-navigation-subnav-position: relative;
    --kf-navigation-subnav-top: unset;
    --kf-navigation-subnav-left: unset;
    --kf-navigation-subnav-subnav-top: unset;
    --kf-navigation-subnav-subnav-left: unset;
    --kf-navigation-subnav-width: 100%;
    --kf-navigation-subnav-margin: 1rem 0 0 0;
    --kf-navigation-subnav-link-padding: 0.3rem 0.5rem;
    --kf-navigation-subnav-link-margin: 0;
    --kf-navigation-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m8 10l4 4l4-4'/%3E%3C/svg%3E");
    --kf-navigation-caret-width: 25px;
    --kf-navigation-caret-height: 25px;
    --kf-navigation-caret-margin: auto;
}

.kf-navigation--hamburger {
    /* Navigation */
    --kf-navigation-display: flex;
    --kf-navigation-flex-direction: column;
    --kf-navigation-flex-gap: 1rem;
    --kf-navigation-flex-justify: flex-start;
    --kf-navigation-link-align: flex-start;
    --kf-navigation-link-padding: 0.5rem 0.5rem;
    --kf-navigation-link-margin: 0;

    /* Sub Navigation */
    --kf-navigation-subnav-flex-direction: column;
    --kf-navigation-subnav-flex-justify: flex-start;
    --kf-navigation-subnav-link-align: flex-start;
    --kf-navigation-subnav-flex-gap: 1rem;
    --kf-navigation-subnav-position: relative;
    --kf-navigation-subnav-top: unset;
    --kf-navigation-subnav-left: unset;
    --kf-navigation-subnav-subnav-top: unset;
    --kf-navigation-subnav-subnav-left: unset;
    --kf-navigation-subnav-width: 100%;
    --kf-navigation-subnav-margin: 1rem 0 0 0;
    --kf-navigation-subnav-link-padding: 0.3rem 0.5rem;
    --kf-navigation-subnav-link-margin: 0;
    --kf-navigation-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m8 10l4 4l4-4'/%3E%3C/svg%3E");
    --kf-navigation-caret-width: 25px;
    --kf-navigation-caret-height: 25px;
    --kf-navigation-caret-margin: auto;
}

.kf-navigation--primary {
    /* Navigation */
    --kf-navigation-display: flex;
    --kf-navigation-flex-direction: row;
    --kf-navigation-flex-gap: 1rem;
    --kf-navigation-flex-justify: flex-start;
    --kf-navigation-link-align: center;
    --kf-navigation-link-padding: 0.5rem 0.5rem;
    --kf-navigation-link-margin: 0;

    /* Sub Navigation */
    --kf-navigation-subnav-flex-direction: column;
    --kf-navigation-subnav-flex-justify: flex-start;
    --kf-navigation-subnav-link-align: flex-start;
    --kf-navigation-subnav-flex-gap: 0.5rem;
    --kf-navigation-subnav-position: absolute;
    --kf-navigation-subnav-top: 100%;
    --kf-navigation-subnav-left: 0;
    --kf-navigation-subnav-subnav-top: 0;
    --kf-navigation-subnav-subnav-left: 100%;
    --kf-navigation-subnav-width: 200px;
    --kf-navigation-subnav-margin: 0;
    --kf-navigation-subnav-link-padding: 0.3rem 0.5rem;
    --kf-navigation-subnav-link-margin: 0;
    --kf-navigation-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m8 10l4 4l4-4'/%3E%3C/svg%3E");
    --kf-navigation-caret-width: 16px;
    --kf-navigation-caret-height: 16px;
    --kf-navigation-caret-margin: auto;
}

.kf-navigation--secondary {
    /* Navigation */
    --kf-navigation-display: flex;
    --kf-navigation-flex-direction: row;
    --kf-navigation-flex-gap: 1rem;
    --kf-navigation-flex-justify: flex-start;
    --kf-navigation-link-align: center;
    --kf-navigation-link-padding: 0.5rem 0.5rem;
    --kf-navigation-link-margin: 0;

    /* Sub Navigation */
    --kf-navigation-subnav-flex-direction: column;
    --kf-navigation-subnav-flex-justify: flex-start;
    --kf-navigation-subnav-link-align: flex-start;
    --kf-navigation-subnav-flex-gap: 0.5rem;
    --kf-navigation-subnav-position: absolute;
    --kf-navigation-subnav-top: 100%;
    --kf-navigation-subnav-left: 0;
    --kf-navigation-subnav-subnav-top: 0;
    --kf-navigation-subnav-subnav-left: 100%;
    --kf-navigation-subnav-width: 200px;
    --kf-navigation-subnav-margin: 0;
    --kf-navigation-subnav-link-padding: 0.3rem 0.5rem;
    --kf-navigation-subnav-link-margin: 0;
    --kf-navigation-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m8 10l4 4l4-4'/%3E%3C/svg%3E");
    --kf-navigation-caret-width: 16px;
    --kf-navigation-caret-height: 16px;
    --kf-navigation-caret-margin: auto;
}

.kf-navigation--footer {
    /* Navigation */
    --kf-navigation-display: flex;
    --kf-navigation-flex-direction: column;
    --kf-navigation-flex-gap: 0.5rem;
    --kf-navigation-flex-justify: center;
    --kf-navigation-link-align: center;
    --kf-navigation-link-padding: 0.3rem 0;
    --kf-navigation-link-margin: 0;

    /* Sub Navigation */
    --kf-navigation-subnav-flex-direction: column;
    --kf-navigation-subnav-flex-justify: flex-start;
    --kf-navigation-subnav-link-align: flex-start;
    --kf-navigation-subnav-flex-gap: 0.5rem;
    --kf-navigation-subnav-position: absolute;
    --kf-navigation-subnav-top: 100%;
    --kf-navigation-subnav-left: 0;
    --kf-navigation-subnav-subnav-top: 0;
    --kf-navigation-subnav-subnav-left: 100%;
    --kf-navigation-subnav-width: 200px;
    --kf-navigation-subnav-margin: 0;
    --kf-navigation-subnav-link-padding: 0.3rem 0.5rem;
    --kf-navigation-subnav-link-margin: 0;
    --kf-navigation-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m8 10l4 4l4-4'/%3E%3C/svg%3E");
    --kf-navigation-caret-width: 16px;
    --kf-navigation-caret-height: 16px;
    --kf-navigation-caret-margin: auto;
}

.kf-navigation--legal {
    /* Navigation */
    --kf-navigation-display: flex;
    --kf-navigation-flex-direction: column;
    --kf-navigation-flex-gap: 0.5rem;
    --kf-navigation-flex-justify: center;
    --kf-navigation-link-align: center;
    --kf-navigation-link-padding: 0.3rem 0.5rem;
    --kf-navigation-link-margin: 0;

    /* Sub Navigation */
    --kf-navigation-subnav-flex-direction: column;
    --kf-navigation-subnav-flex-justify: flex-start;
    --kf-navigation-subnav-link-align: flex-start;
    --kf-navigation-subnav-flex-gap: 0.5rem;
    --kf-navigation-subnav-position: absolute;
    --kf-navigation-subnav-top: 100%;
    --kf-navigation-subnav-left: 0;
    --kf-navigation-subnav-subnav-top: 0;
    --kf-navigation-subnav-subnav-left: 100%;
    --kf-navigation-subnav-width: 200px;
    --kf-navigation-subnav-margin: 0;
    --kf-navigation-subnav-link-padding: 0.3rem 0.5rem;
    --kf-navigation-subnav-link-margin: 0;
    --kf-navigation-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m8 10l4 4l4-4'/%3E%3C/svg%3E");
    --kf-navigation-caret-width: 16px;
    --kf-navigation-caret-height: 16px;
    --kf-navigation-caret-margin: auto;
}

.kf-header {
    /* Phone */
    --kf-phone-padding: 0 0.3rem 0 0;

    /* Email */
    --kf-email-padding: 0 0 0 0.3rem;
}

.kf-footer {
    /* Address */
    --kf-address-padding: 0.3rem 0;

    /* Phone */
    --kf-phone-padding: 0.3rem 0;

    /* Email */
    --kf-email-padding: 0.3rem 0;
}

@media (min-width: 992px) {
    :root {

        /* Splash Credit */
        --kf-splash-credit-font-size: 0.8rem;
    }

    .kf-navigation--footer {
        /* Navigation */
        --kf-navigation-flex-justify: flex-start;
        --kf-navigation-flex-gap: 0;
    }

    .kf-navigation--legal {
        /* Navigation */
        --kf-navigation-display: flex;
        --kf-navigation-flex-direction: row;
        --kf-navigation-flex-justify: flex-start;
        --kf-navigation-flex-gap: 1rem;
        --kf-navigation-link-padding: 0.5rem 0.5rem;
    }
}






/* ////////////////////////////////////////// */
/*                                            */
/*                  TYPOGRAPHY                */
/*                                            */
/* ////////////////////////////////////////// */

/* ===================================== */
/*        WP Font Preset Overrides       */
/* ===================================== */
:root {
    --font-size-small: .875rem;
    --font-size-medium: clamp(1.25rem, .2551vw + 1.0918rem, 1.5rem);
    --font-size-large: clamp(2rem, 1.0204vw + 1.3673rem, 3rem);
    --font-size-xlarge: clamp(2.5rem, 1.5306vw + 1.551rem, 4rem);

    --lh-small: 1.3;
    --lh-medium: 1.5;
    --lh-large: 1.5;
    --lh-xlarge: 1.3;
}

/* Matches Gutenberg’s .has-small-font-size, etc., to Kraken scale variables. */
.has-small-font-size {
    font-size: var(--font-size-small) !important;
    line-height: var(--lh-small) !important;
}

.has-medium-font-size {
    font-size: var(--font-size-medium) !important;
    line-height: var(--lh-medium) !important;
}

.has-large-font-size {
    font-size: var(--font-size-large) !important;
    line-height: var(--lh-large) !important;
}

.has-xlarge-font-size {
    font-size: var(--font-size-xlarge) !important;
    line-height: var(--lh-xlarge) !important;
}







h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {
    margin-top:0;
}

.heading-font {
    font-family: "DM Serif Display", serif;
}

.heading-font-italic {
    font-family: "DM Serif Display", serif;
    font-style: italic;
}

.italic {
    font-style: italic!important;
}

/* ==================================== */
/*             Web Fonts             */
/* ==================================== */







/* ////////////////////////////////////////// */
/*                                            */
/*                    LAYOUT                  */
/*                                            */
/* ////////////////////////////////////////// */

/* ==================================== */
/*             Notification             */
/* ==================================== */

/* ==================================== */
/*                Header                */
/* ==================================== */

    /* ----------------------------------------------------------
    1) Top Row
    ---------------------------------------------------------- */
    .kf-header .kf-phone-number--phone {
        padding: .5rem .5rem;
    }


    /* ----------------------------------------------------------
    2) Main Row
    ---------------------------------------------------------- */
    .kf-header .kf-header__column {
        &.kf-header__column--start {
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
        }
    }

    /* ----------------------------------------------------------
    3) Bottom Row
    ---------------------------------------------------------- */



/* ==================================== */
/*                 Main                 */
/* ==================================== */

/* ==================================== */
/*                Sidebar               */
/* ==================================== */

/* ==================================== */
/*                Footer                */
/* ==================================== */
.kf-footer {
    .kf-footer__row--bottom {

        .kf-footer__column {
            padding-top: 1rem;
            border-top: 1px solid #3e3025;
        }
    }
}

.kf-footer {
    .kf-footer__column {

        &.kf-footer__column--001 {
            padding-right: 0;

            @media (min-width: 991px) {
                flex: 0 0 calc(40% - (2rem * 0.4));
                padding-right: 5rem;
            }
        }

        &.kf-footer__column--002 {
            @media (min-width: 991px) {
                flex: 0 0 calc(15% - (2rem * 0.15));
            }
        }

        &.kf-footer__column--003 {
            @media (min-width: 991px) {
                flex: 0 0 calc(15% - (2rem * 0.15));
            }
        }

        &.kf-footer__column--004 {
            @media (min-width: 991px) {
                flex: 0 0 calc(15% - (2rem * 0.15));
            }
        }

        &.kf-footer__column--005 {
            @media (min-width: 991px) {
                flex: 0 0 calc(15% - (2rem * 0.15));
            }
        }

    }
}

.kf-footer {
    color: #fff;

    /* Tagline */
    p.footer-large-text {
        font-size: 2rem;
        line-height: 1.1;
        font-weight: 400;
        font-style: italic;
        margin:0 0 .5rem 0;
    }

    /* Headings */
    .kf-footer__heading {
        letter-spacing: 1px;
    }

    .kf-address {
        .kf-address__list {
            display: inline-block;
            /* display: flex;
            flex-direction: column; */
            gap: .5rem;
            padding: 0;
            margin-bottom:.5rem;
            list-style: none;
            line-height: normal;

            @media (min-width: 991px) {
                margin-bottom:.5rem;
            }

            .kf-address__item {
                display: inline-block;
                min-width: fit-content;
                margin-right: 5px;
            }
        }
    }

    .footer-contact-details {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .5rem;
        margin-bottom:2rem;

        span {
            display: none;
        }

        @media (min-width: 991px) {
            flex-direction: row;

            span {
                display: inline-block;
            }
        }
    }
}


    .footer-reservation-button  {
        position: relative;
        display: inline-block;

        &:hover {
            
            &:before {
                transform-origin: left;
                transform: scaleX(1);
                z-index: 0;
            }
        }

        &:before {
            content: '';
            position: absolute;
            z-index: 0;
            top: 0;
            left: 0;
            bottom: 0;
            width: 100%;
            transform-origin: left;
            transform: scaleX(0);
            transition: transform 0.3s ease;
            background: var(--bg-hover-color);
        }

        &:after {
            content: none;
        }

        .wp-block-button__link.wp-element-button {
            background-color: var(--bg-color);
            border: 1px solid var(--border-color);
            color: var(--font-color);

            &:hover {
                color: var(--font-hover-color);
            }
        }
    }


    .footer-reservation-button a {
        background-color: var(--bg-color);
        border: 1px solid var(--border-color);
        color: var(--font-color);

        position: relative;
        display: inline-block;
        padding: .5rem 1.25rem;
        font-style: italic;
        text-decoration: none;
        z-index: 2;

        &:hover {
            color:#3e3025;
        }
    }












/* ////////////////////////////////////////// */
/*                                            */
/*                  NAVIGATION                */
/*                                            */
/* ////////////////////////////////////////// */

/* ==================================== */
/*              Secondary               */
/* ==================================== */

.kf-navigation--secondary {
    :where(.kf-navigation__list) {
        gap: 0;
    }
}

.kf-navigation--secondary :where(.kf-navigation__list) :where(.menu-item:not(:first-child)) {
    border-right: 1px solid #ac8669;
}





    .header-reservation-button  {
        position: relative;

        &:hover {
            
            &:before {
                transform-origin: left;
                transform: scaleX(1);
                z-index: 0;
            }
        }

        &:before {
            content: '';
            position: absolute;
            z-index: 0;
            top: 0;
            left: 0;
            bottom: 0;
            width: 100%;
            transform-origin: left;
            transform: scaleX(0);
            transition: transform 0.3s ease;
            background: var(--bg-hover-color);
        }

        &:after {
            content: none;
        }

        .wp-block-button__link.wp-element-button {
            background-color: var(--bg-color);
            border: 1px solid var(--border-color);
            color: var(--font-color);

            &:hover {
                color: var(--font-hover-color);
            }
        }
    }


    .header-reservation-button a {
        background-color: var(--bg-color);
        border: 1px solid var(--border-color);
        color: var(--font-color);

        position: relative;
        font-style: italic;
        z-index: 2;
    }




/* ==================================== */
/*                Primary               */
/* ==================================== */
.kf-navigation--primary {
    height: 100%;
    display: flex;
    align-items: center;

    .kf-navigation__list--primary {
        height: 100%;
        align-items: center;

        > .menu-item {
            display: flex;
            align-items: center;
            height: 100%;

            &.current-menu-item {
                background-color: #fff;
            }


            &.current-menu-ancestor {
                background-color: #fff;
            }
        }
    }
}








/* ////////////////////////////////////////// */
/*                                            */
/*              PAGE / POST SPECIFIC          */
/*                                            */
/* ////////////////////////////////////////// */

/* ==================================== */
/*               Homepage               */
/* ==================================== */

    /* ----------------------------------------------------------
    1) Promo Feature boxes
    ---------------------------------------------------------- */
    .promos-wrap .kb-section-has-link .wp-block-image {
        margin: 0;
        overflow: hidden;
    }

    .promos-wrap .kb-section-has-link .wp-block-image img {
        display: block;
        transition: transform 0.4s ease-in-out;
        will-change: transform;
        transform-origin: center center;
    }

    .promos-wrap .kb-section-has-link:hover img  {
        transform: scale(1.1);
    }

    .promos-wrap .wp-block-kadence-column {

        &:hover {

            .wp-block-button__outline.wp-block-button__outline--tan  {
                position: relative;
        
                &:before {
                    transform-origin: left;
                    transform: scaleX(1);
                    z-index: 0;
                }

                .wp-block-button__link.wp-element-button {
                    color: var(--font-hover-color);
                }
        
            }
        }
    }


    /* ----------------------------------------------------------
    2) Logo Bar
    ---------------------------------------------------------- */
    .logo-bar figure {
        padding: .5rem;

        @media (min-width: 991px) {
            padding: 1.25rem;
        }
    }







/* ==================================== */
/*         Waterfront Restaurant        */
/* ==================================== */
.page-id-25 .kraken-main  {
    h1, h2, h3, h4, h5, h6 {
        color:#516174;
    }

    a {
        color:#516174;

        &:hover {
            color: #1b3045!important;
        }
    }
}





/* ////////////////////////////////////////// */
/*                                            */
/*             BLOCK CUSTOMIZATION            */
/*                                            */
/* ////////////////////////////////////////// */

/* ========================================== */
/*                   BUTTONS                  */
/* ========================================== */

   /* ----------------------------------------------------------
      BUTTONS: Solid Button VARIABLES 
      ---------------------------------------------------------- */
    .wp-block-button {
        --bg-color: #32373c;
        --bg-hover-color: #000000;
        --font-color: #ffffff;
        --font-hover-color: #ffffff;
    }

    .wp-block-button--gold {
        --bg-color: #af802a;
        --bg-hover-color: #a47151;
        --font-color: #ffffff;
        --font-hover-color: #ffffff;
    }

    .wp-block-button--tan {
        --bg-color: #a47151;
        --bg-hover-color: #3e3025;
        --font-color: #ffffff;
        --font-hover-color: #ffffff;
    }

    .wp-block-button--blue {
        --bg-color: #516174;
        --bg-hover-color: #3b4755;
        --font-color: #ffffff;
        --font-hover-color: #ffffff;
    }

    .wp-block-button--darkblue {
        --bg-color: #1b3045;
        --bg-hover-color: #1b3045;
        --font-color: #ffffff;
        --font-hover-color: #ffffff;
    }

   /* ----------------------------------------------------------
      BUTTONS: Outline Button VARIABLES 
      ---------------------------------------------------------- */
    .wp-block-button__outline {
        --border-color: #32373c;
        --bg-color: transparent;
        --bg-hover-color: #32373c;
        --font-color: #32373c;
    }

    .wp-block-button__outline--gold {
        --border-color: #af802a;
        --bg-hover-color: #a47151;
        --font-color: #af802a;
    }

    .wp-block-button__outline--tan {
        --border-color: #a47151;
        --bg-hover-color: #a47151;
        --font-color: #a47151;
    }

    .wp-block-button__outline--dark-tan {
        --border-color: #3e3025;
        --bg-hover-color: #3e3025;
        --font-color: #3e3025;
    }

    .wp-block-button__outline--blue {
        --border-color: #516174;
        --bg-hover-color: #516174;
        --font-color: #516174;
    }

    .wp-block-button__outline--dark-blue {
        --border-color: #1b3045;
        --bg-hover-color: #1b3045;
        --font-color: #1b3045;
    }

    .wp-block-button__outline--teal {
        --border-color: #0b6570;
        --bg-hover-color: #0b6570;
        --font-color: #0b6570;
    }

    .wp-block-button__outline--dark-teal {
        --border-color: #014049;
        --bg-hover-color: #014049;
        --font-color: #014049;
    }

    .wp-block-button__outline--green {
        --border-color: #4c7944;
        --bg-hover-color: #4c7944;
        --font-color: #4c7944;
    }

    .wp-block-button__outline--dark-green {
        --border-color: #344842;
        --bg-hover-color: #344842;
        --font-color: #344842;
    }

    .wp-block-button__outline--white {
        --border-color: #ffffff;
        --bg-hover-color: #ffffff;
        --font-color: #ffffff;
    }

   /* ----------------------------------------------------------
      BUTTONS: Hover Text VARIABLES 
      ---------------------------------------------------------- */
    .wp-block-button__hover-text--gold {
        --font-hover-color: #af802a;
    }

    .wp-block-button__hover-text--tan {
        --font-hover-color: #a47151;
    }

    .wp-block-button__hover-text--dark-tan {
        --font-hover-color: #3e3025;
    }

    .wp-block-button__hover-text--blue {
        --font-hover-color: #516174;
    }

    .wp-block-button__hover-text--dark-blue {
        --font-hover-color: #1b3045;
    }

    .wp-block-button__hover-text--teal {
        --font-hover-color: #0b6570;
    }

    .wp-block-button__hover-text--dark-teal {
        --font-hover-color: #014049;
    }

    .wp-block-button__hover-text--green {
        --font-hover-color: #4c7944;
    }

    .wp-block-button__hover-text--dark-green {
        --font-hover-color: #344842;
    }

    .wp-block-button__hover-text--white {
        --font-hover-color: #ffffff;
    }

   /* ----------------------------------------------------------
      BUTTONS: Default Button (SOLID)
      ---------------------------------------------------------- */
    .wp-block-button  {
        position: relative;
        white-space: nowrap;
        
        &:before {
            content: '';
            position: absolute;
            z-index: 0;
            top: 0;
            left: 0;
            bottom: 0;
            width: 100%;
            background: var(--bg-hover-color);
        }

        &:after {
            content: '';
            position: absolute;
            z-index: 0;
            top: 0;
            left: 0;
            bottom: 0;
            width: 100%;
            transform-origin: right;
            transform: scaleX(1);
            transition: transform 0.3s ease;
            background: var(--bg-color);
        }

        &:hover {
            
            &:after {
                transform-origin: right;
                transform: scaleX(0);
                z-index: 0;
            }
        }

        .wp-block-button__link.wp-element-button {
            background: transparent;
            color: var(--font-color);
            font-family: inherit;
            font-size: 1rem;
            font-style:italic;
            font-weight: 500;
            line-height: inherit;
            padding: calc(1.25em + 2px) calc(2em + 2px);
            margin: 0;
            text-decoration: none;
            border-radius: 0;
            position: relative;
            z-index: 2;

            &:hover {
                color: var(--font-hover-color);
            }
        }
    }

   /* ----------------------------------------------------------
      BUTTONS: Default Button (OUTLINE)
      ---------------------------------------------------------- */
    .wp-block-button__outline  {
        position: relative;

        &:hover {
            
            &:before {
                transform-origin: left;
                transform: scaleX(1);
                z-index: 0;
            }
        }

        &:before {
            content: '';
            position: absolute;
            z-index: 0;
            top: 0;
            left: 0;
            bottom: 0;
            width: 100%;
            transform-origin: left;
            transform: scaleX(0);
            transition: transform 0.3s ease;
            background: var(--bg-hover-color);
        }

        &:after {
            content: none;
        }

        .wp-block-button__link.wp-element-button {
            background-color: var(--bg-color);
            border: 1px solid var(--border-color);
            color: var(--font-color);
            /* font-family: inherit;
            font-size: .875rem;
            font-style:italic;
            font-weight: 700;
            line-height: inherit;
            padding: calc(1.25em + 2px) calc(2em + 2px);
            margin: 0;
            text-decoration: none;
            border-radius: 0;
            position: relative;
            z-index: 1; */
            
            &:hover {
                color: var(--font-hover-color);
            }
        }
    }



















/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/*                                                           */
/* +++++++++++++++++++ BREAKOUT CONTENT ++++++++++++++++++++ */
/*                                                           */
/*                                                           */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* ----------------------------------------------------------
Breakout Content: Base breakout variables + grid definition
---------------------------------------------------------- */
.wp-block-columns.breakout-content-left,
.wp-block-columns.breakout-content-right {
    /* Breakout variables */
    --breakout-content-gap: var(--wp--style--block-gap);
    --breakout-content-split-left: 50;

    /* Inner usable width minus paddings and middle gap */
    --breakout-content-inner-width: calc(var(--kf-max-width) - var(--kf-global-padding-left) - var(--kf-global-padding-right) - var(--breakout-content-gap));

    /* Derived left/right inner tracks */
    --breakout-content-inner-left: calc(var(--breakout-content-inner-width) * (var(--breakout-content-split-left) / 100));
    --breakout-content-inner-right: calc(var(--breakout-content-inner-width) * ((100 - var(--breakout-content-split-left)) / 100));

    padding-left: var(--kf-global-padding-left);
    padding-right: var(--kf-global-padding-right);

    display: grid;

    /* IMPORTANT:
       No gap on desktop grid.
       The gap is now its own middle track.
    */
    gap: 0;

    /* 5-track grid:
        [1] left bleed track
        [2] inner left
        [3] middle gap only
        [4] inner right
        [5] right bleed track
    */
    grid-template-columns:
        1fr
        minmax(0, var(--breakout-content-inner-left))
        var(--breakout-content-gap)
        minmax(0, var(--breakout-content-inner-right))
        1fr;

    max-width: none;
    margin: 0;
    box-sizing: border-box;
}

/* Split helper classes */
.wp-block-columns.breakout-content-split-30-70 { --breakout-content-split-left: 30; }
.wp-block-columns.breakout-content-split-35-65 { --breakout-content-split-left: 35; }
.wp-block-columns.breakout-content-split-40-60 { --breakout-content-split-left: 40; }
.wp-block-columns.breakout-content-split-50-50 { --breakout-content-split-left: 50; }
.wp-block-columns.breakout-content-split-60-40 { --breakout-content-split-left: 60; }
.wp-block-columns.breakout-content-split-65-35 { --breakout-content-split-left: 65; }
.wp-block-columns.breakout-content-split-70-30 { --breakout-content-split-left: 70; }



/* Gap helper classes */
.wp-block-columns.breakout-content-gap-none { --breakout-content-gap: 0; }
.wp-block-columns.breakout-content-gap-xs   { --breakout-content-gap: 0.5rem; }
.wp-block-columns.breakout-content-gap-sm   { --breakout-content-gap: 1rem; }
.wp-block-columns.breakout-content-gap-md   { --breakout-content-gap: 1.5rem; }
.wp-block-columns.breakout-content-gap-lg   { --breakout-content-gap: 2rem; }
.wp-block-columns.breakout-content-gap-xl   { --breakout-content-gap: 2rem; }
.wp-block-columns.breakout-content-gap-xxl  { --breakout-content-gap: 2rem; }
.wp-block-columns.breakout-content-gap-xxxl  { --breakout-content-gap: 2rem; }
.wp-block-columns.breakout-content-gap-xxxxl  { --breakout-content-gap: 2rem; }

    @media (min-width: 782px) {
        .wp-block-columns.breakout-content-gap-none { --breakout-content-gap: 0; }
        .wp-block-columns.breakout-content-gap-xs   { --breakout-content-gap: 0.5rem; }
        .wp-block-columns.breakout-content-gap-sm   { --breakout-content-gap: 1rem; }
        .wp-block-columns.breakout-content-gap-md   { --breakout-content-gap: 1.5rem; }
        .wp-block-columns.breakout-content-gap-lg   { --breakout-content-gap: 2rem; }
        .wp-block-columns.breakout-content-gap-xl   { --breakout-content-gap: 3rem; }
        .wp-block-columns.breakout-content-gap-xxl  { --breakout-content-gap: 4rem; }
        .wp-block-columns.breakout-content-gap-xxxl  { --breakout-content-gap: 5rem; }
        .wp-block-columns.breakout-content-gap-xxxxl  { --breakout-content-gap: 6rem; }
    }





/* Neutralize core Columns flex sizing */
.wp-block-columns.breakout-content-left > .wp-block-column,
.wp-block-columns.breakout-content-right > .wp-block-column {
    width: auto;
    flex: initial;
    min-width: 0;
}

/* LEFT breakout: image first, content second */
.wp-block-columns.breakout-content-left > .wp-block-column:first-child {
    grid-column: 1 / 3;
}

.wp-block-columns.breakout-content-left > .wp-block-column:last-child {
    grid-column: 4 / 5;
}

/* RIGHT breakout: content first, image second */
.wp-block-columns.breakout-content-right > .wp-block-column:first-child {
    grid-column: 2 / 3;
}

.wp-block-columns.breakout-content-right > .wp-block-column:last-child {
    grid-column: 4 / 6;
}

/* Image */
.wp-block-columns.breakout-content-left .wp-block-image,
.wp-block-columns.breakout-content-right .wp-block-image {
    margin: 0;
}

.wp-block-columns.breakout-content-left .wp-block-image img,
.wp-block-columns.breakout-content-right .wp-block-image img {
    display: block;
    height: auto;
}

/* Mobile stack */
@media (max-width: 781px) {
    .wp-block-columns.breakout-content-left,
    .wp-block-columns.breakout-content-right {
        display: flex;
        flex-direction: column;
        gap: var(--breakout-content-gap);
    }

    .wp-block-columns.breakout-content-left > .wp-block-column,
    .wp-block-columns.breakout-content-right > .wp-block-column {
        width: 100%;
        margin: 0;
    }

    .wp-block-columns.breakout-content-left.breakout-content-mobile-reverse > .wp-block-column:first-child,
    .wp-block-columns.breakout-content-right.breakout-content-mobile-reverse > .wp-block-column:first-child {
        order: 2;
    }

    .wp-block-columns.breakout-content-left.breakout-content-mobile-reverse > .wp-block-column:last-child,
    .wp-block-columns.breakout-content-right.breakout-content-mobile-reverse > .wp-block-column:last-child {
        order: 1;
    }
}








/* ////////////////////////////////////////// */
/*                                            */
/*                    PLUGINS                 */
/*                                            */
/* ////////////////////////////////////////// */

/*==============================
KADENCE BLOCKS
================================*/
/* This applies OUR padding variable to Kadence Row Block's --global-content-edge-padding variable */
:root {
    --global-content-edge-padding: var(--kf-global-padding-left);
}



/*==============================
KRAKEN CAROUSEL
================================*/
:root {
    --kcb-color-primary: #a47151;
    --kcb-color-secondary: #3e3025;

    /* -- Widths -- */
    --kcb-max-width-mobile: 90%;
    --kcb-max-width-desktop: 100%;

    /* -- Nav -- */
    --kcb-nav-font-size: 2rem;
    --kcb-nav-width: 2.5rem;
    --kcb-nav-height: 2.5rem;
    --kcb-nav-background: var(--kcb-color-primary);
    --kcb-nav-color: var(--kcb-color-white);
    --kcb-nav-border: 1px solid var(--kcb-color-primary);

    --kcb-nav-hover-background: #3e3025;
    --kcb-nav-hover-color: var(--kcb-color-white);
    --kcb-nav-hover-border: 1px solid var(--kcb-color-secondary);

    /* -- Card -- */
    --kcb-card-background: var(--kcb-color-white);
    --kcb-card-border: 1px solid transparent;
    /* --kcb-card-shadow: 25px 25px 0px -1px rgba(0, 0, 0, 0.07); */
    --kcb-card-shadow: none;

    --kcb-card-hover-background: var(--kcb-color-white);
    --kcb-card-hover-border: 1px solid var(--kcb-color-primary);
    /* --kcb-card-hover-shadow: 25px 25px 0px -1px rgba(0, 0, 0, 0.07); */
    --kcb-card-hover-shadow: none;

    /* -- Content -- */
    --kcb-content-padding: 2rem clamp(1rem, 4vw, 2.125rem) 0 clamp(1rem, 4vw, 2.125rem);

    /* -- Footer -- */
    --kcb-footer-padding: 2rem clamp(1rem, 4vw, 2.125rem) 2rem clamp(1rem, 4vw, 2.125rem);

    /* -- Title -- */
    --kcb-title-margin: 0 0 1rem 0;
    --kcb-title-color: var(--kraken-framework-strong-text-color);
    --kcb-title-font-size: 2rem;
    --kcb-title-font-weight: 700;
    --kcb-title-line-height: 1;

    /* -- Logo -- */
    --kcb-logo-max-width: 300px;
    --kcb-logo-margin: 0 0 1rem 0;

    /* -- Caption -- */
    --kcb-caption-margin: 0.75rem 0;
    --kcb-caption-color: var(--kcb-color-off-black);
    --kcb-caption-font-size: 1rem;
    --kcb-caption-font-weight: 400;
    --kcb-caption-line-height: 1.2;

    /* -- Button -- */
    --kcb-button-background: transparent;
    --kcb-button-color: #a47151;
    --kcb-button-padding: 1rem 1rem;
    --kcb-button-border: 1px solid #a47151;
    --kcb-button-font-size: 1rem;
    --kcb-button-font-weight: 500;

    --kcb-button-hover-background: #a47151;
    --kcb-button-hover-color: #ffffff;
    --kcb-button-hover-border: 1px solid #a47151;
}

.kraken-carousel__button-wrapper  {
    position: relative;
    display: inline-block;

    &:hover {
        
        &:before {
            transform-origin: left;
            transform: scaleX(1);
            z-index: 0;
        }
    }

    &:before {
        content: '';
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        transform-origin: left;
        transform: scaleX(0);
        transition: transform 0.3s ease;
        background: #a47151;
    }

    &:after {
        content: none;
    }

    .kraken-carousel__button {
        background-color: var(--kcb-button-background);
        border: var(--kcb-button-border);
        color: var(--kcb-button-color);

        font-family: inherit;
        font-size: var(--kcb-title-font-size);
        font-style: italic;
        font-weight: var(--kcb-title-font-weight);
        line-height: var(--kcb-title-line-height);
        padding: calc(1.25em + 2px) calc(2em + 2px);
        margin: 0;
        text-decoration: none;
        border-radius: 0;
        position: relative;
        z-index: 1;
        
        &:hover {
            color: var(--kcb-button-hover-color);
            border: var(--kcb-button-hover-border);
        }
    }
}


/*---------------------------------
Kraken Cowbell Plugin - Carousel
-----------------------------------*/
:root {
    /* -- Button -- */
    --kco-button-padding: 1.25em 2em;
    --kco-button-background: transparent;
    --kco-button-color: var(--kco-color-white);
    --kco-button-border: 1px solid #a47151;
    --kco-button-font-size: 1rem;
    --kco-button-font-weight: 500;
    --kco-button-line-height: 1;

    --kco-button-hover-background: #a47151;
    --kco-button-hover-color: var(--kco-color-white);
    --kco-button-hover-border: 1px solid #a47151;
}

.kraken-callouts-wrapper {

    .kraken-callouts__button {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: var(--kco-button-padding);
        background-color: var(--kco-button-background);
        color: var(--kco-button-color);
        border: var(--kco-button-border);
        font-size: var(--kco-button-font-size);
        font-weight: var(--kco-button-font-weight);
        line-height: var(--kco-button-line-height);
        font-style: italic;
        cursor: pointer;
        transition: all 0.3s ease-out;
        z-index: 1;
        
        &:hover {
            background-color: var(--kco-button-hover-background);
            color: var(--kco-button-hover-color);
            border: var(--kco-button-hover-border);
        }

        &:focus {
            background-color: var(--kco-button-hover-background);
            color: var(--kco-button-hover-color);
            border: var(--kco-button-hover-border);
        }

        &:focus-visible {
            outline: var(--kco-accessability-color) solid 2px;
            outline-offset: 2px;
            border-radius: 0;
        }
    }

}





/*==============================
CUSTOM
================================*/


.block img {
    display:block;
}

.wp-block-image {
    margin:0;
}


/* Image Shadow */
.image-shadow {
    filter: drop-shadow(25px 25px #f4f1f0);
}

.image-dark-shadow {
    filter: drop-shadow(25px 25px rgba(0, 0, 0, 0.1));
}


/* Menu List */
.menu-list {
    display: inline-block;
    list-style-type: none;
    padding-inline-start: 0;

    li {
        padding-right: 2rem;
        border-bottom: 2px solid #f4f1f0;
        font-weight: 500;
        text-transform: uppercase;

        a {
            text-decoration: none;
        }
    }
}


.two-col-subtitle-intro-text {
    display: block;

    .two-col-subtitle-intro-text--subtitle {
        /* margin-block-start: 0;
        display: flex;
        align-items: center; */
    }

    .two-col-subtitle-intro-text--divider {
        display:none
    }

    .two-col-subtitle-intro-text--intro-text {
        /* margin-block-start: 0;
        display: flex;
        align-items: center; */
    }

    @media (min-width: 992px) {
        display: flex;
        align-items: stretch;

        .two-col-subtitle-intro-text--subtitle {
            margin-block-start: 0;
            display: flex;
            align-items: center;
        }

        .two-col-subtitle-intro-text--divider {
            display: block;
            margin-block-start: 0;
            width:1px;
            border-left: 1px solid #a47151;
            padding-right: 2rem !important;
            margin-left: 2rem !important;

                &.divider-white {
                    border-left: 1px solid #fff;
                }
        }

        .two-col-subtitle-intro-text--intro-text {
            margin-block-start: 0;
            display: flex;
            align-items: center;
        }
    } 
}




/* Shimmer Button - White light */
.shimmer-button {
    background: linear-gradient(
        135deg,
        rgba(242,241,240,0) 0%,
        rgba(242,241,240,0) 40%,
        #ffffff 50%,
        rgba(242,241,240,0) 60%,
        rgba(242,241,240,0) 100%
    );

    &.shimmer-button-tan {
        background: linear-gradient(
            135deg,
            #f2f1f0 0%,
            #f2f1f0 40%,
            #b68865 50%,
            #f2f1f0 60%,
            #f2f1f0 100%
    );
    }

    background-repeat: no-repeat;
    background-position: -600px 0;
    background-size: 300%;

    /* Scroll-triggered animation */
    animation: light-sweep linear forwards;
    animation-timeline: view();

    /* Trigger when element reaches roughly viewport center */
    animation-range: cover 30% cover 50%;
}

@keyframes light-sweep {
    from {
        background-position: -600px 0;
    }

    to {
        background-position: 0 0;
    }
}


/* Shimmer Button - Tan light */
.shimmer-button-tan {
    background: linear-gradient(
        135deg,
        rgba(242,241,240,0) 0%,
        rgba(242,241,240,0) 40%,
        #b68865 50%,
        rgba(242,241,240,0) 60%,
        rgba(242,241,240,0) 100%
    );

    background-repeat: no-repeat;
    background-position: -600px 0;
    background-size: 300%;

    /* Scroll-triggered animation */
    animation: light-sweep linear forwards;
    animation-timeline: view();

    /* Trigger when element reaches roughly viewport center */
    animation-range: cover 30% cover 50%;
}

@keyframes light-sweep {
    from {
        background-position: -600px 0;
    }

    to {
        background-position: 0 0;
    }
}


/* Shimmer Button - Dark Tan light */
.shimmer-button-darktan {
    background: linear-gradient(
        135deg,
        rgba(242,241,240,0) 0%,
        rgba(242,241,240,0) 40%,
        #5a4b3a 50%,
        rgba(242,241,240,0) 60%,
        rgba(242,241,240,0) 100%
    );

    background-repeat: no-repeat;
    background-position: -600px 0;
    background-size: 300%;

    /* Scroll-triggered animation */
    animation: light-sweep linear forwards;
    animation-timeline: view();

    /* Trigger when element reaches roughly viewport center */
    animation-range: cover 30% cover 50%;
}

@keyframes light-sweep {
    from {
        background-position: -600px 0;
    }

    to {
        background-position: 0 0;
    }
}





/* ////////////////////////////////////////// */
/*                                            */
/*                   3RD-PARTY                */
/*                                            */
/* ////////////////////////////////////////// */

/*==============================
CREST RESERVATION SYSTEM
================================*/
.crest-reservation-form {
    --ch-accessability-color: #0000FF;

    --ch-res-column-border-color: #a47151;

    --ch-res-label-font-color: #ffffff;
    --ch-res-label-font-size: .875rem;
    --ch-res-label-font-weight: 500;
    
    --ch-res-date-font-color: #ffffff;

    --ch-res-date-hover-font-color: #ffffff;

    --ch-res-day-font-size: clamp(2.25rem, 2.1075rem + 0.0446vw, 2.75rem);
    --ch-res-day-font-weight: 500;

    --ch-res-month-font-size: clamp(1rem, 0.9464rem + 0.0268vw, 1.25rem);
    --ch-res-month-font-weight: 500;

    --ch-res-room-font-color: #ffffff;
    --ch-res-room-font-size: clamp(2.25rem, 2.1075rem + 0.0446vw, 2.75rem);
    --ch-res-room-font-weight: 500;

    --ch-res-room-hover-font-color: #ffffff;

    --ch-res-guest-font-color: #ffffff;
    --ch-res-guest-font-size: clamp(2.25rem, 2.1075rem + 0.0446vw, 2.75rem);
    --ch-res-guest-font-weight: 500;

    --ch-res-guest-hover-font-color: #ffffff;

    --ch-res-submit-background-color: transparent;
    --ch-res-submit-font-color: #ffffff;
    --ch-res-submit-font-size: 1rem;
    --ch-res-submit-font-weight: 500;

    --ch-res-submit-hover-background-color: #a47151;
    --ch-res-submit-hover-font-color: #ffffff;

    display:flex;
    flex-wrap:wrap;

    .crest-reservation-form__column {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        padding: 0.5rem 1.2rem;
        /* border-left: none; */
        
        width: 49%;
        
        &:nth-child(1) {
            border-right: 1px solid var(--ch-res-column-border-color);
            border-bottom: 1px solid var(--ch-res-column-border-color);
        }

        &:nth-child(2) {
            border-bottom: 1px solid var(--ch-res-column-border-color);
        }

        &:nth-child(3) {
            border-right: 1px solid var(--ch-res-column-border-color);
            border-bottom: none;
        }

        &:nth-child(4) {
            border-bottom: none;
        }

        &:nth-child(5) {
            width: 100%;
            border-bottom: none;
        }
    }

    .crest-reservation-form__label {
        display: block;
        width: 100%;
        margin-bottom: 0.5rem;
        color: var(--ch-res-label-font-color);
        text-align: center;
        font-size: var(--ch-res-label-font-size);
        font-weight: var(--ch-res-label-font-weight);
        line-height: 1;
    }

    .crest-reservation-form__date {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
        background-color: transparent; 
        color: var(--ch-res-date-font-color);
        border: none;
        cursor: pointer;

        &:hover {
            color: var(--ch-res-date-hover-font-color);
        }

        &:focus {
            color: var(--ch-res-date-hover-font-color);
        }

        &:focus-visible {
            outline: var(--ch-accessability-color) solid 2px;
            outline-offset: 2px;
            border-radius: 0;
        }

        .day {
            font-size: var(--ch-res-day-font-size);
            font-weight: var(--ch-res-day-font-weight);
            line-height: 1;
        }

        .month-label {
            display: block;
            width: 100%;
            font-size: var(--ch-res-month-font-size);
            font-weight: var(--ch-res-month-font-weight);
            line-height: 1;
        }

    }

    svg {
        display: inline-block;
    }

    .crest-reservation-form__rooms {
        background-color: transparent;
        border: none;
        width: 100%;
        color: var(--ch-res-room-font-color);
        font-size: var(--ch-res-room-font-size);
        font-weight: var(--ch-res-room-font-weight);
        line-height: 1;
        cursor: pointer;

        &:hover {
            color: var(--ch-res-room-hover-font-color);
        }

        &:focus {
            color: var(--ch-res-room-hover-font-color);
        }

        &:focus-visible {
            outline: var(--ch-accessability-color) solid 2px;
            outline-offset: 2px;
            border-radius: 0;
        }
    }

    .crest-reservation-form__guests {
        background-color: transparent;
        border: none;
        width: 100%;
        color: var(--ch-res-guest-font-color);
        font-size: var(--ch-res-guest-font-size);
        font-weight: var(--ch-res-guest-font-weight);
        line-height: 1;
        cursor: pointer;

        &:hover {
            color: var(--ch-res-guest-hover-font-color);
        }

        &:focus {
            color: var(--ch-res-guest-hover-font-color);
        }

        &:focus-visible {
            outline: var(--ch-accessability-color) solid 2px;
            outline-offset: 2px;
            border-radius: 0;
        }
    }

    .crest-reservation-form__submit {
        width: 100%;
        padding: 1.5rem 2rem;
        background-color: var(--ch-res-submit-background-color);
        color: var(--ch-res-submit-font-color);
        border: 2px solid #a47151;
        font-size: var(--ch-res-submit-font-size);
        font-weight: var(--ch-res-submit-font-weight);
        line-height: 1;
        cursor: pointer;

        &:hover {
            background-color: var(--ch-res-submit-hover-background-color);
            color: var(--ch-res-submit-hover-font-color);
        }

        &:focus {
            background-color: var(--ch-res-submit-hover-background-color);
            color: var(--ch-res-submit-hover-font-color);
        }

        &:focus-visible {
            outline: var(--ch-accessability-color) solid 2px;
            outline-offset: 2px;
            border-radius: 0;
        }
    }
}

@media (min-width: 991px) {
    .crest-reservation-form {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-wrap:nowrap;

        .crest-reservation-form__column {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            width:auto;
            /* width: 15%; */
            /* min-width: 130px; */
            /* height: 74px; */
            padding: 0.5rem 1.2rem;
            border-left: 1px solid var(--ch-res-column-border-color);
            /* border-bottom: none; */

            &:nth-child(1) {
                border-right: none;
                border-bottom: none;
                border: none;
            }
    
            &:nth-child(2) {
                border-bottom: none;
            }
    
            &:nth-child(3) {
                border-right: none;
                border-bottom: none;
            }
    
            &:nth-child(4) {
                border-bottom: none;
            }
    
            &:nth-child(5) {
                width: auto;
                border-bottom: none;
                border: none;
            }

            &.crest-reservation-form__column--submit {
                width: 40%;
            }
        }
    }
}

.crest-reservation-form__dialog {
    --ch-accessability-color: #0000FF;
    --ch-reservation-dialog-background: #ffffff;
    --ch-reservation-dialog-shadow: 28px 31px 0px -1px rgba(0,0,0,0.15);

    --ch-reservation-dialog-title-font-color: #000000;
    --ch-reservation-dialog-title-font-size: 1.2rem;
    --ch-reservation-dialog-title-font-weight: 700;

    --ch-res-button-background-color: #222222;
    --ch-res-button-font-color: #ffffff;
    --ch-res-button-font-size: 1.2rem;
    --ch-res-button-font-weight: 500;

    --ch-res-button-hover-background-color: #000000;
    --ch-res-button-hover-font-color: #ffffff;

    border: none !important;
    background-color: var(--ch-reservation-dialog-background) !important;
    box-shadow: var(--ch-reservation-dialog-shadow) !important;
    padding: 0 !important;

    .ui-dialog-titlebar {
        background: none !important;
        border: none !important;
        padding: 1rem;
        font-weight: var(--ch-reservation-dialog-title-font-weight);
        font-size: var(--ch-reservation-dialog-title-font-size);
        color: var(--ch-reservation-dialog-title-font-color);
    }

    .ui-dialog-titlebar-close {
        background: none !important;
        border: none !important;
    }

    .ui-dialog-content {
        background: none !important;
        border: none !important;
        padding: 1rem !important;
    }

    .crest-reservation-form__text-field {
        max-width: 300px;
        padding: 1rem;
    }

    .ui-dialog-buttonpane {
        background: none !important;
        border: none !important;
        padding: 0.5rem 1rem !important;
        text-align: right;
    }

    .ui-dialog-buttonpane {
        button {
            background: var(--ch-res-button-background-color) !important;
            color: var( --ch-res-button-font-color) !important;
            border: none !important;
            font-size: var(--ch-res-button-font-size);
            font-weight: var(--ch-res-button-font-weight);
            padding: 0.4rem 1.2rem;
            cursor: pointer;
            transition: background-color 0.2s ease;

            &:hover {
                background-color: var(--ch-res-button-hover-background-color) !important;;
                color: var(--ch-res-button-hover-font-color) !important;
            }

            &:focus {
                background-color: var(--ch-res-button-hover-background-color) !important;;
                color: var(--ch-res-button-hover-font-color) !important;
            }

            &:focus-visible {
                outline: var(--ch-accessability-color) solid 2px;
                outline-offset: 2px;
                border-radius: 0;
            }
        }
    }
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    border: 1px solid #dad55e;
    background: #fffa90;
    color: #777620;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    border: 1px solid #a47151;
    background: #a47151;
    font-weight: normal;
    color: #ffffff;
}