/*
Theme Name: Tony Xing Theme
Theme URI: (add the URL of your theme on GitHub) 
Author: Tony Xing
Author URI: https://tonyxing.graphicandwebdesign.ca
Description: Student learning theme
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: Basic, simple, minimal 
Text Domain: tonyxingtheme (same as theme name, no spaces, no capitals)

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/


/* COLOR PALETTE */

:root {
    --black: #070B0D;
    --light-beige: #F0F3DA;
    --faded-green: #97B690;
    --dark-green:  #486C59;
    --deep-brown: #593E34;

  }
  
/* END COLOR PALETTE */

/* TRANSFONTER FONTS */
@font-face {
  font-family: 'Voga';
  src: url('font/Voga-Medium.eot');
  src: local('Voga Medium'), local('Voga-Medium'),
      url('font/Voga-Medium.woff2') format('woff2'),
      url('font/Voga-Medium.woff') format('woff'),
      url('font/Voga-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fira Sans';
  src: url('font/FiraSans-Medium.eot');
  src: local('Fira Sans Medium'), local('FiraSans-Medium'),
      url('font/FiraSans-Medium.woff2') format('woff2'),
      url('font/FiraSans-Medium.woff') format('woff'),
      url('font/FiraSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fira Sans';
  src: url('font/FiraSans-Light.eot');
  src: local('Fira Sans Light'), local('FiraSans-Light'),
      url('font/FiraSans-Light.woff2') format('woff2'),
      url('font/FiraSans-Light.woff') format('woff'),
      url('font/FiraSans-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* END OF ADDED FONT */


/* Aditional CSS to facilitate*/

/*
OLD SCHOOL IMAGE REPLACEMENT TECHNIQUE
.HIDE-TEXT FOR IMAGE REPLACEMENTS
SEE: HTTP://WWW.ZELDMAN.COM/2012/03/01/REPLACING-THE-9999PX-HACK-NEW-IMAGE-REPLACEMENT/
*/
.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

button.button.hide-text:active {
  background-color: #C5BFBC;
}

#menu.show-nav {
  display: block !important;
}

/* ==================  EXAMPLE TYPOGRAPHIC SCALE ============================= */

h1 { font-size: 3.6rem; }
h2 { font-size: 2.9977rem; }
h3 { font-size: 2.4961rem; }
h4 { font-size: 2.0785rem; }
h5 { font-size: 1.7307rem; }
h6 { font-size: 1.4411rem; }
p, li { font-size: 1.2rem; }
footer { font-size: .9992rem; }

/* ==================  END EXAMPLE TYPOGRAPHIC SCALE ============================= */




h1, h2, h3, h4, h5, h6 {
  color: #486C59;
  margin: 10px;
  margin-left: 10px;
  font-family: 'Voga Medium';
}

h1 {
  margin-top: 80px;
}

h2 {
  margin-bottom: 1.5rem;
}

p {
  font-family: 'Fira Sans Light';
  color: #486C59;
}

.sidebar li{
  list-style: none;
}


p, li {
  line-height: 1.4;
}

header li, footer li { 
  display: inline-block;

}

header {
  background-color: var(--light-beige);
}

header a:link {
  font-family: 'Fira Sans Light';
  color: var(--dark-green);
  text-decoration: none;
}

header a:visited {
  color: var(--dark-green);
  text-decoration: none;
}

header a:hover {
  color: var(--light-beige);
  background-color: var(--dark-green);
  text-decoration: none;
}

header a:active {
  color: var(--light-beige);
  text-decoration: none;
}

aside { 
  left: 0;
}

.wrapper {
  display: flex;
  justify-content: space-between;
}

/* Responsive Image*/

main > figure.wp-block-image {
  max-width: 966px;
  height: auto;
  margin: 1rem 1rem 3rem 1rem;
}

.custom-logo {
  width: 64px;
  height: 64px;
  margin: 8px 0;
}


/*Contact*/

/*Social Media Sprites*/

#menu-social li{
  width:40px;
  height: 40px;
}

#menu-social li a{
  width: 100%;
  height: 100%;
  display: block;
  background-repeat: no-repeat;
  background-size: contain;background-blend-mode: screen;
}

/*
#menu-social li a:link{
  background-color: var(--deep-brown);
}

#menu-social li a:visited{
  background-color: var(--brown-beige);
}

#menu-social li a:hover{
  background-color: var(--red-brown);
}

#menu-social li a:active{
  background-color: var(--deep-brown);
}
*/

#menu-social li.facebook a {
  background-image: url("img/Social-Media.svg");
  background-size: 140px;
  background-position: 0px 0px;
}

