@import './fonts.css';
@import './reset.css';

body {
  font-size: 12px;
  line-height: 1.15;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.3;
}

.theme {
  background-color: #111316;
  color: #ddd;
}

@media (prefers-color-scheme: dark) {
  .theme {
    background-color: #111316;
    color: #ddd;
  }
}

@media (prefers-color-scheme: light) {
  .theme {
    background-color: white;
    color: black;
  }
}

.darkTheme {
  background-color: #111316;
  color: #ddd;
}

.lightTheme {
  background-color: white;
  color: black;
}

.bold {
  font-weight: 700;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-block-start: 20px;
  margin-block-end: 50px;
}

.header__logo {
  width: 300px;
}

@media (prefers-color-scheme: dark) {
  .header__logo {
    filter: brightness(0) invert(1);
  }
}

.darkTheme .header__logo {
  filter: brightness(0) invert(1);
}

.lightTheme .header__logo {
  filter: none;
}

.header > .header__title {
  text-transform: uppercase;
  letter-spacing: 10px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  margin-block-start: 5px;
  margin-block-end: 10px;
}

.header > .header__controls {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 20px;
  align-items: center;
}

.header > .header__controls > .mode {
  cursor: pointer;
}

.header > .header__controls > .mode > img {
  width: 20px;
}

@media (prefers-color-scheme: dark) {
  .header > .header__controls > .mode > img {
    filter: brightness(0) invert(1);
  }
}

.darkTheme .header > .header__controls > .mode > img {
  filter: brightness(0) invert(1);
}

.lightTheme .header > .header__controls > .mode > img {
  filter: none;
}

.container,
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 95%;
  max-width: 650px;
  margin-block-end: 50px;
  margin-inline: auto;
  gap: 30px;
}

.container > .category {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.container > .category > .category__title,
.footer > .footer__allergens > .footer__allergens__title {
  text-transform: uppercase;
  letter-spacing: 10px;
  text-align: center;
  font-size: 16px;
}

.container > .category > .category__items > .item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 7px;
}

.container
  > .category
  > .category__items
  > .item:not(.container > .category > .category__items > .item:last-of-type) {
  border-bottom: 1px dashed #ddd;
}

@media (prefers-color-scheme: dark) {
  .container
    > .category
    > .category__items
    > .item:not(.container > .category > .category__items > .item:last-of-type) {
    border-bottom: 1px dashed #333;
  }
}

.darkTheme
  .container
  > .category
  > .category__items
  > .item:not(.container > .category > .category__items > .item:last-of-type) {
  border-bottom: 1px dashed #333;
}

.lightTheme
  .container
  > .category
  > .category__items
  > .item:not(.container > .category > .category__items > .item:last-of-type) {
  border-bottom: 1px dashed #ddd;
}

.container > .category > .category__items > .item > .row {
  display: flex;
  flex-wrap: nowrap;
}

.container > .category > .category__items > .item > .row > .item__title {
  font-size: 14px;
  font-weight: 700;
  flex: 1;
  padding-inline-end: 12px;
}

.container > .category > .category__items > .item > .row > .item__price {
  font-size: 14px;
  font-weight: 700;
}

.container > .category > .category__items > .item > .row > .item__allergens,
.container > .category > .category__items > .item > .row > .item__description {
  font-style: italic;
  color: #999;
  margin-inline-end: 6px;
}

.container
  > .category
  > .category__items
  > .item
  > .row
  > .item__allergens
  > span:not(.container
    > .category
    > .category__items
    > .item
    > .row
    > .item__allergens
    > span:last-of-type)::after {
  content: ',';
}

.footer > .footer__allergens {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer > .footer__allergens > .footer__allergens__list > span {
  margin-inline-end: 6px;
}

.footer > .footer__logo {
  background-color: white;
}

.footer > .footer__logo > img {
  width: 70px;
  margin: 10px;
}

.footer > .footer__pdf {
  cursor: pointer;
}

.footer > .footer__pdf:hover {
  text-decoration: underline;
}

.notFound {
  justify-content: center;
  flex: 1;
  text-align: center;
}

.notFound > .notFound__title {
  font-size: 24px;
  text-transform: uppercase;
  max-width: 500px;
}

.notFound > .notFound__link {
  font-size: 16px;
}