/*
	Abstracts are helpers, variables and functions
	for scss compliation.
*/
/**==================================================================================================================================
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.accordion {
  --accordion-gap: 1.5rem;
  --accordion-visible: 2;
  --accordion-peek: 12%;
  --border-radius: 20px;
  --accordion-bg: transparent;
  --accordion-heading: var(--color__blue);
  --accordion-text: var(--color__grey);
  --accordion-muted: color-mix(in srgb, var(--accordion-text) 75%, transparent);
  --accordion-accent: var(--color__blue);
  --accordion-icon-fg: var(--color__white);
  --accordion-line: var(--color__grey-light);
  --accordion-track: color-mix(in srgb, var(--accordion-accent) 22%, transparent);
  --accordion-arrow-border: color-mix(in srgb, var(--accordion-accent) 40%, transparent);
  --accordion-fg-contrast: var(--color__white);
  --accordion-cta-bg: var(--color__blue);
  --accordion-cta-text: var(--color__white);
  --accordion-cta-dot: var(--color__green-light);
  --accordion-cta-text-hover: var(--color__blue);
  --accordion-cta-dot-hover: var(--accordion-cta-bg);
  --accordion-cta-border: transparent;
  --accordion-cta-border-hover: transparent;
  overflow-x: clip;
  margin: var(--spacing-block) 0;
  background-color: var(--accordion-bg);
  color: var(--accordion-text);
  padding: var(--spacing-block) 0;
  /* --- Intro + list ----------------------------------------------------- */
  /* --- Accordion list --------------------------------------------------- */
  /* --- Slider ----------------------------------------------------------- */
  /* --- Entrance (JS takes over after measure) ------------------------------ */
}

@media screen and (max-width: 850px) {
  section.accordion {
    padding: 3.75rem 0;
  }
}
section.accordion[data-color-scheme=beige] {
  --accordion-bg: var(--color__beige);
  --accordion-heading: var(--color__black);
  --accordion-text: var(--color__black);
  --accordion-accent: var(--color__black);
  --accordion-icon-fg: var(--color__white);
  --accordion-line: color-mix(in srgb, var(--color__black) 12%, transparent);
  --accordion-fg-contrast: var(--color__white);
  --accordion-cta-bg: var(--color__black);
  --accordion-cta-text: var(--color__white);
  --accordion-cta-dot: var(--color__beige);
  --accordion-cta-text-hover: var(--color__black);
  --accordion-cta-dot-hover: var(--accordion-cta-bg);
}

section.accordion[data-color-scheme=moss-green] {
  --accordion-bg: var(--color__moss-green);
  --accordion-heading: var(--color__white);
  --accordion-text: var(--color__white);
  --accordion-accent: var(--color__green-light);
  --accordion-icon-fg: var(--color__moss-green);
  --accordion-line: color-mix(in srgb, var(--color__white) 28%, transparent);
  --accordion-fg-contrast: var(--color__moss-green);
  --accordion-cta-bg: var(--color__green-light);
  --accordion-cta-text: var(--color__moss-green);
  --accordion-cta-dot: var(--color__moss-green);
  --accordion-cta-text-hover: var(--color__green-light);
  --accordion-cta-dot-hover: var(--accordion-cta-bg);
}

section.accordion[data-color-scheme=blue] {
  --accordion-bg: var(--color__light-blue);
  --accordion-heading: var(--color__blue);
  --accordion-text: var(--color__blue);
  --accordion-accent: var(--color__blue);
  --accordion-icon-fg: var(--color__light-blue);
  --accordion-line: color-mix(in srgb, var(--color__blue) 22%, transparent);
  --accordion-fg-contrast: var(--color__light-blue);
  --accordion-cta-bg: var(--color__blue);
  --accordion-cta-text: var(--color__white);
  --accordion-cta-dot: var(--color__light-blue);
  --accordion-cta-text-hover: var(--color__blue);
  --accordion-cta-dot-hover: var(--accordion-cta-bg);
}

