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

/*
 * Cascade Layer Strategy
 * ──────────────────────
 * :root custom properties and @font-face rules are kept unlayered so they
 * are always available globally regardless of layer resolution order.
 *
 * All EDS element styles are wrapped in @layer base. Tailwind v4 places
 * utilities in @layer utilities, which sits above @layer base in the cascade.
 * This means Tailwind utility classes always win over these base styles —
 * no !important needed.
 *
 * Cascade priority (low → high):
 *   @layer theme  <  @layer base (preflight + EDS)  <  @layer utilities
 *
 * Rule of thumb for this project:
 *   - Design tokens (colors, sizes)    → :root here, mirrored in tailwind.css @theme
 *   - EDS structural/component styles  → @layer base here or in block CSS files
 *   - Layout & spacing on wrappers     → Tailwind utility classes
 *   - Override a base style explicitly → use the ! modifier: class="!mt-0"
 */

:root {
  /* colors — AEM aliases referencing Figma tokens defined in tailwind.css @theme */
  --background-color:    var(--color-neutro-white);      /* #ffffff */
  --light-color:         var(--color-gray-softer);       /* #f0efee */
  --dark-color:          var(--color-gray-default);      /* #83786f */
  --text-color:          var(--color-neutro-black);       /* #000 */
  --link-color:          var(--color-primary-blue-default); /* #212492 */
  --link-hover-color:    var(--color-primary-blue-soft); /* interaction state, no Figma token */

  /* fonts */
  --body-font-family: arial, sans-serif;
  --heading-font-family: arial, sans-serif;

  /* body sizes */
  --body-font-size-m: var(--text-md-font-size);    /* 16px */
  --body-font-size-s: var(--text-sm-font-size);    /* 14px */
  --body-font-size-xs: var(--text-xs-font-size);   /* 12px */

  /* heading sizes */
  --heading-font-size-xxl: var(--display-2xl-font-size); /* 72px */
  --heading-font-size-xl: var(--display-xl-font-size);   /* 60px */
  --heading-font-size-l: var(--display-lg-font-size);    /* 48px */
  --heading-font-size-m: var(--display-md-font-size);    /* 36px */
  --heading-font-size-s: var(--display-sm-font-size);    /* 30px */
  --heading-font-size-xs: var(--display-xs-font-size);   /* 24px */

  /* ─── Typography — Figma type scale (node 50-106) ─────────────────
   *  Variable naming mirrors Figma style names exactly:
   *    Display 2xl … Display xs  → --display-{size}-*
   *    Text xl … Text xs         → --text-{size}-*
   *    Overline                   → --overline-*
   * ──────────────────────────────────────────────────────────────── */

  /* ─── Display scale — font size ──────────────────────────────────── */
  --display-2xl-font-size: 4.5rem;      /* 72px */
  --display-xl-font-size:  3.75rem;     /* 60px */
  --display-lg-font-size:  3rem;        /* 48px */
  --display-md-font-size:  2.25rem;     /* 36px */
  --display-sm-font-size:  1.875rem;    /* 30px */
  --display-xs-font-size:  1.5rem;      /* 24px */

  /* ─── Display scale — line height ────────────────────────────────── */
  --display-2xl-line-height: 5.625rem;  /* 90px */
  --display-xl-line-height:  4.5rem;    /* 72px */
  --display-lg-line-height:  3.75rem;   /* 60px */
  --display-md-line-height:  2.75rem;   /* 44px */
  --display-sm-line-height:  2.375rem;  /* 38px */
  --display-xs-line-height:  2rem;      /* 32px */

  /* ─── Display scale — letter spacing ─────────────────────────────── */
  --display-letter-spacing: -0.02em;    /* Display 2xl–md: −2% */

  /* ─── Text scale — font size ─────────────────────────────────────── */
  --text-xl-font-size: 1.25rem;         /* 20px */
  --text-lg-font-size: 1.125rem;        /* 18px */
  --text-md-font-size: 1rem;            /* 16px */
  --text-sm-font-size: 0.875rem;        /* 14px */
  --text-xs-font-size: 0.75rem;         /* 12px */

  /* ─── Text scale — line height ───────────────────────────────────── */
  --text-xl-line-height: 1.875rem;      /* 30px */
  --text-lg-line-height: 1.75rem;       /* 28px */
  --text-md-line-height: 1.5rem;        /* 24px */
  --text-sm-line-height: 1.25rem;       /* 20px */
  --text-xs-line-height: 1.125rem;      /* 18px */

  /* ─── Overline ───────────────────────────────────────────────────── */
  --overline-font-size:   0.625rem;     /* 10px */
  --overline-line-height: 1rem;         /* 16px */

  /* ─── Margins ────────────────────────────────────────────────────── */
  --margin-bottom-2xs: 0.625rem;        /* 10px */
  --margin-bottom-xs: 0.75rem;          /* 12px */

  /* ─── Element typography — mobile defaults (Figma node 81-1828) ───
   *  Composite variables that reference the type-scale tokens above
   *  and switch to larger steps on desktop via a media query below.
   * ─────────────────────────────────────────────────────────────────── */

  /* Heading elements */
  --h1-font-size: var(--display-lg-font-size);         /* 48px */
  --h1-line-height: var(--display-lg-line-height);      /* 60px */
  --h1-letter-spacing: var(--display-letter-spacing);   /* -0.02em */

  /* H2 */
  --h2-font-size: var(--display-md-font-size);          /* 36px */
  --h2-line-height: var(--display-md-line-height);      /* 44px */
  --h2-letter-spacing: var(--display-letter-spacing);   /* -0.02em */

  /* H3 */
  --h3-font-size: var(--display-sm-font-size);          /* 30px */
  --h3-line-height: var(--display-sm-line-height);      /* 38px */
  --h3-letter-spacing: normal;

  /* H4 */
  --h4-font-size: var(--display-xs-font-size);          /* 24px */
  --h4-line-height: var(--display-xs-line-height);      /* 32px */
  --h4-letter-spacing: normal;

  /* H5 */
  --h5-font-size: var(--text-xl-font-size);             /* 20px */
  --h5-line-height: var(--text-xl-line-height);         /* 30px */

  /* H6 */
  --h6-font-size: var(--text-lg-font-size);             /* 18px */
  --h6-line-height: var(--text-lg-line-height);         /* 28px */

  /* Heading font weights (Figma DS) */
  --h1-font-weight: 700;                               /* Bold    */
  --h2-font-weight: 600;                               /* SemiBold */
  --h3-font-weight: 500;                               /* Medium  */
  --h4-font-weight: 500;                               /* Medium  */
  --h5-font-weight: 500;                               /* Medium  */
  --h6-font-weight: 500;                               /* Medium  */

  /* Body elements */
  --body-lg-font-size: var(--text-md-font-size);        /* 16px */
  --body-lg-line-height: var(--text-md-line-height);    /* 24px */
  --body-lg-font-weight: 400;                           /* Regular */

  /* Body MD */
  --body-md-font-size: var(--text-sm-font-size);        /* 14px */
  --body-md-line-height: var(--text-sm-line-height);    /* 20px */
  --body-md-font-weight: 400;                           /* Regular */

  /* Body SM */
  --body-sm-font-size: var(--text-xs-font-size);        /* 12px */
  --body-sm-line-height: var(--text-xs-line-height);    /* 18px */
  --body-sm-font-weight: 400;                           /* Regular */

  /* Link */
  --link-font-size: var(--text-xs-font-size);           /* 12px */
  --link-line-height: var(--text-xs-line-height);       /* 18px */
  --link-font-weight: 400;                              /* Regular */

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

  /* page padding */
  --padding-page: 16px;
}

