:root {
  --rose: #ecddea;
  --gray: #969696;
  --light-gray: #cbcbcb;
}
.w-full {
  width: 100%;
}
ul.wp-block-navigation-submenu.wp-block-navigation__submenu-container {
  padding: 0;
}

/* custom hero block css */
.hero-block {
  position: relative;
}

.hero-image {
  z-index: 2;
  position: relative;
  padding: 3rem;
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1;
  border-radius: 100%;
  object-position: center;
}

.hero-pattern {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.hero-pattern img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  aspect-ratio: 1;
  border-radius: unset;
}
.wp-block-navigation__responsive-container.has-modal-open.is-menu-open ul,
.wp-block-navigation__responsive-container.has-modal-open.is-menu-open ul li,
.wp-block-navigation__responsive-container.has-modal-open.is-menu-open
  ul
  li
  button,
.wp-block-navigation__responsive-container.has-modal-open.is-menu-open ul li a {
  width: 100% !important;
  text-align: center;
  justify-content: center;
}
/* custom block with full height */
.wp-block-columns.is-style-full-height .wp-block-column > .wp-block-group {
  flex-wrap: nowrap;
}
.wp-block-columns.is-style-full-height .wp-block-column .wp-block-group {
  height: 100%;
}
.wp-block-columns.is-style-full-height
  .wp-block-column
  .wp-block-group
  .wp-block-group
  :last-child {
  margin-top: auto;
}

.wp-block-group.is-content-justification-space-between {
  width: 100%;
}
/* Details block styling */
.wp-block-details {
  width: 100%;
  /* padding: 0.5rem 0;
  border-bottom: 1px solid #fff; */
}
.wp-block-details summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.wp-block-details summary:after {
  content: "";
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  margin-right: 1px;
  transition: all 150ms;
}
.wp-block-details[open] > summary:after {
  content: "";
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transition: all 150ms;
}

/* breadcrumbs */
.yoast-breadcrumbs,
.yoast-breadcrumbs a {
  color: var(--gray);
  font-weight: 400;
}
.breadcrumb_last {
  color: #fff;
}

.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
  z-index: 99;
}

/* block widths */
.content-width {
  max-width: var(--wp--style--global--wide-size);
  margin: 0 auto;
}

.mb-md {
  margin-bottom: var(--wp--preset--spacing--md);
}
header .wp-block-button a {
  min-width: max-content;
}
/* search form */
.home form[role="search"] {
  width: 100%;
}
.home form[role="search"] .wp-block-search__inside-wrapper {
  border-radius: 0.25rem;
  padding: 0;
  overflow: hidden;
}
.home form[role="search"] .wp-block-search__input {
  padding-left: 3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M8.78922 15.3807C9.65482 15.3807 10.512 15.2102 11.3117 14.879C12.1114 14.5477 12.838 14.0622 13.4501 13.4501C14.0622 12.838 14.5477 12.1114 14.879 11.3117C15.2102 10.512 15.3807 9.65483 15.3807 8.78922C15.3807 7.92361 15.2102 7.06648 14.879 6.26676C14.5477 5.46704 14.0622 4.7404 13.4501 4.12832C12.838 3.51625 12.1114 3.03072 11.3117 2.69947C10.512 2.36821 9.65482 2.19772 8.78922 2.19772C7.04104 2.19772 5.36447 2.89218 4.12832 4.12832C2.89218 5.36447 2.19772 7.04104 2.19772 8.78922C2.19772 10.5374 2.89218 12.214 4.12832 13.4501C5.36447 14.6863 7.04104 15.3807 8.78922 15.3807ZM15.7323 14.1789L19.6652 18.1118C19.77 18.2132 19.8536 18.3345 19.9111 18.4686C19.9686 18.6026 19.9988 18.7468 20 18.8927C20.0011 19.0385 19.9732 19.1832 19.9179 19.3182C19.8626 19.4531 19.7809 19.5757 19.6777 19.6788C19.5745 19.7819 19.4517 19.8634 19.3167 19.9185C19.1817 19.9736 19.037 20.0013 18.8911 20C18.7452 19.9986 18.6011 19.9682 18.4671 19.9105C18.3331 19.8529 18.212 19.7691 18.1107 19.6641L14.1778 15.7312C12.4117 17.102 10.1897 17.7483 7.96391 17.5385C5.73814 17.3287 3.67598 16.2786 2.19723 14.6019C0.718473 12.9252 -0.0657085 10.7479 0.00431635 8.51339C0.0743412 6.27885 0.993308 4.15498 2.57414 2.57414C4.15498 0.993309 6.27885 0.0743412 8.51339 0.00431635C10.7479 -0.0657085 12.9252 0.718473 14.6019 2.19723C16.2786 3.67598 17.3287 5.73814 17.5385 7.96391C17.7483 10.1897 17.102 12.4118 15.7312 14.1778L15.7323 14.1789Z' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 1rem center;
  background-size: 1rem;
}
.home form[role="search"] .wp-block-search__input::placeholder {
  color: #fff;
}
.home form[role="search"] .wp-block-search__inside-wrapper button {
  border-radius: 0.25rem 0 0 0.25rem;
}

.wp-block-search__button {
  min-width: max-content;
}

/* .search-template  */
.search-results .wp-block-post-template {
  gap: 1.5rem;
}
.search-results .wp-block-post-template .wp-block-post {
  margin-left: 0;
  border: 1px solid var(--wp--preset--color--base);
  border-radius: 0.25rem;
  overflow: hidden;
}
.search-results .wp-block-post-template .wp-block-post figure {
  aspect-ratio: 16/9 !important;
  margin-bottom: 1rem !important;
}
.search-results .wp-block-post-template .wp-block-post .wp-block-group {
  padding: 0 1rem 1rem;
}
.search-results
  .wp-block-post-template
  .wp-block-post
  .wp-block-group
  > h2:first-of-type {
  margin-top: 1.5rem;
}
.search-results
  .wp-block-post-template
  .wp-block-post
  figure
  ~ .wp-block-group
  > h2:first-of-type {
  margin-top: 0;
}

