/*
	Abstracts are helpers, variables and functions
	for scss compliation.
*/
/*
	@TODO: Add to theme: new division fix for updated sass package.
*/
/**==================================================================================================================================
BREAKPOINT
@TODO: remove? What is use case?? either use simple global points or write custom line. why does first breakpoint have to be 0?
 ==================================================================================================================================*/
/**==================================================================================================================================
BREAKPOINT ENDS
==================================================================================================================================*/
span.edit-link {
  display: inline-block;
  background-color: yellow;
  font-weight: 700;
  position: fixed;
  left: 0;
  bottom: 3.125rem;
  transform: translateX(-45px);
  transition: all 0.2s;
}

span.edit-link a {
  display: block;
  padding: 0.9375rem;
}

span.edit-link:hover {
  transform: translateX(0);
}

/*
	Variables for compliation
	NB! Colors should be added to base/config file as css root variable.
*/
/**
 * Block section background colors.
 * Include the background options ACF fields group to use these.
 */
/*
 * makes ul/ol as a dropdown select (normaly in mobile)
 * Structure: div > title > list > li > a
*/
/*
	Variables for legacy dc plugins
*/
section.subpage-hero {
  --subpage-hero-text-light: var(--color__white);
  --subpage-hero-text-dark: var(--color__dark-grey, #000);
  --subpage-hero-bg-primary: var(--color__white);
  --subpage-hero-accent-light: var(--color__white);
  --subpage-hero-accent-dark: var(--color__dark-grey, #000);
  --subpage-hero-border-light: var(--color__white);
  --subpage-hero-border-dark: var(--color__dark-grey, #000);
  position: relative;
  height: 90vh;
  overflow: hidden;
  width: 100%;
  z-index: 10;
  margin: 0 auto;
}

@media screen and (max-width: 850px) {
  section.subpage-hero.share-box-added {
    height: 100vh;
  }
}
@media screen and (max-width: 850px) and (max-width: 26.75em) {
  section.subpage-hero.share-box-added .block-section-wrapper .subpage-hero__content {
    justify-content: flex-start;
    padding: var(--spacing-content-small) 0 !important;
  }
}
@media screen and (max-width: 850px) and (max-width: 26.75em) and (max-width: 850px) {
  section.subpage-hero.share-box-added .block-section-wrapper .subpage-hero__content .subpage-hero__top-container {
    margin-top: 5rem;
  }
}
@media screen and (max-width: 850px) and (max-width: 26.75em) and (max-width: 480px) {
  section.subpage-hero.share-box-added .block-section-wrapper .subpage-hero__content .subhero-hero__bottom-container .subpage-hero__description p {
    margin-bottom: 0;
    margin-top: 0;
  }
}
@media screen and (max-width: 850px) and (max-width: 26.75em) and (max-width: 26.75em) {
  section.subpage-hero.share-box-added .block-section-wrapper .subpage-hero__content .subhero-hero__bottom-container .subpage-hero__description p {
    margin-top: 2rem;
  }
}
@media screen and (max-width: 23.5em) {
  section.subpage-hero.share-box-added {
    height: -webkit-fit-content !important;
    height: -moz-fit-content !important;
    height: fit-content !important;
  }
}
@media screen and (max-height: 50em) {
  section.subpage-hero {
    height: 100vh;
  }
  section.subpage-hero .block-section-wrapper .subpage-hero__content {
    margin-top: 0 !important;
  }
}
@media screen and (max-width: 850px) {
  section.subpage-hero {
    height: 74vh;
  }
}
@media screen and (max-width: 23.5em) {
  section.subpage-hero {
    min-height: 82vh;
    height: auto;
  }
}
section.subpage-hero.subpage-hero--short {
  height: 62vh;
  min-height: 32.5rem;
}

section.subpage-hero.subpage-hero--short .block-section-wrapper .subpage-hero__content {
  justify-content: center;
  margin-top: 4.375rem;
}

section.subpage-hero.subpage-hero--short .subhero-hero__bottom-container {
  display: none;
}

@media screen and (max-width: 850px) {
  section.subpage-hero.subpage-hero--short {
    height: 48vh;
    min-height: 22.5rem;
  }
  section.subpage-hero.subpage-hero--short .block-section-wrapper .subpage-hero__content {
    justify-content: center;
    margin-top: 0;
    padding: var(--spacing-content-small) 0;
  }
  section.subpage-hero.subpage-hero--short .block-section-wrapper .subpage-hero__content .subhero-hero__top-container {
    margin-top: 0;
  }
}
@media screen and (max-width: 23.5em) {
  section.subpage-hero.subpage-hero--short {
    height: auto;
    min-height: 22.5rem;
  }
}
section.subpage-hero.block-section.has-background:not(.has-inner-background-color) {
  padding: calc(var(--spacing-block) / 2) 0;
}

section.subpage-hero .subpage-hero__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: var(--subpage-hero-bg-primary);
}

section.subpage-hero .subpage-hero__background .subpage-hero__bg-image,
section.subpage-hero .subpage-hero__background video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

section.subpage-hero .subpage-hero__background .overlay-two {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0.24) 100%);
}