section.accordion[data-color-scheme=green-dark] {
  --accordion-bg: var(--color__green-dark);
  --accordion-heading: var(--color__green-light);
  --accordion-text: var(--color__white);
  --accordion-accent: var(--color__green-light);
  --accordion-icon-fg: var(--color__green-dark);
  --accordion-line: color-mix(in srgb, var(--color__white) 22%, transparent);
  --accordion-fg-contrast: var(--color__green-dark);
  --accordion-cta-bg: var(--color__green-light);
  --accordion-cta-text: var(--color__green-dark);
  --accordion-cta-dot: var(--color__green-dark);
  --accordion-cta-text-hover: var(--color__green-light);
  --accordion-cta-dot-hover: var(--accordion-cta-bg);
}

section.accordion[data-color-scheme=beige], section.accordion[data-color-scheme=moss-green], section.accordion[data-color-scheme=blue], section.accordion[data-color-scheme=green-dark] {
  margin: 0;
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}

section.accordion .accordion__layout {
  display: flex;
  gap: clamp(3rem, 6vw, 7.5rem);
  align-items: start;
}

section.accordion .accordion__layout > * {
  flex: 1 1 0;
  min-width: 0;
  width: 50%;
}

section.accordion .accordion__title {
  font-size: clamp(1.75rem, 2vw + 1.25rem, 3rem);
  color: var(--accordion-heading);
}

section.accordion .accordion__text {
  margin: 5rem 0 0;
  font-size: clamp(1.375rem, 1.4vw + 1rem, 1.625rem);
  line-height: 150%;
  text-wrap: pretty;
}

@media screen and (max-width: 850px) {
  section.accordion .accordion__text {
    margin: 2.5rem 0 0;
  }
}
section.accordion .accordion__text p {
  margin: 0 0 1em;
}

section.accordion .accordion__text p:last-child {
  margin-bottom: 0;
}

section.accordion .accordion__intro .main-cta {
  margin-top: 6rem;
}

@media screen and (max-width: 850px) {
  section.accordion .accordion__intro .main-cta {
    margin-top: 2.5rem;
  }
}
section.accordion .accordion__cta {
  --cta-bg: var(--accordion-cta-bg);
  --cta-text: var(--accordion-cta-text);
  --cta-dot: var(--accordion-cta-dot);
  --cta-text-hover: var(--accordion-cta-text-hover);
  --cta-dot-hover: var(--accordion-cta-dot-hover);
  border: 1px solid var(--accordion-cta-border);
  transition: border-color 0.3s var(--ease__smooth);
}

section.accordion .accordion__cta:hover, section.accordion .accordion__cta:focus-visible {
  border-color: var(--accordion-cta-border-hover);
}

section.accordion .accordion__item {
  border-top: 1px solid var(--accordion-line);
}

section.accordion .accordion__item:last-child {
  border-bottom: 1px solid var(--accordion-line);
}

section.accordion .accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.75rem 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

section.accordion .accordion__question {
  font-size: 1.625rem;
  font-weight: 400;
  line-height: 1.4;
}

section.accordion .accordion__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid var(--accordion-accent);
  border-radius: var(--element-border-radius);
  background: var(--accordion-accent);
  color: var(--accordion-icon-fg);
  transition: background-color 0.4s var(--ease__smooth), color 0.4s var(--ease__smooth), border-color 0.4s var(--ease__smooth);
}

section.accordion .accordion__icon svg {
  display: block;
  width: 1.125rem;
  height: auto;
  transform: rotate(90deg);
  transition: transform 0.45s var(--ease__smooth);
}

section.accordion .accordion__icon svg path {
  stroke: currentColor;
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}

section.accordion .accordion__item.is-open .accordion__icon {
  background: transparent;
  color: var(--accordion-accent);
}

section.accordion .accordion__item.is-open .accordion__icon svg {
  transform: rotate(-90deg);
}

section.accordion .accordion__panel {
  height: 0;
  overflow: hidden;
}

