@import url('./tokens/primitives.css');
@import url('./tokens/semantic.css');
@import url('./fonts.css');
@import url('./typography.css');
@import url('./resets.css');

html {
  background-color: var(--background-color);
  text-size-adjust: none;
  scroll-behavior: smooth;
  font-size: 62.5% ;
  /* stylelint-disable-next-line */
  -moz-text-size-adjust: none;
  /* stylelint-disable-next-line */
  -ms-text-size-adjust: 100%;
  /* stylelint-disable-next-line */
  -webkit-text-size-adjust: 100%;
}

body {
  display: none;
  color: var(--text-color);
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-m);
  font-weight: var(--body-font-weight);

  &.lock-scroll {
    overflow: hidden;
  }

  &.appear {
    display: block;
  }

  @media (width < 992px) {
    font-size: var(--body-font-size-s);
  }

  /* Solution page-level tokens — set on body by scripts.js, cascade to all blocks */
  &[data-solution="design"] {
    --solution-gradient: var(--gradient-design);
    --solution-gradient-solid: var(--gradient-design-solid);
    --solution-gradient-section: var(--gradient-section-design);
    --button-color: var(--design-color);
    --eyebrow-color: var(--design-color);
  }

  &[data-solution="development"] {
    --solution-gradient: var(--gradient-development);
    --solution-gradient-solid: var(--gradient-development-solid);
    --solution-gradient-section: var(--gradient-section-development);
    --button-color: var(--development-color);
    --eyebrow-color: var(--development-color);
  }

  &[data-solution="consulting"] {
    --solution-gradient: var(--gradient-consulting);
    --solution-gradient-solid: var(--gradient-consulting-solid);
    --solution-gradient-section: var(--gradient-section-consulting);
    --button-color: var(--consulting-color);
    --eyebrow-color: var(--consulting-color);
  }

  &[data-solution="analytics"] {
    --solution-gradient: var(--gradient-analytics);
    --solution-gradient-solid: var(--gradient-analytics-solid);
    --solution-gradient-section: var(--gradient-section-analytics);
    --button-color: var(--analytics-color);
    --eyebrow-color: var(--analytics-color);
  }
}

header {
  height: var(--nav-height);
}

header .header,
footer .footer {
  visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
  visibility: visible;
}

main {
  padding-top: var(--padding-main-top);

  & .section {
    --section-bg-color: transparent;
    --section-bg-gradient: none;
    --section-bg-pattern: none;
    --section-text-shadow: none;

    background-color: var(--section-bg-color);
    background-image: var(--section-bg-pattern), var(--section-bg-gradient);
    text-shadow: var(--section-text-shadow);

    &.highlight {
      --section-bg-color: var(--light-100);
    }

    &.dark {
      --section-bg-color: var(--dark-500);
      --text-color: var(--light-50);
      --heading-color: var(--light-50);
      --section-text-shadow: var(--text-shadow);
      --eyebrow-color: var(--light-50);
    }

    &.brand {
      --section-bg-gradient: var(--gradient-section-home);
      --text-color: var(--light-50);
      --heading-color: var(--light-50);
      --section-text-shadow: var(--text-shadow);
      --eyebrow-color: var(--light-50);
    }

    &.design {
      --section-bg-gradient: var(--gradient-section-design);
      --text-color: var(--light-50);
      --heading-color: var(--light-50);
      --section-text-shadow: var(--text-shadow);
      --eyebrow-color: var(--light-50);
    }

    &.development {
      --section-bg-gradient: var(--gradient-section-development);
      --text-color: var(--light-50);
      --heading-color: var(--light-50);
      --section-text-shadow: var(--text-shadow);
      --eyebrow-color: var(--light-50);
    }

    &.consulting {
      --section-bg-gradient: var(--gradient-section-consulting);
      --text-color: var(--light-50);
      --heading-color: var(--light-50);
      --section-text-shadow: var(--text-shadow);
      --eyebrow-color: var(--light-50);
    }

    &.analytics {
      --section-bg-gradient: var(--gradient-section-analytics);
      --text-color: var(--light-50);
      --heading-color: var(--light-50);
      --section-text-shadow: var(--text-shadow);
      --eyebrow-color: var(--light-50);
    }

    &[data-backgroundpattern="loops"] {
      --section-bg-pattern: var(--background-pattern-loops);
    }

    &[data-backgroundpattern="topography"] {
      --section-bg-pattern: var(--background-pattern-topography);
    }

    &[data-backgroundpattern="wiggles"] {
      --section-bg-pattern: var(--background-pattern-wiggles);
    }

    &[data-backgroundpattern="clouds"] {
      --section-bg-pattern: var(--background-pattern-clouds);
    }
  }

  & > .section:first-of-type {
    margin-top: 0;
  }

  & img {
    border-radius: var(--border-radius-image);
    width: 100%;
    height: auto;
  }

  & .default-content-wrapper {
    padding-block: var(--padding-block-block);
    padding-inline: var(--padding-block-inline);
    max-width: var(--content-max-width);
  }
}

