* {
  box-sizing: border-box;
  font-family: "72 Brand", Helvetica, Arial, sans-serif;
}

a[href]:not(.nav-button):not(.sap-logo):not(:has(img)) {
  color: #002a86;
  text-decoration: none;
}

a[href]:not(.nav-button):not(.sap-logo):not(:has(img)):hover,
a[href]:not(.nav-button):not(.sap-logo):not(:has(img)):focus-visible {
  color: #002a86;
  text-decoration: underline;
}

.get-started-button:hover {
  transition: 300ms ease;
}



button:hover {
  cursor: pointer;
  background: #0040B0;
  border: 1px solid #0040B0;
  transition: width 300ms ease;
}

button:active {
  background: #FFF;
  color: #0040B0;
  border: 1px solid #0040B0;
}

button:disabled {
  opacity: 0.4;
}

.setup-top-image:hover, .setup-bottom-image:hover, .setup-image.selected {
  outline: 4px solid #0057D2;
}

/* === LAYOUT === */

.site-header {
  /* SAP logo */
  grid-area: header;
  grid-row: 1;
  display: flex;
  align-items: flex-start;
  padding-top: 45px;
  padding-bottom: 64px;
}

.sap-logo-img {
  display: block;
  height: auto;
  width: clamp(92px, 17vw, 125px);
}

.main-inner {
  /* text + images */
  grid-area: main;
}

.right-column {
  grid-area: right-column;
}

.site-footer {
  grid-area: footer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 30px;
}

.page-grid {
  min-height: 100vh;
  display: grid;
  grid-template-columns: [left-border] 1.5fr [main-columns] repeat(23, 1fr) [right-border] 1.5fr;
  grid-template-rows: [top-border] auto [main-rows] 1fr [bottom-border] auto;
  gap: 0;
  box-sizing: border-box;
  grid-template-areas:
    ". header header header header header header header header header header header header header header header header header header header header header header header ."
    ". main   main   main   main   main   main   main   main   main   main   main   main   main   main   main   main   main   main   main   main   main   main main ."
    ". footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer .";
}

.main-inner {
  display: grid;
  grid-template-columns: repeat(23, 1fr);
  grid-template-rows: auto 1fr auto;
  box-sizing: border-box;
  align-items: start;
}

.site-header,
.site-main,
.site-footer {
  grid-column: main-columns / right-border;
}

.site-header {
  grid-row: 1;
}

.site-main {
  grid-row: 2;
}

.site-footer {
  grid-row: 3;
}

.text-column {
  display: flex;
  flex-direction: column;
  grid-column: 1 / 13;
  text-align: left;
  align-self: start;
  align-items: flex-start;
  justify-content: flex-start;
}

.text-column-right {
  display: flex;
  flex-direction: column;
  grid-column: 14 / -1;
  text-align: left;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: start;
}

.image-column {
  display: flex;
  flex-direction: column;
  grid-column: 14 / -1;
  text-align: left;
  align-items: flex-end;
  justify-content: flex-end;
  align-self: end;
  gap: 1.1rem;
}

.setup-image {
  /* wrapper for both images if there's 2 on a page, else 1 */
  display: block;
  width: 100%;
  max-width: 500px;
  height: auto;
  border-radius: 8px;
}

