/* 
Davey - 5/13/2025
This is a default styling template for online ordering sites that I made to replace some older CSS code 

I have split the code up into sections:
1. Fonts
2. Top Bar
3. Bottom Bar
4. Menu Groups
5. Menu Group Placeholders
6. Catering Headings
7. Menu Items
8. Menu Item Page - Buttons
9. Menu Item Page - Misc

You can modify this to fit new ordering sites by swaping colors, removing parts and etc.
I will attempt to make this CSS as accessible as possible with comments, 
and im hoping that if we use this by default we can avoid the spaghetti code issue 

This is a tool that helps you change an image's color:
https://codepen.io/sosuke/pen/Pjoqqp

For example this is code I used in billysimsbbq

Code for setting image colors to #f4a52f
.button.button-positive:hover {
color: #000000;
}
.button.button-positive img {
filter: brightness(0) saturate(100%) invert(0%) sepia(2%) saturate(6%) hue-rotate(86deg) brightness(93%) contrast(100%);
}

*/

/*FONTS------------------------*/
/*NOTE: do NOT use absolute paths for font urls*/

/* 
Example of an adobe font

Instead of just including a single @import url, 
ive pasted to contents of the url link to the css document because Mark told me to lol.
(Something about not wanting to rely on a third party)
*/

/*FONTS------------------------*/
/*NOTE: do NOT use absolute paths for font urls*/

/* 
Example of an adobe font

Instead of just including a single @import url, 
ive pasted to contents of the url link to the css document because Mark told me to lol.
(Something about not wanting to rely on a third party)
*/

@import url("https://p.typekit.net/p.css?s=1&k=fnx6dqx&ht=tk&f=10306.10307.10308.10309&a=94857187&app=typekit&e=css"); 

@font-face {
  font-family: "Brandon Grotesque";
  src: url('fonts/brandon-grotesque-medium.woff2') format('woff2');
  font-weight: 500; /* Standard for Medium */
  font-style: normal;
}

/* 2. The Black (Extra Bold) Weight */
@font-face {
  font-family: "Brandon Grotesque";
  src: url('fonts/brandon-grotesque-black.woff2') format('woff2');
  font-weight: 900; /* Standard for Black/Heavy */
  font-style: normal;
}
.tk-livory {
  font-family: "livory", serif;
}

/* Example of a google font downloaded to our font libary */
@font-face {
    font-family: "Montserrat";
  src: url(../../css/fonts/montserrat/static/Montserrat-Regular.ttf)
  }

@font-face {
  font-family: OpenSans;
  src: url(../../css/fonts/opensans/static/OpenSans/OpenSans-Regular.ttf);
}

/*----------END OF FONTS----------*/

/* All text that isnt being styled */
body {
  font-family: "Montserrat", sans-serif;
  color: #414d41;
  letter-spacing: 0.5px;
}

/* Site accents */
.positive {
  color: #919992;
}

/* Code for aligning homepage */
#splash {
  text-align: center;
}
/* */

/* Code for input fields - I.E. quantity num or text in the styling editor */
/* (Note: as of 11/22/24 !important is required to overide a hard-coded color value when adding a menu item*/
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {
  color: #919992 !important;
}
/* */

/* Code for the background of the site */
.customer-template{
    background-color: #ffffff;
}
/*TOP BAR-------------------------------------*/

