@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url("//hello.myfonts.net/count/332944");

:root{
    --base-clr:#263238;
    --map-base-clr:#545353;
    --secondary-dark-base:#0e1215;
    --secondary-base-clr:#f1f1f1;
    --line-clr:#42434a;
    --hover-clr:rgb(54, 54, 54);
    --text-clr:#e6e6ef;
    --secondary-text-clr:#11121a;
    --accent-clr:orange;

    /*section styles */
    --section-guest-services:rgba(0, 0, 0, 0.877);
    --section-room-service:rgba(207, 106, 66, 0.839);
    --section-restaruants-bars:rgba(207, 106, 66, 0.839);
    --section-casino:rgba(255, 170, 0, 0.924);
    --section-larive-spa:rgba(111, 46, 88, 0.753);
    --section-concerts-live-shows:rgba(42, 72, 92, 0.809);
    --section-all-ages-fun:rgba(13, 169, 174, 0.84);
    --section-shopping:rgba(120, 188, 158, 0.889);
    --section-golf:rgba(122, 171, 83, 0.889);;
    --section-guest-safety:rgba(0 0 0 / 0.877);

    /* font familiues */
    --ff-base: "proxima-nova", sans-serif ;
    --ff-accent: "proxima-nova" , sans-serif;
    --ff-nav-icons: Material Symbols Outlined;

    /* text sizes */
  --fs-100: clamp(.8rem, .0815rem + 0.074vw, .8rem);
  --fs-200: clamp(1.115rem, 1.0615rem + 0.1174vw, 1.15rem);
  --fs-300: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  --fs-400: clamp(1.35rem, 1.2048rem + 0.7261vw, 1.7675rem);
  --fs-500: clamp(1.62rem, 1.3142rem + 1.5291vw, 2.4992rem);    
  --fs-600: clamp(1.944rem, 1.391rem + 2.7651vw, 3.5339rem);
  --fs-700: clamp(2.3328rem, 1.4061rem + 4.6334vw, 4.997rem);
  --fs-800: clamp(2.7994rem, 1.3154rem + 7.4198vw, 7.0657rem);

}
*,
*::after,
*::before{
box-sizing: border-box;
}

*{
    margin:0;
    padding:0
}
html{
    scroll-behavior: smooth;
    scroll-padding-top:2em;
    color-scheme: light-dark;
}
/* dark mode colors */
@media (prefers-color-scheme:dark){
    :root{
        --base-clr:#263238;
        --secondary-base-clr:#f1f1f1;
        --line-clr:#42434a;
        --hover-clr:rgb(54, 54, 54);
        --text-clr:#e6e6ef;
        --secondary-text-clr:#11121a;
        --accent-clr:orange;
    }
}

img{
    display:block;
    max-width:100%;
}

h1, h2, h3, h4{
    font-family: var(--ff-accent);
    font-weight:900;
    font-kerning: none;
    line-height:1.1;
    text-wrap:balance;
}

h1{
    font-size:var(--fs-600);
}

h2{
    font-size:var(--fs-500);
    margin-bottom: .5em;
}

h3{
    font-size:var(--fs-400);
    margin-bottom: .3em;
}

h4{
    font-size:var(--fs-300);
    margin-bottom: .2em;
}

p{
    font-size:var(--fs-300);
    line-height:1.3em;
    margin-bottom:1em;
    text-wrap:balance;
}

a{
    color:var(--secondary-text-clr);
    text-decoration:none;
}

a:hover, a:focus{
    color:var(--accent-clr);
}

body{
    min-height:100vh;
    min-height:100dvh;
    width:min(100% - 2rem, 300ch);
    /* margin-inline:auto; */
    background-color:var(--secondary-dark-base);
    color:var(--text-clr);
    display:grid;
    grid-template-columns: auto 1fr;
    font-family: var(--ff-base);
    font-size:var(--fs-300);
    line-height:1.2;
}

.flow > * + *{
}

.sidebar{
    box-sizing: border-box;
    text-wrap:nowrap;
    height:100vh;
    width:fit-content;
    padding:.2em 1em;
    background-color:var(--base-clr);
    border-right:1px solid var(--line-clr);
    position:sticky;
    top:0;
    align-self: start;
    transition:300ms ease-in-out;
    z-index:100;
}


