/** LANDING PAGE **/

body.page-node-type-landing-page .arrow-jump span {
  background-image: none;
  width: auto;
  height: auto;
}

body.page-node-type-landing-page .arrow-jump span::after {
  content: "keyboard_arrow_down";
  font-family: "Material Symbols Outlined";
  font-size: 2.5rem;
  color: #fff;
  line-height: 1;
}

body.page-node-type-landing-page .node-content blockquote p {
  font-size: 1.5rem;
  line-height: 1.3;
  font-family: var(--title-font);
}

body #scroll-menu {
  padding-bottom: 0.25rem;
  background-color: #fff;
}

body #scroll-menu-bar {
  height: 0.375rem;
  bottom: 0.25rem;
}

body #main-content #scroll-menu ul {
  color: var(--color-functional-black);
}

body #scroll-menu ul::after {
  background-color: var(--color-functional-50);
  opacity: 1;
  height: 0.375rem;
  bottom: -0.375rem;
}

body #scroll-menu ul li {
  border-left: 0;
}

body #scroll-menu ul li + li {
  border-left: 0.0625rem solid var(--color-functional-100);
}

@media (min-width: 1921px) {
  body.page-node-type-landing-page .arrow-jump {
    width: 3.75rem;
  }

  body.page-node-type-landing-page .arrow-jump span::after {
    font-size: 3.75rem;
  }
}

@media all and (min-width: 3441px) {
  body.page-node-type-landing-page .arrow-jump {
    width: 5.625rem;
  }

  body.page-node-type-landing-page .arrow-jump span::after {
    font-size: 5.625rem;
  }
}
/** END LANDING PAGE **/

/** STORY ITEM **/

/* @todo added to avoid overlaping of related items do they really need a z-index of 10? */
body #scroll-menu {
  z-index: 11;
}

body #story-title-area.banner-hidden + #story-content {
  border-top: 1px solid var(--color-functional-100);
}

.section-expand-icon::after {
  content: "expand_more";
  font-family: "Material Symbols Outlined";
  color: var(--color-700);
}

section.expanded .section-expand-icon::after {
  content: "expand_less";
}

.page-node-type-story-item #wrapper header .language-switcher .expand-icon {
  background-image: none;
}

body .story-section h2 {
  line-height: 1.3;
}

/* @todo maybe delete if we change to material design font */
.page-node-type-story-item #wrapper header .language-switcher .expand-icon path,
.page-node-type-story-item header .search-toggle-coveo path,
.page-node-type-story-item header #access-toggle path {
  fill: #000;
}

#story-content section:first-child .colapse-header.section {
  border-bottom: 0;
}

.mobile-title {
  width: 90%;
  margin: auto;
  padding-bottom: 0;
  margin-top: 1.5rem;
  font-size: 1.25rem;
  font-family: var(--title-font);
}

body .story-section.bg-black {
  background-color: var(--color-functional-50);
}

@media (width < 1120px) {
  #story-content .section-wrapper.intro-section {
    padding-top: 0;
  }
  body .story-section.bg-black {
    background-color: #ffffff;
  }
}

@media (width > 1119px) {
  .mobile-title {
    display: none;
  }
}
/** END STORY ITEM **/

/** STORY HUB **/
body #main-content .story-hub-component .h2-size.sh-title,
body #main-content .story-hub-component .sh-subtitle {
  color: var(--color-functional-black);
}

body .story-hub-element.sh-type-image img {
  transition: transform 0.5s ease-in-out;
}
/** END STORY HUB **/

/** CCI **/
.page-node-type-core-content-item #title-area .subtitle {
  padding-top: 0;
  padding-bottom: 0.5rem;
}

.field--name-field-np-display-date,
.show-date-cci {
  --grey: var(--color-functional-500);
}

body .node--type-core-content-item h3 {
  margin-bottom: 0;
}

/** END CCI **/

/** PRODUCT **/

.page-node-type-product #header {
  background-color: #ffffff;
}

.page-node-type-product header .language-switcher ul.links li a,
.page-node-type-product .expand-icon::after,
.page-node-type-product .search-toggle-coveo::after,
.page-node-type-product header #access-toggle::after {
  color: #000;
}

.page-node-type-product header .primary-menu .top-link,
.page-node-type-product header .secondary-menu .top-link {
  color: #000000;
}

