@charset "UTF-8";
/* CSS Saltaire Menus */
 :root {
    /*Campus Design System*/
     --uc-dark-blue: #182B49;
     --uc-mid-blue: #00629B;
     --uc-light-blue: #00C6D7;
     --uc-yellow: #FFCD00;
     --uc-pink: #D462AD;
     --uc-light-beige: #F5F0E6;
     --uc-cool-gray: #747678;
     --uc-stone: #B6B1A9;
     --white: #ffffff;
}
/*main {
     width: 100%;
     max-width: 1200px;
     margin: 0px auto;
}
 */
/************************ TAB LAYOUT ************************/
    .tabs { margin: 4em 0em; }
    
    button.tab {
     overflow: hidden;
     /*border: 1px solid #ccc;
     background-color: inherit;*/
        background-color: var(--uc-light-beige);
        color: var(--uc-mid-blue);
     font-size: 1.1em;
     font-weight: bold;
      /*background-color: inherit;*/
      border: none;
      outline: none;
      cursor: pointer;
      padding: 1em 1.2em;
      margin-bottom: 0.5em;
      transition: 0.3s;
      border-radius: 0px;
    }
    button.tab:hover {
     background-color: var(--uc-mid-blue);
     color: var(--white);
    }
    button.tab.active {
     border-bottom: 2px solid var(--uc-mid-blue);
    }
    button.tab:focus {
     background-color: var(--uc-mid-blue);
     color: var(--white);
     border-bottom: none;
    }
    button.tab:focus-visible {
     outline: 2px solid var(--uc-mid-blue);
    }
    
    .tabcontent {
      /*display: none;*/
      padding: 1em 2em;
      /*border: 2px solid var( --uc-dark-blue);*/
      /*border-top: none;*/
    }
    
    
 [role="tabpanel"][hidden] {
     display: none;
}
/*.tabcontent.active {
     display: block;
}
 */
 
/**************************** 
       MENU LAYOUT 
 ****************************/
     .menu-group {
         margin-bottom: 2em;
         break-inside: avoid;
         page-break-inside: avoid;
        /* print safety */
    }

    /**********
      Headings
     **********/
    .menu-section h2 {color: var(--uc-dark-blue); margin-bottom: 0.1em; letter-spacing: 1.2px; font-size: 3em !important;}
    .menu-section .menu-cat {border-bottom: 2px solid var(--uc-light-beige) !important; padding-bottom: 0.5em; /*font-family: Teko-SemiBold, sans-serif;*/  font-family: Teko, sans-serif; text-transform: uppercase; font-size: 2em !important; letter-spacing: 1px; color: var(--uc-mid-blue);}
    .menu-section .item-title {/*font-family: Teko-SemiBold, sans-serif;*/ font-family: Teko, sans-serif; font-size: 1.4em; letter-spacing: 1.2px; margin-bottom: 0.1em; }
    .menu-category .menu-sub-cat {font-family: Teko, sans-serif; font-size: 1.2em; letter-spacing: 1.2px; font-weight: bold; text-transform: uppercase;}
    
    .menu-items {
         display: grid;
         gap: 1.25rem;
        /* mobile */
         grid-template-columns: 1fr;
    }
    
    /* tablet */
        @media (min-width: 640px) {
         .menu-items {
             grid-template-columns: repeat(2, 1fr);
        }
    }
    /* desktop */
        @media (min-width: 1024px) {
         .menu-items {
             grid-template-columns: repeat(3, 1fr);
        }
    }
    /* light structure (not design-heavy) */
    .menu-item {
         margin-bottom: 1em;
         padding: 1em;
    }
    .menu-pic {
         margin-bottom: 2em;
    }
    .menu-pic > img {
         width: 100%;
         max-width: 350px;
    }
    .menu-cat, .menu-sub-cat, .item-title {
         display: flex;
         justify-content: space-between;
         gap: 0.5em;
    }
    .price {
        white-space: nowrap;
        color: var(--uc-mid-blue);
        font-size: 0.8em;
    }
    .item-desc {font-size: 0.9em;}
    .note {
        font-size: 0.9em;
        font-style: italic;
        color: var(--uc-cool-gray);
    }
    .tags {
        margin-top: 0.2em;
    }
    .tag {
         display: inline-block;
         font-size: 1em;
         margin-right: 0.5em;
         padding: 0.2em 0.5em;
         /*background: #182B49;
         color: #ffffff;*/
    }
    /* Individual Tag Styles */
    .tag-vt {background-color: var(--uc-dark-blue); color: var(--white);}
    .tag-vg {background-color: var(--uc-mid-blue); color: var(--white);}
    .tag-gf {background-color: var(--uc-light-beige); color: var(--uc-dark-blue);}
    
    /*.tag:nth-child(2) {
         background-color: #00629B;
    }*/
 
 