.sidebar.close{
    padding:.2em;
    width:70px;
    overflow:hidden;

    span.logo{
        display:none;
    }
}

.sidebar ul{
    list-style:none;
}

.sidebar > ul >li:first-child{
    display:flex;
    justify-content: space-between;
    margin-bottom:1rem;
    font-family: var(--ff-accent);

    .logo{
        font-weight:600;
    }
}

.sidebar ul li.active a{
    color:var(--accent-clr);
    fill:var(--accent-clr);

    svg{
    fill:var(--accent-clr);
    }
}

.sidebar a, .sidebar .logo{
    border-radius:.5em;
    padding:.85em;
    text-decoration: none;
    color:var(--text-clr);
    display:flex;
    align-items: center;
    gap:1em;
    }
    
    .sidebar span:first-child{
        flex-shrink: 0;
        fill:var(--text-clr);
    }
    
    .sidebar a span:last-child {
        flex-grow: 1;
    }
    
    .sidebar a:hover,.sidebar a:focus {
        background-color:var(--hover-clr);
        color:var(--accent-clr);
        outline:none;
    
        svg{
            fill:var(--accent-clr);
        }
    }

    .sidebar ul li.watermark{
        opacity:.25;
        margin-top:3rem;
    }

    .sidebar ul li.watermark a{
        fill:var(--text-clr);
        padding:0 !important;
        background:none !important;
    }

    .sidebar ul li.watermark a:hover,
    .sidebar ul li.watermark a:focus
    {
        fill:var(--accent-clr);
        opacity:1 !important;
    }
    
/* nav icons */
.icons{
    font-family:var(--ff-nav-icons);
    font-size: var(--fs-400);
    flex-shrink: 0;
    fill:var(--text-clr);
    margin-right:.2em;
    box-sizing: border-box;
  }

   /* icon styles */
   .icons.guest-services::before{
    content:'\f561';
    }

    .icons.map::before{
        content:'map';
    }

    .icons.room-service::before{
        content:'room_service';
    }

    .icons.restaurants--bars::before{
        content:'restaurant';
    }

    .icons.casino::before{
        content:'poker_chip';
    }

    .icons.spa::before{
        content:'spa';
    }

    .icons.all-ages-fun::before{
        content:'attractions';
    }

    .icons.concerts--live-shows::before{
        content:'comedy_mask';
    }

    .icons.shopping::before{
        content:'shopping_bag';
    }

    .icons.kalispel-golf-and-country-club::before{
        content:'sports_golf';
    }

    .icons.guest-safety::before{
        content:'health_and_safety';
    }

    .icons.fastfood::before{
        content:'fastfood';
    }

.sidebar a span:last-child{
    flex-grow: 1;
    position: relative;
}


.toggle-btn{
    margin-left:auto;
    padding:1em;
    border:none;
    border-radius:.5em;
    background:none;
    cursor:pointer;

    svg{
        transition: rotate 150ms ease;
    }
}

.toggle-btn:hover{
    background-color:var(--hover-clr);
}

.rotate svg:last-child{
    rotate:180deg;
}

main{
    padding:min(2rem, 7%);
    max-width: 1080px;
}

main p{
    color:var(--secondary-text-clr);
}
.category{
    position:relative;
    max-height:1440px;
    
    .color-filter{
        position:absolute;
        top:0;
        z-index:25;
        width:100%;
        height: 100%;
        opacity:.7;
    }

    .big-category{
        position:absolute;
        padding-inline:.5em;
        top:.5em;
        right:0;
        z-index:50;
        font-family: var(--ff-accent);
        font-size: var(--fs-800);
        font-weight:900;
        line-height: .9em;
        color:var(--text-clr);
        text-align: right;
        text-wrap:balance;
    }

    h1{
        width:100%;
        position:absolute;
        display:flex;
        justify-content: space-between;
        align-items: center;
        bottom:0;
        left:0;
        z-index:50;
        color:var(--text-clr);
        background-color: var(attr(data-theme));
        box-shadow: 0px -2px 15px 5px rgba(0,0,0,0.22);
        backdrop-filter:blur(5px);
    }

    .icons{
        font-size:var(--fs-600);
    }

    h1 span:first-child{
        padding:.5em;
    }

    h1 span:last-child{
        padding:.5em;
    }

    h1:before{
        align-content: center;
        width:fit-content;
        height:fit-content;
    }


}

