/*
 * 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 {
  /* Structural tokens — brand colors/fonts live in styles/tokens.css
   * Breakpoints (mobile-first min-width, new/modified CSS): 576px, 768px, 992px, 1200px — see AGENTS.md */

  /* layout */
  --section-content-max-width: 75rem;
  --section-inline-padding: 1rem;

  /* body sizes */
  --body-font-size: 1rem;
  --body-line-height: 1.5;
  --letter-spacing: 0.0313rem;

  /* heading sizes */
  --heading-font-size-xxl: 2.635rem;
  --heading-font-size-xl: 1.875rem;
  --heading-font-size-l: 1.375rem;
  --heading-font-size-m: 1.25rem;
  --heading-font-size-s: 1.25rem;
  --heading-font-size-xs: 1rem;
  --heading-line-height-xxl: 3.5rem;
  --heading-line-height-xl: 2.5rem;
  --heading-line-height-l: 2rem;
  --heading-line-height-m: 2rem;
  --heading-line-height-s: 1.2rem;
  --heading-line-height-xs: 1.2rem;

  /* fixed header height: offsets the page top and anchor targets */
  --nav-height: 4.375rem;
}

@media (width >= 768px) {
  :root {
    /* heading sizes */
    --heading-font-size-xxl: 3rem;
    --heading-font-size-xl: 2rem;
    --heading-font-size-l: 1.5rem;
    --heading-font-size-m: 1.375rem;
  }
}

@media (width >= 992px) {
  :root {
    --nav-height: 5.75rem;

    /* heading sizes */
    --heading-font-size-xxl: 4rem;
    --heading-font-size-xl: 3rem;
    --heading-font-size-l: 2rem;
    --heading-font-size-m: 1.5rem;
    --heading-line-height-xxl: 4.5rem;
    --heading-line-height-xl: 3.5rem;
    --heading-line-height-l: 2.5rem;
  }
}

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

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body.appear {
  display: block;
}

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

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

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-family: var(--heading-font-family);
  font-weight: 700;
  scroll-margin-top: var(--nav-height);
}

h1 {
  font-size: var(--heading-font-size-xxl);
  line-height: var(--heading-line-height-xxl);
}

h2 {
  font-size: var(--heading-font-size-xl);
  line-height: var(--heading-line-height-xl);
}

h3 {
  font-size: var(--heading-font-size-l);
  line-height: var(--heading-line-height-l);
}

h4 {
  font-size: var(--heading-font-size-m);
  line-height: var(--heading-line-height-m);
}

h5 {
  font-size: var(--heading-font-size-s);
  line-height: var(--heading-line-height-s);
}

h6 {
  font-size: var(--heading-font-size-xs);
  line-height: var(--heading-line-height-xs);
}

h6,
p {
  letter-spacing: var(--letter-spacing);
  line-height: 1.75rem;
}

input,
textarea,
select,
button {
  font: inherit;
}

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

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

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol,
ul {
  padding-left: 2rem;
}

/* buttons */
a.button {
  display: inline-block;
  text-decoration: none;
}

button.button {
  border: 0;
  cursor: pointer;
}

a.button,
button.button {
  background-color: var(--button-background-color);
  border-radius: 1.5625rem;
  color: var(--button-text-color);
  font-weight: 500;
  line-height: 1.5;
  min-width: 10rem;
  padding: 0.75rem 2rem;
  text-align: center;

  &:hover {
    opacity: 0.6;
  }

  &.secondary {
    background-color: var(--button-secondary-background-color);
  }
}

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

/* utilities */

/* Screen-reader-only text: hidden visually, kept in the accessibility tree by a 1px box. */
.visually-hidden {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

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

  /* the Skip to content link focuses main, which takes no input */
  &:focus {
    outline: none;
  }

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

  & .icon {
    display: inline-block;
    height: 1.5rem;
    width: 1.5rem;

    & img {
      height: 100%;
      width: 100%;
    }
  }

  & > .section {
    padding: 3rem 0;

    /* utility section metadata */
    &.align-center {
      text-align: center;

      & > .default-content-wrapper img {
        display: block;
        margin-left: auto;
        margin-right: auto;
      }
    }

    &.align-left {
      text-align: left;

      & > .default-content-wrapper img {
        display: block;
        margin-left: 0;
        margin-right: auto;
      }
    }

    &.align-right {
      text-align: right;

      & > .default-content-wrapper img {
        display: block;
        margin-left: auto;
        margin-right: 0;
      }
    }

    & > div {
      box-sizing: border-box;
      max-width: var(--section-content-max-width);
      margin: auto;
      padding: 0 var(--section-inline-padding);

      @media (width >= 576px) {
        --section-content-max-width: 33.75rem;
      }

      @media (width >= 768px) {
        --section-content-max-width: 45rem;
        --section-inline-padding: 0.6875rem;
      }

      @media (width >= 992px) {
        --section-content-max-width: 60rem;
        --section-inline-padding: 0.1875rem;
      }

      @media (width >= 1200px) {
        --section-content-max-width: 75rem;
        --section-inline-padding: 0.9375rem;
      }
    }
  }
}

/* section background styles */
.section {
  &.background-blue {
    background-color: var(--section-bg-blue);
  }

  &.background-orange {
    background-color: var(--section-bg-orange);
  }

  &.background-gray {
    background-color: var(--section-bg-gray);
  }

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