/*!
Theme Name: HS Food Menu
Theme URI: http://underscores.me/
Author: Olivier Kamgue Dacmeta
Author URI: http://okdacmeta.pro
Description: Theme Menu Restaurattion Hôtel SAWA
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: hsfoodmenu
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

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

HS Food Menu is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/* reset and base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --h-header: 106px;
  --h-footer: 30px;
  --bg-page: #ebe7e7;
  --color-primary: #123e55;
  --color-yellow: #fcb900;
  --color-white: #fff;
  /*--border-menu: */
}
.showmenu {
  display: none;
}

/* -------------------------------------------------------------
*****************************************************************
FRONT PAGE
---------------------------------------------------------------- */
.frontpage {
  background-color: var(--bg-page);
  border-top: 10px solid white;
}
.frontpage header {
  color: var(--color-white);
  background-color: var(--color-primary);
  min-height: var(--h-header);
  padding: 0.2rem 0.8rem;
}
.frontpage header .site-branding {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.frontpage header .site-branding h1 {
  margin-right: 0.1em;
}

.frontpage header .site-branding .menucard {
  text-align: right;
}
.frontpage header .site-branding .menucard h3 {
  padding: 0.1em 1em;
  margin-bottom: 0.1em;
}
.frontpage header .site-branding .menucard .fr {
  color: var(--color-white);
  background-color: var(--color-yellow);
}
.frontpage header .site-branding .menucard .en {
  color: var(--color-yellow);
}
.frontpage main {
  margin-top: var(--h-header);
  min-height: 70vh;
}
.frontpage main nav ul {
  list-style: none;
  padding: 1.5em;
  display: block;
}
.frontpage main nav ul li {
  width: 100%;
  height: 4rem;
  margin-bottom: 2em;
  background-color: var(--color-white);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5em;
}
.frontpage main nav ul li a {
  text-decoration: none;
  color: var(--color-primary);
  font-size: xx-large;
  font-weight: 100;
}

.frontpage main nav ul li:hover {
  background-color: var(--color-primary);
}
.frontpage main nav ul li:hover a {
  color: var(--color-white);
}

/* ---   Medium devices (tablets, 768px and up) ----------------*/
@media (min-width: 768px) {
  .frontpage header .site-branding {
    justify-content: space-evenly;
  }
  .frontpage header .site-branding h1 {
    margin-right: 1.1em;
  }
}

/* ---   X-Large devices (large desktops, 1200px and up)----------------*/
@media (min-width: 992px) {
  .frontpage header .site-branding {
    justify-content: start;
  }
}

/* -------------------------------------------------------------
******************************************************************
FOOD MENU PAGE
---------------------------------------------------------------- */
.foodpage {
  background-color: var(--color-white);
  border-top: 10px solid white;
}
.foodpage header {
  color: var(--color-white);
  background-color: var(--color-primary);
  min-height: var(--h-header);
  padding: 0.2rem 0.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.foodpage header .bandeau {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.foodpage header .bandeau .btnmenu {
  height: 40px;
  width: 40px;
  display: block;
}
.foodpage header .bandeau .btnmenu:hover {
  background-color: var(--color-yellow);
}
.foodpage header .bandeau .btnmenu div {
  width: 35px;
  height: 5px;
  background-color: var(--color-primary);
  margin: 6px 0;
}
.foodpage header .bandeau .btnmenu:hover div {
  background-color: var(--color-white);
}

.foodpage header .site-branding {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.foodpage header .site-branding h1 {
  margin-right: 0.1em;
}
.foodpage header .menucard {
  display: flex;
  flex-direction: column;
}
.foodpage header .menucard h3 {
  text-align: right;
  align-items: center;
  padding: 0.2em;
}
.foodpage header .menucard .en {
  color: var(--color-yellow);
}
.foodpage header .menucard .fr {
  color: var(--color-primary);
  background-color: var(--color-yellow);
}
.foodpage header nav {
  width: 100%;
}
.foodpage header nav ul {
  list-style: none;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.foodpage header nav ul li {
  width: 100%;
  margin: 0.1rem 0;
  background-color: var(--color-white);
  padding: 0.2em 0.1rem;
}
.foodpage header nav ul li a {
  width: 100%;
  text-decoration: none;
  color: var(--color-primary);
}
.foodpage header nav ul li:hover {
  background-color: var(--color-yellow);
}
.foodpage header nav ul li:hover a {
  color: var(--color-white);
}

/* .foodpage header nav {
    display: block;
} */
/* ---   Medium devices (tablets, 768px and up) ----------------*/
@media (min-width: 768px) {
  .foodpage header .site-branding {
    justify-content: space-evenly;
  }
  .foodpage header .site-branding h1 {
    margin-right: 1.1em;
  }
}
/* ---   X-Large devices (large desktops, 1200px and up)----------------*/
@media (min-width: 992px) {
  .foodpage header {
    flex-direction: row;
    justify-content: space-between;
  }
  .foodpage header .bandeau .btnmenu {
    display: none;
  }
  .foodpage header .site-branding {
    justify-content: start;
  }
  .foodpage header nav {
    display: block;
  }

  .foodpage header nav ul {
    flex-direction: row;
    justify-content: flex-end;
  }
  .foodpage header nav ul li {
    width: auto;
    margin: 0 0 0 0.8rem;
    padding: 0.8em 0.6rem;
  }
}

/* -------------------------------------------------------------
******************************************************************
CONTENT
---------------------------------------------------------------- */

main {
  margin-top: 110px;
  min-height: calc(80vh - var(--h-header));
}
main .container {
  width: 95%;
  margin: 0.5rem auto;
  display: block;
}
.entry-content h1 {
    text-align: center;
    font-weight: 500;
    font-size:xx-large;
    margin: 2rem;
    color: var(--color-primary);
}
.entry-content h2 {
    color: var(--color-white);
    width: auto;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-style: italic;
    text-align: center;
    margin: 1rem;
    padding: 5px;
	border-radius: 5px;
    background-color: var(--color-yellow);
}
.entry-content hr {
    color: var(--color-yellow);
}

/* ----- footer --- */
footer {
  height: var(--h-footer);
  background-color: var(--color-primary);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em 0;
}