/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

:root {
  /* color primitives */
  --color-white: #fff;
  --color-gray-100: #f4f4f4;
  --color-gray-300: #ccc;
  --color-gray-500: #767676;
  --color-gray-700: #555;
  --color-gray-900: #131313;
  --color-black: #000;
  --color-yellow: #ffcd11;
  --color-yellow-dark: #d4a900;
  --color-blue: #2679b8;
  --color-blue-dark: #1c5a8c;

  /* semantic color tokens */
  --color-bg: var(--color-white);
  --color-bg-light: var(--color-gray-100);
  --color-bg-dark: var(--color-gray-900);
  --color-border: var(--color-gray-300);
  --color-text: var(--color-gray-900);
  --color-muted: var(--color-gray-700);
  --color-link: var(--color-blue);
  --color-link-hover: var(--color-blue-dark);
  --color-brand: var(--color-yellow);
  --color-brand-dark: var(--color-yellow-dark);

  /* shadows */
  --shadow-default: 0 1px 4px 0 rgb(0 0 0 / 20%);
  --shadow-elevated: 0 15px 40px rgb(67 72 92 / 20%);

  /* fonts */
  --text-font-family: roboto, roboto-fallback, sans-serif;
  --heading-font-family: roboto-condensed, roboto-condensed-fallback, sans-serif;

  /* heading sizes */
  --heading-xl: 1.875rem;  /* 30px */
  --heading-l: 1.625rem;   /* 26px */
  --heading-m: 1.25rem;    /* 20px */
  --heading-s: 1rem;       /* 16px */

  /* text sizes */
  --text-m: 0.875rem;      /* 14px */
  --text-s: 0.75rem;       /* 12px */

  /* line heights */
  --lh-xs: 1.25;
  --lh-s: 1.45;
  --lh-m: 1.6;

  /* spacing primitives */
  --space-100: 4px;
  --space-200: 8px;
  --space-300: 12px;
  --space-400: 16px;
  --space-500: 24px;
  --space-600: 32px;
  --space-700: 48px;
  --space-800: 64px;

  /* spacing semantic */
  --space-xs: var(--space-200);
  --space-s: var(--space-400);
  --space-m: var(--space-500);
  --space-l: var(--space-600);
  --space-xl: var(--space-800);

  /* layout */
  --nav-height: 180px;
  --site-width: 1140px;
  --content-width: 1070px;

  /* border radii */
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 16px;
}

@media (width >= 1200px) {
  :root {
    --nav-height: 128px;
  }
}

/* fallback fonts */
@font-face {
  font-family: roboto-condensed-fallback;
  size-adjust: 88.82%;
  src: local('Arial');
}

@font-face {
  font-family: roboto-fallback;
  size-adjust: 99.529%;
  src: local('Arial');
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

body {
  display: none;
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--text-font-family);
  font-size: var(--text-m);
  line-height: var(--lh-m);
}

body.appear {
  display: block;
}

body[data-scroll='disabled'] {
  overflow: hidden;
}

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;
}

/* TYPOGRAPHY */

h1,
h2,
h3,
h4,
h5,
h6,
.title {
  margin-top: 0.8em;
  margin-bottom: 0.25em;
  scroll-margin: 40px;
  font-family: var(--heading-font-family);
  font-weight: 700;
  line-height: var(--lh-xs);
}

h1 {
  font-size: var(--heading-xl);
}

h2 {
  font-size: var(--heading-l);
}

h3 {
  font-size: var(--heading-m);
}

h4,
h5,
h6 {
  font-size: var(--heading-s);
}

p,
dl,
ol,
ul,
pre,
blockquote {
  margin-top: 0.8em;
  margin-bottom: 0.25em;
}

code,
pre {
  font-size: var(--text-s);
}

