/*
 * 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 */
    --background-color: #fff;
    --text-white: #fff;
    --border-white: #fff;
    --light-color: #f8f8f8;
    --dark-color: #505050;
    --text-color: #131313;
    --link-color: #3b63fb;
    --link-hover-color: #1d3ecf;
    --global-primary-blue: #1A408C;
    --global-heading-color: #241f20;
    --global-description-color: #241f20b2;
    --global-desktop-heading-font-size: 36px;
    --global-desktop-description-font-size: 16px;
    --global-desktop-subheading-font-size: 20px;
    --global-desktop-eyebrow-font-size: 14px;
    --global-desktop-cta-font-size: 16px;
    --global-heading-font-size: var(--global-desktop-heading-font-size);
    --global-small-description-font-size: 12px;
    --global-eyebrow-font-size: var(--global-desktop-eyebrow-font-size);
    --global-description-font-size: var(--global-desktop-description-font-size);
    --global-subheading-font-size: var(--global-desktop-subheading-font-size);
    --global-cta-font-size: var(--global-desktop-cta-font-size);
    --global-tab-heading-font-size: 30px;
    --global-tab-description-font-size: 14px;
    --global-tab-subheading-font-size: 18px;
    --global-tab-eyebrow-font-size: 12px;
    --global-tab-cta-font-size: 14px;
    --global-mobile-heading-font-size: 24px;
    --global-mobile-description-font-size: 14px;
    --global-mobile-subheading-font-size: 16px;
    --global-mobile-eyebrow-font-size: 12px;
    --global-mobile-cta-font-size: 14px;
    --global-heading-font-weight: 600;
    --global-eyebrow-font-weight: 800;
    --global-description-font-weight: 400;
    --global-cta-font-weight: 600;
    --global-subheading-font-weight: 600;
    --global-text-line-height: 125%;
    --primary-blue: var(--global-primary-blue);
    --soft-blue: #E9F2FD;
    --primary-border: #E9F2FD;
    /* text color  */
    --dark-gray: var(--global-heading-color);
    --background-gray: var(--global-heading-color);
    --dark-gray-opacity: 0.7;
    --border-gray: var(--global-heading-color);
    --border-soft-blue: #E9F2FD;

    /* fonts */
    --body-font-family: Plus Jakarta Sans;
    --heading-font-family: var(--body-font-family);

    /* body sizes */
    --body-font-size-m: 22px;
    --body-font-size-s: 19px;
    --body-font-size-xs: 17px;

    /* heading sizes */
    --heading-font-size-xxl: 55px;
    --heading-font-size-xl: 44px;
    --heading-font-size-l: 34px;
    --heading-font-size-m: 27px;
    --heading-font-size-s: 24px;
    --heading-font-size-xs: 22px;

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

    /* shared section gutters */
    --section-gutter: 24px;
    --section-padding-y: 64px;

    /* CSS custom properties cannot be used directly in @media conditions. */
    --global-mobile-breakpoint: 900px;

    /*
     * Max width of block content. Backgrounds stay full-bleed; --side-gap
     * grows on viewports wider than ~1605px so content never exceeds this.
     * Change this one value to adjust the content cap everywhere.
     */
    --content-max-width: 1440px;
    --side-gap: max(5.13vw, calc((100vw - var(--content-max-width)) / 2));
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

@media (width <=600px) {
    :root {
        --section-gutter: 20px;
        --section-padding-y: 20px;
    }
}

@media (width <= 767px) {
    :root {
        --global-heading-font-size: var(--global-mobile-heading-font-size);
        --global-description-font-size: var(
            --global-mobile-description-font-size
        );
        --global-subheading-font-size: var(
            --global-mobile-subheading-font-size
        );
        --global-eyebrow-font-size: var(--global-mobile-eyebrow-font-size);
        --global-cta-font-size: var(--global-mobile-cta-font-size);
    }
}

@media (width >= 768px) and (width <= 1024px) {
    :root {
        --global-heading-font-size: var(--global-tab-heading-font-size);
        --global-description-font-size: var(--global-tab-description-font-size);
        --global-subheading-font-size: var(--global-tab-subheading-font-size);
        --global-eyebrow-font-size: var(--global-tab-eyebrow-font-size);
        --global-cta-font-size: var(--global-tab-cta-font-size);
    }
}