/*category colors */
h1.guest-services,.color-filter.guest-services, .guest-services .small-btn{
    background:var(--section-guest-services);
}

h1.room-service, 
.color-filter.room-service, 
.room-service .small-btn{
    background:var(--section-room-service);
}

h1.restaurants--bars, .color-filter.restaurants--bars, .restaurants--bars .small-btn{
    background:var(--section-restaruants-bars);
}

h1.spa, .color-filter.spa, .spa .small-btn{
    background:var(--section-larive-spa);
}

h1.shopping, .color-filter.shopping, .shopping .small-btn{
    background:var(--section-shopping);
}

h1.casino, .color-filter.casino, .casino .small-btn{
    background:var(--section-casino);
}

h1.all-ages-fun, .color-filter.all-ages-fun, .all-ages-fun .small-btn{
    background:var(--section-all-ages-fun);
}

h1.concerts--live-shows, .color-filter.concerts--live-shows, .concerts--live-shows .small-btn{
    background:var(--section-concerts-live-shows);
}

h1.kalispel-golf-and-country-club, .color-filter.kalispel-golf-and-country-club, .kalispel-golf-and-country-club .small-btn{
    background:var(--section-golf);
}

h1.guest-safety, .color-filter.guest-safety, .guest-safety .small-btn{
    background:var(--section-guest-safety);
}

/* sections */
section{
    color:var(--secondary-text-clr);
    background-color:var(--secondary-base-clr);
}

.directory-venue{
    display:grid;
    grid-template-rows:300px 75px 1fr;
    color:var(--secondary-text-clr);
    background-color:var(--secondary-base-clr);
}

.content{
    padding: min(2em, 15%);
    padding-top:2em;
    background-color:var(--secondary-base-clr);

    a{
        text-decoration: none;
        color:var(--secondary-text-clr);
    }
}

.venu-content{
    grid-column: 1;
    grid-row: 2 / span 2;
    padding: min(2em, 15%);
    padding-top:1em;
    margin: min(1em, 15%);
    margin-top:0;
    margin-bottom:3rem;
    background-color:var(--secondary-base-clr);
    border-radius:.5em;
    -webkit-box-shadow: 1px 1px 15px 1px rgba(0,0,0,0.34); 
    box-shadow: 1px 1px 15px 1px rgba(0,0,0,0.34);
    z-index:10;
}

.image-header{
    position:relative;
    overflow:hidden;
    grid-column: 1;
    grid-row: 1 / span 2;

    .image-placeholder{
        background-size: cover !important;
        background-repeat: no-repeat !important;
        background-position: center -100px!important;
    }
}

.skrim{
    position:absolute;
    width:100%;
    height:100px;
    bottom:0;
    background: linear-gradient(rgba(255 255 255 /0), var(--secondary-base-clr));
}

.hours{
    display:grid;
    grid-template-rows: repeat(auto-fit,1fr);
    grid-template-columns: repeat(2, 1fr);
    gap:.2em;
    align-items: center;
    list-style: none;
    padding-bottom:1em;
    max-width:500px;
}

.hours li{
grid-column: span 2;
display:grid;
grid-template-columns: subgrid;
}

.hours li :last-child{
    text-align:right;
}

.hours li.heading{
    display:flex;
    justify-content: flex-start;
    align-items: center;
    gap:.5em;
    font-weight:800;
    padding:.5em 0;

    svg{
        fill:var(--secondary-text-clr);
    }
}

.menus{
    list-style:none;
    display:grid;
    grid-template-columns: repeat(3, minmax(fit-content, 1fr));
    align-items:center;
    gap:.5em;
    margin-bottom:1rem;
}

