/*
 * 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 {
  /* ==========================================================================
     AMP brand palette (exact values from Figma — fileKey 8t8Q217iZLrLpm70I5yYXP)
     ========================================================================== */
  --amp-ink-blue: #001e41;            /* primary brand dark */
  --amp-ultramarine: #0018f0;         /* accent / links / primary buttons */
  --amp-ultramarine-hover: #001ac5;
  --amp-ultramarine-deep: #001b99;
  --amp-ultramarine-pressed: #001c83;
  --amp-text: #313131;                /* body copy */
  --amp-slate: #4c617a;               /* secondary text */
  --amp-slate-light: #738396;         /* muted / metadata */
  --amp-border: #bfc7cf;
  --amp-border-light: #e2e2e2;
  --amp-grey-e8: #e8e8e8;
  --amp-grey-d2: #d2d2d2;
  --amp-bg: #fff;
  --amp-bg-grey: #f6f6f6;
  --amp-bg-cool: #f3f5f7;
  --amp-bg-stone: #f6f3ea;            /* warm stone surface */
  --amp-cyan: #6ce1ff;
  --amp-cyan-light: #def9ff;
  --amp-blue-pale: #eaf4ff;           /* outline-button hover fill */
  --amp-blue-tint: #d5e8ff;           /* related-links row hover fill */
  --amp-blue-wash: #f0f3ff;           /* share-link hover fill */
  --amp-teal: #00d5ac;
  --amp-teal-hover: #00c29c;          /* cta-banner button hover */
  --amp-teal-dark: #00a485;
  --amp-green: #009578;

  /* boilerplate semantic aliases mapped to AMP brand */
  --background-color: var(--amp-bg);
  --light-color: var(--amp-bg-grey);
  --dark-color: var(--amp-ink-blue);
  --text-color: var(--amp-text);
  --link-color: var(--amp-ultramarine);
  --link-hover-color: var(--amp-ultramarine-hover);

  /* ==========================================================================
     Typography
     Headings: Hurme Geometric Sans 1 (SemiBold 600) — commercial font, see note
     Body:     Open Sans (400 / 600) — open licence
     ========================================================================== */
  --body-font-family: 'Open Sans', open-sans-fallback, -apple-system, system-ui, sans-serif;
  --heading-font-family: 'Hurme Geometric Sans 1', hurme-fallback, -apple-system, system-ui, sans-serif;

  /* body sizes (MOBILE-first; desktop overrides at --bp-md below) */
  --body-font-size-l: 18px;           /* BodyLrg */
  --body-font-size-s: 16px;           /* BodySml */
  --body-font-size-xs: 14px;          /* BodyXsml */
  --body-font-size-fineprint: 12px;   /* Fineprint */
  --body-font-size-fineprint-xs: 10px;
  --body-line-height-l: 28px;
  --body-line-height-m: 24px;
  --body-line-height-s: 24px;
  --body-line-height-xs: 20px;

  /* heading sizes (MOBILE-first) */
  --heading-font-size-display: 44px;  /* Data */
  --heading-font-size-xxl: 32px;      /* H1 */
  --heading-font-size-xl: 24px;       /* H2 */
  --heading-font-size-l: 22px;        /* H3 */
  --heading-font-size-m: 20px;        /* H4 */
  --heading-font-size-s: 18px;        /* H5 */
  --heading-font-size-xs: 16px;       /* H6 */

  /* heading line-heights (MOBILE) */
  --heading-line-height-display: 0.92;
  --heading-line-height-xxl: 1.04;    /* H1 */
  --heading-line-height-xl: 28px;     /* H2 */
  --heading-line-height-l: 24px;      /* H3 */
  --heading-line-height-m: 24px;      /* H4 */
  --heading-line-height-s: 20px;      /* H5 */
  --heading-line-height-xs: 20px;     /* H6 */

  /* heading letter-spacing (MOBILE) */
  --heading-tracking-display: -0.02em;
  --heading-tracking-xxl: -0.0156em;
  --heading-tracking-xl: -0.0208em;
  --heading-tracking-l: -0.0227em;
  --heading-tracking-m: -0.025em;
  --heading-tracking-s: -0.0139em;
  --heading-tracking-xs: -0.0156em;

  /* ==========================================================================
     Spacing, radii, breakpoints
     ========================================================================== */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-s: 12px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;

  /* Brand uses square edges everywhere; radius tokens are 0. */
  --radius-card: 0;
  --radius-pill: 0;

  /* AMP breakpoints (reference values; CSS media queries use literals) */
  --bp-2sm: 576px;
  --bp-md: 768px;
  --bp-2md: 992px;
  --bp-lg: 1024px;
  --bp-xl: 1440px;

  /* single content-panel width for every EDS surface — header, footer, standard
     sections and the article. UX-confirmed: content caps at 1248 and touches
     that edge; the space beyond 1248 is just natural viewport gutter (centring
     margin on wide screens, a small responsive gutter below the cap). */
  --content-max-width: 1248px;

  /* article reading-column width (matches articles/header content column) */
  --content-reading: 776px;

  /* article side rail width (desktop two-column layout). Within the 1248 content
     panel plus the 48px column gap, this leaves the main content column at 888px
     (776px + 56px padding each side). Consumed only in the >=1024px grids in
     article.css and related-links.css. */
  --article-rail-width: 312px;

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

  /* Font weights */
  --font-weight-400: 400;
  --font-weight-600: 600;

  /* ==========================================================================
     Font sizes
     ========================================================================== */

  --font-size-10: 0.625rem;
  --font-size-11: 0.688rem;
  --font-size-12: 0.75rem;
  --font-size-14: 0.875rem;
  --font-size-16: 1rem;
  --font-size-17: 1.063rem;
  --font-size-18: 1.125rem;
  --font-size-19: 1.1875rem;
  --font-size-20: 1.25rem;
  --font-size-22: 1.375rem;
  --font-size-24: 1.5rem;
  --font-size-26: 1.625rem;
  --font-size-28: 1.75rem;
  --font-size-30: 1.875rem;
  --font-size-32: 2rem;
  --font-size-36: 2.25rem;
  --font-size-40: 2.5rem;
  --font-size-44: 2.75rem;
  --font-size-48: 3rem;
  --font-size-54: 3.375rem;
  --font-size-56: 3.5rem;
  --font-size-72: 4.5rem;
  --font-size-80: 5rem;
  --font-size-90: 5.625rem;
  --font-size-130: 8.125rem;

   /* ==========================================================================
     line-heights
     ========================================================================== */

  --line-height-56-7: 3.544rem; /* 56.7px */
  --line-height-44: 2.75rem; /* 44px */
  --line-height-33-6: 2.1rem; /* 33.6px */
  --line-height-31-5: 1.969rem; /* 31.5px */
  --line-height-30-8: 1.925rem; /* 30.8px */
  --line-height-31-2: 1.95rem; /* 31.2px */
  --line-height-38-4: 2.4rem; /* 38.4px */
  --line-height-29: 1.813rem; /* 29px */
  --line-height-28-8: 1.8rem; /* 28.8px */
  --line-height-26-4: 1.65rem; /* 26.4px */
  --line-height-26-1: 1.631rem; /* 26.1px */
  --line-height-26: 1.625rem; /* 26px */
  --line-height-24: 1.5rem; /* 24px */
  --line-height-23-4: 1.463rem; /* 23.4px */
  --line-height-23-2: 1.45rem; /* 23.2px */
  --line-height-21-6: 1.35rem; /* 21.6px */
  --line-height-22: 1.375rem; /* 22px */
  --line-height-20-3: 1.269rem; /* 20.3px */
  --line-height-20: 1.25rem; /* 20px */
  --line-height-18-2: 1.138rem; /* 18.2px */
  --line-height-17-4: 1.087rem; /* 17.4px */
  --line-height-12-1: 0.756rem; /* 12.1px */
  --line-height-13-5: 0.844rem; /* 13.5px */
  --line-height-117: 7.313rem; /* 117px */
  --line-height-72: 4.5rem; /* 72px */
  --line-height-20-8: 1.3rem; /* 20.8px */
  --line-height-46-2: 2.888rem; /* 46.2px */
  --line-height-43-2: 2.7rem; /* 43.2px */
  --line-height-28: 1.75rem; /* 28px */
  --line-height-48: 3rem;
  --line-height-16: 1rem; /* 16px */
  --line-height-32: 2rem; /* 32px */
  --line-height-36: 2.25rem; /* 36px */

  /* ==========================================================================
     letter-spacing
     ========================================================================== */

  --letter-spacing-neg-0-5: -0.0313rem;
  --letter-spacing-neg-1-6: -0.1rem;
  --letter-spacing-neg-2-6: -0.163rem;
  --letter-spacing-neg-108: -0.068rem;
  --letter-spacing-neg-066: -0.041rem;
  --letter-spacing-neg-027: -0.017rem;
  --letter-spacing-neg-022: -0.014rem;
  --letter-spacing-neg-02: -0.013rem;
  --letter-spacing-neg-018: -0.011rem;
  --letter-spacing-neg-016: -0.01rem;
  --letter-spacing-neg-015: -0.009rem;
  --letter-spacing-neg-014: -0.009rem;
  --letter-spacing-neg-013: -0.008rem;
  --letter-spacing-neg-012: -0.007rem;
  --letter-spacing-neg-011: -0.007rem;
  --letter-spacing-009: 0.006rem;
  --letter-spacing-01: 0.0063rem;
  --letter-spacing-022: 0.014rem;
  --letter-spacing-021: 0.013rem;
  --letter-spacing-024: 0.015rem;
  --letter-spacing-027: 0.017rem;
  --letter-spacing-03: 0.019rem;
  --heading-letter-spacing-xs: -0.0005em;

  /* ==========================================================================
     Spacing
     ========================================================================== */
  --spacing-0: 0rem;
  --spacing-1: 0.063rem;
  --spacing-2: 0.125rem;
  --spacing-3: 0.188rem;
  --spacing-4: 0.25rem;
  --spacing-5: 0.313rem;
  --spacing-6: 0.375rem;
  --spacing-7: 0.438rem;
  --spacing-8: 0.5rem;
  --spacing-9: 0.563rem;
  --spacing-10: 0.625rem;
  --spacing-11: 0.688rem;
  --spacing-12: 0.75rem;
  --spacing-13: 0.813rem;
  --spacing-14: 0.875rem;
  --spacing-15: 0.938rem;
  --spacing-16: 1rem;
  --spacing-17: 1.063rem;
  --spacing-18: 1.125rem;
  --spacing-20: 1.25rem;
  --spacing-23: 1.438rem;
  --spacing-24: 1.5rem;
  --spacing-26: 1.625rem;
  --spacing-28: 1.75rem;
  --spacing-30: 1.875rem;
  --spacing-31: 1.938rem;
  --spacing-32: 2rem;
  --spacing-33: 2.063rem;
  --spacing-34: 2.125rem;
  --spacing-36: 2.25rem;
  --spacing-37: 2.313rem;
  --spacing-38: 2.375rem;
  --spacing-39: 2.438rem;
  --spacing-40: 2.5rem;
  --spacing-44: 2.75rem;
  --spacing-45: 2.8125rem;
  --spacing-48: 3rem;
  --spacing-52: 3.25rem;
  --spacing-55: 3.4375rem;
  --spacing-56: 3.5rem;
  --spacing-59: 3.688rem;
  --spacing-60: 3.75rem;
  --spacing-62: 3.875rem;
  --spacing-64: 4rem;
  --spacing-68-8: 4.3rem;
  --spacing-69: 4.313rem;
  --spacing-72: 4.5rem;
  --spacing-75: 4.6875rem;
  --spacing-76-8: 4.8rem;
  --spacing-78: 4.875rem;
  --spacing-80: 5rem;
  --spacing-81: 5.063rem;
  --spacing-85: 5.313rem;
  --spacing-86: 5.375rem;
  --spacing-88: 5.5rem;
  --spacing-89: 5.563rem;
  --spacing-92: 5.75rem;
  --spacing-93: 5.813rem;
  --spacing-96: 6rem;
  --spacing-104: 6.5rem;
  --spacing-112: 7rem;
  --spacing-116: 7.25rem;
  --spacing-120: 7.5rem;
  --spacing-126: 7.875rem;
  --spacing-128: 8rem;
  --spacing-170: 10.625rem;
  --spacing-20-3: 1.269rem;
  --spacing-23-2: 1.45rem;
  --spacing-28-8: 1.8rem;
  --spacing-31-872: 1.992rem;
  --spacing-33-6: 2.1rem;
  --spacing-56-7: 3.544rem;
  --spacing-4-44: 0.2775rem;

}

