@font-face {
  font-family: "HAKAZA";
  src:
    url("assets/hakaza/woff2/HAKAZA.woff2") format("woff2"),
    url("assets/hakaza/woff/HAKAZA.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  font-family: "HAKAZA", sans-serif;
  line-height: 1.7;
  font-weight: 400;
  --surface: #ffffff;
  --surface-muted: #e3efe6;
  --text: #1c2b24;
  --text-muted: #371d00;
  --accent: hsl(41.04, 49.81%, 35.04%);
  --accent-dark: #24402d;
  --accent-light: #9cb8ad;
  --menu-category-foreground: rgb(121, 74, 7);
  --earth: #d8c0a1;
  --sea: #2d5061;
  --stroke: white;
  --stroke-strong: rgba(59, 107, 75, 0.45);
  --outline-accent: rgba(156, 184, 173, 0.55);
  --shadow-accent-soft: rgba(36, 64, 45, 0.12);
  --shadow-accent-strong: rgba(36, 64, 45, 0.35);
  --sticky-header-gap: clamp(0.75rem, 2vw, 1.25rem);
  --site-header-height: 8rem;
  background-color: var(--surface-muted);
  color: var(--text);
  --content-max-width: 60rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.site-header {
  --grass-ground-level: 60%;
  --brown-ground-level: 90%;
  padding: 2rem 2rem 1rem 2rem;
    background-color: color(display-p3 0.995 0.975 0.93);

}


body {
  margin: 0;
  min-height: 100vh;
  overflow-y: scroll;
  background-color: white;
}

body>* {
  margin-inline: auto;
}


#lare-logo-container {
background-image: url("./assets/lare.webp");
background-size: 80%;
background-position: center;
background-repeat: no-repeat;
width: 13rem;
aspect-ratio: 2;
margin: auto;
margin-bottom: 2rem;
height: 8rem;
}

.site-title {
  margin: 0;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
}

.site-description {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  max-width: 520px;
}

.category-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: transparent;
  backdrop-filter: none;
  transition: background 0.5s ease-in, backdrop-filter 0.5s ease-in;
  box-shadow: 0 -23pt 50px -20px rgba(0, 0, 0, 0.25);
}

.menu-board-border-bottom, .category-nav  {
  background-image: url(assets/wood.webp);
  background-size: cover;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}



.category-nav__scroller {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  justify-content: center;
  scroll-padding-inline: 0.75rem;
}

.category-nav__scroller::-webkit-scrollbar {
  height: 6px;
}

.category-nav__scroller::-webkit-scrollbar-thumb {
  background: var(--stroke-strong);
  border-radius: 999px;
}

.category-pill {
  border: 2pt solid white;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  padding: 0.4rem 1.1rem;
  font-family: inherit;
  font-size: 1.1rem;
  color: var(--text);
  cursor: pointer;
  transition: 0.2s ease;
  flex-shrink: 0;
}

.category-pill:hover {
  border-color: rgb(234, 200, 146);
}

.category-pill.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.menu-board {
  padding: 2rem clamp(1rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background-image: url(assets/pattern.jpg);
  background-position: top center;
  width: 100%;
  box-sizing: border-box;
}

.menu-category {
  background: var(--surface);
  padding: 1.75rem;
  scroll-margin-top: calc(var(--site-header-height) + (var(--sticky-header-gap) * 2));
  box-shadow: 4pt 4pt 6pt -6pt rgb(0, 65, 39);
  background: #fff9ed;
  color: var(--menu-category-foreground);
  box-sizing: border-box;
  width: min(100%, var(--content-max-width));
  margin: auto;
}

.menu-category__header {
  display: flex;
  flex-direction: row;
  gap: 0rem;
  margin-bottom: 1rem;
  color: var(--menu-category-foreground);
  align-items: end;
}

.menu-category__header h2 {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 2.2rem);
  color: var(--menu-category-foreground);
}

.menu-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-auto-flow: row dense;
  gap: 1rem;
  max-width: 100%;
  color: var(--menu-category-foreground);
}

@media (min-width: 721px) {
  .menu-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.menu-item {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.category-icon {
  --category-icon-size: 4rem;
  width: var(--category-icon-size);
  height: var(--category-icon-size);
  background-image: url("/assets/flowerbox.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.menu-item__header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}

.menu-item__name {
  margin: 0.1rem 0 0 0;
  font-size: 1.3rem;
}

.menu-item__price {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.95rem;
  white-space: nowrap;
}

.menu-item__ingredients {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

footer {
  padding: 4rem 0rem;
  background-color: color(display-p3 0.995 0.975 0.93);
  box-shadow: inset 0 23pt 50px -20px rgba(0, 0, 0, 0.25);
}

.makers-images {
  width: 100%;
  height: 8.5rem;
  max-width: var(--content-max-width);
  margin: auto;
  background-image: url(assets/footer.webp);
  background-size: 16rem;
  background-repeat: no-repeat;
  background-position: top center;
}

.credits-content {
  margin: auto;
  max-width: fit-content;
  font-size: 1.3rem;
}

.credits-content a {
  color: var(--accent-dark);
  text-decoration: none;
  font-weight: 600;
}

@media (max-width: 720px) {
  :root {
    --site-header-height: 0px;
  }


  .site-header {
    position: static;
  }

  .category-nav {
    top: 0;
  }

  .category-nav__scroller {
    justify-content: flex-end;
    padding-inline: 1rem;
    scroll-padding-inline: 1rem;
  }

  .menu-category {
    padding: 1.25rem;
  }

  .menu-items {
    grid-template-columns: 1fr;
  }
}