/*
	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.globe-text-animation {
  --text-color: var(--color__dark-grey);
  height: 200vh;
}

@media (max-width: 63em) {
  section.globe-text-animation {
    padding-top: 75vh;
    height: auto;
  }
}
section.globe-text-animation .block-section-wrapper {
  position: relative;
  height: 110vh;
  overflow: hidden;
}

@media (max-width: 63em) {
  section.globe-text-animation .block-section-wrapper {
    height: 80vh;
  }
}
section.globe-text-animation .globe-text-animation__container {
  position: relative;
  width: 100%;
  height: 100%;
}

section.globe-text-animation .globe-text-animation__globe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

section.globe-text-animation .globe-text-animation__video {
  width: 90%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

@media (max-width: 63em) {
  section.globe-text-animation .globe-text-animation__video {
    width: 110vh;
  }
}
section.globe-text-animation .globe-text-animation__text {
  position: absolute;
  max-width: 350px;
  width: 100%;
  color: var(--text-color);
  visibility: hidden;
  z-index: 2;
  font-size: clamp(1.5rem, 2vw, 1.875rem);
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  top: 50%;
  transform: translateY(-50%);
}

section.globe-text-animation .globe-text-animation__text--left {
  left: 0;
}

section.globe-text-animation .globe-text-animation__text--right {
  right: 0;
}

@media (max-width: 88.75em) {
  section.globe-text-animation .globe-text-animation__text {
    max-width: 310px;
  }
}
@media (max-width: 75em) {
  section.globe-text-animation .globe-text-animation__text {
    max-width: 280px;
    top: 45%;
  }
}
@media (max-width: 63em) {
  section.globe-text-animation .globe-text-animation__text {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
    max-width: 80%;
  }
  section.globe-text-animation .globe-text-animation__text--left {
    top: 9% !important;
  }
  section.globe-text-animation .globe-text-animation__text--right {
    top: 78% !important;
  }
}
section.globe-text-animation .globe-text-animation__text-inner h2,
section.globe-text-animation .globe-text-animation__text-inner h3,
section.globe-text-animation .globe-text-animation__text-inner h4 {
  margin-bottom: var(--spacing__sm);
}

section.globe-text-animation .globe-text-animation__text-inner p {
  font-size: var(--font-size__body);
  line-height: 1.6;
}

section.globe-text-animation .globe-text-animation__text-inner p:last-child {
  margin-bottom: 0;
}