section.subpage-hero .subpage-hero__background .add-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(42, 42, 42, 0) 0%, rgba(42, 42, 42, 0.7) 100%);
  -webkit-backdrop-filter: blur(0px);
          backdrop-filter: blur(0px);
  z-index: 3;
}

section.subpage-hero .block-section-wrapper {
  position: relative;
  z-index: 4;
  width: 100%;
  height: 100%;
}

section.subpage-hero .block-section-wrapper .subpage-hero__content {
  color: var(--subpage-hero-text-light);
  font-weight: 300;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 5.625rem;
}

@media screen and (max-width: 850px) {
  section.subpage-hero .block-section-wrapper .subpage-hero__content {
    margin-top: 0;
    justify-content: space-between;
    padding: var(--spacing-content) 0;
  }
}
@media screen and (max-width: 26.75em) {
  section.subpage-hero .block-section-wrapper .subpage-hero__content {
    padding: var(--spacing-content-small) 0 2rem;
    /* margin-top: rem-calc(8); */
  }
}
section.subpage-hero .block-section-wrapper .subpage-hero__content.color-dark {
  color: var(--subpage-hero-text-dark);
}

section.subpage-hero .block-section-wrapper .subpage-hero__content.color-dark .subpage-hero__category::before {
  background-color: var(--subpage-hero-accent-dark);
}

section.subpage-hero .block-section-wrapper .subpage-hero__content.color-dark .subpage-hero__title-container {
  border-bottom: 1px solid var(--subpage-hero-border-dark);
}

@media screen and (max-width: 850px) {
  section.subpage-hero .block-section-wrapper .subpage-hero__content .subhero-hero__top-container {
    margin-top: 6.375rem;
  }
}
section.subpage-hero .block-section-wrapper .subpage-hero__content .subpage-hero__category::before {
  background-color: var(--subpage-hero-accent-light);
}

section.subpage-hero .block-section-wrapper .subpage-hero__content .subpage-hero__title-container {
  width: 99%;
  border-bottom: 1px solid rgba(226, 226, 226, 0.6431372549);
  padding-bottom: 2.5rem;
}

@media screen and (max-width: 850px) {
  section.subpage-hero .block-section-wrapper .subpage-hero__content .subpage-hero__title-container {
    padding-bottom: 1.25rem;
  }
}
section.subpage-hero .block-section-wrapper .subpage-hero__content .subpage-hero__title-container .subpage-hero__title {
  font-weight: 300;
  max-width: 70%;
  text-wrap: pretty;
}

@media screen and (max-width: 850px) {
  section.subpage-hero .block-section-wrapper .subpage-hero__content .subpage-hero__title-container .subpage-hero__title {
    max-width: 90%;
  }
}
section.subpage-hero .block-section-wrapper .subpage-hero__content .subhero-hero__bottom-container {
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 850px) {
  section.subpage-hero .block-section-wrapper .subpage-hero__content .subhero-hero__bottom-container {
    flex-direction: column;
    gap: var(--spacing-content-small);
  }
}
section.subpage-hero .block-section-wrapper .subpage-hero__content .subhero-hero__bottom-container .subpage-hero__description {
  margin: 2.5rem 0 0;
  text-wrap: pretty;
  width: 40%;
}

section.subpage-hero .block-section-wrapper .subpage-hero__content .subhero-hero__bottom-container .subpage-hero__description p {
  margin: 0;
}

@media screen and (max-width: 850px) {
  section.subpage-hero .block-section-wrapper .subpage-hero__content .subhero-hero__bottom-container .subpage-hero__description {
    width: 100%;
    margin-top: 1.5rem;
  }
}
.subpage-hero__share-container {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  width: 40%;
}

