/*
 * 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 "./master-tokens.css";
@import "./typography.css";
@import "./themes.css";
@import "./link.css";
@import "./button.css";
@import "./form.css";

:root {
  /* border-radius
  *
  *  source: aem-fe-evolution-tokens
  *
  *  --corners--button is em-based because it's
  *  used for elements containing text and designed
  *  to scale relatively if text size changes.
  *
  *  --corners--round is a value we used often
  *  to render a circular shape.
  */
  --corners--button: 2.5em;
  --corners--round: 50%;

  /* colors */
  --background-color: var(--color-bg-primary);
  --light-color: var(--color-bg-secondary);
  --dark-color: var(--color-text-secondary);
  --text-color: var(--color-text-primary);
  --link-color: var(--color-brand-primary);
  --link-hover-color: var(--color-brand-secondary);

  /* fonts */
  --body-font-family:
    var(--typefamily-primary), plus-jakarta-sans-fallback, arial, helvetica,
    sans-serif;
  --heading-font-family:
    var(--typefamily-primary), plus-jakarta-sans-fallback, arial, helvetica,
    sans-serif;

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

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

  /*
   * The actual rendered header height used for scroll-margin-top: below
   * 900px the nav-wrapper has no extra padding, but at 900px+ header.css
   * adds var(--space--x4) padding top/bottom around nav.
   */
  --sticky-header-height: var(--nav-height);

  /* --section-max-width: 1440px; */
  --section-max-width: 1312px;
  --section-gutter-inline: var(--space--x5);
  --section-padding-block: var(--space--x12);

  /* max width variables */
  --readable-max-width: 864px;
  --readable-content-max-width: 760px;
  --section-header-description-max-width: 900px;
  --content-max-width: 1440px;
  --content-grid-max-width: 1920px;
  --margin-inline-auto: 0 auto;

  /* semantic aliases for button modifier sizing */
  --button-size-md-height: var(--button-height-sm);
  --button-size-lg-height: var(--button-height-md);
  --button-size-xl-height: var(--button-height-lg);

  /* new tokens added as per PMCPLPE-1293 */
  --button-height-xs: 32px;
  --button-height-sm: 36px;
  --button-height-md: 48px;
  --button-height-lg: 56px;
  --button-radius-full: 999px;
  --card-min-width: 257px;
  --gradient-fade-width: 60px;
  --gradient-fade-height: 36px;
  --icon-size-xs: 16px;
  --icon-size-sm: 16px;
  --icon-size-md: 24px;
  --icon-size-nav: 1.125rem;
}

/* fallback fonts */
@font-face {
  font-family: plus-jakarta-sans-fallback;
  size-adjust: 91%;
  ascent-override: 104%;
  descent-override: 22%;
  line-gap-override: 0%;
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
}

@media (width < 900px) {
  :root {
    --nav-height: var(--space--x17);
  }
}

@media (width >= 600px) {
  :root {
    --section-gutter-inline: var(--space--x8);
    --section-padding-block: var(--space--x15);
  }
}

@media (width >=900px) {
  :root {
    /* body sizes */
    --body-font-size-m: 18px;
    --body-font-size-s: 16px;
    --body-font-size-xs: 14px;

    /* gutter margins */
    --section-gutter-inline: var(--space--x16);

    /* header.css adds var(--space--x4) padding top/bottom around nav here */
    --sticky-header-height: calc(var(--nav-height) + 2 * var(--space--x4));
  }
}

/* Some base rules are needed for this project. Setting
*  scrollbar-width and scroll-behavior at root on <html>
*/
html {
  scrollbar-width: thin;

  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }
}

/* Disable ligatures on <body> */
body {
  display: none;
  font-family: var(--body-font-family);
  font-size: var(--typesize-default);
  font-synthesis: none;
  font-feature-settings: normal;
  font-variant-ligatures: none;
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--background-color);
  margin: 0;
}

body.appear {
  display: block;
}

header {
  block-size: auto;
  position: sticky;
  inset-block-start: 0;
  z-index: 11;
}

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

