/*
 * 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.
 */

@layer reset, bootstrap, plugins, base, blocks, templates, variants;

@import url("./reset.css") layer(reset);
@import url("./vendors/bootstrap/bootstrap.min.css") layer(bootstrap);

@layer base {
  :root {
    /* colors */
    --coreneutral-101: #fbfbfc;
    --coreneutral-102: #f7f8f8;
    --coreneutral-103: #eff0f1;
    --coreneutral-104: #e0e2e4;
    --coreneutral-105: #cdd1d4;
    --coreneutral-106: #c0c5c9;
    --coreneutral-107: #a8aeb3;
    --coreneutral-108: #828b93;
    --coreneutral-109: #69747d;
    --coreneutral-110: #505d68;
    --coredark-101: #051727;
    --coredark-101-hover: #082640;
    --coredark-101-active: #0b3559;
    --corered-101: #b3282d;
    --corered-101-hover: #992226;
    --corered-101-active: #801c20;
    --corered-102: #d6311b;
    --corebrightred-101: #d84332;
    --link-color: #b3282d;
    --link-hover-color: #8f2024;
    --background-color: #fafafd;
    --light-color: #ecf2f4;
    --lightgray: #ecf2f4;
    --dark-color: #ccc;
    --core-dark-opaque: rgb(5 23 39 / 25%);
    --text-color: var(--coredark-101);
    --pickled-bluewood: #263746;

    /* gradient colors */
    --grad-cool-101-top: linear-gradient(180.05deg, #e5e5ec 0.05%, var(--coreneutral-103) 99.95%);
    --grad-cool-101-bottom: linear-gradient(180deg, var(--coreneutral-103) 0%, #e5e5ec 100%);
    --grad-cool-101-left: linear-gradient(270deg, #eff0f1 0%, #e5e5ec 100%);
    --grad-red-101-right: linear-gradient(89.61deg, var(--corebrightred-101) 0.18%, var(--corered-102) 48.11%, var(--corered-101) 99.61%);
    --grad-red-101-left: linear-gradient(88.81deg, var(--corered-101) 0.55%, var(--corered-102) 47.99%, var(--corebrightred-101) 98.98%);

    /* nav height */
    --nav-height: 6.8125rem;
    --mobile-nav-height: 6.375rem;

    /* Grid breakpoints - BS Standards */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;

    /* Grid gutter */
    --gutter-sm: 0;
    --gutter-md: 1rem;
    --gutter-lg: 2rem;

    /* Spacing (px) */
    --spacing-0: 0;
    --spacing-2: 0.125rem;
    --spacing-4: 0.25rem;
    --spacing-8: 0.5rem;
    --spacing-12: 0.75rem;
    --spacing-16: 1rem;
    --spacing-20: 1.25rem;
    --spacing-24: 1.5rem;
    --spacing-30: 1.875rem;
    --spacing-32: 2rem;
    --spacing-40: 2.5rem;
    --spacing-48: 3rem;
    --spacing-64: 4rem;
    --spacing-80: 5rem;
    --spacing-96: 6rem;
    --spacing-112: 7rem;
    --spacing-148: 9.25rem;
    --section-spacing-large-mobile: 2rem 1rem;
    --section-spacing-large: 3.75rem 7.0625rem 4.125rem;

    /* animations */
    --animation-duration: 0.3s;

    /* font size adjustments */
    --font-sm: 0.8em;
    --font-lg: 1.2em;

    /* border-radius */
    --rounded-full: 50%;
    --rounded-4: 0.25rem;
    --rounded-10: 0.625rem;
  }

  html {
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
  }

  body {
    margin: var(--mobile-nav-height) 0 0 !important;
    color: var(--text-color);
    background-color: var(--background-color);
    display: none;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--mobile-nav-height)); /* fallback height */
    min-height: calc(100svh - var(--mobile-nav-height)); /* support for small viewports */
  }

  body.appear {
    display: block;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    scroll-margin: calc(var(--nav-height) + 1em);
  }

  p {
    margin: 0 0 1rem;
  }

  li {
    margin: 0 0 0.6rem;
  }

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

  /* second level indents (numbered) */
  ol > li > ol {
    list-style-type: lower-alpha;
  }

  /* third level indents (numbered) */
  ol > li > ol > li > ol {
    list-style-type: lower-roman;
  }

  code {
    padding: 0.125em;
  }

  pre {
    overflow: scroll;
  }

  main pre {
    background-color: var(--light-color);
    padding: 1em;
    overflow-x: auto;
    white-space: pre;
  }

  /* links */
  a:any-link {
    color: var(--link-color);
    text-decoration: underline;
    word-wrap: break-word;
  }

  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: 0.125rem solid transparent;
    text-align: center;
    font-style: normal;
    cursor: pointer;
    color: var(--background-color);
    background-color: var(--link-color);
    margin: 1rem 0;
    padding: 0.3125rem;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: calc(calc(1rem - 0.125rem) - 0.25rem);
    font-weight: var(--lighter);
    border-radius: 0;
    white-space: normal;
    overflow: inherit;
    text-overflow: inherit;
    line-height: inherit;
  }

  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(--light-color);
    cursor: unset;
  }

  a.button.primary,
  button.primary {
    background-color: var(--link-color);
    font-family: var(--body-font-family);
    font-weight: var(--normal);
    border: 0.0625rem solid var(--link-color);
    color: var(--coreneutral-101);
    white-space: normal;
    overflow: inherit;
    text-overflow: inherit;
    line-height: inherit;
    padding: 0.3125rem;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 1.125rem;
  }

  a.button.secondary,
  button.secondary {
    background-color: unset;
    font-family: var(--body-font-family);
    font-weight: var(--normal);
    border: 0.0625rem solid var(--link-color);
    color: var(--link-color);
    white-space: normal;
    overflow: inherit;
    text-overflow: inherit;
    line-height: inherit;
    padding: 0.3125rem;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 1.125rem;
  }

  .flex-row-button-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    width: 100%;
  }

  .flex-row-button-group:not(:empty) {
    margin-top: 2rem;
  }

  /* sections */
  .section {
    scroll-margin-top: var(--mobile-nav-height-collapsed);
  }

  .section,
  .container {
    padding-left: var(--gutter-md);
    padding-right: var(--gutter-md);
    margin: 2.5rem auto;
    box-sizing: border-box;
  }

  .bg-highlight {
    background-color: var(--light-color);
    padding: 2rem 1rem;
    margin: 2rem auto;
  }

  .bg-pattern {
    --bg-surface-image: none;
    --bg-pattern-image: none;
    --bg-pattern-overlay: linear-gradient(transparent, transparent);
    --bg-pattern-position: center;
    --bg-pattern-size: cover;
    --bg-pattern-bg: transparent;

    background-color: var(--bg-pattern-bg);
    background-image:
      var(--bg-pattern-overlay),
      var(--bg-pattern-image),
      var(--bg-surface-image);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position:
      var(--bg-pattern-position),
      var(--bg-pattern-position),
      center;
    background-size:
      var(--bg-pattern-size),
      var(--bg-pattern-size),
      cover;
  }

  .bg-grad-cool-101-top {
    --bg-surface-image: var(--grad-cool-101-top);
  }

  .bg-grad-cool-101-bottom {
    --bg-surface-image: var(--grad-cool-101-bottom);
  }

  .bg-grad-cool-101-left {
    --bg-surface-image: var(--grad-cool-101-left);
  }

  .bg-grad-red-101-right {
    --bg-surface-image: var(--grad-red-101-right);
  }

  .bg-grad-red-101-left {
    --bg-surface-image: var(--grad-red-101-left);
  }

  .bg-core-red-101 {
    background-color: var(--corered-101);
  }

  .bg-core-red-101,
  .bg-grad-red-101-right,
  .bg-grad-red-101-left,
  .bg-pattern-plus-sign-field-horz-01 {
    color: var(--coreneutral-101);

    a.button.primary,
    button.primary {
      background-color: var(--coreneutral-101);
      border: 0.0625rem solid var(--coreneutral-101);
      color: var(--corered-101);
    }

    a.button.secondary,
    button.secondary {
      border: 0.0625rem solid var(--coreneutral-101);
      color: var(--coreneutral-101);
    }
  }

  .bg-core-neutral-101 {
    background-color: var(--coreneutral-101);
  }

  .bg-core-neutral-102 {
    background-color: var(--coreneutral-102);
  }

  .bg-pattern-plus-sign-field-horz-01 {
    --bg-pattern-image: url("https://www.pingidentity.com/content/dam/ping-reimagine-edge/themes/Pattern-Red-Grad-Right-Plus-Sign-Field-1440x453.svg");
  }

  hr {
    margin: 2rem 0;
  }

  .top-divider {
    margin-top: 1.25rem;
  }

  .top-divider p,
  .top-divider li {
    font-size: 1rem;
    line-height: 1.375rem;
  }

  .hidden {
    visibility: hidden;
    height: 0;
    width: 0;
  }

  /**
   * Responsive adjustments 
   */
  @media (width >= 768px) { /* --breakpoint-md */
    .section,
    .container {
      max-width: calc(100vw - (var(--gutter-md) * 2));
    }

    .flex-row-button-group {
      display: flex;
      flex-direction: row;
      gap: 1.5rem;
      align-items: start;
    }

    .flex-row-button-group:not(:empty) {
      margin-top: 1.5rem;
    }
  }

  @media (width >= 992px) { /* --breakpoint-lg */
    .section {
      scroll-margin-top: var(--nav-height);
    }

    .section,
    .container {
      max-width: calc(100vw - (var(--gutter-md) * 2));
    }

    main .section.light,
    main .section.bg-highlight {
      padding: 48px;
    }

    main .section.section-spacing-large {
      padding: var(--section-spacing-large);
    }
  }

  @media (width >= 1200px) { /* --breakpoint-xl */
    body {
      margin-top: var(--nav-height) !important;
      min-height: calc(100vh - var(--nav-height)); /* fallback height */
      min-height: calc(100svh - var(--nav-height)); /* support for small viewports */
    }

    .section,
    .container {
      max-width: calc(100vw - (var(--gutter-lg) * 2));
    }
  }

  @media (width >= 1400px) { /* --breakpoint-xxl */
    .section,
    .container {
      max-width: 86rem;
    }
  }
}