/*
 * Fallback fonts — system geometric/sans metrics to minimise CLS until the
 * brand webfonts load. Real @font-face for 'Hurme Geometric Sans 1' and
 * 'Open Sans' is wired in fonts.css once licensed woff2 files are added.
 * NOTE: Hurme Geometric Sans 1 is a COMMERCIAL font (not Google Fonts) — a
 * webfont licence covering the *.aem.live origin is required before go-live.
 */
@font-face {
  font-family: hurme-fallback;
  src: local('Arial');
  size-adjust: 97.19%;
  ascent-override: 97.74%;
  descent-override: 25.72%;
  line-gap-override: 0%;
}

@font-face {
  font-family: open-sans-fallback;
  src: local('Arial');
  size-adjust: 103.2%;
  ascent-override: 103.57%;
  descent-override: 28.39%;
  line-gap-override: 0%;
}

/* Desktop type scale — switches at AMP md breakpoint (768px) */
@media (width >= 768px) {
  :root {
    /* body sizes */
    --body-font-size-l: 20px;         /* BodyLrg */
    --body-font-size-m: 18px;         /* BodyMed */
    --body-font-size-s: 16px;         /* BodySml */
    --body-font-size-xs: 14px;        /* BodyXsml */
    --body-line-height-l: 32px;
    --body-line-height-m: 28px;
    --body-line-height-s: 26px;
    --body-line-height-xs: 22px;

    /* heading sizes */
    --heading-font-size-display: 72px;  /* Data */
    --heading-font-size-xxl: 54px;      /* H1 */
    --heading-font-size-xl: 32px;       /* H2 */
    --heading-font-size-l: 28px;        /* H3 */
    --heading-font-size-m: 24px;        /* H4 */
    --heading-font-size-s: 20px;        /* H5 */
    --heading-font-size-xs: 18px;       /* H6 */

    /* heading line-heights */
    --heading-line-height-display: 1.08;
    --heading-line-height-xxl: 1.04;    /* H1 */
    --heading-line-height-xl: 36px;     /* H2 */
    --heading-line-height-l: 32px;      /* H3 */
    --heading-line-height-m: 28px;      /* H4 */
    --heading-line-height-s: 24px;      /* H5 */
    --heading-line-height-xs: 24px;     /* H6 */

    /* heading letter-spacing */
    --heading-tracking-display: -0.02em;
    --heading-tracking-xxl: -0.0093em;
    --heading-tracking-xl: -0.0156em;
    --heading-tracking-l: -0.0179em;
    --heading-tracking-m: -0.0208em;
    --heading-tracking-s: -0.0125em;
    --heading-tracking-xs: -0.0139em;
  }
}

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: var(--body-line-height-m);
}

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: 0.8em;
  margin-bottom: 0.25em;
  font-family: var(--heading-font-family);
  font-weight: 600;
  color: var(--amp-ink-blue);
  scroll-margin: 40px;
}

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

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

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

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

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

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

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: 0;
  background-color: var(--light-color);
  overflow-x: auto;
  white-space: pre;
}

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

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

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

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