main {
  position: relative;
}

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

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

/*
 * WCAG 2.4.11 Focus Not Obscured: the header is sticky/fixed at the top of the
 * viewport, so a browser's native scroll-into-view on focus can land a link or
 * control right underneath it. Reserve --nav-height of scroll space above any
 * focusable element so it isn't hidden behind the header when tabbing.
 * The skip-link handler programmatically focuses <main tabindex="-1"> , 
 * but this descendant-only selector never gives main a scroll margin. 
 * Activating “Skip to main content” after scrolling can therefore place 
 * the main landmark underneath the sticky nav; include main itself in the 
 * selector.
 */
main,
main :where(a, button, input, select, textarea, summary, [tabindex]) {
  scroll-margin-block-start: calc(
    var(--sticky-header-height) + var(--space--x2)
  );
}

body.configuration main {
  display: none;
}

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

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

pre {
  padding: var(--space--x4);
  border-radius: var(--corner--x2);
  background-color: var(--light-color);
  overflow-inline: auto;
  white-space: pre;
}

/* Emphasis, italics */
em,
i {
  font-style: italic;
}

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

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

strong {
  font-weight: var(--typeweight--semibold);
}

main img {
  max-inline-size: 100%;
  inline-size: auto;
  block-size: auto;
}

.icon {
  display: inline-block;
  block-size: var(--icon-size-md);
  inline-size: var(--icon-size-md);
}

.icon img {
  block-size: 100%;
  inline-size: 100%;
}

