/* Home page */

/* ---------- hero ---------- */
.home-hero {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  min-height: 700px;
  padding: 0 0 100px;
  background: url("/media/2024/08/a-vibrant-array-of-middle-eastern-hummus-dips-and-DNJot8DPSJ-2dmtjMshL2A-OZyDv8kqTe-1_Dq0_5duvg.jpeg") center bottom / cover no-repeat;
  text-align: center;
}
.home-hero::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .1); }
.home-hero > * { position: relative; }
.home-hero__titles { width: 100%; max-width: var(--container); margin-top: 85px; }
.home-hero__title { display: flex; flex-direction: column; gap: 20px; }
.home-hero__line1, .home-hero__line2 {
  display: block;
  font-family: var(--tanker);
  font-weight: 400;
  letter-spacing: 5px;
  text-transform: capitalize;
  color: var(--cream);
}
.home-hero__line1 { font-size: 112px; line-height: 1; text-shadow: 3px 16px 10px rgba(0, 0, 0, .65); }
.home-hero__line2 { font-size: 137px; line-height: 1; text-shadow: 3px 10px 10px rgba(0, 0, 0, .65); }
.home-hero__text {
  width: calc(min(100%, 1140px) * .75); max-width: 1140px;
  font: 400 22px/35px var(--ballinger);
  color: #fff;
  text-shadow: 3px 10px 10px rgba(0, 0, 0, .65);
}

/* paper edge that the next section tears out of */
.home-torn {
  position: relative; z-index: 1;
  min-height: 50px;
  margin-top: -85px;
  background: url("/media/2024/07/f7mon-top-texture2.png") center bottom / contain repeat-x;
}

/* ---------- red label headings + intro text (shared by sections below) ---------- */
.label-title {
  align-self: center;
  text-align: center;
  margin-bottom: 25px;
  padding: 10px 20px;
  border-radius: 10px;
  background: var(--red);
  font: 400 42px/1 var(--tanker);
  letter-spacing: 3px;
  text-transform: capitalize;
  color: #fff;
}
.label-title--spaced { margin-bottom: 20px; }
.intro {
  font: 400 21px/1.6 var(--ballinger);
  text-align: center;
  color: #000;
}

/* ---------- product categories ---------- */
.home-cats { position: relative; padding: 35px 0 75px; } /* positioned so it paints over the hero's last 35px, as live does */
.home-cats__in {
  display: flex; flex-direction: column; gap: 20px;
  max-width: 1200px; margin: 0 auto;
}
.home-cats .intro { padding-bottom: 30px; }
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 70px 20px; padding-bottom: 50px; }
.cat-box {
  display: flex; flex-direction: column; gap: 20px;
  padding: 10px;
  border-radius: 10px;
  text-align: center;
  transition: background-color .3s;
}
.cat-box:hover { background: #97221c; }
.cat-box:hover h3 { color: #fff; }
.cat-box img { width: 100%; aspect-ratio: 1; object-fit: contain; transition: transform .5s; }
.cat-box:hover img { transform: scale(1.1); }
.cat-box h3 {
  font: 400 42px/1 var(--tanker);
  text-transform: capitalize;
  color: var(--green);
}

/* ---------- catering & wholesale ---------- */
.home-trade { position: relative; display: flex; min-height: 500px; background: #fff; }
.home-trade__copy {
  position: relative;
  flex: 0 0 55%;
  display: flex; flex-direction: column; justify-content: center; gap: 20px;
  padding: 0 10% 0 8%;
}
.home-trade__copy::before {
  content: ""; position: absolute; inset: 0;
  background: url("/media/2024/07/4dsV0OQ.png") 0 0 / cover repeat;
  opacity: .16;
}
.home-trade__copy > * { position: relative; }
.home-trade__title {
  font: 400 38px/1.2 var(--tanker);
  letter-spacing: 4.25px;
  text-transform: uppercase;
  color: var(--green);
}
.home-trade__text { margin-top: -10px; font: 400 21px/1.6 var(--ballinger); color: #000; }
.home-trade .btn-wrap { text-align: left; }
.btn--demo { font-weight: 700; } /* the old page made this one button's text bold */
.home-trade__photo {
  flex: 1 1 45%;
  background: url("/media/2024/07/a-vibrant-and-appetizing-photo-of-a-beautifully-ar-NYllJG2sQ7iW8zWZ-elk1g-LS5X1f2DSZ-lytWhrVF2cg.jpeg") center / cover no-repeat;
}

/* ---------- recipes ---------- */
.home-recipes { position: relative; padding: 70px 0 30px; background: #f7ebe2 var(--tile); }
.home-recipes__in { display: flex; flex-direction: column; gap: 20px; max-width: var(--container); margin: 0 auto; }
.recipe-cards { display: flex; gap: 20px; padding-bottom: 50px; }
.recipe-cards li { flex: 1 1 0; padding: 10px; }
.recipe-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 5px; text-align: center; }
.recipe-card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.recipe-card h3 {
  flex: 1 0 auto; /* the red runs down to the bottom of the card */
  padding: 20px 20px 25px;
  background: var(--red);
  font: 400 24px/1.5 var(--ballinger);
  color: #fff;
}

/* ---------- responsive ----------
   Only the breakpoints that come from Elementor and the theme's global heading
   sizes live here. Everything the old site did for particular phones and tablets
   (exact widths, pixel ratio, orientation) is in devices/home.css, generated
   from the old theme. */

@media (max-width: 1024px) {
  .label-title { font-size: 40px; }        /* theme h2 size */
  .cat-box h3 { font-size: 40px; }         /* theme h2 size */
  .home-trade__copy { flex-basis: 55%; }
  .home-trade__title { font-size: 45px; }  /* Elementor tablet */
}

@media (max-width: 767px) {
  .label-title { font-size: 32px; }   /* theme h2 size (Elementor keeps line-height 1) */
  .cat-box h3 { font-size: 32px; }
  .home-trade__title { font-size: 32px; letter-spacing: 3.25px; }

  /* Elementor stacks the boxes on phones; the old page grouped them in rows of three */
  .cat-grid { grid-template-columns: 1fr; gap: 20px; }
  .cat-grid li:nth-child(3) { margin-bottom: 50px; }
  .recipe-cards { flex-direction: column; }
  .recipe-card h3 { line-height: 1.3; }   /* theme h3 line height */

  /* The old labels sat in a 504px / 473px box with a 2.5% inset, so they wrap to two lines. */
  .home-cats .label-title { width: calc(min(100%, 504px) * .95); }
  .home-recipes .label-title { width: calc(min(100%, 473px) * .95); }
}