/* recipes, recipe ratings and ingredients */
.recipe {
  margin-top: 0;
}

.recipe-hero-wrapper {
  background: var(--wp--preset--color--base);
}

.recipe-intro > * + * {
  margin-top: 1rem;
}

.green-underline,
.amber-underline,
.red-underline {
  text-decoration: underline;
  text-decoration-color: var(--wp--preset--color--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25rem;
}

.amber-underline {
  text-decoration-color: var(--wp--preset--color--custom-color-1);
}

.red-underline {
  text-decoration-color: var(--wp--preset--color--custom-color-2);
}

.ingredients ul,
.recipe-hero,
.ingredients-wrapper > div {
  display: grid;
}

.recipe-hero {
  color: #fff;
  margin: 0 auto;
  max-width: var(--wp--style--global--wide-size);
  display: grid;
  gap: 1rem;
  align-items: center;
  padding: var(--wp--preset--spacing--xl) 1rem;
}

.recipe-hero .post-thumbnail img {
  aspect-ratio: 16/9;
  border-radius: 0.25rem;
  overflow: hidden;
}

.ingredients-wrapper {
  background-color: var(--wp--preset--color--accent-2);
  padding: 4rem 0;
}

.ingredients-wrapper > div {
  display: grid;
  gap: 4rem;
  padding: 0 1rem;
}

.ingredients ul {
  grid-template-columns: 2fr 1fr;
  list-style-type: none;
  border: 1px solid var(--rose);
}

.ingredients ul li {
  border: 1px solid var(--rose);
  padding: 0.75rem 1rem;
  margin-left: 0;
  margin-bottom: 0;
}

.ingredients ul:first-of-type {
  border-bottom: none;
  border-top: none;
}

.ingredients ul:last-of-type {
  border-top: none;
}

.ingredients ul li:first-child,
.ingredients ul li:nth-child(2) {
  background-color: var(--rose);
  border-right-color: #fff;
  border-bottom: none;
}

.ingredients ul li:nth-child(2) {
  background-color: var(--rose);
  border-left-color: #fff;
  border-right-color: var(--rose);
  border-bottom: none;
}

ol li:not(:first-child) {
  margin-top: 1rem;
}

.prep-method > * + * {
  margin-top: 1rem;
}

.serving-suggestion.green {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 2px solid var(--wp--preset--color--accent);
}
.recipe figure {
  position: relative;
}
figure.extra-img {
  /* position: absolute;
  top: -0.5rem;
  right: -0.5rem; */
  aspect-ratio: 1;
  border-radius: 50%;
  height: 3rem;
  width: 3rem;
  overflow: hidden;
  border: 2px solid var(--wp--preset--color--base);
}
figure.extra-img {
  aspect-ratio: inherit;
}
@media screen and (min-width: 767px) {
  .recipe-intro {
    padding-right: 4rem;
  }

  .recipe-hero {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .ingredients-wrapper > div {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 766px) {
  .recipe-hero .post-thumbnail {
    order: -1;
  }
}

/* recipe filters  */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.filters .facetwp-facet {
  margin-bottom: 0;
}
.filters .facetwp-facet select {
  height: 100%;
}
.filters .facetwp-facet select,
.filters .facetwp-facet input.facetwp-search {
  border: 1px solid var(--light-gray);
  border-radius: 0.25rem;
  overflow: hidden;
}
.facetwp-facet-pagination {
  display: flex;
  justify-content: center;
}
.facetwp-pager {
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
}
.facetwp-load-more {
  padding: 1rem;
  margin-top: 2rem;
  background-color: var(--wp--preset--color--base);
  color: #fff;
  border-radius: 0.25rem;
}
.post-recipes .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem;
}
.post-recipes .wp-block-post-template:not(:last-child) {
  margin-bottom: 1rem;
}
.post-recipes .wp-block-post-template li {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  padding: 1rem;
  margin-left: 0;
  max-width: max-content;
}
.post-recipes .wp-block-post-template li:only-child {
  max-width: 18rem;
}
.post-recipes .wp-block-post-template li a > * + * {
  margin-top: 1rem;
}
.post-recipes .wp-block-post-template li a {
  text-decoration: none;
}
.post-recipes .wp-block-post-template li {
  transition: all 150ms;
  height: 100%;
  border-radius: 0.25rem;
  overflow: hidden;
}

.post-recipes .wp-block-post-template li:hover {
  transform: translateY(-0.25rem);
  transition: all 150ms;
}
.post-recipes .wp-block-post-template li .wp-block-post-title {
  margin-top: 0;
}
.post-recipes .wp-block-post-template figure img {
  aspect-ratio: 16/9;
  border-radius: 0.25rem;
  overflow: hidden;
}
.post-recipes a[rel="tag"] {
  pointer-events: none;
}

.wp-block-details p {
  margin-top: 1rem;
}

@media screen and (max-width: 1180px) {
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(
      .is-menu-open
    ) {
    display: none;
  }
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: block;
  }
}
.menu-extras img {
  /* aspect-ratio: 16 / 9;
  border-radius: 0.25rem;
  overflow: hidden; */
  aspect-ratio: 1;
  border-radius: 0.25rem;
  overflow: hidden;
  height: 9rem;
  width: 9rem;
  border-radius: 100%;
}