#menu-social li.instagram a {
  background-image: url("img/Social-Media.svg");
  background-size: 140px;
  background-position: -32px 0px;
}

#menu-social li.linkedin a {
  background-image: url("img/Social-Media.svg");
  background-size: 140px;
  background-position: -72px 0px;
}

/*MAIN CONTENT CSS*/

#menu {
  font-family: Koulen;
}

#menu li {
  font-size: 18pt;
}

.promotion {
  display: inline-block;
}

.promo {
  float: left;
  margin: 2.5%;
}

.food-type{
  width: 100%;
  display: inline-block;
  margin-top: 30px;
}

.coffee_menu {
  float: left;
  padding: 3%;
  margin: 2%;
  height: auto;
  background-color: var(--deep-brown);
  border: 20px solid;
  border-radius: 3px;
  border-style: outset;
  border-color: var(--red-brown);
}

.extra-menu {
  width: 100%;
  height: auto;
  background-color: var(--deep-brown);
  border: 20px solid;
  border-radius: 3px;
  border-style: outset;
  border-color: var(--red-brown);
}

.coffee_items {
  height:auto;
  margin: 2%;
}

.item {
  width: 50%;
  float: left;
}

.price {
  width: 50%;
  float: left;
}

.games {
  width: 100%;
  display: inline-block;
}

#item_menu {
  display: inline-block;
}

.game_menu {
  padding: 3%;
  margin: 2%;
  height: auto;
  background-color: var(--deep-brown);
  border: 20px solid;
  border-radius: 3px;
  border-style: outset;
  border-color: var(--red-brown);
}

footer {
  background-color: var(--light-beige);
}

footer::before {
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(img/Footer.svg);
}

footer a:link {
  font-family: 'Fira Sans Light';
  font-size: 18pt;
  color: var(--dark-green);
  text-decoration: none;
}

footer a:visited {
  color: var(--dark-green);
  text-decoration: none;
}

footer a:hover {
  color: var(--light-beige);
  background-color: var(--dark-green);
  text-decoration: none;
}

footer a:active {
  color: var(--dark-green);
  text-decoration: none;
}

footer p {
  display: block;
  width: 50%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  color: var(--dark-green);
}

.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 #01305e;
  transition: 0.3s;
  padding: 10px;
  background-color: #b8c4d1;
  ;
}

.features li {
  font-family: 'Titillium Web';
  color: #dae3f2;
	list-style-image: url("img/Unordered-List.png");
	line-height: 24px;
}

#phone a:link {
  text-decoration: none;
  color: #dae3f2;
}

.donate a:link{
  border-radius: 10px;
  background-color: var(--dark-green);
  color: var(--light-beige);
  font-family: 'FiraSans-Medium';
  font-size:20pt;
}

.donate a:hover{
  color: var(--light-beige);
}

.donate a:active{
  background-color: var(--faded-green);
  color: var(--light-beige);
}

.donate a:visited{
  background-color: var(--dark-green);
  color: var(--light-beige);
}

caption {
  font-family: 'Stormfaze';
  font-size: 14pt;
  margin-bottom: 10px;
}

tr {
  font-family: 'Titillium Web';
}


#genesis-logo img{
  width: 10%;
  height: 10%;
  float: left;
  display: block;
}


/* LAPTOPS AND DESKTOPS CAN BE REGULAR OR RETINA DISPLAY  */

.main-container {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  margin: 2em auto;
}