/*Code for top bar*/
.bar.bar-dark {
  background-color: #414d41;
  border-color: #414d41;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/*Code for titles on top bar*/
.bar.bar-dark .title {
  font-weight: 900;
  font-size: 22px;
  font-family: "Brandon Grotesque", sans-serif;
  color: #C8CDC8;
}

/*Code for back button on header (when you click into a menu item)*/
.bar-dark .button.button-clear {
  font-weight: 600;
  font-size: 22px;
  font-family: "Brandon Grotesque", sans-serif;
  color: #C8CDC8;
}

/* Code for the arrow on the top bar*/
.icon.ion-ios-arrow-back {
  font-weight: 700;
  font-size: 22px;
  font-family: "Brandon Grotesque", sans-serif;
  color: #C8CDC8;
}

/* Code for the Top bar Menu Text next to the arrow*/
.back-text {
  font-weight: 700;
  font-size: 22px;
  font-family: "Brandon Grotesque", sans-serif;
  color: #C8CDC8;
}

/*Code for shopping cart button on header*/
.bar-dark .button.button-icon {
  /*insert color if needed*/
  color: #C8CDC8;
}
/*----------*/

/*BOTTOM BAR----------------------------------*/

/*Code for bottom bar*/
.tabs-striped.tabs-dark .tabs {
  background-color: #414d41;
  border-top: none;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  height: 60px; /*controls how tall the bottom bar is*/
}

/*Tabs font size*/
.tabs-icon-top > .tabs .tab-item {
  font-size: 12px;
  line-height: 24px; /*how close to the image the text is*/
}

/*Code for bottom bar tabs*/
.tab-item .icon {
  color: #C8CDC8;
}

/*Code for bottom bar tabs border when active*/
.tab-item.tab-item-active {
  border-color: #C8CDC8 !important;
}

/* Icon turns to a color on hover */
/* .tab-item:hover .icon {
    color: #f40000;
  } */

/* Text turns to a color on hover */
/* .tab-item:hover {
    color: #f40000 !important;
  } */

/*Code for font color for bottom bar tabs*/
.tabs-striped.tabs-dark .tab-item.tab-item-active {
  color: #C8CDC8;
}
.tabs .tab-item {
  color: #C8CDC8 !important;
}
/*----------*/

/*MENU GROUPS----------------------------------------*/

/*Code for menu boxes*/
.MenuGroup {
  background-color: #414d41 ;
  /* border-width: 5px;
  border-style: solid;
  border-color: rgb(131, 0, 0); */
}

/*Code for menu group names*/
.menu-group-name {
  font-weight: 900;
  font-size: 22px;
  font-family: "Brandon Grotesque", sans-serif;
  color: #C8CDC8;
  
}

/*Code for menu group descprtions*/
.menu-group-description {
  color: #C8CDC8;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  padding-top: 5px;
  font-weight: 400;
}

/*Code for arrow on menu box(if icon is wrong try .menu-group-box)*/
.menu-group-icon {
  /* color: rgb(131, 0, 0); */
  color:#C8CDC8
}
/*----------*/

/*MENU PLACEHOLDERS---------------------------------*/

/* Placeholders are the headers things, we use them to order and seperate menu groups */

/*Code for menu group placeholder title and etc*/
.menuGroupPlaceholder {
  color: #C8CDC8;
  font-family: "Brandon Grotesque", sans-serif;
  font-size: 22px;
  text-underline-offset: 8px;
  background-color: #414d41;
  font-weight: 900;
}

/*text-shadow: #000000 1px 1px 0px, #000000 -2px -2px 0px, #000000 -2px 2px 0px, #000000 2px -2px 0px;*/
/*Code for menu group placeholder descriptions*/
.menu-group-placeholder-description {
  color: #C8CDC8;
  font-size: 14px;
  font-family: "Montserrat", sans-serif;
  padding-top: 5px;
}

/* Bad solution for dividers inside of a menugroup
/*this code applies the font color*/
.MenuItem-placeholder .ng-binding {
  color: #919992;
}
/*this code applies the background*/
.MenuItem-placeholder {
  background-color: #C8CDC8;
  font-family: "Brandon Grotesque", sans-serif;
  font-weight: 900;
}
/* */
/*----------*/

/*CATERING HEADINGS---------------------------------*/
/*Sometimes this and placeholders are used interchangeably depending on how old of a site*/

/* Applies colors and spacing */
.menu-instructions {
  background-color: #C8CDC8;
  color: #414d41;
  font-size: 22px;
  padding-top: 15px;
  margin-bottom: 20px;
}

/* This is the code for the main header/title */
.menu-instructions-hind-upper {
  font-family: "Brandon Grotesque", sans-serif;
  color: #414d41;
  font-size: 18px;
  font-weight: 900;
}

/* This is the code for the body text */
.menu-instructions-body {
  font-family: "Montserrat", sans-serif;
  color: #414d41;
  font-size: 16px;
}

/*----------*/

/*MENU ITEM-----------------------------------------*/

/*Code for menu item name*/
.menuItemName {
  font-weight: 900;
  font-size: 17px;
  font-family: "Brandon Grotesque", sans-serif;
  color: #414d41;
}

/*Code for menu item description*/
.MenuItemDescription {
  font-weight: 400;
  font-size: 15px !important; /*(Note: default styling overides font-size, creating a need for !important)*/
  padding-top: 10px;
  padding-bottom: 10px;
  font-family: "Montserrat", sans-serif;
}

/*Code for menu item cost*/
.menu-item-cost {
  font-weight: 600;
  font-size: 17px;
  color: #414d41;
}
/*----------*/

/*MENU ITEM PAGES - BUTTONS-----------------------------*/

/*Code for ASSERTIVE buttons*/
.button.button-assertive {
  background-color: #414d41;
  color: #C8CDC8;
  font-size: 14px;
}
/*When activated*/
.button.button-assertive.activated {
  background-color: #697e69; /*different for effect*/
  color: #C8CDC8;
}
/* */

/*Code for ASSERTIVE OUTLINE buttons*/
.button.button-assertive.button-outline {
  border-color: #414d41;
  color: #414d41;
}
/*When activated*/
.button.button-assertive.button-outline.activated {
  background-color: #697e69;
  color: #C8CDC8;
}
/* */

/*Code for BALANCED buttons*/
.button.button-balanced {
  background-color: #697e69;
}
/*When activated*/
.button.button-balanced.activated {
  background-color: #414d41; /*different for effect*/
  color: #C8CDC8;
}
/* */

/*Code for BALANCED OUTLINE buttons*/
.button.button-balanced.button-outline {
  border-color: #697e69;
  color: #697e69;
}
/*When activated*/
.button.button-balanced.button-outline.activated {
  background-color: #697e69;
  color: #C8CDC8;
}
/* */

/*Code for POSITIVE buttons*/
.button.button-positive {
  background-color: #414d41;
}
/*When activated*/
.button.button-positive.activated {
  background-color: #697e69 ; /*different for effect*/
  color: #C8CDC8;
}
/* */

/*Code for POSITIVE OUTLINE buttons*/
.button.button-positive.button-outline {
  border-color: #414d41;
  color: #414d41;
}
/*When activated*/
.button.button-positive.button-outline.activated {
  background-color: #697e69;
  color: #C8CDC8;
}
/* */
/*----------*/

/*MENU ITEM PAGES - MISC-----------------------------*/

/*Code for CHECKBOX before selected*/
.checkbox-square .checkbox-icon:before {
  border-color: #414d41;
}
/*After selected*/
.checkbox input:checked + .checkbox-icon:before {
  border-color: #414d41;
  background: #414d41;
}
/* */

/*NO YES XTRA Buttons*/
.button.button-small.button-stable.button-positive {
  background-color: #414d41;
  color: #C8CDC8;
  border-color: #414d41;
}
/* */

/*Code for RADIO BUTTON before selected*/
/* (Note: as of 11/20/24 !important is necessary to overide a !important in the inoic styling) */
.radio-positive .radio-icon:before {
  border-color: #414d41 !important;
}
/*After selected (the little dot in the middle)*/
/* (Note: as of 11/20/24 !important is necessary to overide a !important in the inoic styling) */
.radio-positive .radio-icon:after {
  background: #414d41 !important;
}
.item-radio input:checked + .radio-content .radio-icon:after {
  -webkit-transform: scale(1);
  transform: scale(1);
}
/* */

/*Code for WHOLE and HALF when selected*/
.circle-positive {
  border-color: #414d41;
  background: #414d41;
}
/*Not selected*/
.circle-negative {
  border-color: #414d41;
}
/* */
/*----------*/