/* inline prose links inside article content (Open Sans SemiBold, underlined) */
main .default-content-wrapper a:any-link:not(.button) {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* buttons */
p.button-wrapper {
  margin: 12px 0;
}

a.button:any-link,
button.button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 48px;
  max-width: 100%;
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 12px 32px;
  font-family: var(--heading-font-family);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.0071em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.button[aria-disabled="true"],
button.button:disabled {
  cursor: not-allowed;
  pointer-events: none;
}

a.button.primary,
button.button.primary {
  border-color: var(--amp-ultramarine);
  background-color: var(--amp-ultramarine);
  color: var(--amp-bg);
}

a.button.primary:hover,
a.button.primary:focus-visible,
button.button.primary:hover,
button.button.primary:focus-visible {
  border-color: var(--amp-ultramarine-hover);
  background-color: var(--amp-ultramarine-hover);
  color: var(--amp-bg);
  text-decoration: none;
}

a.button.primary:active,
button.button.primary:active {
  border-color: var(--amp-ultramarine-pressed);
  background-color: var(--amp-ultramarine-pressed);
}

a.button.primary[aria-disabled="true"],
a.button.primary[aria-disabled="true"]:hover,
a.button.primary[aria-disabled="true"]:focus-visible,
button.button.primary:disabled,
button.button.primary:disabled:hover,
button.button.primary:disabled:focus-visible {
  background-color: var(--light-color);
  border-color: var(--light-color);
  color: var(--dark-color);
}

a.button.secondary,
button.button.secondary {
  border-color: var(--amp-ultramarine);
  background-color: transparent;
  color: var(--amp-ultramarine);
}

a.button.secondary:hover,
a.button.secondary:focus-visible,
button.button.secondary:hover,
button.button.secondary:focus-visible {
  border-color: var(--amp-ultramarine);
  background-color: var(--amp-blue-pale);
  color: var(--amp-ultramarine-hover);
  text-decoration: none;
}

a.button.secondary[aria-disabled="true"],
a.button.secondary[aria-disabled="true"]:hover,
a.button.secondary[aria-disabled="true"]:focus-visible,
button.button.secondary:disabled,
button.button.secondary:disabled:hover,
button.button.secondary:disabled:focus-visible {
  background-color: var(--light-color);
  border-color: var(--light-color);
  color: var(--dark-color);
}

/* high-impact call-to-action */
a.button.accent,
button.button.accent {
  border-color: var(--link-color);
  background-color: var(--link-color);
  color: var(--background-color);
}

a.button.accent:hover,
a.button.accent:focus-visible,
button.button.accent:hover,
button.button.accent:focus-visible {
  border-color: var(--link-hover-color);
  background-color: var(--link-hover-color);
}

a.button.accent[aria-disabled="true"],
a.button.accent[aria-disabled="true"]:hover,
a.button.accent[aria-disabled="true"]:focus-visible,
button.button.accent:disabled,
button.button.accent:disabled:hover,
button.button.accent:disabled:focus-visible {
  background-color: var(--light-color);
  border-color: var(--light-color);
  color: var(--dark-color);
}

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

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

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

/* sections */
main > .section {
  margin: 40px 0;
}

main > .section > div {
  width: min(var(--content-max-width), 100% - 48px);
  margin: auto;
}

main > .section:first-of-type {
  margin-top: 0;
}

@media (width >= 768px) {
  main > .section > div {
    width: min(var(--content-max-width), 100% - 64px);
  }
}

/* section metadata */
main .section.light,
main .section.highlight {
  background-color: var(--light-color);
  margin: 0;
  padding: 40px 0;
}