@media (width > 1024px) {
    :root {
        --global-heading-font-size: var(--global-desktop-heading-font-size);
        --global-description-font-size: var(
            --global-desktop-description-font-size
        );
        --global-subheading-font-size: var(
            --global-desktop-subheading-font-size
        );
        --global-eyebrow-font-size: var(--global-desktop-eyebrow-font-size);
        --global-cta-font-size: var(--global-desktop-cta-font-size);
    }
}

section h2 div p {
    font-size: 36px;
}

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-m);
    line-height: 1.6;
}

body.appear {
    display: block;
}

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

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

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

@media (width <=900px) {
    h2 {
        color: var(--global-heading-color);
        font-family: var(--body-font-family);
        font-size: 24px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }
}

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

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

pre {
    padding: 16px;
    border-radius: 8px;
    background-color: var(--light-color);
    overflow-x: auto;
    white-space: pre;
}

main > div {
    /* margin: 40px 16px; */
}

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

/* buttons */
a.button:any-link,
button {
    box-sizing: border-box;
    display: inline-block;
    max-width: 100%;
    margin: 12px 0;
    border: 2px solid transparent;
    border-radius: 2.4em;
    padding: 0.5em 1.2em;
    font-family: var(--body-font-family);
    font-style: normal;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    background-color: var(--link-color);
    color: var(--background-color);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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.secondary,
button.secondary {
    background-color: unset;
    border: 2px solid currentcolor;
    color: var(--text-color);
}

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

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

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

/* sections */
main > .section {
    /* margin: 40px 0; */
}

main > .section > div {
    /* max-width: 1200px; */
    margin: auto;
    /* padding: 0 24px; */
}

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

@media (width >=900px) {
    main > .section > div {
        /* padding: 0 32px; */
    }
}

/* section metadata */
main .section.light,
main .section.highlight {
    background-color: var(--light-color);
    margin: 0;
    padding: 40px 0;
}

main .section.soft-blue {
    background-color: var(--soft-blue);
}

@media (width >= 900px) {
    .section.resource-page .default-content-wrapper {
        width: 43.75vw;
    }
}

.section.resource-detail-page-top {
    padding: 40px var(--side-gap) 2px;
}

.section.resource-detail-page-top h2 {
    font-family: var(--body-font-family);
    color: #000;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
    margin: 0;
    margin-bottom: 12px;
}

@media (width <=899px) {
    .section.resource-detail-page-top {
        padding: 32px var(--side-gap) 2px;
    }

    .section.resource-detail-page-top h2 {
        color: var(--global-heading-color);
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .section.resource-page {
        padding-inline: var(--side-gap);
    }
}

.section.resource-detail-page-top p {
    color: #475467;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin: 12px 0;
}

.section.resource-detail-page-middle h2 {
    margin: 0;
    margin-bottom: 12px;
    font-family: var(--body-font-family);
    color: #000;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
}

@media (width <= 899px) {
    .section.resource-detail-page-top p {
        font-size: 14px;
        line-height: normal;
        margin: 0;
    }

    .section.resource-detail-page-middle h2 {
        color: var(--global-heading-color);
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
}

.section.resource-detail-page-bottom {
    padding-bottom: 78px;
}

@media (width <=899px) {
    .section.resource-detail-page-bottom {
        padding-bottom: 32px;
    }
}

.section.resource-detail-page-bottom h2 {
    font-family: var(--body-font-family);
    color: #000;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
    margin: 0;
    margin-bottom: 12px;
}

.section.resource-detail-page-bottom p {
    margin: 12px 0;
    color: #475467;
    font-family: var(--body-font-family);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

@media (width <=899px) {
    .section.resource-detail-page-bottom h2 {
        font-size: 16px;
        margin-top: 12px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        color: var(--global-heading-color);
    }

    .section.resource-detail-page-bottom p {
        margin: 0;
        font-size: 14px;
    }
}

.section.resource-page p:has(picture) {
    font-family: var(--body-font-family);
    color: #475467;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin-top: 0px;
    margin-bottom: 20px;
}

@media (width <= 899px) {
    .section.resource-page p:has(picture) {
        margin-bottom: 16px;
        margin-top: 16px;
    }
}

.section.resource-page ul {
    font-size: 16px;
    font-family: var(--body-font-family);
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0;
    color: #475467;
    margin-left: auto;
    margin-right: auto;
    text-align: start;
    margin-top: 0px;
}

@media (width <= 899px) {
    .section.resource-page ul {
        font-size: 14px;
        font-style: normal;
        padding-left: 27px;
        line-height: normal;
    }
}

.section.resource-page ul li p {
    margin: unset;
}