.menus li.heading{
    display:flex;
    align-items: center;
    gap:.5em;
    grid-column: 1 / span 3;
    font-weight:800;

    svg{
        fill:var(--secondary-text-clr);
    }
}

.menus li a{
    display:grid;
    grid-template-columns: 40px 1fr;
    align-items: center;
    gap:.5em;
    text-decoration: none;
    text-wrap:balance;
    color:var(--secondary-text-clr);
    outline:1px solid var(--base-clr);
    font-size: var(--fs-300);
    border-radius: .5em;
    padding:.5em;
    cursor:pointer;
    transition: color 100ms, outline 100ms, fill 100ms;
}

.menus li a:hover,
.menus li a:focus{
    outline-color:var(--section-restaruants-bars);
    color:var(--section-restaruants-bars);
    svg{
        fill:var(--section-restaruants-bars);
    }
}

.menus li.menu-item{
    font-size:var(--fs-400);
    margin: auto 0;
    height:100%;

    svg{
        display:block;
        width:40px;
        height:40px;
        fill:var(--secondary-text-clr);
    }
}
.on-demand-wrapper{
    -webkit-box-shadow: 1px 1px 15px 1px rgba(0,0,0,0.2); 
    box-shadow: 1px 1px 15px 1px rgba(0,0,0,0.2);
    border-radius:.5em;
    margin-top:2em;
    margin-bottom:1em;
    position: relative;

    .on-demand{
        display:grid;
        grid-template-rows: repeat(2, 1fr);
        gap:.5em;
        align-items: center;
        padding:.8em;
    }
    h3{
        padding:0; margin:0;
    }
    p{
        margin:0;
        text-wrap: pretty;
    }

    .flag{
        position:absolute;
        top:-20px;
        left:-20px;
        display:flex;
        align-content:center;
        gap:.2em;
        background:var(--accent-clr);
        color: var(--text-clr);
        border-radius:5px;
        padding:.2em .5em;
    }

    .small-btn{
        background:black;
    }
}

.calling-options{
    display:grid;
    grid-template-columns: repeat(2,1fr);
    gap:.5em;

    .contact-item-all{
        grid-column: span 2;
        margin-bottom:1rem;

        .btn-group{
            display:flex;
            justify-content: flex-end;
            align-items:center;
            gap:1em;
        }
    }
    .contact-item-alt{
        grid-column:2;
        font-weight:600;
        text-align:right;
        text-wrap: pretty;
        margin-bottom:1rem;
    }
    .contact-item-btn{
        grid-column: 1 /span 2;
        display:flex;
        justify-content: flex-end;
        align-items:center;
        gap:.5em;
        margin-bottom:1rem;

        .alt-method{
            font-weight:600;
            text-wrap: balance;
        }
    }

    .contact-item{
        grid-column: span 2;
        display:grid;
        grid-template-columns: subgrid;
        gap:.5em;

        .sub-heading{
            text-align:left;
            text-wrap: balance;
        }

        .alt-method{
            text-align:right;
            text-wrap:pretty;
        }
    }

    .contact-item-only-btn{
        grid-column: span 2;
        display:flex;
        justify-content: flex-end;
        margin-bottom:1rem;

    }

}

.small-btn{
        display:flex;
        align-items: center;
        gap:.5em;
        background:var(--accent-clr);
        text-decoration: none;
        color:var(--text-clr) !important;
        font-weight:600;
        outline:0;
        border:0;
        border-radius:5px;
        text-wrap: nowrap;
        padding:.5em 1em;
        width:fit-content;

        span{
            text-wrap: nowrap;
            flex-grow:0;
        }

        svg{
            fill:var(--text-clr);
        }
}

.small-btn:hover, .small-btn:focus{
    opacity:.8;
}
.directory-map{
    background-color:var(--map-base-clr);
    
    .svg{
        padding: min(4em, 30%);
        padding-bottom:0;
    }

}
.map-key{
    padding: min(4em, 30%);
    color:var(--text-clr);
    font-size: var(--fs-200);
}

