/*
 * 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 from style guide */
  --color-black: #000;
  --color-white: #FFF;
  --color-slate: #393939;
  --color-dark-grey: #757575;
  --color-light-grey: #949494;
  --color-off-white: #F2F2F2;
  --color-rain: #004C95;
  --color-water: #0084FF;
  --color-sky: #A1D9FF;
  --color-green: #50BF93;
  --color-fairway: #25845D;
  --color-rough: #86A646;
  --color-range: #EEFC47;
  --color-sun: #FAE100;
  --color-flag: #FF4B04;
  --color-mulligan: #FF4F04;
  --color-bunker: #F2D6BD;
  --color-sand: #F5EFEB;
  --color-stone: #D6D4D2;
  --color-path: #8A8E84;
  --color-fringe: #4F4F32;
  --color-highlight-sky: #DEF2FF;
  --color-highlight-green: #C2E9D9;
  --color-highlight-sun: #FDF4A6;
  --color-highlight-mulligan: #FFC1A7;
  --color-black-75: #000000BF;
  --color-black-50: #00000080;
  --color-black-25: #00000040;
  --color-black-20: #0003;
  --color-black-10: #0000001A;
  --color-black-05: #0000000D;
  --color-white-75: #FFFFFFBF;
  --color-white-50: #FFFFFF80;
  --color-white-25: #FFFFFF40;
  --color-white-20: #FFF3;
  --color-white-10: #FFFFFF1A;
  --color-white-05: #FFFFFF0D; 

  /* other colors used */  
  --color-near-black: #1A202C;
  --color-tour-blue: #20487C;
  --color-tour-red: #d90109;

  /* element colors */
  --text-color: var(--color-near-black);
  --background-color: var(--color-white);
  --link-color: var(--text-color);
  --link-hover-color: var(--color-black-50);
  --overlay-background-color: var(--color-black-50);

  /* fonts */
  --body-font-family: "Suisse Intl", "Suisse Intl-fallback", "Helvetica Neue", helvetica, arial, sans-serif;
  --heading-font-family: var(--body-font-family);
  --fixed-font-family: 'Roboto Mono', menlo, consolas, 'Liberation Mono', monospace;

  /* heading sizes */
  --heading-font-size-xxxl: 7rem;
  --heading-font-size-xxl: 5.8rem;
  --heading-font-size-xl: 4rem;
  --heading-font-size-l: 3.5rem;
  --heading-font-size-m: 2.4rem;
  --heading-font-size-s: 1.9rem;
  --heading-font-size-xs: 1.5rem;
  --heading-font-size-xxs: 1.3rem;
  --heading-line-height-xxxl: 7rem;
  --heading-line-height-xxl: 6.2rem;
  --heading-line-height-xl: 4.4rem;
  --heading-line-height-l: 3.8rem;
  --heading-line-height-m: 2.8rem;
  --heading-line-height-s: 2.2rem;
  --heading-line-height-xs: 1.6rem;
  --heading-line-height-xxs: 1.4rem;
  --heading-letter-spacing-xxxl: -1.4px;
  --heading-letter-spacing-xxl: -1.15px;
  --heading-letter-spacing-xl: -.8px;
  --heading-letter-spacing-l: -.7px;
  --heading-letter-spacing-m: -.5px;
  --heading-letter-spacing-s: -.2px;
  --heading-letter-spacing-xs: -.15px;
  --heading-letter-spacing-xxs: 0;

  /* body sizes */
  --body-font-size-xxl: 2rem;
  --body-font-size-xl: 1.7rem;
  --body-font-size-l: 1.5rem;
  --body-font-size-m: 1.3rem;
  --body-font-size-s: 1.1rem;
  --body-font-size-xs: .9rem;
  --body-line-height-xxl: 2.8rem;
  --body-line-height-xl: 2.6rem;
  --body-line-height-l: 2.4rem;
  --body-line-height-m: 1.8rem;
  --body-line-height-s: 1.4rem;
  --body-letter-spacing-xxl: 0;
  --body-letter-spacing-xl: 0;
  --body-letter-spacing-l: 0;
  --body-letter-spacing-m: 0;
  --body-letter-spacing-s: .2px;


  /* nav height */
  --nav-height: 88px;
}

html {
  font-size: 62.5%;
}

@font-face {
  font-family: 'Suisse Intl-fallback';
  src: local(arial);
  size-adjust: 101%;
  ascent-override: 103%;
  descent-override: normal;
  line-gap-override: normal;
}

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

body.appear {
  display: unset;
}

/* progressive section appearance */
main .section[data-section-status='loading'],
main .section[data-section-status='initialized'] {
  display: none;
}

header {
  height: var(--nav-height);
}

header .header,
footer .footer {
  display: none;
}

h1, h2, h3,
h4, h5, h6 {
  font-family: var(--heading-font-family);
  font-weight: 600;
  margin-top: 1em;
  margin-bottom: .5em;
  scroll-margin: calc(var(--nav-height) + 1em);
}

.heading-xxxl { 
  font-size: var(--heading-font-size-xxxl);
  line-height: var(--heading-line-height-xxxl);
  letter-spacing: var(--heading-letter-spacing-xxxl);
  font-weight: 600;
}

h1, .heading-xxl { 
  font-size: var(--heading-font-size-xxl);
  line-height: var(--heading-line-height-xxl);
  letter-spacing: var(--heading-letter-spacing-xxl);
  font-weight: 600;
}