section.accordion .accordion__answer {
  padding: 0 0 1.75rem;
  max-width: 46ch;
  color: var(--accordion-muted);
  text-wrap: pretty;
  font-size: 1rem;
}

section.accordion .accordion__answer > *:first-child {
  margin-top: 0;
}

section.accordion .accordion__answer > *:last-child {
  margin-bottom: 0;
}

section.accordion .accordion__answer p {
  margin: 0 0 0.75em;
  line-height: 150%;
}

section.accordion .accordion__answer ul,
section.accordion .accordion__answer ol {
  margin: 0;
  padding: 0 0 0 1.25em;
}

section.accordion .accordion__answer ul li,
section.accordion .accordion__answer ol li {
  margin: 0 0 0.35em;
}

section.accordion .accordion__slider {
  margin-top: 5rem;
}

section.accordion.accordion--slider-only .accordion__slider {
  margin-top: 0;
}

section.accordion .accordion__viewport {
  overflow: hidden;
}

section.accordion .accordion__track {
  display: flex;
  align-items: flex-start;
  gap: var(--accordion-gap);
}

section.accordion .accordion__slide {
  position: relative;
  flex: 0 0 calc((100% - var(--accordion-visible) * var(--accordion-gap) - var(--accordion-peek)) / var(--accordion-visible));
  min-width: 0;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: var(--element-border-radius);
}

@media screen and (max-width: 850px) {
  section.accordion .accordion__slide {
    aspect-ratio: 1/1;
  }
}
section.accordion .accordion__image {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
}

section.accordion .accordion__footer {
  display: flex;
  align-items: center;
  gap: 3rem;
  margin-top: 2rem;
}

section.accordion .accordion__footer[hidden] {
  display: none;
}

section.accordion .accordion__progress {
  position: relative;
  flex: 1;
  height: 1px;
  background: var(--accordion-track);
}

section.accordion .accordion__progress-fill {
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 0.25rem;
  border-radius: 0.125rem;
  background: var(--accordion-accent);
  transform: translateY(-50%);
}

section.accordion .accordion__nav {
  display: flex;
  gap: 0.75rem;
}

section.accordion .accordion__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--accordion-arrow-border);
  border-radius: var(--element-border-radius);
  color: var(--accordion-accent);
  cursor: pointer;
  transition: background-color 0.3s var(--ease__smooth), border-color 0.3s var(--ease__smooth), color 0.3s var(--ease__smooth), opacity 0.3s var(--ease__smooth);
}

section.accordion .accordion__arrow svg {
  display: block;
  width: 1.375rem;
  height: auto;
}

section.accordion .accordion__arrow svg path {
  stroke: currentColor;
}

section.accordion .accordion__arrow--prev svg {
  transform: scaleX(-1);
}

section.accordion .accordion__arrow:hover, section.accordion .accordion__arrow:focus-visible {
  background: var(--accordion-accent);
  border-color: var(--accordion-accent);
  color: var(--accordion-fg-contrast);
}

section.accordion .accordion__arrow:disabled {
  opacity: 0.35;
  pointer-events: none;
}

@media screen and (max-width: 850px) {
  section.accordion {
    --accordion-gap: 0.75rem;
    --accordion-visible: 1;
    --accordion-peek: 30%;
  }
  section.accordion .accordion__layout {
    flex-direction: column;
    gap: 5rem;
  }
  section.accordion .accordion__layout > * {
    width: 100%;
  }
  section.accordion .accordion__text {
    font-size: 1.375rem;
  }
  section.accordion .accordion__footer {
    gap: 1.5rem;
    margin-top: 1.5rem;
  }
  section.accordion .accordion__arrow {
    width: 2.75rem;
    height: 2.75rem;
  }
  section.accordion .accordion__arrow svg {
    width: 1.125rem;
  }
}
section.accordion.accordion--anim-fade {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  section.accordion.accordion--anim-fade {
    opacity: 1;
  }
}
.acf-block-preview section.accordion.accordion--anim-fade {
  opacity: 1;
}