pre {
  overflow-x: auto;
  border-radius: var(--radius-m);
  padding: var(--space-s);
  background-color: var(--color-bg-light);
  white-space: pre;
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child,
p:first-child,
p.button-wrapper:first-child,
dl:first-child,
ol:first-child,
ul:first-child,
pre:first-child,
blockquote:first-child {
  margin-top: 0;
}

h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child,
p:last-child,
p.button-wrapper:last-child,
dl:last-child,
ol:last-child,
ul:last-child,
pre:last-child,
blockquote:last-child {
  margin-bottom: 0;
}

/* default content heading — matches hero & columns */
.default-content-wrapper > h1::after,
.default-content-wrapper > h2::after,
.default-content-wrapper > h3::after,
.default-content-wrapper > h4::after,
.default-content-wrapper > h5::after,
.default-content-wrapper > h6::after {
  content: '';
  display: block;
  height: 5px;
  width: 40px;
  margin-top: var(--space-s);
  background-color: var(--color-brand);
}

@media (width >= 900px) {
  .default-content-wrapper h1 {
    font-size: 3.375rem;
  }
}

/* IMAGES & ICONS */

img {
  display: block;
  height: auto;
  width: auto;
  max-width: 100%;
  margin: auto;
}

.icon {
  display: inline-block;
  height: 1em;
  width: auto;
}

.icon img,
.icon svg {
  height: 100%;
  width: 100%;
}

.icon.icon-chevron img,
.icon.icon-chevron svg {
  transition: transform 0.2s;
}

.icon.arrow-left img,
.icon.arrow-left svg {
  transform: rotate(180deg);
}

.icon.chevron-left img,
.icon.chevron-left svg {
  transform: rotate(90deg);
}

.icon.chevron-right img,
.icon.chevron-right svg {
  transform: rotate(-90deg);
}

/* LINKS */

a:any-link {
  color: var(--color-link);
  overflow-wrap: break-word;
  text-decoration: none;
}

a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* FORM ELEMENTS */

input,
textarea,
select,
button {
  border: 0;
  background: none;
  font: inherit;
}

/* BUTTONS */

/* stylelint-disable-next-line no-descending-specificity */
p.button-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin: 1.2em 0;
}

a.button:any-link,
button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  padding: 0.5em 1.2em;
  font: inherit;
  font-family: var(--heading-font-family);
  font-weight: 400;
  line-height: var(--lh-xs);
  text-decoration: none;
  text-overflow: ellipsis;
  text-transform: capitalize;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

a.button[aria-disabled="true"],
button.button:disabled {
  cursor: not-allowed;
  pointer-events: none;
}

/* primary: dark fill, white text */
a.button.primary,
button.button.primary {
  border-color: var(--color-text);
  background-color: var(--color-text);
  color: var(--color-bg);
}

a.button.primary:hover,
a.button.primary:focus-visible,
button.button.primary:hover,
button.button.primary:focus-visible {
  border-color: var(--color-muted);
  background-color: var(--color-muted);
  color: var(--color-bg-light);
}

a.button.primary[aria-disabled="true"],
a.button.primary[aria-disabled="true"]:hover,
a.button.primary[aria-disabled="true"]:focus-visible,
button.button.primary:disabled,
button.button.primary:disabled:hover,
button.button.primary:disabled:focus-visible {
  border-color: var(--color-border);
  background-color: var(--color-bg-light);
  color: var(--color-muted);
}

/* secondary: outline */
a.button.secondary,
button.button.secondary {
  border-color: var(--color-text);
  background-color: transparent;
  color: var(--color-text);
}

a.button.secondary:hover,
a.button.secondary:focus-visible,
button.button.secondary:hover,
button.button.secondary:focus-visible {
  border-color: var(--color-muted);
  background-color: var(--color-bg-light);
  color: var(--color-muted);
}

a.button.secondary[aria-disabled="true"],
a.button.secondary[aria-disabled="true"]:hover,
a.button.secondary[aria-disabled="true"]:focus-visible,
button.button.secondary:disabled,
button.button.secondary:disabled:hover,
button.button.secondary:disabled:focus-visible {
  border-color: var(--color-border);
  background-color: var(--color-bg-light);
  color: var(--color-muted);
}

/* cta: yellow brand CTA */
a.button.cta,
button.button.cta {
  border-color: var(--color-brand);
  background-color: var(--color-brand);
  color: var(--color-text);
}

a.button.cta:hover,
a.button.cta:focus-visible,
button.button.cta:hover,
button.button.cta:focus-visible {
  border-color: var(--color-brand-dark);
  background-color: var(--color-brand-dark);
}

a.button.cta[aria-disabled="true"],
a.button.cta[aria-disabled="true"]:hover,
a.button.cta[aria-disabled="true"]:focus-visible,
button.button.cta:disabled,
button.button.cta:disabled:hover,
button.button.cta:disabled:focus-visible {
  border-color: var(--color-border);
  background-color: var(--color-bg-light);
  color: var(--color-muted);
}

/* SECTIONING */