h2, .heading-xl { 
  font-size: var(--heading-font-size-xl);
  line-height: var(--heading-line-height-xl);
  letter-spacing: var(--heading-letter-spacing-xl);
  font-weight: 600;
}

h3, .heading-l { 
  font-size: var(--heading-font-size-l);
  line-height: var(--heading-line-height-l);
  letter-spacing: var(--heading-letter-spacing-l);
  font-weight: 600;
}

h4, .heading-m { 
  font-size: var(--heading-font-size-m);
  line-height: var(--heading-line-height-m);
  letter-spacing: var(--heading-letter-spacing-m);
  font-weight: 600;
}

h5, .heading-s { 
  font-size: var(--heading-font-size-s);
  line-height: var(--heading-line-height-s);
  letter-spacing: var(--heading-letter-spacing-s);
  font-weight: 600;
}

h6, .heading-xs { 
  font-size: var(--heading-font-size-xs);
  line-height: var(--heading-line-height-xs);
  letter-spacing: var(--heading-letter-spacing-xs);
  font-weight: 600;
}

.heading-xxs {
  font-size: var(--heading-font-size-xxs);
  line-height: var(--heading-line-height-xxs);
  letter-spacing: var(--heading-letter-spacing-xxs);
  font-weight: 600;
}

.text-xxl {
  font-size: var(--body-font-size-xxl);
  line-height: var(--body-line-height-xxl);
  letter-spacing: var(--body-letter-spacing-xxl);
  font-weight: 400;
}

.text-xl {
  font-size: var(--body-font-size-xl);
  line-height: var(--body-line-height-xl);
  letter-spacing: var(--body-letter-spacing-xl);
  font-weight: 400;
}

.text-l {
  font-size: var(--body-font-size-l);
  line-height: var(--body-line-height-l);
  letter-spacing: var(--body-letter-spacing-l);
  font-weight: 400;
}

.text-m {
  font-size: var(--body-font-size-m);
  line-height: var(--body-line-height-m);
  letter-spacing: var(--body-letter-spacing-m);
  font-weight: 400;
}

.text-s {
  font-size: var(--body-font-size-s);
  line-height: var(--body-line-height-s);
  letter-spacing: var(--body-letter-spacing-s);
  font-weight: 400;
}

p, dl, ol, ul, pre {
  margin-top: 1em;
  margin-bottom: 1em;
}

a:any-link {
  color: var(--link-color);
  text-decoration: none;
}

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

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

code, samp {
  padding: .125em;
}

pre {
  overflow: scroll;
}

/* buttons */
.button-container {
  display: flex; 
  width: 100%; 
  gap: 1rem;
}

a.button:any-link, button {
  font-family: var(--body-font-family);
  font-size: var(--heading-font-size-xs);
  line-height: var(--heading-line-height-xs);
  letter-spacing: var(--heading-letter-spacing-xs);
  font-style: normal; 
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  box-sizing: border-box;
  padding: 1.6rem 2.4rem;
  margin: 16px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 100px;
  cursor: pointer;
  color: var(--background-color);
  background-color: var(--link-color);
  border: none;
  flex: 0 1 250px;
}

a.button:hover, button:hover  {
  background-color: var(--link-hover-color);
  cursor: pointer;
}

button:disabled, button:disabled:hover {
  background-color: var(--overlay-background-color);
  cursor: unset;
}

a.button.secondary, button.secondary {
  background-color: unset;
  border: 2px solid currentcolor;
  color: var(--text-color);
} 

main input {
  font-size: 1.25rem;
  width: 100%;
  max-width: 50rem;
  display: block;
  margin-bottom: 1rem;
  padding: 0.75rem 0.6rem;    
  border-radius: 0.25rem;
  box-sizing: border-box;
  border: 1px solid var(--text-color);
  color: var(--text-color);
  background-color: var(--background-color);
}

main input:hover {
  border: 1px solid var(--text-color);
}

main .section {
  padding: 2rem 1rem;
}

main pre {
  background-color: var(--overlay-background-color);
  padding: 1em;
  border-radius: .25em;
  overflow-x: auto;
  white-space: pre;
}

hr {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  border: 0;
  border-bottom: 1px solid var(--overlay-background-color);
}

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

@media (min-width: 600px) {
  main .section {
    padding: 3rem 1rem;
  }  
}

@media (min-width: 900px) {  
  .section > div {
    max-width: 1200px;
    margin: auto;
  }
}

main .section > .default-content-wrapper {
  padding: 1rem 2rem;
}

/* highlight */
main .section.highlight > .default-content-wrapper {
  background-color: var(--color-white);
  color: var(--text-color);
}

/* shadow */
main .section.shadow {
  background-color: var(--text-color);
  color: var(--color-white);
}

/* media headline */
main .section.media-headline h1 {
  background-color: var(--color-tour-blue);
  color: var(--background-color);
  text-align: center;
  font-size: var(--heading-font-size-xl);
  line-height: var(--heading-line-height-xl);
  letter-spacing: var(--heading-letter-spacing-xl);
}

@media (min-width: 600px) {
  main .section.media-headline h1 {
    font-size: var(--heading-font-size-xxl);
    line-height: var(--heading-line-height-xxl);
    letter-spacing: var(--heading-letter-spacing-xxl);
  }
}

/* background image */
main .section[data-section-status='loaded'][data-background] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  min-height: min(150vw, 600px);
}

main .section[data-background] picture.section-background {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
}

main .section[data-background] picture.section-background img {
  max-width: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}