/*------------------------------------------------------------------------------
  light / dark
------------------------------------------------------------------------------*/
html {
  --clr-fore: #c06;
  --done: #9999;
}
.light {
  --text: #333;
  --back: #eee;
  --fore: #fff;
  --over: #fffc;
  --clr-back: #fde;
}
.dark {
  --text: #ccc;
  --back: #111;
  --fore: #222;
  --over: #222c;
  --clr-back: #402;
}
/*------------------------------------------------------------------------------
  text
------------------------------------------------------------------------------*/
html {
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.2rem;
  line-height: 1.5;
}
p { margin: 1rem 0; }
h1, h2, h3, h4, h5, h6 {
  margin-top: 0pt;
  margin-bottom: 1rem;
  font-weight: bold;
}
h1 { font-size: 250%; }
h2 { font-size: 200%; }
h3 { font-size: 150%; }
a {
  text-decoration: none;
  color: inherit;
}
/*------------------------------------------------------------------------------
  layout
------------------------------------------------------------------------------*/
body {
  background: var(--back);
  color: var(--text);
}
div {
  box-sizing: border-box;
/*  border: 1pt dotted red;*/
}
.grid {
  width: 100%;
  max-width: 1500px;
  margin: auto;
  overflow: auto;
}
.cell { float: left; }
.full       { width: 100%; max-width: 1500px; }
.half       { width: 50%; }
.half-small { width: 40%; }
.half-large { width: 60%; }
.panel {
  background: var(--fore);
  margin: .5rem;
  padding: 2rem;
  border-radius: 1rem;
}
#nav .panel { padding: 1rem; }
.flex {
  display: flex;
  width: 100%;
}
/*------------------------------------------------------------------------------
  cards + responsive
------------------------------------------------------------------------------*/
.card-box {
  width: 25%;
  padding: .5rem;
  line-height: 0pt;
  aspect-ratio: 1;
}
.card,
.card > img,
.overlay {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 1rem;
}
.card {
  position: relative;
}
.overlay {
  visibility: hidden;
  position: absolute;
  top: 0pt;
  line-height: normal;
  padding: 2rem;
  align-content: center;
  text-align: center;
  color: var(--text);
  background: var(--over);
}
.card:hover .overlay {
  visibility: visible;
}
@media (max-width: 1000px) { .half, .half-small, .half-large { width: 100%; } }
@media (max-width: 1200px) { .card-box { width: 33.33%; } }
@media (max-width: 1000px) { .card-box { width: 50%; }  html { font-size: 85%; } }
@media (max-width:  667px) { .card-box { width: 100%; } html { font-size: 70%; } }
#title { padding-right: 1em; }
/*------------------------------------------------------------------------------
  icons
------------------------------------------------------------------------------*/
#tags {
  position: relative;
  top: 0pt;
}
.icon-box {
  background: var(--back);
  padding: .5rem;
  margin: .5rem;
  width: 3rem;
  border-radius: .5rem;
  display: inline-block;
  line-height: 1;
}
.icon { width: 100%; }
.breakfast   { background: #930; }
.snack       { background: #c60; }
.gluten-free { background: #fc0; }
.vegan       { background: #6c0; }
.vegetarian  { background: #0c9; }
.fish        { background: #09c; }
.dessert     { background: #c0c; }
#nav .icon-box:hover {
  background: var(--clr-back);
}
#nav .icon-box .icon {
  filter: brightness(0) invert(0.5);
}
#nav .icon-box:hover .icon {
  filter: none;
}
#image {
  float: right;
  border-radius: .5rem;
  max-width: 100%;
}
/*------------------------------------------------------------------------------
  tables
------------------------------------------------------------------------------*/
table {
  margin: 1rem 0rem;
  border-collapse: collapse;
}
td {
  padding: .25rem .5rem;
  vertical-align: top;
}
#tab-serv td {
  vertical-align: baseline;
}
#recipe td:nth-child(1) {
  text-align: right;
  white-space: nowrap;
}
/*------------------------------------------------------------------------------
  tooltips
------------------------------------------------------------------------------*/
.tip {
  position: relative;
}
.tip, .tiptext {
  padding: .5ex;
  border-radius: .5ex;
}
.tip .tiptext {
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 0pt;
  white-space: nowrap;
  background: inherit;
  display: none;
}
#tab-steps .tip:hover {
  background: var(--clr-back);
}
#tags .tip:hover {
  color: white;
}
.tip:hover .tiptext {
  display: block;
}
/*------------------------------------------------------------------------------
  inputs + interaction
------------------------------------------------------------------------------*/
button, input {
  font-size: 100%;
  padding: 1ex;
  background: var(--back);
  border: none;
  border-radius: .5rem;
  color: inherit;
}
#serv {
  width: 3em;
  margin-left: -.5rem;
}
#searchwrap {
  max-width: 30rem;
  padding: .5rem;
  flex-grow: 1;
  margin-left: auto;
}
#copy,
#searchbar {
  width: 100%;
  height: 3rem;
  box-sizing: border-box;
}
.rowclick tr.selected {
  color: var(--done);
  text-decoration: line-through;
}
a:hover,
input:hover {
  color: var(--clr-fore);;
}
button:hover,
.rowclick tr:hover {
  cursor: pointer;
  color: var(--clr-fore);
}
button:hover,
input:hover {
  background: var(--clr-back);
}
button:active {
  color: var(--clr-fore);
}