/*  stylelint-disable CssSyntaxError  */
/*  stylelint-disable value-keyword-case  */

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

/*  IMPORTANT --- READ -- This file contains variables that are for either NO Brand or Every Brand  */

/*  Global File used for all sites - 
for global elements like body/sections, etc. - 
not for individual blocks  */
@import url('./typography.css');

:root {
  /*  old variables used before style system  */
  --light-color: #f8f8f8;

  /* Carousel */
  --dark-color: #505050;

  /* Modal */
  --gray-bg: #e4e4e4;

  /* buttons and confirmation */
  --color-dark-warm: #625e59;

  /* Various blocks */
  --color-darkest-warm: #1c1818;

  /* Various blocks */

  /*  All Brand Colors -- Generic no matter what the brand is  */

  /*  neutral colors  */
  --color-neutral-black: #000;
  --color-dark-black: #030101;

  /*  feedback colors  */
  --color-green: #008d46;
  --color-green-alt: #036131;
  --color-red: #ce001f;
  --color-yellow: #ffca1a;
  --color-pale-green: #a3d6bd;
  --color-pale-red: #036131;
  --color-pale-yellow: #ffecad;
  --color-neutral: #c5d4f5;

  /*  border-radius  */
  --border-radius-xs: 2px;
  --border-radius-s: 4px;
  --border-radius-m: 8px;
  --border-radius-l: 24px;
  --border-radius-xl: 48px;

  /*  heading sizes  */
  --icon-size-lg: 32px;
  --icon-size-md: 24px;
  --icon-size-sm: 16px;
  --icon-size-xs: 12px;

  /* Mobile */
  --page-width: 94%;
  --page-mini: 100%;
  --maxwidth-full: 100%;
}

@media (min-width: 992px) {
  :root {
    --body-font-size-m: 18px;
    --body-font-size-s: 16px;
    --maxwidth-full: 1920px;
    --page-width: 1440px;
    --page-mini: 1280px;
  }
}

/* Important to hide page until its fully loaded */
body:not(.appear) {
  display: none;
}

body.no-eds {
  display: block;
}

body:not(.no-eds) 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;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body:not(.no-eds) body.appear {
  display: block;
}

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

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

body:not(.no-eds) hr {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  border: 0;
  border-bottom: var(--shape-border-width-1) solid var(--color-neutral-300);
}

body:not(.no-eds) dl,
body:not(.no-eds) ol,
body:not(.no-eds) ul,
body:not(.no-eds) pre,
body:not(.no-eds) blockquote {
  margin-bottom: 0.8em;
}

body:not(.no-eds) code,
body:not(.no-eds) pre {
  font-size: var(--body-font-size-s);
}

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

body:not(.no-eds) input,
body:not(.no-eds) textarea,
body:not(.no-eds) select {
  font: inherit;
}

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

body:not(.no-eds) a:hover {
  text-decoration: underline;
  color: var(--link-hover-color);
}

body:not(.no-eds) .main img {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
}

body:not(.no-eds) .text-wrapper text.block p {
  margin-bottom: 1em;
}

.typo-footnote p {
  font-size: var(--body-font-size-xxxs);
}

.text-brand-warm-dark a {
  font-weight: 800;
}