/* @import url('/lib/styles/styles.css'); */
/* @import url('/styles/brandkit.css'); */

/*
 * 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 {
    /* colors */
    --link-color: #035fe6;
    --link-hover-color: #136ff6;
    --background-color: #fff;
    --overlay-background-color: #eee;
    --highlight-background-color: #ccc;
    --text-color: #000;

    /* fonts */
    --body-font-family: 'helvetica neue', helvetica, ubuntu, roboto, noto, sans-serif;
    --heading-font-family: var(--body-font-family);
    --fixed-font-family: 'Roboto Mono', menlo, consolas, 'Liberation Mono', monospace;

    /* body sizes */
    --body-font-size-m: 22px;
    --body-font-size-s: 18px;
    --body-font-size-xs: 16px;

    /* heading sizes */
    --heading-font-size-xxl: 48px;
    --heading-font-size-xl: 40px;
    --heading-font-size-l: 32px;
    --heading-font-size-m: 24px;
    --heading-font-size-s: 20px;
    --heading-font-size-xs: 18px;

    /* nav height */
    --nav-height: 64px;

  }

  @media (min-width: 900px) {
    :root {
      --heading-font-size-xxl: 60px;
      --heading-font-size-xl: 48px;
      --heading-font-size-l: 36px;
      --heading-font-size-m: 30px;
      --heading-font-size-s: 24px;
      --heading-font-size-xs: 22px;
    }
  }

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

  body.appear {
    display: unset;
  }

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

  h1, h2, h3,
  h4, h5, h6 {
    font-family: var(--heading-font-family);
    font-weight: 600;
    line-height: 1.25;
    margin-top: 1em;
    margin-bottom: .5em;
    scroll-margin: calc(var(--nav-height) + 1em);
  }

  h1 { font-size: var(--heading-font-size-xxl) }
  h2 { font-size: var(--heading-font-size-xl) }
  h3 { font-size: var(--heading-font-size-l) }
  h4 { font-size: var(--heading-font-size-m) }
  h5 { font-size: var(--heading-font-size-s) }
  h6 { font-size: var(--heading-font-size-xs) }

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

  hr {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    border: 0;
    border-bottom: 1px solid var(--overlay-background-color);
  }

  code, pre, samp {
    font-family: var(--fixed-font-family);
    font-size: var(--body-font-size-s);
  }

  code, samp {
    padding: .125em;
  }

  pre {
    overflow: scroll;
  }

  main pre {
    background-color: var(--overlay-background-color);
    padding: 1em;
    border-radius: .25em;
    overflow-x: auto;
    white-space: pre;
  }

  a:any-link {
    color: var(--link-color);
    text-decoration: none;
  }

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

  /* buttons */
  a.button:any-link, button {
    font-family: var(--body-font-family);
    display: inline-block;
    box-sizing: border-box;
    text-decoration: none;
    border: 2px solid transparent;
    padding: 5px 30px;
    text-align: center;
    font-style: normal;
    font-weight: 600;
    cursor: pointer;
    color: var(--background-color);
    background-color: var(--link-color);
    margin: 16px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 30px;
  }

  a.button:hover, a.button:focus, button:hover, button:focus  {
    background-color: var(--link-hover-color);
    cursor: pointer;
  }

  button:disabled, button:disabled:hover {
    background-color: var(--overlay-background-color);
    cursor: unset;
  }

  a.button.secondary, button.secondary {
    background-color: unset;
    border: 2px solid currentcolor;
    color: var(--text-color)
  }

  main input {
    font-size: 1.25rem;
    width: 100%;
    max-width: 50rem;
    display: block;
    margin-bottom: 1rem;
    padding: 0.75rem 0.6rem;
    border-radius: 0.25rem;
    box-sizing: border-box;
    border: 1px solid var(--text-color);
    color: var(--text-color);
    background-color: var(--background-color);
  }

  main input:hover {
    border: 1px solid var(--text-color);
  }

  main blockquote {
    font-style: italic;
    margin: 3rem;
    text-indent: -1rem;
    hanging-punctuation: first;
  }

  main blockquote p::before {
    content: "“";
    line-height: 0;
  }

  main blockquote p::after {
    content: "”";
    line-height: 0;
  }

  main img {
    max-width: 100%;
    width: auto;
    height: auto;
  }

  .icon {
    display: inline-block;
    height: 24px;
    width: 24px;
  }

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

  main .section {
    padding: 64px 16px;
  }

  @media (min-width: 600px) {
    main .section {
      padding: 64px 32px;
    }
  }

  @media (min-width: 900px) {
    .section > div {
      max-width: 1200px;
      margin: auto;
    }
  }

  /* section metadata */
  main .section.highlight {
    background-color: var(--highlight-background-color);
  }