.page-node-type-product #header {
  --grey-light: var(--color-functional-100);
}

.page-node-type-product .field--name-field-function h2 {
  color: var(--color-500);
  padding-top: 0;
}

body.page-node-type-product .block-system-breadcrumb-block nav.breadcrumb {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

body #product-title-area,
body.toolbar-tray-open.toolbar-fixed #product-title-area,
body.toolbar-fixed #product-title-area {
  height: calc(var(--doc-height, 100vh) - var(--drupal-displace-offset-top, 0px));
  padding-top: var(--header-height);
  box-sizing: border-box;
  gap: 2rem;
}

body #product-title-image {
  margin-top: 0;
}

#main-content .node--type-product .sidebar-share {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  background-color: #ffffff;
  padding: 0.5rem 0px;
}

/** END PRODUCT **/

/** INGREDIENT **/

body #ingredient-title-area,
body.toolbar-tray-open.toolbar-fixed #ingredient-title-area,
body.toolbar-fixed #ingredient-title-area {
  height: calc(var(--doc-height, 100vh) - var(--drupal-displace-offset-top, 0px));
  padding-top: var(--header-height);
  box-sizing: border-box;
  gap: 2rem;
}

body #ingredient-title-image {
  margin-top: 0;
}

.page-node-type-ingredient .sustainability.properties .ingredient-description.visible {
  box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.1);
  width: 300px;
}

.page-node-type-ingredient .sustainability-popup-header .close {
  width: auto;
  height: auto;
  background-image: none;
}

.page-node-type-ingredient span.close::after {
  content: "cancel";
  font-family: "Material Symbols Outlined";
  font-size: 1.5rem;
  color: var(--color-functional-black);
  display: block;
}

.page-node-type-ingredient span.close:hover::after {
  color: var(--color-700);
}

.page-node-type-ingredient .ingredient-separator {
  display: none;
}

body.page-node-type-ingredient .olfactive-notes {
  display: block;
}

.page-node-type-ingredient .field--name-field-olfactive-note .field__items {
  justify-content: center;
}

body #ingredient-title-area .breadcrumb {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

@media (width > 1119px) {
  .page-node-type-ingredient .ingredient-separator {
    display: block;
  }

  body.page-node-type-ingredient .olfactive-notes {
    display: flex;
  }

  .page-node-type-ingredient .field--name-field-olfactive-note .field__items {
    justify-content: flex-start;
  }
}
/** END INGREDIENT **/

/** NATURAL INGREDIENT **/
.harvest-calendar {
  --grey-light: var(--color-functional-100);
}

body.page-node-type-natural-ingredient #main-content .field--name-field-did-you-know .field__item p,
body.page-node-type-natural-ingredient #main-content .field--name-field-did-you-know .field__item {
  color: var(--color-500);
}

body .harvest-calendar div.active {
  background-color: var(--color-500);
}

.page-node-type-natural-ingredient .field--name-field-did-you-know {
  border-color: var(--color-500);
}

.page-node-type-natural-ingredient .field--name-field-did-you-know .field__label {
  color: var(--color-500);
}
/** END NATURAL INGREDIENT **/

/** EVENT CARD  **/
.node--type-event-card {
  --grey-light: var(--color-functional-50);
  --grey-extra-light: var(--color-functional-white);
  --color-3: var(--color-800);
  border: 1px solid var(--color-functional-100);
}

body .field--name-field-event-address .address-icon {
  background-image: none;
  height: auto;
  width: auto;
  line-height: 1;
  padding-top: 1px;
}

body .field--name-field-event-address .address-icon::after {
  font-family: "Material Symbols Outlined";
  content: "location_on";
}

body .event-actions .addeventatc .addeventatc_icon {
  background-image: none;
}

.event-detail .field--name-field-event-name,
body #main-content .event-detail .field--name-field-event-name a[name] {
  color: var(--color-functional-black);
}

body .node--type-event-card .date-container {
  color: var(--color-800);
}

/** END EVENT CARD  **/

/** DOWNLOAD BOX **/
body .javali-downloadbox {
  box-sizing: border-box;
}

body main .javali-downloadbox a {
  border: 1px solid var(--color-700);
  --color-3: var(--color-700);
  padding: 0 2rem;
  box-sizing: border-box;
  display: flex;
  gap: 0.5rem;
  position: static;
}

