@font-face {
    font-family:'Material Symbols Outlined';
    font-style:normal;
    font-weight:400;
    src:url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v323/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOejbd5zrDAt.woff2) format('woff2');
}

body{
    display:flex;
    justify-content:center;
}

.icon{
    font-family:'Material Symbols Outlined';
    font-size:30px;
    width:30px;
    height:30px;
    flex-shrink:0;
    fill:white;
    margin-right:.2em;
    box-sizing:border-box;
    display:block;
}

.icon.property-map::before{ content:'map'; }
.icon.guest-services::before{ content:'\f561'; }
.icon.room-service::before{ content:'room_service'; }
.icon.restaurants-bars::before{ content:'restaurant'; }
.icon.casino::before{ content:'poker_chip'; }
.icon.spa::before{ content:'spa'; }
.icon.entertainment::before{ content:'comedy_mask'; }
.icon.all-ages-fun::before{ content:'attractions'; }
.icon.shopping::before{ content:'shopping_bag'; }
.icon.kalispel-golf-course-and-country-club::before{ content:'sports_golf'; }
.icon.guest-safety::before{ content:'health_and_safety'; }

/* layout */
main{
    max-width:1080px;
    display:grid;
    grid-template-columns:280px minmax(0, 1fr);
    gap:2rem;
    align-items:start;
}

.navigation{
    position:sticky;
    top:2rem;
    align-self:start;
}

.navigation__toggle{
    display:none;
}

.navigation__list{
    margin:0;
    padding:0;
    list-style:none;
}

.navigation__list li{
    list-style:none;
}

.navigation__list a{
    display:flex;
    align-items:center;
    padding:.5em;
    max-width:25ch;
}

.navigation__list a:hover{
    background-color:rgb(255 165 0 / .05);
    color:orange;
}

.content{
    min-width:0;
}

/* sections */
.section__header{
    display:grid;
    grid-template-columns:1fr;
}

.section__header > *{
    grid-column:1;
    grid-row:1;
}

.section__overlay__heading{
    font-size:5rem;
    line-height:calc(5rem * 1.1);
    font-weight:900;
    z-index:3;
    text-align:right;
    padding:.5em;
}

.skrim{
    z-index:2;
}

.section__hero__image{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:1;
}

.section__heading{
    display:flex;
    justify-content:space-between;
    align-self:self-end;
    padding:1em;
    z-index:4;
}

.section__map{
    background-color:#888;
    padding:2em;
}

.detail__section{
    background:#fff;
    color:#000;
    padding:2em;
}

/* venue sections */
.venue__section{
    background:#888;
    color:#000;
    display:grid;
    grid-template-rows:auto auto;
    align-items:start;
}

.venue__card{
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:1fr;
    grid-row:1;
    grid-column:1;
}

.card__snipe{
    justify-self:end;
    grid-column:1;
    grid-row:1;
    z-index:3;
    padding:.5em .7em;
    margin:1em;
    outline:#fff 1px solid;
    width:fit-content;
    height:fit-content;
    background-color:rgba(0 0 0 / .8);
    font-size:clamp(0.6rem, 0.5rem + 0.5vw, 0.85rem);
    color:#fff;
    font-family:'proxima-nova', sans-serif;
    font-weight:500 !important;
    text-align:center;
    text-transform:uppercase;
    text-wrap:balance;
    border-radius:5px;
}

.venue__card .skrim{
    grid-column:1;
    grid-row:1;
    background:linear-gradient(0deg, rgba(136,136,136,1) 0%, rgba(0,0,0,0) 18%);
    z-index:2;
}

.venue__card img{
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
    grid-column:1;
    grid-row:1;
    z-index:1;
}

.venue__details{
    background:#fff;
    border-radius:0 20px 0 20px;
    -webkit-box-shadow:5px 5px 17px -2px rgba(0,0,0,0.31);
    box-shadow:5px 5px 17px -2px rgba(0,0,0,0.31);
    corner-shape:bevel;
    margin:-120px 2em 2em;
    padding:2em;
    grid-row:2;
    grid-column:1;
    z-index:3;
    align-self:start;
}

.venue__hours_grid{
    container-type:normal !important;
    gap: 0 !important;
}

.venue__hours .hours-cell--day{
    padding:0 !important;
}

.venue__hours .hours-cell--service{
    padding:.5em;
}

.venue__hours .hours-services{
    grid-template-columns:repeat(auto-fit, minmax(100px, 60px));
}

.venue__hours .hours-cell.today.restaurants-bars{
    color:var(--restaurants-bars-color);
}

.venue__hours .hours-cell.today.spa{
    color:var(--spa-color);
}

.venue__hours .hours-cell.today.shopping{
    color:var(--shopping-color);
}

.venue__menu:hover{
    color:orange;
}

/* mobile ordering */
.mobile__ordering{
    position:relative;
    padding:1em;
    background:#fff;
    border-radius:0 0 20px 0;
    -webkit-box-shadow:5px 5px 17px -2px rgba(0,0,0,0.31);
    box-shadow:5px 5px 17px -2px rgba(0,0,0,0.31);
    corner-shape:bevel;
    margin-top:3em;
}

