/* Village Food Wholesale — shared styles: fonts, base, buttons, header, footer.
   Page-specific styles live in their own files (home.css, about.css, ...).
   Values match the WordPress/Elementor site this replaces. Breakpoints:
   tablet <= 1024px, mobile <= 767px (same as Elementor's). */

@font-face {
  font-family: "Tanker";
  src: url("../fonts/Tanker-Regular.ttf") format("truetype");
  font-display: swap;
}
/* The old site served its own copy of Ballinger Condensed for the regular weight
   (bold still comes from the Adobe Fonts kit). Its line metrics differ slightly from
   Adobe's, so it's kept for identical text layout. */
@font-face {
  font-family: "ballinger-condensed";
  src: url("../fonts/ballinger.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --red: #9b1919;
  --red-hover: #b91c1c;
  --red-deep: #9d1819;
  --green: #364e38;
  --green-dark: #133115;
  --cream: #ebe5df;
  --ink: #514d7c;
  --tile: url("/media/2024/07/background-tile.jpg");
  --container: 1140px;
  --tanker: "Tanker", sans-serif;
  --ballinger: "ballinger-condensed", sans-serif;
}

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

body {
  margin: 0;
  font: 400 17px/1.6 Helvetica, sans-serif;
  color: var(--ink);
  background: #deddeb;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; border: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; line-height: 1; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; }
.tiled { background-image: var(--tile); background-size: contain; }

/* Elementor-style "grow" hover animation */
.grow { transition: transform .3s; }
.grow:hover { transform: scale(1.1); }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  color: #fff;
  background: var(--red);
  border-radius: 4px;
  text-align: center;
  transition: background-color .3s, transform .3s;
}
.btn:hover { background: var(--red-hover); color: #fff; }

/* "Learn More" / "Schedule Demo" style used across pages */
.btn--main {
  font: 600 22px/1 var(--ballinger);
  padding: 15px 30px;
}
.btn--grow:hover { transform: scale(1.1); }

.btn--order {
  font: 500 24px/1 var(--tanker);
  text-transform: uppercase;
  padding: 10px 15px;
}

/* ---------- header ---------- */

.site-header { position: relative; z-index: 9999; }

.topbar { background: var(--green-dark); padding: 8px 0; }
.topbar__in { display: flex; align-items: center; min-height: 30px; }
.topbar__contact, .topbar__social { flex: 1 1 50%; padding: 0 15px; }
.topbar__contact { display: flex; flex-wrap: wrap; }
.topbar__contact li { margin-right: 12px; }
.topbar__contact a {
  display: block;
  padding-left: 5px;
  font: 400 17px/27px Roboto, sans-serif;
  color: #fff;
}
.topbar__social { text-align: right; } /* the gaps between icons are word spaces, as on the old site */
.topbar__social li { display: inline-block; vertical-align: top; margin-right: 6px; }
.topbar__social a {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  color: #fff;
  transition: color .3s;
}
.topbar__social .icon { width: auto; height: 17px; fill: currentColor; }
.topbar__social li:nth-child(1) a:hover { color: #4852ba; }
.topbar__social li:nth-child(2) a:hover { color: #1da1f2; }
.topbar__social li:nth-child(3) a:hover { color: #0077b5; }
.topbar__social li:nth-child(4) a:hover { color: #e4405f; }

.mainbar {
  position: relative;
  z-index: 2;
  padding: 10px 0;
  background: var(--tile) 0 0 / contain;
}
.mainbar__in { position: relative; display: flex; align-items: center; justify-content: flex-end; min-height: 80px; }
.brand { position: absolute; left: 0; top: 0; width: 135px; }
.brand img { width: 135px; }

.menu-toggle-wrap, .site-menu__close, .site-menu__social { display: none; }
.site-menu { display: flex; align-items: center; }

.nav ul { display: flex; flex-wrap: wrap; justify-content: center; }
.nav li { margin-right: 10px; }
.nav a {
  display: flex; align-items: center;
  height: 62px;
  padding: 10px 15px;
  border-radius: 5px;
  font: 500 26px/41.6px var(--tanker);
  text-transform: uppercase;
  color: var(--red);
  transition: color .3s, background-color .3s;
}
.nav a:hover { color: #fff; background: var(--red); }
.nav a.is-active { color: #fff; background: var(--red); }
/* The old site styled the menu per page: on Home the links are shorter and the
   current one is compact; Contact tightens a link while hovered. */
@media (min-width: 1025px) {
  body.page-home .nav a { height: 40px; }
  body.page-home .nav a.is-active { padding: 2px 10px; }
  body.page-contact .nav a:hover { padding: 2px 10px; }
}

/* Tablet and mobile: centered logo, menu button, slide-down menu */
@media (max-width: 1024px) {
  .topbar { display: none; }
  .mainbar { padding: 20px 0 0; background-size: contain; }
  .mainbar__in { flex-direction: column; align-items: stretch; gap: 20px; min-height: 0; }
  /* Elementor's default: logo and menu button each in a 10px-padded box, the button a
     small square. Some pages stretch the button full width on some devices (devices/*.css). */
  .brand-wrap, .menu-toggle-wrap { display: flex; justify-content: center; padding: 10px; }
  .brand { position: static; width: auto; }
  .brand img { width: 155px; }

  .menu-toggle {
    display: flex; justify-content: center; align-items: center;
    width: 55px; height: 54px;
    padding: 4px 7px 5px;
    border: 0;
    border-radius: 3%;
    background: var(--red-deep);
    color: #fff;
  }
  .menu-toggle .icon { width: 41px; height: 41px; fill: currentColor; }

  .site-menu {
    display: none;
    flex-direction: column; align-items: stretch; gap: 20px;
    padding: 10px 10px 10px;
    background: var(--tile) 0 0 / contain;
  }
  .site-menu.is-open { display: flex; }
  .site-menu__close {
    display: block; align-self: flex-start;
    margin: -10px 0 -20px -10px;
    padding: 4px 7px 5px;
    border: 0; background: none; color: #333;
  }
  .site-menu__close .icon { width: 20px; height: 20px; fill: currentColor; display: block; }

  .nav ul { flex-direction: column; padding-left: 34px; }
  .nav li { margin: 0; }
  .nav a, .nav a.is-active {
    justify-content: center;
    height: auto;
    padding: 13px 20px;
    border-radius: 0;
    font-size: 28px; line-height: 20px;
    text-transform: none;
    color: var(--red-deep);
  }
  .nav a.is-active { color: #fff; background: var(--red); }

  .site-menu .btn--order {
    align-self: center;
    font-size: 22px;
    padding: 10px 20px;
    background: var(--red-deep);
  }
  .site-menu__social { display: flex; justify-content: center; gap: 5px; }
  .site-menu__social a, .site-menu__social span {
    display: flex; align-items: center; justify-content: center;
    width: 50px; height: 50px;
  }
  .site-menu__social .icon { height: 25px; width: auto; fill: var(--red); }
}

/* Recipe pages had their own copy of the mobile header: 10px all round, a full-width
   square-cornered menu bar, and a bigger logo with no padding round the bar on phones. */
@media (max-width: 1024px) {
  body.page-recipe .mainbar { padding: 0 10px; }
  body.page-recipe .mainbar__in { padding: 10px 0; }
  body.page-recipe .menu-toggle { width: 100%; border-radius: 0; }
}
@media (max-width: 767px) {
  body.page-recipe .brand img { width: 200px; }
  body.page-recipe .menu-toggle-wrap { padding: 0; }
}

/* ---------- inner page banner (About, Products, Recipes, Contact, recipes) ---------- */

.page-banner {
  position: relative;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px;
  min-height: 500px;
  background: var(--banner-image) var(--banner-position) / cover no-repeat;
  text-align: center;
}
.page-banner::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .2); }
.page-banner > * { position: relative; }
.page-banner__title {
  width: 100%; max-width: var(--container);
  font: 400 72px/1 var(--tanker);
  text-transform: capitalize;
  color: #fff;
}
.page-banner__subtitle {
  width: 79%; max-width: calc(var(--container) * .79);
  font: 400 22px/35px var(--ballinger);
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .5), 0 2px 4px rgba(0, 0, 0, .5);
}
/* Torn paper edge that overlaps the bottom of the banner */
.page-banner--torn::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -4px;
  height: 42px;
  background: url("/media/2024/07/ede6e0mon-top.png") repeat-x;
  background-size: contain;
}

/* Phone sizes for the banner differ per page and device; they're in devices/*.css. */

/* ---------- footer ---------- */
/* Elementor breakpoints used below: laptop <=1366, tablet-extra <=1200,
   tablet <=1024, mobile-extra <=880, mobile <=767. */

.footer-cta {
  position: relative;
  overflow: hidden;
  display: flex;
  gap: 26px;
  padding: 2%;
  border-bottom: 5px solid var(--green);
  background: rgba(5, 5, 8, .45);
}
.bg-video { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bg-video iframe {
  position: absolute; top: 50%; left: 50%;
  border: 0;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%; /* sized to cover by site.js */
}
.footer-cta__in {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--container); margin: 0 auto;
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
}
.footer-cta__title {
  font: 400 38px/1 var(--tanker);
  text-transform: uppercase;
  text-align: center;
  color: #fbfbfb;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .5), 0 2px 4px rgba(0, 0, 0, .5);
}
.footer-cta__text {
  font: 500 22px/1.2 var(--ballinger);
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .5), 0 2px 4px rgba(0, 0, 0, .5);
  margin-bottom: 1em;
}
.footer-cta .btn { align-self: flex-start; }

.footer-main { padding: 0 8%; background: #fff var(--tile); }
.footer-main__in { display: flex; max-width: var(--container); margin: 0 auto; padding: 4% 0; }
.footer-col { display: flex; flex-direction: column; }
.footer-col--links { flex: 0 0 17%; }
.footer-col--story { flex: 0 0 45%; padding-right: 3%; }
.footer-col--contact { flex: 0 0 20%; }
.footer-col--social { flex: 1 1 auto; gap: 20px; }
.footer-col__title {
  font: 400 26px/2 var(--tanker);
  text-transform: capitalize;
  color: var(--red);
}
.footer-links li + li { margin-top: 5px; }
.footer-links li:not(:last-child) { padding-bottom: 5px; }
.footer-links a {
  display: block;
  font: 400 18px/1.5 var(--ballinger);
  text-transform: uppercase;
  color: #000;
  transition: color .3s;
}
.footer-links a:hover { color: var(--red-deep); }
.footer-story { max-width: 479px; font: 400 18px/1.6 var(--ballinger); color: #000; }
.footer-address, .footer-contact { font: 400 18px/1.5 var(--ballinger); color: #000; }
.footer-contact a { display: block; }
.footer-social { display: flex; gap: 20px; padding-top: 10px; }
.footer-social a { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; transition: transform .3s; }
.footer-social a:hover { transform: scale(1.1); }
.footer-social .icon { width: auto; height: 28px; max-width: 28px; fill: var(--red); transition: fill .3s; }
.footer-social a:hover .icon { fill: var(--green-dark); }

.footer-copyright {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 45px;
  padding: 0 8%;
  background: var(--red);
  text-align: center;
  color: #fff;
  font-family: Poppins, sans-serif;
  font-weight: 300;
}
.footer-copyright__line { font-size: 16px; line-height: 1.5; }
.footer-copyright__credit { padding-top: 6px; font-size: 8px; line-height: 1.5; }

@media (min-width: 1201px) {
  .footer-cta__title { margin-right: 6px; } /* the old title box was 6px narrower */
}
@media (max-width: 1366px) {
  .footer-cta__text { padding: 25px 50px; text-align: center; }
  .footer-cta .btn { align-self: center; }
}
@media (max-width: 1200px) {
  .footer-cta__title { font-size: 48px; }
  .footer-cta__text { font-size: 20px; padding: 20px 50px; }
}
@media (max-width: 1024px) {
  .footer-cta { flex-direction: column; justify-content: center; gap: 62px; min-height: 50vh; padding: 15% 5%; }
  .footer-cta__title { font-size: 44px; }

  .footer-main { padding: 0 5%; }
  .footer-main__in { flex-direction: row-reverse; flex-wrap: wrap; padding: 8% 0; }
  .footer-col--links, .footer-col--social { flex: 0 0 25%; }
  .footer-col--contact { flex: 0 0 50%; padding-right: 15%; }
  .footer-col--story { flex: 0 0 100%; order: 1; gap: 30px; margin-top: 8%; padding-right: 35%; }
  .footer-story { max-width: none; }
  .footer-links a, .footer-story, .footer-address, .footer-contact { font-size: 14px; }
  .footer-social .icon { height: 18px; }
  .footer-copyright { padding: 0 5%; }
  .footer-copyright__line, .footer-copyright__credit { font-size: 14px; }
}
@media (max-width: 880px) {
  .footer-cta { min-height: 60vh; }
  .footer-cta__title { font-size: 43px; }
}
@media (max-width: 767px) {
  .footer-cta { flex-direction: column-reverse; gap: 24px; min-height: 50vh; }
  .footer-cta__title { font-size: 35px; }
  .footer-cta__text { font-size: 18px; padding: 10px; }
  .footer-cta .btn--main { font-size: 16px; }

  .footer-main__in { flex-direction: column; padding: 20% 0; }
  .footer-col, .footer-col--story { flex: none; margin: 0; padding: 0; gap: 0; }
  .footer-col--contact { order: -1; padding-bottom: 35px; }
  .footer-col--links { padding-bottom: 35px; }
  .footer-col--story { order: 0; }
  .footer-col--social { order: 2; padding-top: 50px; }
  .footer-col__title { font-size: 35px; }
  .footer-links li + li { margin-top: 4px; }
  .footer-links li:not(:last-child) { padding-bottom: 4px; }
  .footer-address, .footer-contact { font-size: 18px; }
  .footer-contact li + li { margin-top: 4px; }
  .footer-contact li:not(:last-child) { padding-bottom: 4px; }
  .footer-social .icon { height: 26px; }
}