/* Article page — constrain default content width on desktop */
body.article main .default-content-wrapper {
  max-width: var(--max-width-m);
}

.block {
  padding-block: var(--padding-block-block);
  padding-inline: var(--padding-block-inline);
}

.button-container {
  display: flex;
  gap: var(--gap-button);
  flex-direction: column;

  @media (width >= 992px) {
    flex-direction: row;
  }
}

.category-design {
  --button-color: var(--design-color);
  --eyebrow-color: var(--design-color);
}

.category-development {
  --button-color: var(--development-color);
  --eyebrow-color: var(--development-color);
}

.category-consulting {
  --button-color: var(--consulting-color);
  --eyebrow-color: var(--consulting-color);
}

.category-analytics {
  --button-color: var(--analytics-color);
  --eyebrow-color: var(--analytics-color);
}

/* buttons */
a.button,
button.button {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  margin: 0;
  height: var(--button-height);
  box-shadow: var(--button-drop-shadow);
  font-weight: var(--button-font-weight);
  font-size: var(--button-font-size);
  border: var(--button-border-width) var(--border-type-solid) var(--border-color-button-dark, var(--button-color));
  border-radius: var(--button-border-radius);
  padding: 0 var(--button-padding-inline);
  font-family: var(--body-font-family);
  line-height: var(--line-height-flat);
  text-decoration: none;
  background: linear-gradient(to right, var(--button-hover-color) 50%, var(--button-color) 50%);
  background-size: 200% 100%;
  background-position: 100% center;
  background-origin: border-box;
  color: var(--button-text-color);
  transition:
    background-position 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    color var(--transition-duration) var(--transition-easing),
    box-shadow var(--transition-duration) var(--transition-easing),
    border-color var(--transition-duration) var(--transition-easing);
  cursor: pointer;
  text-shadow: none;
  width: fit-content;
}

a.button:hover,
a.button:focus {
  background-position: 0% center;
  color: var(--button-hover-text-color);
  box-shadow: var(--button-hover-drop-shadow);
  cursor: pointer;
}

button:hover,
button:focus {
  background-position: 0% center;
  color: var(--button-hover-text-color);
  box-shadow: var(--button-hover-drop-shadow);
  cursor: pointer;
}

button:disabled,
button:disabled:hover {
  background-color: var(--light-500);
  color: var(--dark-500);
  border-color: var(--light-500);
  box-shadow: none;
  cursor: unset;
}

a.button.secondary,
button.secondary {
  background: linear-gradient(to right, var(--button-color) 50%, transparent 50%);
  background-size: 200% 100%;
  background-position: 100% center;
  border-color: var(--button-color);
  color: var(--button-color);
  box-shadow: none;
  font-style: normal;
}

a.button.secondary:hover,
a.button.secondary:focus,
button.secondary:hover,
button.secondary:focus {
  background-position: 0% center;
  border-color: var(--button-color);
  color: var(--button-secondary-hover-text-color);
  box-shadow: var(--button-hover-drop-shadow);
}

/* sections */
.section > div {
  max-width: var(--content-max-width);
  margin-inline: auto;
}

.video-play-toggle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  background: var(--transparent-black-30);
  backdrop-filter: blur(10px);
  border: none;
  border-radius: 50%;
  width: 4.5rem;
  height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-type-all) var(--transition-duration) var(--transition-easing);
  box-shadow: var(--button-drop-shadow);

  &::after {
    line-height: .9;
    filter: brightness(0) invert(1);
    opacity: .9;
  }

  &.play::after {
    content: url('../icons/play.svg');
  }

  &.pause::after {
    content: url('../icons/pause.svg');
  }

  &:hover {
    background: var(--transparent-black-50);
    backdrop-filter: blur(7px);
  }
}

/*
 * UE richtext fields are wrapped in a <div data-aue-type="richtext"> in editor/preview.
 * display:contents makes the wrapper layout-transparent so flex/grid parents
 * treat its children as direct participants — matching the published DOM structure.
 * These attributes are absent on published pages so this rule has no effect there.
 */
[data-aue-type="richtext"] {
  display: contents;
}

/*
 * Editor Mode Overrides
 * When the page is loaded in AEM Universal Editor (#ui in URL),
 * disable animations, transitions, vh-based heights, and interactive
 * behaviors to prevent the infinite-height bug and keep blocks static.
 */
body.editor-mode {
  /* Kill all animations and transitions globally */
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  /* Prevent scroll-locking in editor */
  &.lock-scroll {
    overflow: auto;
  }
}