.callout{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:.2em;
    position:absolute;
    top:-2em;
    left:-1em;
    padding:.5em 1em;
    box-sizing:border-box;
    background:orange;
    color:#fff;
    font-weight:bolder;
}

.callout .icon{
    width:20px;
    height:20px;
    font-size:1.2em;
    justify-self:center;
    align-self:center;
}

.mobile__ordering .component{
    margin-top:0;
}

.button-component.component{
    margin-top:2em;
}

/* details / contact rows */
.extension{
    display:flex;
    gap:.5em;
    align-items:center;
    justify-content:end;
}

.phone{
    display:flex;
    gap:.5em;
    align-items:center;
    justify-content:space-between;
    padding:.5em 0;
}

.extension__details,
.phone__details{
    font-weight:bolder;
}

.btn{
    display:flex;
    gap:.5em;
    padding:.2em .8em;
    align-items:center;
    background:#000;
    color:#fff;
    border-radius:3px;
}

.btn.property-map{ background:var(--property-map-color); }
.btn.guest-services{ background:var(--guest-services-color); }
.btn.room-service{ background:var(--room-service-color); }
.btn.restaurants-bars{ background:var(--restaurants-bars-color); }
.btn.casino{ background:var(--casino-color); }
.btn.spa{ background:var(--spa-color); }
.btn.entertainment{ background:var(--entertainment-color); }
.btn.all-ages-fun{ background:var(--all-ages-fun-color); }
.btn.shopping{ background:var(--shopping-color); }
.btn.kalispel-golf-course-and-country-club{ background:var(--kalispel-golf-course-and-country-club-color); }
.btn.guest-safety{ background:var(--guest-safety-color); }

.btn:hover{
    background:orange;
}

/* map legend */
.directory__map__legend__wrapper{
    padding:2em;
    background:#888;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
    gap:1em;
}

.map__legend{
    display:flex;
    flex-direction:column;
    gap:.2em;
}

.legend__row{
    display:flex;
    align-items:center;
    gap:.5em;
}

.legend__row:hover{
    color:orange;
}

.legend__row:hover .key{
    border-color:orange;
}

.legend__row .key{
    width:30px;
    height:30px;
    aspect-ratio:1 / 1;
    border:1px solid #fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
}

.legend__row .title{
    text-transform:uppercase;
}

.legend__heading{
    display:block;
    position:relative;
    margin-bottom:10px;
    text-transform:uppercase;
}

.legend__heading::after{
    content:'';
    height:4px;
    width:100%;
    position:absolute;
    bottom:-5px;
    left:0;
}

.legend__heading.guest-services::after{ background-color:var(--guest-services-color); }
.legend__heading.room-service::after{ background-color:var(--room-service-color); }
.legend__heading.restaurants-bars::after{ background-color:var(--restaurants-bars-color); }
.legend__heading.casino::after{ background-color:var(--casino-color); }
.legend__heading.spa::after{ background-color:var(--spa-color); }
.legend__heading.entertainment::after{ background-color:var(--entertainment-color); }
.legend__heading.all-ages-fun::after{ background-color:var(--all-ages-fun-color); }
.legend__heading.shopping::after{ background-color:var(--shopping-color); }
.legend__heading.kalispel-golf-course-and-country-club::after{ background-color:var(--kalispel-golf-course-and-country-club-color); }
.legend__heading.guest-safety::after{ background-color:var(--guest-safety-color); }

/* responsive */
@media (max-width:767px){
    main{
        grid-template-columns:1fr;
    }

    .navigation{
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        top:auto;
        z-index:1000;
        background:#111;
        box-shadow:0 -4px 20px rgba(0,0,0,0.25);
    }

    .navigation__toggle{
        display:flex;
        align-items:center;
        justify-content:center;
        width:100%;
        min-height:56px;
        padding:1rem 1.25rem;
        border:0;
        background:#111;
        color:#fff;
        font:inherit;
        text-transform:uppercase;
        letter-spacing:.08em;
        cursor:pointer;
    }

    .navigation__toggle::after{
        content:'+';
        margin-left:.5rem;
        font-size:1.2em;
        line-height:1;
    }

    .navigation__list{
        display:none;
        margin:0;
        padding:0;
        list-style:none;
        width:100%;
        max-height:60vh;
        overflow-y:auto;
        background:#111;
    }

    .navigation.is-open .navigation__list{
        display:block !important;
    }

    .navigation.is-open .navigation__toggle::after{
        content:'−';
    }

    .navigation__list li{
        display:block;
        margin:0;
        padding:0;
        list-style:none;
    }

    .navigation__list a{
        display:flex;
        align-items:center;
        gap:.75rem;
        width:100%;
        max-width:none;
        padding:.9rem 1rem;
        color:#fff;
        text-decoration:none;
        border-top:1px solid rgba(255,255,255,0.12);
        box-sizing:border-box;
    }

    .content{
        min-width:0;
        padding-bottom:80px;
    }

    .section__overlay__heading{
        font-size:3rem;
        line-height:1.1;
    }

    .venue__details{
        margin:-60px 1em 1em;
        padding:1.5em;
    }

    .directory__map__legend__wrapper{
        grid-template-columns:1fr;
        padding:1.25em;
    }

    .detail__section{
        padding:1.5em 1em;
    }

    .extension,
    .phone{
        flex-wrap:wrap;
    }
}