@media (min-width:320px) and (max-width:768px){
  h1 { font-size: 24pt; }
  h2 { font-size: 18pt; }

  #mission{
    background-image: url(img/Missions_and_Values.jpg>);
    background-repeat: no-repeat;
    background-size: cover;
  }

  header, main, nav, aside, footer{
    padding: 10px;
    margin: 10px;
  }

  ul, ol {
    margin: 0;
    padding: 0px
  }

  nav {
    background-color: var(--light-beige);
  }

  .main-container {
    width: 100%;
    margin: 3em auto;  
  }   
  
  #menu li {
    display: block;
  }

  #menu-container li a{
    padding: 5px;
    display: block;
    width:100%;
  }

  .footer-nav li {
    margin: 5px;
    display: block;
  }

  .footer-nav li a{
    padding: 5px;
    display: block;
    width:100%;
  }

  .promo {
    width: 90%;
  }

  .promo img {
    margin-bottom: 15px;
  }

  .coffee_menu {
    width: 75%;
  }
  .game_menu {
    width:75%;
  }

  footer::before {
    content: "";
    margin-top: -26.5px;
    margin-left: -10px;
    width: calc(100% - 36px);
    height: 17px;
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(img/Footer.svg);
  }

  header::after {
    content: "";
    margin-top: 9px;
    margin-left: -10.1px;
    width: calc(100% - 36px);
    height: 50px;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(img/Header.svg);
    position: absolute;
  }

  iframe {
    width: 100%;
  }
}
  
@media (min-width: 768px) and (max-width:1024px){

  #mission{
    background-image: url(img/Missions_and_Values.jpg>);
    background-repeat: no-repeat;
    background-size: cover;
  }

  h1 { font-size: 36pt; }
  h2 { font-size: 24pt; }

  .playhouse-home{
    background-image: url(img/Main-Background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  }


  .main-container {
    width: 600px;  
  }  

  header, nav, aside, footer{
    padding: 10px;
    margin: 10px;
  }

  .footer-nav li a{
    padding: 5px;
    display: block;
    width:100%;
  }
 
  footer::before {
    content: "";
    margin-top: -33px;
    margin-left: -10px;
    width: 580px;
    height: 25px;
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(img/Footer.svg);
  }

  header::after {
    content: "";
    margin-top: 9px;
    margin-left: -10px;
    width: 580px;
    height: 50px;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(img/Header.svg);
    position: absolute;
  }

  }

  
  @media (min-width: 1024px) and (max-width:1280px){

    #mission{
      background-image: url(img/Missions_and_Values.jpg>);
      background-repeat: no-repeat;
      background-size: cover;
    }

    h1 { font-size: 43.2pt; }
    h2 { font-size: 36pt; }

    header, aside, footer {
      padding: 1rem;
      margin: 1rem;
    }
    
    ul, ol {
      margin-left: 2rem;
    }

    .main-container {
      width: 900px;  
    }  

    #menu li {
      margin: 5px;
      display: inline-block;
    }


    .footer-nav li {
      margin: 5px;
      display: inline-block;
    }
  
    .promo {
      width: 80%;
    }
    .coffee_menu {
     width: 30%;
     }

     #menu {
      display: inline-block;
     }
     .game_menu {
      float: left;
      width:30%
    }

    footer::before {
      content: "";
      margin-top: -40px;
      margin-left: -16px;
      width: 868px;
      height: 25px;
      position: absolute;
      background-repeat: no-repeat;
      background-size: cover;
      background-image: url(img/Footer.svg);
    }
    
    header::after {
      content: "";
      margin-top: 16px;
      margin-left: -16px;
      width: 868px;
      height: 50px;
      background-repeat: no-repeat;
      background-size: cover;
      background-image: url(img/Header.svg);
      position: absolute;
    }
}

@media (min-width: 1280px) {

  #mission {
    background-image: url(img/Missions_and_Values.jpg>);
    background-repeat: no-repeat;
    background-size: cover;
  }

  h1 { font-size: 43.2pt; }
  h2 { font-size: 36pt; }

  .playhouse-home{
    background-image: url(img/Main-Background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  }


  header, aside, footer {
    padding: 1rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }

  header {
    margin-bottom: 150px;
  }

  footer {
    margin-top: 150px;
  }

  .main-container {
    width: 1200px;  
  }  
  .promo {
    width:28%;
  }

  footer::before {
    content: "";
    margin-top: -65px;
    margin-left: -15px;
    width: 1167px;
    height: 50px;
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(img/Footer.svg);
  }

  header::after {
    content: "";
    margin-top: 16px;
    margin-left: -16px;
    width: 1168px;
    height: 50px;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(img/Header.svg);
    position: absolute;
  }
}

.sub-menu ul ul {
  display: none !important;
}

.sub-menu li {
  position: relative !important;
}

.sub-menu ul li:hover > ul {
  display: block !important;
}