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

/* =============================================================================
   Metric fallback @font-face (CLS) — inlined to avoid an extra stylesheet request.
   Keep values aligned with Fallback Fonts in packages/shared-styles/src/base/fonts.css.
   Webfont WOFF2: styles/fonts.css via loadFonts() in scripts.js.
   ============================================================================= */

/* stylelint-disable max-line-length */

@font-face {
  font-family: 'Subway Sans Fallback';
  src: local('Arial');
  size-adjust: 100.5%;
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Subway Sans Condensed Fallback';
  src: local('Arial');
  size-adjust: 88%;
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
}

:root {
  /* colors — mapped to shared design tokens (see tailwind-theme.js) */
  --background-color: var(--color-neutral-white);
  --light-color: var(--color-neutral-grey-light);
  --dark-color: var(--color-neutral-light-spinach);
  --text-color: var(--color-neutral-black);
  --link-color: var(--color-spinach);
  --link-hover-color: var(--color-spinach);

  /* fonts — mapped to shared font families */
  --body-font-family: var(--font-sans);
  --heading-font-family: var(--text-h1-font);

  /* body sizes — mobile-first, mapped to shared typography tokens */
  --body-font-size-m: var(--text-body-lg-size); /* 16px */
  --body-font-size-s: var(--text-body-md-size); /* 14px */
  --body-font-size-xs: var(--text-body-sm-size); /* 12px */

  /* heading sizes — mobile-first, mapped to shared heading tokens */
  --heading-font-size-xxl: var(--text-h1-mobile-size); /* 52px */
  --heading-font-size-xl: var(--text-h2-mobile-size); /* 40px */
  --heading-font-size-l: var(--text-h3-mobile-size); /* 32px */
  --heading-font-size-m: var(--text-h4-mobile-size); /* 20px */
  --heading-font-size-s: var(--text-h5-mobile-size); /* 22px */
  --heading-font-size-xs: var(--text-h6-mobile-size); /* 18px */

  /* nav height */
  --nav-height: 64px;
  --desktop-font-padding-block: 5.25rem;
  --desktop-font-padding-inline: 1.375rem;
}

@media (width >= 1024px) {
  :root {
    /* heading sizes — desktop, mapped to shared heading tokens */
    --heading-font-size-xxl: var(--text-h1-size); /* 72px */
    --heading-font-size-xl: var(--text-h2-size); /* 64px */
    --heading-font-size-l: var(--text-h3-size); /* 40px */
    --heading-font-size-m: var(--text-h4-size); /* 32px */
    --heading-font-size-s: var(--text-h5-size); /* 24px */
    --heading-font-size-xs: var(--text-h6-size); /* 20px */
    --desktop-font-padding-inline: 3.9375rem;
  }
}

html {
  scroll-behavior: smooth;
}

body {
  display: none;
  margin: 0;
  background-color: var(--color-neutral-light-cream);
  color: var(--color-spinach);
  font-family: var(--font-sans);
  font-size: var(--body-font-size-m);
  font-weight: var(--text-body-lg-weight);
  line-height: var(--text-body-lg-line-height);
  letter-spacing: var(--text-body-lg-spacing);
}

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: var(--spacing-0);
  margin-bottom: 0.25em;
  font-family: var(--heading-font-family);
  scroll-margin: 40px;
}

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

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

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

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

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

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

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

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

/* links */
a:any-link:not(.btn) {
  color: var(--link-color);
  text-decoration: underline;
  overflow-wrap: break-word;
  text-underline-offset: 6px;
}

a:hover:not(.btn) {
  color: var(--link-hover-color);
}

/* buttons — mapped to shared button tokens */
a.button:any-link,
button {
  box-sizing: border-box;
  display: inline-block;
  max-width: 100%;
  margin: 12px 0;
  border: 2px solid var(--color-btn-filled-rest);
  border-radius: var(--radius-button);
  padding: 0.5em 1.2em;
  font-family: var(--body-font-family);
  font-style: normal;
  font-size: var(--text-cta-size);
  font-weight: var(--text-cta-weight);
  line-height: var(--text-cta-line-height);
  letter-spacing: var(--text-cta-spacing);
  text-align: center;
  text-decoration: none;
  background-color: var(--color-btn-filled-rest);
  color: var(--color-btn-filled-text);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.button:hover,
a.button:focus,
button:hover,
button:focus {
  background-color: var(--color-btn-filled-hover);
  border-color: var(--color-btn-filled-hover);
  cursor: pointer;
}

a.button:focus,
button:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-btn-focus-ring);
}

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