main > div {
  margin: var(--space-l) var(--space-s);
}

main > .section {
  margin: var(--space-l) 0;
}

main > .section > div {
  max-width: var(--site-width);
  margin: auto;
  padding: 0 var(--space-m);
}

main > .section > [class*="-wrapper"] + [class*="-wrapper"] {
  margin-top: var(--space-l);
}

main > .section > .default-content-wrapper + [class*="-wrapper"] {
  margin-top: 1.2em;
}

main > .section > .default-content-wrapper p,
main > .section > .default-content-wrapper pre,
main > .section > .default-content-wrapper ul,
main > .section > .default-content-wrapper ol,
main > .section > .default-content-wrapper picture,
main > .section > .default-content-wrapper blockquote,
main > .section > .default-content-wrapper table {
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}

@media (width >= 900px) {
  main > .section {
    margin: var(--space-xl) 0;
  }

  main > .section > div {
    padding: 0 var(--space-l);
  }
}

/* stylelint-disable no-descending-specificity */

/* SECTION METADATA */

main .section.center-text .default-content-wrapper > * {
  text-align: center;
}

main .section.center-text .default-content-wrapper h1::after,
main .section.center-text .default-content-wrapper h2::after,
main .section.center-text .default-content-wrapper h3::after,
main .section.center-text .default-content-wrapper h4::after,
main .section.center-text .default-content-wrapper h5::after,
main .section.center-text .default-content-wrapper h6::after {
  margin-inline: auto;
}

main .section.small-image .default-content-wrapper img {
  width: 100%;
  max-width: 320px;
}

@media (width >= 900px) {
  main .section.center-text#north .default-content-wrapper h2,
  main .section.center-text#inter .default-content-wrapper h2 {
    font-size: 3.375rem;
  }
}

main .section.light,
main .section.dark {
  margin: 0;
  padding: var(--space-l) 0;
}

main .section.light {
  background-color: var(--color-bg-light);
}

main .section.dark {
  background-color: var(--color-bg-dark);
  color: var(--color-bg);
}

main .section.dark h1,
main .section.dark h2,
main .section.dark h3,
main .section.dark h4,
main .section.dark h5,
main .section.dark h6,
main .section.dark a:not(.button) {
  color: inherit;
}

main > .section.light:last-child,
main > .section.dark:last-child {
  margin-bottom: 0;
}

main > .section.light + .section.light,
main > .section.light + .section.dark,
main > .section.dark + .section.light,
main > .section.dark + .section.dark {
  margin-top: 0;
}

main > .section.light:has(+ .section.light),
main > .section.light:has(+ .section.dark),
main > .section.dark:has(+ .section.light),
main > .section.dark:has(+ .section.dark) {
  margin-bottom: 0;
}

main .section.dark a.button.primary,
main .section.dark button.button.primary {
  border-color: var(--color-bg);
  background-color: var(--color-bg);
  color: var(--color-text);
}

main .section.dark a.button.primary:hover,
main .section.dark a.button.primary:focus-visible,
main .section.dark button.button.primary:hover,
main .section.dark button.button.primary:focus-visible {
  border-color: var(--color-bg-light);
  background-color: var(--color-bg-light);
  color: var(--color-muted);
}

main .section.dark a.button.secondary,
main .section.dark button.button.secondary {
  border-color: var(--color-bg);
  background-color: transparent;
  color: var(--color-bg);
}

main .section.dark a.button.secondary:hover,
main .section.dark a.button.secondary:focus-visible,
main .section.dark button.button.secondary:hover,
main .section.dark button.button.secondary:focus-visible {
  border-color: var(--color-bg-light);
  background-color: transparent;
  color: var(--color-bg-light);
}

@media (width >= 900px) {
  main .section.light,
  main .section.dark {
    padding: var(--space-xl) 0;
  }

  main > .section.dark:last-child {
    padding: var(--space-l) 0;
  }
}

/* SHARED VIDEO EMBEDS */

.video-embed {
  position: relative;
}

.video-embed iframe {
  height: 100%;
  width: 100%;
  border: none;
}

.video-embed .placeholder {
  position: absolute;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.video-embed .placeholder img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.video-embed .placeholder .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 80px;
  width: 80px;
  color: var(--color-white);
  filter: drop-shadow(0 1px 5px rgb(0 0 0 / 60%));
  transform: translate(-50%, -50%);
  pointer-events: none;
}