.map-key ul{
    list-style:none;
    margin:0 0 1em;
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    grid-row-gap: .2em;
    a{
        color:var(--text-clr);
        text-decoration: none;
    }

    .key-group a:hover, .key-group a:focus {
        color:var(--accent-clr);

        .number{
            border-color:var(--accent-clr);
        }
    }

    .heading{
        font-family: var(--ff-accent);
        font-size: var(--fs-200);
        font-weight: 300;
        position:relative;
        text-wrap:balance;
        text-transform: uppercase;
        margin-bottom:.5em;
        padding-right:20%;
    }

    .heading::after{
        content: '';
        position:absolute;
        width:80%;
        height:5px;
        background-color: var(--cat-clr);
        bottom:-.2em;
        left:0;
    }

    .item{
        display:flex;
        align-items: center;
        gap:.5em;
        font-size: var(--fs-100);
        text-transform: uppercase;

        .number{
            border-radius:50%;
            width:20px;
            aspect-ratio: 1;
            font-size:fit-content;
            display:flex;
            align-items: center;
            justify-content: center;
            border:1px solid var(--text-clr);
        }

        .icon{
            width:20px;
            aspect-ratio: 1;
            display:flex;
            align-items: center;
            justify-content: center;
            fill:var(--text-clr);

        }

        .icon.gaming{
            background:url('/img/gfx/Icon-Gaming.svg');
        }

        .icon.security{
            background:url('/img/gfx/Icon-Security.svg');
        }

        .icon.cashier{
            background:url('/img/gfx/Icon-Cashier.svg');
        }

        .icon.poker{
            background:url('/img/gfx/Icon-Gaming.svg');
        }

        .icon.camas-club{
            background:url('/img/gfx/Icon-Camas.svg');
        }

        .icon.vip-services{
            background:url('/img/gfx/Icon-VIP.svg');
        }

        .icon.otb--sports-betting{
            background:url('/img/gfx/Icon-Sports Betting.svg');
        }

        .icon.non-smoking{
            background:url('/img/gfx/Icon-Non-Smoking.svg');
        }

        .icon.camas-kiosks{
            background:url('/img/gfx/Icon-Kiosk.svg');
        }

        .icon.high-limit-gaming{
            background:url('/img/gfx/Icon-Elite-Titanium-Gaming.svg');
        }



    }
}

.loader{
position:absolute;
display:flex;
justify-content: center;
align-items: center;
top:0;
left:0;
z-index: 200;
min-width:100vw;
min-height:100vh;
background:var(--base-clr);

.progress{
        border: 16px solid var(--secondary-dark-base); /* Light grey */
        border-top: 16px solid var(--accent-clr); /* Blue */
        border-radius: 50%;
        width: 120px;
        height: 120px;
        animation: spin 2s linear infinite;
      }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }


@media(max-width:1024px)
{
    body{
        grid-template-columns: 1fr;
        width:100%;
    }

    main{
        padding:4em 0 60px 0;
    }

    section{
        border:none;
        padding:0;
    }
    .directory-venue{
        grid-template-rows:225px 75px 1fr;
    }

    .image-header{

        .image-placeholder{
            background-position: center center !important;
        }
    }

    .sidebar{
        height:fit-content;
        width:100%;
        border-right:none;
        border-bottom:1px solid var(--line-clr);
        padding:0;
        position:fixed;

    > ul{
        padding:0;
        display:grid;
        grid-auto-columns: fit-content;
        grid-auto-flow: column;
        align-items: center;
        overflow-x: scroll;
    }

    ul li{
        height:100%;
    }

    ul a{
        width:60px;
        height:60px;
        padding:0;
        border-radius:0;
        justify-content: center;
    }
        ul li span:last-child, ul li:first-child{
            display:none;
        }

        ul li.watermark{
            margin-top:0;
            margin-left:3em;
        }

    }

    .hours{
        max-width:100%;
    }

    .menus li.menu-item{
        grid-template-columns: 40px 1fr;
        grid-column: 1 / span 4;
        max-width:100%;
    }

    .directory-map{
        .svg{
            padding: 0;
        }
    
    }

    .map-key{
padding: min(2em, 10%);
    }

    .on-demand-wrapper{
        .small-btn{
            min-width:100%;
            justify-content: center;
        }
    }

}