a.button.secondary,
button.secondary {
  background-color: transparent;
  border: 2px solid var(--color-btn-outlined-rest);
  color: var(--color-btn-outlined-text-rest);
}

a.button.secondary:hover,
a.button.secondary:focus,
button.secondary:hover,
button.secondary:focus {
  background-color: var(--color-btn-outlined-hover);
  color: var(--color-btn-outlined-text-hover);
}

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

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

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

main > .section {
  max-width: 1280px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: var(--spacing-10) var(--spacing-0);
}

main > .section > div {
  margin: 0 auto;
  padding-right: var(--spacing-3);
  padding-left: var(--spacing-3);
}

main > .section.contained > div {
  max-width: 762px;
  margin: 0 auto;
}

main > .section.full-bleed {
  padding: var(--spacing-0);
}

main > .section.full-bleed > div {
  padding: var(--spacing-0);
}

main > .section.img-only > div img {
  width: 100%;
}

/* Default first section flush */
main > .section:first-child {
  margin-top: var(--spacing-0);
  padding-top: var(--spacing-0);
}

/* section metadata */
main .section.light,
main .section[data-bg-color='subway-spinach'] {
  background-color: var(--color-spinach);
  color: var(--color-neutral-light-cream);
}

main .section[data-bg-color='subway-green'] {
  background-color: var(--color-subway-green);
  color: var(--color-neutral-dark-cream);
}

main .section[data-bg-color='subway-yellow'] {
  background-color: var(--color-subway-yellow);
  color: var(--color-spinach);
}

main .section[data-bg-color='dark-cream'] {
  background-color: var(--color-neutral-dark-cream);
  color: var(--color-spinach);
}

main .section[data-bg-color='red-onion'] {
  background-color: var(--color-red-onion);
  color: var(--color-neutral-dark-cream);
}

main .section.desktop-font {
  display: flex;
  align-items: center;
  justify-content: center;
}

main .section.desktop-font * {
  color: var(--color-neutral-dark-cream);
  width: 100%;
  box-sizing: border-box;
  font-family: var(--text-app-h1-font);
  font-size: var(--spacing-16);
  font-weight: var(--text-display-1-weight);
  line-height: var(--text-display-1-line-height);
  letter-spacing: var(--text-display-1-spacing);
  padding: var(--desktop-font-padding-block) var(--desktop-font-padding-inline);
  margin: var(--spacing-0);
}

main > .section.no-vertical-padding {
  padding-right: var(--spacing-3);
  padding-left: var(--spacing-3);
}

main > .section.no-vertical-padding > div {
  padding: var(--spacing-0) var(--spacing-3);
}

main > .section.itemnotfound {
  background-image: url('../../icons/error-page-bg.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  min-height: 383px;

  > div {
    display: flex;
    flex-direction: column;

    .error-title {
      margin-top: var(--spacing-0);
    }

    .error-desc {
      padding: var(--spacing-8) 0 var(--spacing-12);
    }

    .button-container {
      text-transform: capitalize;
    }
  }
}

/* Opt out of flush for 404 block and for sections before sticky nav */
main > .section:first-child.itemnotfound,
main > .section:first-child:has(+ .section.sticky-nav-container) {
  padding-top: var(--spacing-10);
}

@media (width >= 768px) {
  main > .section.itemnotfound {
    background-position: 100% 100%;

    > div {
      max-width: 500px;
      margin: 0 var(--spacing-20);
    }
  }
}

@media (width >= 1024px) {
  main > .section {
    padding: var(--spacing-20) var(--spacing-0);
  }

  main > .section:first-child.itemnotfound,
  main > .section:first-child:has(+ .section.sticky-nav-container) {
    padding-top: var(--spacing-20);
  }

  main > .section > div {
    padding-right: var(--spacing-15);
    padding-left: var(--spacing-15);
  }

  main > .section.equal-padding {
    padding: var(--spacing-15) var(--spacing-0);
  }

  main > .section.equal-padding > div {
    padding: 0 var(--spacing-15);
  }

  main > .section.no-vertical-padding {
    margin: var(--spacing-0) auto;
    padding: var(--spacing-0);
  }

  main > .section.no-vertical-padding > div {
    padding-right: var(--spacing-15);
    padding-left: var(--spacing-15);
  }

  main .section.desktop-font * {
    font-size: var(--text-display-2-size);
  }
}