.setup-text, .setup-text p, .setup-text li {
  /* Setup explanation text */
  line-height: 150%;
  font-weight: 400;
  font-style: normal;
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-button {
  display: inline-block;
  text-decoration: none;
  line-height: 0;
}

.nav-button:hover {
  cursor: pointer;
}

.nav-button img {
  display: block;
  width: 42px;
  height: auto;
}

.heading {
  margin-top: 0;
  margin-bottom: 0;
}

.progress-bar-container {
  /* for 1300px width (Display L) */
  flex-grow: 1;
  width: 100%;
  max-width: 605px;
  height: 20px;
  margin-left: 20px;
  margin-right: 20px;
  border-radius: 20px;
  border: 1px solid #475E75;
}

.progress-bar-fill {
  height: 100%;
  width: 0px;
  flex-shrink: 0;
  border-radius: 20px;
  background: #0057D2;
  /* transition: width 500ms ease; */
}

 /* extra class to only animate progress if class is there, so only progress is animated if progress has increased */
.progress-bar-fill.animate-width {
  transition: width 800ms ease;
}

.nav-button.next-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.small-heading {
  /* "Troubleshooting on Page 5 and "Tips for a smooth set up" on Page 4 */
  font-size: 28px;
  /* Display L */
  font-style: normal;
  font-weight: 500;
  line-height: 110.7%;
  margin-bottom: 18px;
  margin-top: 0;
}

.eyebrow {
  /* "Eyebrow text" in SAP Style guidelines, used e.g on "Your Full Guide" (page 1) and page 4 */
  font-style: normal;
  font-weight: 500;
  line-height: 1.125;
  letter-spacing: 0.48px;
}

/* === SPECIFIC CSS FOR PAGE 1 === */

.page1-main-inner {
  grid-template-columns: repeat(23, 1fr);
  height: 100%;
  grid-template-rows: auto;
  align-items: center;
  justify-items: center;
  align-content: center;
  gap: 16px;
}

.page1-eyebrow {
  grid-column: 7 / 18;
  text-align: center;
  margin: 0;
}

.page1-details-container, .button-container {
  /* explanation text */
  grid-column: 5 / 20;
  display: flex;
  flex-direction: column;
  text-align: center;
  max-width: 63ch;
  align-items: center;
}

.page1-heading {
  grid-column: 2 / 23;
  text-align: center;
  margin: 0;
  line-height: 1.09524;
  font-weight: 700;
  font-style: normal;
}

.animation-container {
  /* Logo animation */
  display: flex;
  flex-shrink: 0;
  position: relative;
  width: 100%;
  max-width: 247px;
  aspect-ratio: 247 / 69;
}

.it-for-you-logo, .mac-coe-logo {
  position: absolute;
  margin: auto;
  top: 50%;
  /* don't touch (top left corner is exactly in th middle, transform: translate fixxes this) */
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  animation-duration: 16s;
  animation-iteration-count: infinite;
}

.mac-coe-logo {
  animation-name: fade-logo-1;
}

.it-for-you-logo {
  opacity: 0;
  animation-name: fade-logo-2;
}

@keyframes fade-logo-1 {
  /* Animation, slow fade in/out */
  0% {
    opacity: 1;
  }
  28.125% {
    opacity: 1;
  }
  31.25% {
    opacity: 0;
  }
  96.875% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-logo-2 {
  0% {
    opacity: 0;
  }
  46.875% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  78.125% {
    opacity: 1;
  }
  81.25% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.get-started-button {
  /* button on page 1, according to SAP Style Guidelines */
  padding: 12px 14px;
  text-align: center;
  border: 1px solid #0057D2;
  border-radius: 8px;
  background: #0057D2;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 112%;
  color: #FFF;
}

/* === MEDIA QUERIES === */

/* Responsive layoout for 3-5 screen sizes; conforming to both Denise's Figma Designs and SAP Style Guidelines */

/* Display Size XS */
@media (min-width: 360px) and (max-width: 639px) {
  .page-grid {
    min-height: auto;
  }

  .page1-heading {
    font-size: 56px;
    grid-column: -1 / 1;
  }

  p, li {
    font-size: 14px;
    line-height: 21px;
  }

  .eyebrow {
    font-size: 10px;
    margin-bottom: 0;
  }

  .text-column {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .image-column {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-direction: row;
    align-self: start;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.9rem;
  }

  .text-column-right {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-direction: column;
    justify-content: flex-start;
  }

  .setup-image {
    max-width: 100%;
    width: 100%;
    border-radius: 2px;
  }

  .heading {
    max-width: 100%;
    width: 100%;
  }

  .setup-text p, .setup-text li {
    overflow-wrap: break-word;
    max-width: 100%;
    line-height: 150%;
  }

  .site-header {
    padding-bottom: 49px;
  }

  .small-heading {
    margin-bottom: 12px;
    font-size: 20px;
  }

  .nav-button img {
    width: 26px;
    height: 24px;
  }

  .progress-bar-container {
    margin-left: 13px;
    margin-right: 13px;
    max-width: 234px;
    height: 20px;
  }

  .page1-eyebrow {
    grid-column: 1 / -1;
  }

  .page1-heading {
    grid-column: 1 / -1;
    max-width: 80%;
  }

  .page1-details-container {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 260px;
  }

  .page1-details-container, .button-container {
    grid-column: 1 / -1;
  }

  .setup-text .page1-text {
    text-align: center;
  }

  .page1-main-inner {
    height: auto;
    align-content: start;
    align-items: start;
    grid-template-rows: auto;
    justify-items: center;
    padding-top: 35px;
    gap: 5px;
  }

  .get-started-button {
    padding: 5px 10px;
    font-size: 14px;
    line-height: 107%;
  }

  .animation-container {
    width: 100%;
    max-width: 155px;
    aspect-ratio: 155/43;
  }

  .setup-top-image:hover, .setup-bottom-image:hover, .setup-image.selected {
    outline-width: 2px;
  }

  .site-footer {
    padding-top: 50px;
  }

  .text-column-right p {
    margin-top: 5px;
  }
}

/* Display Size S */
@media (min-width: 640px) and (max-width: 979px) {
  .page1-heading {
    font-size: 64px;
  }

  p, li {
    font-size: 16px;
    line-height: 24px;
  }

  .heading {
    font-size: 28px;
  }

  .eyebrow {
    font-size: 12px;
    margin-bottom: 0;
  }

  .text-column {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .image-column {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-direction: row;
    justify-content: flex-start;
    gap: 1.65rem;
  }

  .text-column-right {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-direction: column;
    justify-content: flex-start;
  }

  .setup-image, .setup-top-image, .setup-bottom-image {
    max-width: 300px;
    width: 100%;
    border-radius: 3px;
  }

  .heading {
    max-width: 80%;
  }

  .setup-text {
    max-width: 96%;
  }

  .small-heading {
    margin-bottom: 14px;
    font-size: 24px;
  }

  .nav-button img {
    width: 26px;
    height: 24px;
  }

  .progress-bar-container {
    margin-left: 13px;
    margin-right: 13px;
    max-width: 467px;
    height: 20px;
  }

  .get-started-button {
    padding: 5px 10px;
    font-size: 14px;
    line-height: 107%;
  }

  .page1-main-inner {
    gap: 20px;
  }

  .page1-text {
    text-align: center;
  }

  .animation-container {
    width: 100%;
    max-width: 194px;
    aspect-ratio: 97/27;
  }

  .page1-main-inner {
    align-content: start;
    align-items: start;
    grid-template-rows: auto;
    justify-items: center;
    padding-top: 60px;
  }

  .setup-top-image:hover, .setup-bottom-image:hover .setup-image.selected {
    outline-width: 3px;
  }

  .text-column-right {
    margin-top: 2.2rem;
  }

  .site-footer {
    padding-bottom: 15vh;
  }

  .text-column-right p {
    margin-top: 10px;
  }

  .setup-finish-image {
    max-width: 80%;
  }
}

/* Display Size M */
@media (min-width: 980px) and (max-width: 1279px) {
  .page1-heading {
    font-size: 72px;
  }

  .heading {
    font-size: 32px;
  }

  p, li {
    font-size: 18px;
  }

  .eyebrow {
    font-size: 14px;
  }

  .small-heading {
    margin-bottom: 16px;
    font-size: 26px;
  }

  .site-footer {
    padding-bottom: 10vh;
  }

  .setup-finish-image {
    max-width: 600px;
  }
}

/* Display Size L */
@media (min-width: 1280px) and (max-width: 1599px) {
  .page1-heading {
    font-size: 84px;
  }

  .heading {
    font-size: 36px;
  }

  p, li {
    font-size: 20px;
  }

  .eyebrow {
    font-size: 16px;
  }

  .small-heading {
    margin-bottom: 16px;
  }

  .site-footer {
    padding-bottom: 10vh;
  }

  .setup-finish-image {
    max-width: 800px;
  }
}

/* Display Size XL */
@media (min-width: 1600px) {
  .page1-heading {
    font-size: 96px;
  }

  .heading {
    font-size: 40px;
  }

  p, li {
    font-size: 22.5px;
  }

  .eyebrow {
    font-size: 18px;
  }

  .small-heading {
    font-size: 32px;
  }

  .setup-image {
    width: 100%;
    max-width: 1000px;
  }

  .page1-details-container {
    max-width: 80ch;
  }

  .site-footer {
    padding-bottom: 10vh;
  }

  .setup-finish-image {
    max-width: 1000px;
  }
}