/* ─── Element typography — desktop overrides (Figma node 81-935) ─── */
@media (width >= 1240px) {
  :root {
    --h1-font-size: var(--display-2xl-font-size);       /* 72px */
    --h1-line-height: var(--display-2xl-line-height);    /* 90px */

    /* H2 */
    --h2-font-size: var(--display-xl-font-size);         /* 60px */
    --h2-line-height: var(--display-xl-line-height);     /* 72px */

    /* H3 */
    --h3-font-size: var(--display-lg-font-size);         /* 48px */
    --h3-line-height: var(--display-lg-line-height);     /* 60px */
    --h3-letter-spacing: var(--display-letter-spacing);  /* -0.02em */

    /* H4 */
    --h4-font-size: var(--display-md-font-size);         /* 36px */
    --h4-line-height: var(--display-md-line-height);     /* 44px */
    --h4-letter-spacing: var(--display-letter-spacing);  /* -0.02em */

    /* H5 */
    --h5-font-size: var(--display-sm-font-size);         /* 30px */
    --h5-line-height: var(--display-sm-line-height);     /* 38px */

    /* H6 */
    --h6-font-size: var(--display-xs-font-size);         /* 24px */
    --h6-line-height: var(--display-xs-line-height);     /* 32px */

    /* Body LG */
    --body-lg-font-size: var(--text-xl-font-size);       /* 20px */
    --body-lg-line-height: var(--text-xl-line-height);   /* 30px */

    /* Body MD */
    --body-md-font-size: var(--text-md-font-size);       /* 16px */
    --body-md-line-height: var(--text-md-line-height);   /* 24px */

    /* Body SM */
    --body-sm-font-size: var(--text-sm-font-size);       /* 14px */
    --body-sm-line-height: var(--text-sm-line-height);   /* 20px */

    /* Link */
    --link-font-size: var(--text-sm-font-size);          /* 14px */
    --link-line-height: var(--text-sm-line-height);      /* 20px */

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

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0;
  font-family: var(--heading-font-family);
  scroll-margin: 40px;
}

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

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

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

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

h5 {
  font-size: var(--h5-font-size);
  line-height: var(--h5-line-height);
  font-weight: 500;
}

h6 {
  font-size: var(--h6-font-size);
  line-height: var(--h6-line-height);
  font-weight: 500;
}

p,
dl,
ol,
ul,
pre,
blockquote {
  margin-top: 0;
  margin-bottom: 0;
}

code,
pre {
  font-size: var(--text-sm-font-size);
}

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

@layer base {
body {
  display: none;
  margin: 0;
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: var(--body-font-family);
  font-size: var(--body-md-font-size);
  line-height: var(--body-md-line-height);
  font-weight: var(--body-md-font-weight);
}

body.appear {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

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

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

main {
  flex: 1;
}

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

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 {
  max-width: var(--breakpoint-xl);
  margin: auto;
  padding: 0 var(--padding-page);
}

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

@media (width >= 768px) {
  main > .section > div {
    --padding-page: 40px;
  }
}

@media (width >= 1440px) {
  main > .section > div {
    --padding-page: 80px;
  }
}

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

} /* end @layer base */

@media (width >= 768px) {
  .grid-content {
    gap: var(--spacing-grid-content-tablet);
  }
}

@media (width >= 1240px) {
  .grid-content {
    gap: var(--spacing-grid-content-desktop);
  }
}

@media (width >= 1440px) {
  .grid-content {
    gap: var(--spacing-grid-content-xl);
  }
}

html {
  scroll-behavior: smooth;
}

.section {
  scroll-margin-top: var(--nav-height); 
}

main .section.heading-blue h1,
main .section.heading-blue h2,
main .section.heading-blue h3,
main .section.heading-blue h4,
main .section.heading-blue h5,
main .section.heading-blue h6 {
  color: var(--color-primary-blue-bg);
}