body main .javali-downloadbox a::before {
  display: none;
}

body .javali-downloadbox a .db-info,
body .javali-downloadbox a .db-icon {
  margin-right: 0;
  width: auto;
}

body .javali-downloadbox a .db-name {
  margin-left: 0;
  flex: 1;
}

.javali-downloadbox a:hover,
.javali-downloadbox a:focus {
  background-color: var(--color-700);
}

.javali-downloadbox a:hover .db-name,
.javali-downloadbox a:hover .db-info,
.javali-downloadbox a:focus .db-name,
.javali-downloadbox a:focus .db-info {
  color: #ffffff;
}

.javali-downloadbox svg path {
  fill: var(--color-functional-black);
}

.javali-downloadbox a:hover svg path,
.javali-downloadbox a:focus svg path {
  fill: #fff;
}

@media (width > 1920px) {
  body .javali-downloadbox {
    height: 6.25rem;
  }

  .javali-downloadbox a .db-icon svg {
    width: 2.25rem;
    height: auto;
  }
}

@media (width > 3440px) {
  body .javali-downloadbox {
    height: 9rem;
  }

  .javali-downloadbox a .db-icon svg {
    width: 3rem;
  }
}

/** END DOWNLOAD BOX **/

/** QUESTIONNAIRE **/

.node--type-questionnaire .field--name-field-q-outcome-title {
  color: var(--color-functional-black);
}

.questionnaire-question label span {
  border-radius: var(--corner-extra-small);
}

.questionnaire-arrows .questionnaire-prev-arrow {
  transform: none;
}

.questionnaire-question label input:checked + span,
.questionnaire-question:hover input + span,
.questionnaire-question:focus input + span {
  background-color: var(--color-700);
}

.questionnaire-question:focus-visible input + span {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-500);
}

.questionnaire-arrows {
  padding: 0 0.5rem;
}

.questionnaire-arrow svg:focus:not(:focus-visible) {
  box-shadow: none;
}

.questionnaire-arrow svg:focus {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-500);
  outline: none;
}

@media (width > 1119px) {
  .step-questions {
    padding: 0 0.5rem;
  }
}

/** END QUESTIONNAIRE **/

/** STRATEGY **/
.ui-dialog.strategy .ui-button .ui-icon-closethick {
  background-image: url(../../icons/cancel_000.svg);
}

body .ui-dialog.strategy .ui-dialog-content h3,
.ui-dialog.strategy .ui-widget-header .ui-dialog-title {
  color: var(--color-700);
}

.strategy .ui-widget-content a {
  color: var(--color-700);
}
/** END STRATEGY **/

/** WEBFORM **/
.page-node-type-webform header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu > li > .submenu-wrapper,
body.page-node-type-webform header .menu-wrapper .main-menu > .submenu-wrapper > ul.menu > li > .submenu-wrapper,
.page-node-type-webform header .menu-wrapper .menu-close {
  top: calc(var(--header-height) + var(--drupal-displace-offset-top, 0px) + var(--menu-close-offset, 0px));
}

.page-node-type-webform header .menu-wrapper .menu-close {
  --menu-close-offset: 2rem;
}

.page-node-type-webform #main-content {
  width: 100%;
}

.page-node-type-webform .node--type-webform.node--view-mode-full {
  width: 320px;
  margin: auto;
}

@media (width > 767px) {
  .page-node-type-webform .node--type-webform.node--view-mode-full {
    width: 768px;
  }
}

@media (width > 1119px) {
  .page-node-type-webform .node--type-webform.node--view-mode-full {
    width: 1024px;
  }
}
/** END WEBFORM **/

/** GRAPH ELEMENT **/
body div.bc-tooltip-container > span {
  box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.1);
}

body .bc-close {
  background-image: none;
  padding: 0;
  top: 0.5rem;
  right: 0.5rem;
}

body .bc-close::after {
  content: "cancel";
  font-family: "Material Symbols Outlined";
  font-size: 1.5rem;
  color: var(--color-functional-black);
  display: block;
  line-height: 1;
}

body .bc-close:hover::after {
  color: var(--color-500);
}

.bc-tooltip {
  font-family: var(--text-font);
}

.bc-tooltip-container {
  top: 0 !important;
}