@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,400;0,700;1,400&display=swap");


.desktop-nav {
  display: none !important; 
}

@media (min-width: 768px) {
  .desktop-nav {
    display: block !important; 
  }
}

.navigation-link {
  display: inline-block;
  font-family: "Bitter", serif;
  font-size: 13.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: rgb(90, 69, 34);
  padding: 0 18px;
  line-height: 48px;
  height: 48px;
  margin: 0 1px;
  background-color: transparent;
  transition: background-color 0.2s linear;
}

.navigation-link:hover {
  background-color: rgb(251, 246, 231);
}

.social-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  @apply bg-brand-font;
  margin-left: 5px;
  transition: color 0.3s;
}

.social-link i {
  @apply text-brand-primary;
  transition: color 0.3s;
  font-size: 14px;
  line-height: 1;
}

.social-link:hover i {
  color: white;
}

#mobileNav .fa-chevron-down,
#mobileNav .fa-chevron-up {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
}

#hamburgerMenu.is-active span:nth-child(1),
#hamburgerMenu.is-active span:nth-child(2),
#hamburgerMenu.is-active span:nth-child(3) {
  transition: transform 0.2s ease;
}

#hamburgerMenu.is-active span:nth-child(1) {
  transform: rotate(-45deg) translate(-2px, 4px);
  display: block;
}

#hamburgerMenu.is-active span:nth-child(2) {
  display: none;
}

#hamburgerMenu.is-active span:nth-child(3) {
  transform: rotate(45deg) translate(-4px, -6px);
  display: block;
}


#menuLinks {
  top: calc(50% - 12px);
}

#mobileNav a {
  @apply text-brand-font;
  transition: color 0.3s ease;
}

#mobileNav a:hover {
  color: #ff9900;
  @apply text-brand-font;
}

.childlink:first-of-type {
  margin-top: 20px;
}

.custom-text-shadow {
  text-shadow: 0px 1px 6px rgba(150, 150, 150, 0.29);
}

@media (max-width: 430px) {
  .custom-height {
    height: 550px;
  }
}

ul {
  margin-left: 1.3em;
  list-style: disc;
}

.aboutStoryBottom {
  background-position: center 117px;
  background-repeat: no-repeat;

  @media only screen and (max-width: 640px) {
    background-size: 800px 293px !important;
    background-position: calc(50% - 20px) bottom !important;
    padding-bottom: 40px !important;
  }
}

.month-transition {
  transition: transform 2s ease-in-out, font-size 2s ease-in-out,
    color 0.5s ease, opacity 0.5s ease;
  transform: scale(1);
  font-size: 29.25px;
  color: white;
  font-family: "Bitter", serif;
  opacity: 1;
  white-space: nowrap;
}

.active-month {
  font-size: 58.5px;
  color: rgb(243, 186, 25);
  transform: scale(1.2);
  transition: transform 2s ease-in-out, font-size 0.5s ease-in-out,
    color 0.5s ease, opacity 0.5s ease;
  white-space: nowrap;
}

@media only screen and (max-width: 767px) {
  .active-month {
    font-size: 30.5px;
  }
}

.faded-month {
  opacity: 0.5;
}

.semi-faded-month {
  opacity: 0.8;
}

.bg-tertiary.text-brand-font::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 50%;
  margin-left: -14px;
  border-width: 0 15px 15px 15px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
  z-index: 1;
}

.linker {
  text-decoration: underline;
}
.flower-map {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.map-container {
  width: 100%;
  padding-bottom: 60%;
  position: relative;
}

#us-map {
  width: 100%;
  height: 100%;
}

.contact-input:not([type="submit"]),
.contact textarea,
.contact select {
  width: 100%;
  min-height: 55px;
  font-size: 1.3em;
  padding: 13px 26px;
  margin: 0.8em 0;
  border: none;
  -webkit-appearance: none;
  background-color: #fff;
}

.form-checkbox {
  background: #fff;
  width: 17px;
  height: 17px;
  border: 2px solid #5a4522;
  color: #5a4522;
}

.form-checkbox:focus {
  outline: none !important;
}

@media (min-width: 768px) {
  .recipe-content-right-padding {
    padding-right: 60px;
  }
}


.static p {
  margin-bottom: 20px;
}

p:first-of-type {
  margin-bottom: 0px !important;
}

.stories a {
  text-decoration: underline;
}

.stories p {
  font-weight: 600;
  font-size: 16px;
}

@media (max-width: 768px) {
  .stories p {
    font-weight: 500;
  }
}

.promise strong {
  font-size: 16px !important;
  line-height: 28px !important;
}

@media (min-width: 768px) {
  .promise strong {
      font-size: 19px !important;
      line-height: 32px !important;
  }
}

.promise a {
  text-decoration: underline !important;
}

.h1ve a {
  text-decoration: underline !important;
}

.values a {
  text-decoration: underline !important;
}

.how-bees-make-honey a {
  text-decoration: underline !important;
}

.how-bees-make-honey a {
  text-decoration: underline !important;
}

.private-label a {
  text-decoration: underline !important;
}

.storage-shelf-life a {
  text-decoration: underline !important;
}

.processhow-its-made a {
  text-decoration: underline !important;
}

.branded a {
  text-decoration: underline !important;
}

.beekeeping-resources a {
  text-decoration: underline !important;
}

.branded a {
  text-decoration: underline !important;
}

.honey-history a {
  text-decoration: underline !important;
}

nav.bg-brand-primary a {
  text-decoration: none !important;
}

footer {
  text-decoration: none !important;
}

.delighted-section p {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}


@media print {
  body {
      background: #FFFFFF;
      color: #000000;
  }

  nav, footer, .tags, .share-buttons, .no-print, .flex.items-center.justify-between, .related-recipes {
      display: none !important;
  }

  a, .text-white {
      color: #000000 !important;
      text-decoration: underline;
  }

  [style*="background-image"], .bg-cover, .bg-brand-primary {
      background: #FFFFFF !important;
  }

  a[href]:after {
      content: " (" attr(href) ")";
      font-size: 90%;
  }

  .bg-center.bg-cover {
      min-height: 0 !important;
      height: auto !important;
  }

  h1, h2, h3, .text-brand-font, .text-brand-primary {
      color: #000000 !important;
  }

  .border-brand-primary {
      background-color: transparent !important;
      border-color: #000000 !important;
      opacity: .9 !important;
      background-color: #fbf6e7 !important;
  }

  img {
      width: 25% !important;
      height: auto !important;
      display: block;
      margin: 0 auto;
  }

  .related {
    display: none !important;
  }

  @media (max-width: 768px) {
    p {
      font-weight: 500 !important;
    }
    .h1ve strong {
      font-weight: 500 !important;
    }
  }

  @media (max-width: 768px) {
    .marker-icon {
      width: 20px !important;
      height: 20px !important;
    }
  }
}

.faq p a {
  text-decoration: underline !important
}

.active-link {
  padding: 12px !important;
  padding-bottom: 11px !important;
  font-size: 13.5px !important;
  margin-right: 0.5rem !important;
  background-color: #FAEFD2 !important;
  color: var(--brand-font) !important;
}

.home #subnav {
  display: hidden !important;
}

/* Hide #subnav on .home only at load */
.home #subnav {
    display: none !important;
}

/* Ensure md-custom class shows #subnav on larger screens */
@media (min-width: 768px) {
    .home #subnav.md-custom {
        display: block !important;
    }
}