@media screen and (max-width: 1210px) {
  .subpage-hero__share-container {
    width: 52%;
  }
}
@media screen and (max-width: 850px) {
  .subpage-hero__share-container {
    width: 100%;
  }
}
@media screen and (max-width: 480px) {
  .subpage-hero__share-container {
    gap: 1.25rem;
  }
}
.subpage-hero__share-container .subpage-hero__share-info-box {
  background-color: var(--color__white);
  border-radius: 6px;
  color: var(--color__dark-grey, #000);
  min-height: 12.5rem;
  width: 100%;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.88375rem), calc(100% - 1.875rem) 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.88375rem), calc(100% - 1.875rem) 100%, 0 100%);
  margin-top: -1px;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 850px) {
  .subpage-hero__share-container .subpage-hero__share-info-box {
    flex-direction: column;
    gap: var(--spacing-content-small);
    -webkit-clip-path: none;
            clip-path: none;
  }
}
.subpage-hero__share-container .subpage-hero__share-info-box .share-info-box__left .share-tag {
  position: relative;
  margin: 0 0 1.5625rem 1rem;
  font-weight: 400;
}

.subpage-hero__share-container .subpage-hero__share-info-box .share-info-box__left .share-tag::before {
  content: "";
  position: absolute;
  height: 8px;
  width: 8px;
  background-color: var(--color__dark-grey, #000);
  border-radius: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  left: -14px;
}

.subpage-hero__share-container .subpage-hero__share-info-box .share-info-box__left .price-container {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 2.1875rem;
}

@media screen and (max-width: 850px) {
  .subpage-hero__share-container .subpage-hero__share-info-box .share-info-box__left .price-container {
    justify-content: space-between;
  }
}
@media screen and (max-width: 480px) {
  .subpage-hero__share-container .subpage-hero__share-info-box .share-info-box__left .price-container {
    margin-bottom: 1.25rem;
  }
}
.subpage-hero__share-container .subpage-hero__share-info-box .share-info-box__left .price-container .share-price {
  line-height: 0.75;
  color: var(--color__brand-copper);
}

.subpage-hero__share-container .subpage-hero__share-info-box .share-info-box__left .price-container .price-change {
  background-color: var(--color__greige);
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  align-self: flex-end;
  padding: 0.1rem 0.5rem;
  border-radius: 4px;
  font-size: 20px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.subpage-hero__share-container .subpage-hero__share-info-box .share-info-box__left .price-container .price-change span {
  transition: transform 0.3s ease;
}

.subpage-hero__share-container .subpage-hero__share-info-box .share-info-box__left .price-container .price-change.positive {
  background-color: var(--color__light-green, rgb(205, 245, 209));
}

.subpage-hero__share-container .subpage-hero__share-info-box .share-info-box__left .price-container .price-change.positive span {
  transform: rotate(90deg);
}

.subpage-hero__share-container .subpage-hero__share-info-box .share-info-box__left .price-container .price-change.negative {
  background-color: var(--color__light-red, #fee);
}

.subpage-hero__share-container .subpage-hero__share-info-box .share-info-box__left .price-container .price-change.negative span {
  transform: rotate(-90deg);
}

.subpage-hero__share-container .subpage-hero__share-info-box .share-info-box__left .price-container .price-change.neutral span {
  display: none;
}

.subpage-hero__share-container .subpage-hero__share-info-box .share-info-box__left .last-updated,
.subpage-hero__share-container .subpage-hero__share-info-box .share-info-box__left .currency {
  color: var(--color__grey);
}

.subpage-hero__share-container .subpage-hero__share-info-box .share-info-box__left .last-updated {
  margin-bottom: 0.375rem;
}

.subpage-hero__share-container .subpage-hero__share-info-box .share-info-box__right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 30%;
}

@media screen and (max-width: 850px) {
  .subpage-hero__share-container .subpage-hero__share-info-box .share-info-box__right {
    width: 100%;
  }
}
.subpage-hero__share-container .subpage-hero__share-info-box .share-info-box__right .share-metrics {
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--color__dark-grey);
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

.subpage-hero__share-container .subpage-hero__share-info-box .share-info-box__right .share-metrics .metric-row {
  border-bottom: 1px solid var(--color__light-grey);
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0.4rem 0;
}

.subpage-hero__share-container .subpage-hero__share-info-box .share-info-box__right .share-metrics .metric-row:last-child {
  border-bottom: none;
}

.subpage-hero__share-container .subpage-hero__share-info-box .share-info-box__right .share-metrics .metric-row .metric-label {
  font-weight: 500;
}

.subpage-hero__share-container .subpage-hero__share-info-box .share-info-box__right .share-metrics .metric-row .metric-value {
  color: var(--color__grey);
}

.subpage-hero__share-container .share-link {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  align-self: flex-end;
}

.subpage-hero__share-container .share-info-error {
  padding: 1.5rem;
  background-color: var(--color-error-bg, #fee);
  border-radius: 0.5rem;
  color: var(--color-error, #cc4b37);
}

.subpage-hero__share-container .share-info-error p {
  margin: 0;
}