.section-header {
  position: relative;
  max-inline-size: var(--readable-max-width);
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

.section-header-title {
  margin: 0 0 var(--space--x5);
  color: var(--color-theme-text-primary);
  font-size: clamp(2.125rem, 2.75vw, 3.25rem);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 0%;
}

.section-header-description {
  max-inline-size: var(--section-header-description-max-width);
  margin: 0 auto;
  margin-block-end: var(--space--x9);
  color: var(--color-theme-text-secondary);
  font-size: clamp(1rem, 1rem, 1rem);
  font-weight: 400;
  line-height: 1.6;
}

.section.full-width,
.section.two-columns,
.section.three-columns,
.section.four-columns {
  background-color: var(--color-theme-background);
  padding-block: var(--space--x12);
  padding-inline: var(--space--x8);

  @media (width >= 600px) {
    padding-block: var(--space--x15);
  }

  @media (width >= 900px) {
    padding-inline: var(--space--x16);
  }
}

.section[class*="theme-"] {
  background-color: var(--color-theme-background);
}

.section.full-width > .section-header,
.section.two-columns > .section-header,
.section.three-columns > .section-header,
.section.four-columns > .section-header {
  padding: var(--space--x12) var(--space--x8) 0;

  @media (width >= 600px) {
    padding-block-start: var(--space--x15);
  }

  @media (width >= 900px) {
    padding-inline: var(--space--x16);
  }
}

.section.full-width .section-header .section-header-title,
.section.two-columns .section-header .section-header-title,
.section.three-columns .section-header .section-header-title,
.section.four-columns .section-header .section-header-title {
  color: var(--color-theme-text-primary);
}

.section.full-width .section-header .section-header-description,
.section.two-columns .section-header .section-header-description,
.section.three-columns .section-header .section-header-description,
.section.four-columns .section-header .section-header-description {
  color: var(--color-theme-text-secondary);
}

.section[class*="theme-"] > .section-header .section-header-description {
  color: var(--color-theme-text-secondary);
}

.section.full-width > .section-layout-wrapper,
.section.two-columns > .section-layout-wrapper,
.section.three-columns > .section-layout-wrapper,
.section.four-columns > .section-layout-wrapper {
  display: grid;
  gap: var(--space--x6);
  box-sizing: border-box;
  max-inline-size: var(--content-max-width);
  margin-inline: auto;
}

.section.full-width > .section-layout-wrapper {
  grid-template-columns: 1fr;
}

.section.two-columns > .section-layout-wrapper {
  grid-template-columns: repeat(2, 1fr);
}

.section.three-columns > .section-layout-wrapper {
  grid-template-columns: repeat(3, 1fr);
}

.section.four-columns > .section-layout-wrapper {
  grid-template-columns: repeat(4, 1fr);
}

/*
 * Section header (Block Title + Block Description) injected by
 * decorateSectionLayouts() in scripts.js.  Spans all columns.
 */

.section.two-columns > .section-layout-wrapper > .section-header,
.section.three-columns > .section-layout-wrapper > .section-header,
.section.four-columns > .section-layout-wrapper > .section-header {
  grid-column: 1 / -1;
}

.section-header-description :is(p, li) {
  color: inherit;
}

.section-header-description p {
  margin-block: 0;
}

/* Authored lists: keep markers aligned with their text inside the centered header */
.section-header-description :is(ul, ol) {
  inline-size: fit-content;
  max-inline-size: 100%;
  margin-block: 0;
  margin-inline: auto;
  padding-inline-start: var(--space--x6);
  text-align: start;
}

.section-header-description li {
  margin-block: 0;
}

.section-header-description a {
  color: var(--color-theme-text-link);
}

.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Collapse to single column on small screens */
@media (width <=599px) {
  .section.two-columns > .section-layout-wrapper,
  .section.three-columns > .section-layout-wrapper,
  .section.four-columns > .section-layout-wrapper {
    grid-template-columns: 1fr;
  }
}

/* Two-column max on tablets */
@media (width >=600px) and (width <=899px) {
  .section-header-description {
    margin-block-end: var(--space--x12);
  }

  .section.three-columns > .section-layout-wrapper,
  .section.four-columns > .section-layout-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width >=900px) {
  .section.two-columns > .section-layout-wrapper,
  .section.three-columns > .section-layout-wrapper,
  .section.four-columns > .section-layout-wrapper {
    gap: var(--space--x8);
  }

  .section-header-description {
    margin-block-end: var(--space--x12);
  }
}

/* Global wrapper reset + themed block background */
main > .section {
  .grid-gutters {
    background-color: var(--color-theme-background);

    &:not(.grid-gutters--full-bleed) {
      padding-block: var(--section-padding-block);
      padding-inline: var(--section-gutter-inline);
    }

    .grid-width {
      margin-inline: auto;

      &:not(.grid-width--full-bleed) {
        max-inline-size: var(--section-max-width);
        margin-inline: auto;
      }

      /* tabs section when blocks are inside */
      .grid-gutters {
        padding: 0;
      }
    }
  }
}

main > .section > [class$="-wrapper"] {
  max-inline-size: none;
  margin: 0;
  padding: 0;

  &.default-content-wrapper {
    background-color: var(--color-theme-background);
    padding-block: var(--space--x12);
    padding-inline: var(--space--x8);

    @media (width >= 600px) {
      padding-block: var(--space--x15);
    }

    @media (width >= 900px) {
      padding-inline: var(--space--x16);
    }

    /* Width constraints are opt-in via explicit utility classes from block decoration. */
    & > .block.grid-gutters > .grid-width {
      max-inline-size: var(--section-max-width);
      margin-inline: auto;
    }
  }
}

/* Section - Restricted Width: block content is inset to an editorial column
   while the themed block background still bleeds to the full page width.
  Mobile-first: base covers mobile (up to 599px). */
main > .section.section-restricted-width {
  --section-restricted-padding-block: var(--space--x12);
  --section-restricted-gutter-inline: var(--space--x5);

  & > [class$="-wrapper"] .block.grid-gutters > .grid-width {
    max-inline-size: var(--readable-max-width);
  }
}

/* Tablet portrait/landscape */
@media (width >= 600px) {
  main > .section.section-restricted-width {
    --section-restricted-padding-block: var(--space--x15);
    --section-restricted-gutter-inline: var(--space--x8);
  }
}

/* animation global styles */
.anim-wrapper {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
}

.anim-lottie > svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.anim-reduced .anim-lottie,
.anim-reduced .anim-canvas {
  display: none;
}