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

@import url('./base/variables.css');
@import url('./base/fonts.css');
@import url('./base/text.css');
@import url('./base/button.css');
@import url('./base/overrides.css');

@layer utility {
    html {
        color: rgb(var(--color-default));
        font-size: 62.5%;
        font-family: var(--font-family-default);
        line-height: var(--line-height-body);
        text-size-adjust: 100%;
        -webkit-tap-highlight-color: rgb(var(--color-black-protiviti) / 0%);

        &:focus-within {
            scroll-behavior: smooth;
        }

        &.lock-scroll {
            margin-inline-end: var(--scroll-width);
        }
    }

    body {
        font-size: var(--font-copy-default);
        margin: 0;

        .lock-scroll & {
            overflow: hidden;
        }
    }

    ::selection {
        background: #b3d4fc;
        text-shadow: none;
    }

    figure,
    blockquote,
    dl,
    dd {
        margin: 0;
    }

    a {
        color: rgb(var(--color-link) / var(--link-alpha, 1));
        text-decoration-color: rgb(var(--color-link) / var(--alpha-underline, 0));
        text-decoration-skip-ink: auto;
        transition: color var(--transition-time), text-decoration-color var(--transition-time);

        &:active,
        &:hover,
        &:focus {
            outline: 0;
        }

        &:focus-visible {
            outline: var(--border-light) solid rgb(var(--color-focus-visible));
        }

        &:not(.button):hover {
            --alpha-underline: 1;
            --color-link: var(--color-green-lime);
        }

        &[disabled] {
            cursor: none;
            pointer-events: none;
        }
    }

    :where(input, button, textarea, select, cite, label) {
        font: inherit;
    }

    textarea {
        resize: vertical;
    }

    address {
        font-style: normal;
    }

    button {
        border: none;
        background: none;
        color: inherit;
        cursor: pointer;
        padding: 0;

        &:focus-visible {
            outline: var(--border-light) solid rgb(var(--color-focus-visible));
        }

        &[disabled] {
            cursor: none;
            pointer-events: none;
        }
    }

    [role='button'] {
        cursor: pointer;
    }

    strong {
        font-weight: var(--font-weight-bold);
    }

    small {
        font-size: var(--font-copy-extra-small);
    }

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

    :where(ul, ol) {
        list-style: none;
        margin-block: 0;
        padding-inline-start: 0;
    }

    img {
        font-style: italic;
        height: auto;
        max-width: 100%;
        vertical-align: middle;

        .full-width-image &,
        &.full-width-image {
            width: 100%;
        }
    }

    svg {
        display: block;
        height: auto;
        width: 100%;
    }
}

@layer core {
    .center-content {
        --section-gutter: var(--spacing-size-4);
        --content-max-width: var(--max-width-content);
        --breakout-max-width: var(--max-width-breakout);
        --breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);

        display: grid;
        grid-template-columns:
      [full-width-start] minmax(var(--section-gutter), 1fr)
      [breakout-start breakout-left-start] minmax(0, var(--breakout-size))
      [content-start breakout-right-start] min(
        100% - (var(--section-gutter) * 2),
        var(--content-max-width)
      )
      [content-end breakout-left-end]
      minmax(0, var(--breakout-size)) [breakout-end breakout-right-end]
      minmax(var(--section-gutter), 1fr) [full-width-end];

        > * {
            grid-column: content;
        }

        > .breakout {
            grid-column: breakout;

            & -left {
                grid-column: breakout-left;
            }

            & -right {
                grid-column: breakout-right;
            }
        }

        > .full-width {
            grid-column: full-width;
        }
    }
}

@layer component {
    .link-list {
        display: flex;
        gap: var(--link-list-spacing, var(--spacing-size-3));
    }

    @media (width <= 575px) {
        .link-list {
            flex-direction: column;
        }
    }

    @media (width >= 768px) {
        .link-list {
            --link-list-spacing: var(--spacing-size-4);
        }
    }

    .link-list.vertical {
        --link-list-spacing: var(--spacing-size-1);

        flex-direction: column;
    }

    .light-text .link-list {
        --color-link: var(--color-light);
    }
}

@layer component {
    .section-wrapper {
        --section-padding: var(--spacing-size-13);
        --section-gap: var(--spacing-size-10);

        margin-block: var(--section-padding);
        row-gap: var(--section-gap);
    }

    @media (width >= 768px) {
        .section-wrapper {
            --section-padding: var(--spacing-size-15);
        }
    }

    @media (width >= 992px) {
        .section-wrapper {
            --section-padding: var(--spacing-size-16);
        }
    }

    .section-wrapper.no-bottom-margin {
        margin-block-end: 0;
    }

    .section-wrapper.no-top-margin {
        margin-block-start: 0;
    }

    .section-wrapper.no-margin {
        margin-block: 0;
    }

    .section-wrapper[class*='bg-'] {
        margin-block: 0;
        padding-block: var(--section-padding);
    }
}

@layer core {
    /* Background color utilities */
    .bg-color-white {
        background-color: rgb(var(--color-white));
    }

    .bg-color-blue-navy {
        background-color: rgb(var(--color-blue-navy));
    }

    .bg-color-blue-light-10 {
        background-color: rgb(var(--color-blue-light-10));
    }

    .bg-color-blue-light-30 {
        background-color: rgb(var(--color-blue-light-30));
    }

    .bg-color-black-protiviti {
        background-color: rgb(var(--color-black-protiviti));
    }

    .bg-color-gray-light {
        background-color: rgb(var(--color-gray-light));
    }
}